.elementor-139 .elementor-element.elementor-element-d75b3a6{--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-139 .elementor-element.elementor-element-e84bce4{--display:flex;--margin-top:0px;--margin-bottom:15px;--margin-left:0px;--margin-right:0px;}.elementor-139 .elementor-element.elementor-element-487c99c{margin:30px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-139 .elementor-element.elementor-element-487c99c .elementor-heading-title{font-size:50px;color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-0afb55c{--display:flex;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-139 .elementor-element.elementor-element-0afb55c:not(.elementor-motion-effects-element-type-background), .elementor-139 .elementor-element.elementor-element-0afb55c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, var( --e-global-color-secondary ) 27%, var( --e-global-color-primary ) 100%);}.elementor-139 .elementor-element.elementor-element-75aecd5{--display:flex;--margin-top:0px;--margin-bottom:15px;--margin-left:0px;--margin-right:0px;}.elementor-139 .elementor-element.elementor-element-75aecd5.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-139 .elementor-element.elementor-element-36ad161{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-139 .elementor-element.elementor-element-36ad161.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-139 .elementor-element.elementor-element-5cd94d1{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;}.elementor-139 .elementor-element.elementor-element-5cd94d1 .elementor-heading-title{color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-987cc47{width:var( --container-widget-width, 101.741% );max-width:101.741%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 15px) 0px;--container-widget-width:101.741%;--container-widget-flex-grow:0;text-align:justify;color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-987cc47.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-139 .elementor-element.elementor-element-3ce2eff{--divider-border-style:solid;--divider-color:var( --e-global-color-accent );--divider-border-width:1px;}.elementor-139 .elementor-element.elementor-element-3ce2eff .elementor-divider-separator{width:100%;}.elementor-139 .elementor-element.elementor-element-3ce2eff .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-139 .elementor-element.elementor-element-4e35897{--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-139 .elementor-element.elementor-element-e7005ec img{height:330px;object-fit:cover;object-position:center center;}.elementor-139 .elementor-element.elementor-element-e7ee197{--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-139 .elementor-element.elementor-element-bce2707{text-align:start;}.elementor-139 .elementor-element.elementor-element-bce2707 .elementor-heading-title{color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-7419cf4{text-align:justify;color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-5d5cbb0{--divider-border-style:solid;--divider-color:var( --e-global-color-accent );--divider-border-width:1px;}.elementor-139 .elementor-element.elementor-element-5d5cbb0 .elementor-divider-separator{width:100%;}.elementor-139 .elementor-element.elementor-element-5d5cbb0 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-139 .elementor-element.elementor-element-519777a{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-139 .elementor-element.elementor-element-519777a.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-139 .elementor-element.elementor-element-126221a{--display:flex;}.elementor-139 .elementor-element.elementor-element-2ab896b{text-align:start;}.elementor-139 .elementor-element.elementor-element-2ab896b .elementor-heading-title{color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-ae8d530{text-align:justify;color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-2e2b0f5{--divider-border-style:solid;--divider-color:var( --e-global-color-accent );--divider-border-width:1px;}.elementor-139 .elementor-element.elementor-element-2e2b0f5 .elementor-divider-separator{width:100%;}.elementor-139 .elementor-element.elementor-element-2e2b0f5 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-139 .elementor-element.elementor-element-e67fe92{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;}.elementor-139 .elementor-element.elementor-element-e67fe92.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-139 .elementor-element.elementor-element-8985c21{--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-139 .elementor-element.elementor-element-8985c21.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-139 .elementor-element.elementor-element-d6d33cc .elementor-heading-title{color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-5077d03{text-align:justify;color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-2146c2b{--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-139 .elementor-element.elementor-element-2146c2b.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-139 .elementor-element.elementor-element-a785f68 img{height:345px;object-fit:cover;object-position:center center;}.elementor-139 .elementor-element.elementor-element-6799ec4{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-139 .elementor-element.elementor-element-ceab2b0{--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-139 .elementor-element.elementor-element-d389b51 .elementor-heading-title{-webkit-text-stroke-color:#000;stroke:#000;color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-8e2b552{color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-e6e6caa{--divider-border-style:solid;--divider-color:var( --e-global-color-accent );--divider-border-width:1px;}.elementor-139 .elementor-element.elementor-element-e6e6caa .elementor-divider-separator{width:100%;}.elementor-139 .elementor-element.elementor-element-e6e6caa .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-139 .elementor-element.elementor-element-5dbc182{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;}.elementor-139 .elementor-element.elementor-element-c808a50{--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-139 .elementor-element.elementor-element-b88287a .elementor-heading-title{color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-ab7f503{text-align:justify;color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-472659a{--divider-border-style:solid;--divider-color:var( --e-global-color-accent );--divider-border-width:1px;}.elementor-139 .elementor-element.elementor-element-472659a .elementor-divider-separator{width:100%;}.elementor-139 .elementor-element.elementor-element-472659a .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-139 .elementor-element.elementor-element-2b429be{--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-139 .elementor-element.elementor-element-e1893ef img{height:310px;object-fit:cover;object-position:center center;}.elementor-139 .elementor-element.elementor-element-79aea02{--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-139 .elementor-element.elementor-element-74958bd img{height:340px;object-fit:cover;object-position:center center;}.elementor-139 .elementor-element.elementor-element-25e59c6{--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-139 .elementor-element.elementor-element-cac29e8 .elementor-heading-title{color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-e92cae5{text-align:justify;color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-41e2506{--divider-border-style:solid;--divider-color:var( --e-global-color-accent );--divider-border-width:1px;}.elementor-139 .elementor-element.elementor-element-41e2506 .elementor-divider-separator{width:100%;}.elementor-139 .elementor-element.elementor-element-41e2506 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-139 .elementor-element.elementor-element-7307404{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;}.elementor-139 .elementor-element.elementor-element-7307404.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-139 .elementor-element.elementor-element-35f901e{--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-139 .elementor-element.elementor-element-35f901e.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-139 .elementor-element.elementor-element-5a1b5da .elementor-heading-title{color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-ce6989f{text-align:justify;color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-451d43f{--divider-border-style:solid;--divider-color:var( --e-global-color-accent );--divider-border-width:1px;}.elementor-139 .elementor-element.elementor-element-451d43f .elementor-divider-separator{width:100%;}.elementor-139 .elementor-element.elementor-element-451d43f .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-139 .elementor-element.elementor-element-f416e3a .elementor-heading-title{color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-18c9045{text-align:justify;color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-63d5a7e{--display:flex;}.elementor-139 .elementor-element.elementor-element-d31c7e0{--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-139 .elementor-element.elementor-element-51fd81c{--display:flex;}.elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-labels-inline .elementor-field-group > label{padding-left:5px;}body:not(.rtl) .elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-labels-inline .elementor-field-group > label{padding-right:5px;}body .elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-labels-above .elementor-field-group > label{padding-bottom:5px;}.elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-field-group > label, .elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-field-subgroup label{color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-mark-required .elementor-field-label:after{color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-field-type-html{padding-bottom:0px;}.elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-field-group .elementor-field{color:var( --e-global-color-primary );}.elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:var( --e-global-color-accent );border-width:0px 0px 0px 0px;}.elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-field-group .elementor-select-wrapper select{background-color:var( --e-global-color-accent );border-width:0px 0px 0px 0px;}.elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-button{border-style:none;}.elementor-139 .elementor-element.elementor-element-2a05bc5 .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-button[type="submit"] svg *{fill:var( --e-global-color-secondary );}.elementor-139 .elementor-element.elementor-element-2a05bc5 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-139 .elementor-element.elementor-element-2a05bc5 .e-form__buttons__wrapper__button-next:hover{background-color:var( --e-global-color-secondary );color:var( --e-global-color-primary );border-color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-button[type="submit"]:hover{background-color:var( --e-global-color-secondary );color:var( --e-global-color-primary );border-color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-button[type="submit"]:hover svg *{fill:var( --e-global-color-primary );}.elementor-139 .elementor-element.elementor-element-2a05bc5 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-139 .elementor-element.elementor-element-2a05bc5 .elementor-message.elementor-message-success{color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-2a05bc5{--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-139 .elementor-element.elementor-element-f903e78{--display:flex;}.elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-labels-inline .elementor-field-group > label{padding-left:5px;}body:not(.rtl) .elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-labels-inline .elementor-field-group > label{padding-right:5px;}body .elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-labels-above .elementor-field-group > label{padding-bottom:5px;}.elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-field-group > label, .elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-field-subgroup label{color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-mark-required .elementor-field-label:after{color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-field-type-html{padding-bottom:0px;}.elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-field-group .elementor-field{color:var( --e-global-color-primary );}.elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:var( --e-global-color-accent );border-width:0px 0px 0px 0px;}.elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-field-group .elementor-select-wrapper select{background-color:var( --e-global-color-accent );border-width:0px 0px 0px 0px;}.elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-button{border-style:none;}.elementor-139 .elementor-element.elementor-element-323c4e7 .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-button[type="submit"] svg *{fill:var( --e-global-color-secondary );}.elementor-139 .elementor-element.elementor-element-323c4e7 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-139 .elementor-element.elementor-element-323c4e7 .e-form__buttons__wrapper__button-next:hover{background-color:var( --e-global-color-secondary );color:var( --e-global-color-primary );border-color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-button[type="submit"]:hover{background-color:var( --e-global-color-secondary );color:var( --e-global-color-primary );border-color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-button[type="submit"]:hover svg *{fill:var( --e-global-color-primary );}.elementor-139 .elementor-element.elementor-element-323c4e7 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-139 .elementor-element.elementor-element-323c4e7 .elementor-message.elementor-message-success{color:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-323c4e7{--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-139 .elementor-element.elementor-element-1d82161{--n-tabs-direction:column;--n-tabs-heading-direction:row;--n-tabs-heading-width:initial;--n-tabs-title-flex-basis:content;--n-tabs-title-flex-shrink:0;--n-tabs-heading-justify-content:center;--n-tabs-title-width:initial;--n-tabs-title-height:initial;--n-tabs-title-align-items:center;--n-tabs-title-flex-grow:0;--n-tabs-heading-wrap:nowrap;--n-tabs-heading-overflow-x:scroll;--n-tabs-title-white-space:nowrap;width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--n-tabs-title-justify-content:center;--n-tabs-title-text-align:center;--n-tabs-title-gap:0px;--n-tabs-gap:15px;}.elementor-139 .elementor-element.elementor-element-1d82161 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:var( --e-global-color-accent );}.elementor-139 .elementor-element.elementor-element-1d82161.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-3d5742d );border-style:none;}.elementor-139 .elementor-element.elementor-element-1d82161.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-139 .elementor-element.elementor-element-1d82161.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-primary );}.elementor-139 .elementor-element.elementor-element-1d82161.elementor-element{--align-self:center;--order:-99999 /* order start hack */;--flex-grow:1;--flex-shrink:0;}.elementor-139 .elementor-element.elementor-element-1d82161 [data-touch-mode="false"] .e-n-tab-title[aria-selected="false"]:hover{--n-tabs-title-color-hover:var( --e-global-color-primary );}.elementor-139 .elementor-element.elementor-element-bfae975{--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-139 .elementor-element.elementor-element-bfae975:not(.elementor-motion-effects-element-type-background), .elementor-139 .elementor-element.elementor-element-bfae975 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, var( --e-global-color-primary ) 0%, #000000 47%);}.elementor-139 .elementor-element.elementor-element-bfae975 > .elementor-shape-bottom .elementor-shape-fill, .elementor-139 .elementor-element.elementor-element-bfae975 > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill{fill:#DE0E1F;}.elementor-139 .elementor-element.elementor-element-bfae975 > .elementor-shape-bottom svg, .elementor-139 .elementor-element.elementor-element-bfae975 > .e-con-inner > .elementor-shape-bottom svg{height:123px;}.elementor-139 .elementor-element.elementor-element-2c22cb1{--spacer-size:167px;}@media(min-width:768px){.elementor-139 .elementor-element.elementor-element-75aecd5{--width:97.071%;}.elementor-139 .elementor-element.elementor-element-36ad161{--width:96.804%;}.elementor-139 .elementor-element.elementor-element-4e35897{--width:33.3333%;}.elementor-139 .elementor-element.elementor-element-e7ee197{--width:66.6666%;}.elementor-139 .elementor-element.elementor-element-519777a{--width:101.875%;}.elementor-139 .elementor-element.elementor-element-e67fe92{--width:96.804%;}.elementor-139 .elementor-element.elementor-element-8985c21{--width:65%;}.elementor-139 .elementor-element.elementor-element-2146c2b{--width:35%;}.elementor-139 .elementor-element.elementor-element-c808a50{--width:66.6666%;}.elementor-139 .elementor-element.elementor-element-2b429be{--width:33.3333%;}.elementor-139 .elementor-element.elementor-element-79aea02{--width:33.3333%;}.elementor-139 .elementor-element.elementor-element-25e59c6{--width:66.6666%;}.elementor-139 .elementor-element.elementor-element-7307404{--width:96.804%;}.elementor-139 .elementor-element.elementor-element-35f901e{--width:100%;}}@media(max-width:1024px){.elementor-139 .elementor-element.elementor-element-487c99c .elementor-heading-title{font-size:36px;}.elementor-139 .elementor-element.elementor-element-e7005ec img{height:380px;}.elementor-139 .elementor-element.elementor-element-a785f68 img{height:465px;}.elementor-139 .elementor-element.elementor-element-e1893ef img{height:400px;}.elementor-139 .elementor-element.elementor-element-74958bd img{height:457px;}}@media(max-width:767px){.elementor-139 .elementor-element.elementor-element-487c99c .elementor-heading-title{font-size:16px;}.elementor-139 .elementor-element.elementor-element-5cd94d1 .elementor-heading-title{font-size:25px;}.elementor-139 .elementor-element.elementor-element-987cc47{font-size:14px;}.elementor-139 .elementor-element.elementor-element-e7005ec img{height:180px;}.elementor-139 .elementor-element.elementor-element-bce2707 .elementor-heading-title{font-size:25px;}.elementor-139 .elementor-element.elementor-element-7419cf4{font-size:14px;}.elementor-139 .elementor-element.elementor-element-2ab896b .elementor-heading-title{font-size:25px;}.elementor-139 .elementor-element.elementor-element-ae8d530{font-size:14px;}.elementor-139 .elementor-element.elementor-element-d6d33cc .elementor-heading-title{font-size:25px;}.elementor-139 .elementor-element.elementor-element-5077d03{font-size:14px;}.elementor-139 .elementor-element.elementor-element-b88287a .elementor-heading-title{font-size:25px;}.elementor-139 .elementor-element.elementor-element-ab7f503{font-size:14px;}.elementor-139 .elementor-element.elementor-element-cac29e8 .elementor-heading-title{font-size:25px;}.elementor-139 .elementor-element.elementor-element-e92cae5{font-size:14px;}.elementor-139 .elementor-element.elementor-element-5a1b5da .elementor-heading-title{font-size:25px;}.elementor-139 .elementor-element.elementor-element-ce6989f{font-size:14px;}.elementor-139 .elementor-element.elementor-element-f416e3a .elementor-heading-title{font-size:25px;}.elementor-139 .elementor-element.elementor-element-18c9045{font-size:14px;}.elementor-139 .elementor-element.elementor-element-1d82161{--n-tabs-direction:column;--n-tabs-heading-direction:row;--n-tabs-heading-width:initial;--n-tabs-title-flex-basis:content;--n-tabs-title-flex-shrink:0;}}/* Start custom CSS for html, class: .elementor-element-da8e25e *//* ========================================================== HISTOIRE USB STYLE CALENDRIER / ORGANIGRAMME ========================================================== */ /* ========================================================== VARIABLES ========================================================== */ .usb-history { --usb-red: #c80818; --usb-red-light: #e10a1b; --usb-black: #08090b; --usb-card: #111318; --usb-card-open: #0c0e12; --usb-white: #ffffff; --usb-muted: #a8abb1; --usb-border: rgba( 255, 255, 255, 0.75 ); --usb-line: rgba( 255, 255, 255, 0.25 ); width: 100%; padding: 55px 20px 90px; color: var( --usb-white ); box-sizing: border-box; } /* ========================================================== EN-TÊTE ========================================================== */ .usb-history__header { max-width: 900px; margin: 0 auto 70px; text-align: center; } .usb-history__eyebrow { display: block; margin-bottom: 12px; color: var( --usb-red-light ); font-size: 11px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; } .usb-history__header h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 35px, 5vw, 64px ); font-weight: 900; line-height: 1; text-transform: uppercase; } .usb-history__header p { margin: 15px 0 0; color: var( --usb-muted ); font-size: 14px; } /* ========================================================== CONTENEUR TIMELINE ========================================================== */ .usb-timeline { position: relative; width: 100%; max-width: 1250px; margin: 0 auto; padding: 10px 0 30px; box-sizing: border-box; } /* ========================================================== LIGNE CENTRALE ========================================================== */ .usb-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var( --usb-line ); transform: translateX( -50% ); } /* ========================================================== PROGRESSION ROUGE ========================================================== */ .usb-progress { position: absolute; top: 0; left: 50%; width: 3px; height: 0; background: var( --usb-red ); transform: translateX( -50% ); transition: height 0.15s linear; z-index: 1; } /* ========================================================== ÉLÉMENT ========================================================== */ .usb-item { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; margin-bottom: 85px; } /* Alternance gauche / droite */ .usb-item:nth-of-type( even ) { justify-content: flex-end; } /* ========================================================== PASTILLE ANNÉE ========================================================== */ .usb-dot { position: absolute; top: 55px; left: 50%; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var( --usb-red ); border: 3px solid var( --usb-white ); color: var( --usb-white ); box-shadow: 0 0 0 7px var( --usb-black ); font-size: 14px; font-weight: 900; letter-spacing: 0.5px; transform: translateX( -50% ); z-index: 5; } /* ========================================================== CARTE ========================================================== */ .usb-card { position: relative; width: calc( 50% - 65px ); overflow: hidden; background: var( --usb-card ); border: 1px solid var( --usb-border ); border-top: 3px solid var( --usb-red ); box-sizing: border-box; opacity: 0; transform: translateY( 45px ); transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.25s ease; } /* Animation */ .usb-item.visible .usb-card { opacity: 1; transform: translateY( 0 ); } /* Survol ordinateur */ @media ( hover: hover ) { .usb-card:hover { border-color: var( --usb-white ); transform: translateY( -5px ); } } /* ========================================================== IMAGE ========================================================== */ .usb-image { width: 100%; height: 250px; background-color: #202329; background-repeat: no-repeat; background-position: center; background-size: cover; } /* ========================================================== CONTENU ========================================================== */ .usb-card__content { padding: 26px; } /* Période */ .usb-card__period { display: block; margin-bottom: 10px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; } /* Titre */ .usb-card h3 { margin: 0 0 18px; color: var( --usb-white ); font-size: 25px; font-weight: 900; line-height: 1.15; text-transform: uppercase; } /* Paragraphes */ .usb-card p { margin: 0 0 15px; color: #d2d4d8; font-size: 14px; line-height: 1.75; } .usb-card p:last-child { margin-bottom: 0; } /* Texte important */ .usb-card strong { color: var( --usb-white ); font-weight: 800; } /* ========================================================== LISTES ========================================================== */ .usb-card ul { margin: 20px 0; padding: 17px 18px 17px 35px; background: rgba( 255, 255, 255, 0.04 ); border-left: 3px solid var( --usb-red ); } .usb-card li { margin: 7px 0; color: #d2d4d8; font-size: 13px; line-height: 1.55; } .usb-card li::marker { color: var( --usb-red ); } /* ========================================================== TABLETTE ========================================================== */ @media ( max-width: 1024px ) { .usb-history { padding: 45px 22px 70px; } .usb-card { width: calc( 50% - 48px ); } .usb-dot { width: 56px; height: 56px; font-size: 13px; } .usb-image { height: 210px; } .usb-card__content { padding: 22px; } .usb-card h3 { font-size: 21px; } } /* ========================================================== MOBILE ========================================================== */ @media ( max-width: 768px ) { .usb-history { padding: 35px 14px 60px; } .usb-history__header { margin-bottom: 45px; } .usb-history__header h2 { font-size: 34px; } /* Ligne à gauche */ .usb-line, .usb-progress { left: 25px; transform: none; } /* Tous les éléments sur une colonne */ .usb-item, .usb-item:nth-of-type( even ) { display: block; margin-bottom: 55px; } /* Année à gauche */ .usb-dot { top: 35px; left: 0; width: 50px; height: 50px; font-size: 11px; transform: none; } /* Carte */ .usb-card { width: auto; margin-left: 75px; } .usb-image { height: 200px; } .usb-card__content { padding: 20px; } .usb-card h3 { font-size: 21px; } } /* ========================================================== PETIT MOBILE ========================================================== */ @media ( max-width: 480px ) { .usb-history { padding-left: 8px; padding-right: 8px; } .usb-history__header h2 { font-size: 29px; } .usb-line, .usb-progress { left: 19px; } .usb-dot { width: 39px; height: 39px; font-size: 9px; } .usb-card { margin-left: 58px; } .usb-image { height: 155px; } .usb-card__content { padding: 17px; } .usb-card h3 { font-size: 18px; } .usb-card p { font-size: 13px; line-height: 1.65; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-e7e848a *//* ========================================================== ORGANIGRAMME USB STYLE CALENDRIER / RÉSULTATS ========================================================== */ /* ========================================================== VARIABLES ET CONTENEUR ========================================================== */ .usb-orga { --usb-red: #c80818; --usb-red-light: #e10a1b; --usb-black: #08090b; --usb-card: #111318; --usb-card-open: #0c0e12; --usb-white: #ffffff; --usb-muted: #a8abb1; --usb-border: rgba( 255, 255, 255, 0.14 ); --usb-line: rgba( 255, 255, 255, 0.20 ); width: 100%; max-width: 1400px; margin: 0 auto; padding: 55px 25px 90px; color: var( --usb-white ); box-sizing: border-box; } /* ========================================================== TITRE ========================================================== */ .usb-orga__header { margin-bottom: 65px; text-align: center; } .usb-orga__eyebrow { display: block; margin-bottom: 11px; color: var( --usb-red-light ); font-size: 11px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; } .usb-orga__header h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 35px, 5vw, 64px ); font-weight: 900; line-height: 1; text-transform: uppercase; } .usb-orga__header p { margin: 14px 0 0; color: var( --usb-muted ); font-size: 14px; } /* ========================================================== NIVEAUX DE L'ORGANIGRAMME ========================================================== */ .usb-orga__level { position: relative; display: grid; align-items: start; justify-content: center; gap: 20px; width: 100%; } .usb-orga__level--two { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__level--three { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } .usb-orga__level--four { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } /* ========================================================== CARTES ========================================================== */ .usb-orga__node { width: 100%; min-width: 0; padding: 23px; background: var( --usb-card ); border: 1px solid var( --usb-border ); border-top: 3px solid var( --usb-white ); box-sizing: border-box; } .usb-orga__node--president { width: min( 100%, 460px ); margin: 0 auto; padding: 30px; background: var( --usb-red ); border: none; text-align: center; } .usb-orga__node--president .usb-orga__type { color: rgba( 255, 255, 255, 0.75 ); } .usb-orga__node--president h3 { margin: 8px 0 7px; color: #ffffff; font-size: 25px; font-weight: 900; text-transform: uppercase; } .usb-orga__type { display: block; margin-bottom: 10px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; line-height: 1.3; text-transform: uppercase; } .usb-orga__node strong { display: block; color: var( --usb-white ); font-size: 18px; font-weight: 900; line-height: 1.35; text-transform: uppercase; } /* ========================================================== CONNECTEUR PRÉSIDENT ========================================================== */ .usb-orga__connector { position: relative; width: 100%; max-width: 1000px; height: 55px; margin: 0 auto; } .usb-orga__connector::before { position: absolute; top: 0; left: 50%; width: 1px; height: 28px; background: var( --usb-red ); content: ""; } .usb-orga__connector span { position: absolute; top: 28px; left: 16.66%; width: 66.68%; height: 1px; background: var( --usb-red ); } .usb-orga__connector::after { position: absolute; top: 28px; left: 16.66%; width: 66.68%; height: 27px; border-left: 1px solid var( --usb-red ); border-right: 1px solid var( --usb-red ); content: ""; } /* ========================================================== SECTIONS ========================================================== */ .usb-orga__section { position: relative; margin-top: 80px; padding-top: 40px; } .usb-orga__section::before { position: absolute; top: 0; left: 50%; width: 1px; height: 25px; background: var( --usb-white ); content: ""; } .usb-orga__section-heading { margin-bottom: 25px; } .usb-orga__section-heading span { display: block; margin-bottom: 7px; color: var( --usb-white ); font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; } .usb-orga__section-heading h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 25px, 3vw, 38px ); font-weight: 900; text-transform: uppercase; } /* ========================================================== BRANCHES ========================================================== */ .usb-orga__branch { min-width: 0; align-self: start; } /* ========================================================== CARTES REPLIABLES ========================================================== */ .usb-orga__node--expandable { padding: 0; overflow: hidden; } .usb-orga__node--expandable summary { display: flex; align-items: center; justify-content: space-between; min-height: 100px; padding: 22px; cursor: pointer; list-style: none; box-sizing: border-box; } .usb-orga__node--expandable summary::-webkit-details-marker { display: none; } .usb-orga__node--expandable summary::marker { content: ""; } .usb-orga__node--expandable summary small { display: block; margin-bottom: 8px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; } .usb-orga__node--expandable summary strong { font-size: 18px; } .usb-orga__node--expandable summary b { display: flex; align-items: center; justify-content: center; flex: 0 0 35px; width: 35px; height: 35px; margin-left: 16px; background: var( --usb-red ); color: #ffffff; font-size: 25px; font-weight: 400; line-height: 1; transition: transform 0.2s ease; } .usb-orga__node--expandable[open] summary b { transform: rotate( 45deg ); } .usb-orga__content { padding: 0 22px 22px; background: var( --usb-card-open ); border-top: 1px solid var( --usb-border ); } /* ========================================================== CONTENU DES PÔLES ========================================================== */ .usb-orga__person { padding: 16px 0; border-bottom: 1px solid rgba( 255, 255, 255, 0.08 ); } .usb-orga__person:last-child { border-bottom: none; } .usb-orga__person span { display: block; margin-bottom: 7px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; } .usb-orga__person p, .usb-orga__members { margin: 0; color: var( --usb-white ); font-size: 13px; font-weight: 600; line-height: 1.75; } /* ========================================================== TABLETTE ========================================================== */ @media (max-width: 1024px) { .usb-orga { padding: 45px 22px 70px; } .usb-orga__level--four { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__level--three { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__connector { display: none; } .usb-orga__level--three { margin-top: 25px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 700px) { .usb-orga { padding: 35px 14px 55px; } .usb-orga__header { margin-bottom: 42px; } .usb-orga__header h2 { font-size: 34px; } .usb-orga__level--two, .usb-orga__level--three, .usb-orga__level--four { grid-template-columns: 1fr; } .usb-orga__level { gap: 13px; } .usb-orga__node { padding: 20px; } .usb-orga__node--president { padding: 25px 16px; } .usb-orga__node--president h3 { font-size: 21px; } .usb-orga__node strong { font-size: 16px; } .usb-orga__section { margin-top: 55px; padding-top: 32px; } .usb-orga__section-heading { margin-bottom: 18px; } .usb-orga__section-heading h2 { font-size: 27px; } .usb-orga__node--expandable summary { min-height: 88px; padding: 18px; } .usb-orga__node--expandable summary strong { font-size: 16px; } .usb-orga__node--expandable summary b { flex-basis: 31px; width: 31px; height: 31px; margin-left: 10px; font-size: 22px; } .usb-orga__content { padding: 0 18px 18px; } } /* ========================================================== PETITS MOBILES ========================================================== */ @media (max-width: 380px) { .usb-orga__header h2 { font-size: 29px; } .usb-orga__node--expandable summary strong { font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-da8e25e *//* ========================================================== HISTOIRE USB STYLE CALENDRIER / ORGANIGRAMME ========================================================== */ /* ========================================================== VARIABLES ========================================================== */ .usb-history { --usb-red: #c80818; --usb-red-light: #e10a1b; --usb-black: #08090b; --usb-card: #111318; --usb-card-open: #0c0e12; --usb-white: #ffffff; --usb-muted: #a8abb1; --usb-border: rgba( 255, 255, 255, 0.75 ); --usb-line: rgba( 255, 255, 255, 0.25 ); width: 100%; padding: 55px 20px 90px; color: var( --usb-white ); box-sizing: border-box; } /* ========================================================== EN-TÊTE ========================================================== */ .usb-history__header { max-width: 900px; margin: 0 auto 70px; text-align: center; } .usb-history__eyebrow { display: block; margin-bottom: 12px; color: var( --usb-red-light ); font-size: 11px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; } .usb-history__header h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 35px, 5vw, 64px ); font-weight: 900; line-height: 1; text-transform: uppercase; } .usb-history__header p { margin: 15px 0 0; color: var( --usb-muted ); font-size: 14px; } /* ========================================================== CONTENEUR TIMELINE ========================================================== */ .usb-timeline { position: relative; width: 100%; max-width: 1250px; margin: 0 auto; padding: 10px 0 30px; box-sizing: border-box; } /* ========================================================== LIGNE CENTRALE ========================================================== */ .usb-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var( --usb-line ); transform: translateX( -50% ); } /* ========================================================== PROGRESSION ROUGE ========================================================== */ .usb-progress { position: absolute; top: 0; left: 50%; width: 3px; height: 0; background: var( --usb-red ); transform: translateX( -50% ); transition: height 0.15s linear; z-index: 1; } /* ========================================================== ÉLÉMENT ========================================================== */ .usb-item { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; margin-bottom: 85px; } /* Alternance gauche / droite */ .usb-item:nth-of-type( even ) { justify-content: flex-end; } /* ========================================================== PASTILLE ANNÉE ========================================================== */ .usb-dot { position: absolute; top: 55px; left: 50%; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var( --usb-red ); border: 3px solid var( --usb-white ); color: var( --usb-white ); box-shadow: 0 0 0 7px var( --usb-black ); font-size: 14px; font-weight: 900; letter-spacing: 0.5px; transform: translateX( -50% ); z-index: 5; } /* ========================================================== CARTE ========================================================== */ .usb-card { position: relative; width: calc( 50% - 65px ); overflow: hidden; background: var( --usb-card ); border: 1px solid var( --usb-border ); border-top: 3px solid var( --usb-red ); box-sizing: border-box; opacity: 0; transform: translateY( 45px ); transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.25s ease; } /* Animation */ .usb-item.visible .usb-card { opacity: 1; transform: translateY( 0 ); } /* Survol ordinateur */ @media ( hover: hover ) { .usb-card:hover { border-color: var( --usb-white ); transform: translateY( -5px ); } } /* ========================================================== IMAGE ========================================================== */ .usb-image { width: 100%; height: 250px; background-color: #202329; background-repeat: no-repeat; background-position: center; background-size: cover; } /* ========================================================== CONTENU ========================================================== */ .usb-card__content { padding: 26px; } /* Période */ .usb-card__period { display: block; margin-bottom: 10px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; } /* Titre */ .usb-card h3 { margin: 0 0 18px; color: var( --usb-white ); font-size: 25px; font-weight: 900; line-height: 1.15; text-transform: uppercase; } /* Paragraphes */ .usb-card p { margin: 0 0 15px; color: #d2d4d8; font-size: 14px; line-height: 1.75; } .usb-card p:last-child { margin-bottom: 0; } /* Texte important */ .usb-card strong { color: var( --usb-white ); font-weight: 800; } /* ========================================================== LISTES ========================================================== */ .usb-card ul { margin: 20px 0; padding: 17px 18px 17px 35px; background: rgba( 255, 255, 255, 0.04 ); border-left: 3px solid var( --usb-red ); } .usb-card li { margin: 7px 0; color: #d2d4d8; font-size: 13px; line-height: 1.55; } .usb-card li::marker { color: var( --usb-red ); } /* ========================================================== TABLETTE ========================================================== */ @media ( max-width: 1024px ) { .usb-history { padding: 45px 22px 70px; } .usb-card { width: calc( 50% - 48px ); } .usb-dot { width: 56px; height: 56px; font-size: 13px; } .usb-image { height: 210px; } .usb-card__content { padding: 22px; } .usb-card h3 { font-size: 21px; } } /* ========================================================== MOBILE ========================================================== */ @media ( max-width: 768px ) { .usb-history { padding: 35px 14px 60px; } .usb-history__header { margin-bottom: 45px; } .usb-history__header h2 { font-size: 34px; } /* Ligne à gauche */ .usb-line, .usb-progress { left: 25px; transform: none; } /* Tous les éléments sur une colonne */ .usb-item, .usb-item:nth-of-type( even ) { display: block; margin-bottom: 55px; } /* Année à gauche */ .usb-dot { top: 35px; left: 0; width: 50px; height: 50px; font-size: 11px; transform: none; } /* Carte */ .usb-card { width: auto; margin-left: 75px; } .usb-image { height: 200px; } .usb-card__content { padding: 20px; } .usb-card h3 { font-size: 21px; } } /* ========================================================== PETIT MOBILE ========================================================== */ @media ( max-width: 480px ) { .usb-history { padding-left: 8px; padding-right: 8px; } .usb-history__header h2 { font-size: 29px; } .usb-line, .usb-progress { left: 19px; } .usb-dot { width: 39px; height: 39px; font-size: 9px; } .usb-card { margin-left: 58px; } .usb-image { height: 155px; } .usb-card__content { padding: 17px; } .usb-card h3 { font-size: 18px; } .usb-card p { font-size: 13px; line-height: 1.65; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-e7e848a *//* ========================================================== ORGANIGRAMME USB STYLE CALENDRIER / RÉSULTATS ========================================================== */ /* ========================================================== VARIABLES ET CONTENEUR ========================================================== */ .usb-orga { --usb-red: #c80818; --usb-red-light: #e10a1b; --usb-black: #08090b; --usb-card: #111318; --usb-card-open: #0c0e12; --usb-white: #ffffff; --usb-muted: #a8abb1; --usb-border: rgba( 255, 255, 255, 0.14 ); --usb-line: rgba( 255, 255, 255, 0.20 ); width: 100%; max-width: 1400px; margin: 0 auto; padding: 55px 25px 90px; color: var( --usb-white ); box-sizing: border-box; } /* ========================================================== TITRE ========================================================== */ .usb-orga__header { margin-bottom: 65px; text-align: center; } .usb-orga__eyebrow { display: block; margin-bottom: 11px; color: var( --usb-red-light ); font-size: 11px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; } .usb-orga__header h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 35px, 5vw, 64px ); font-weight: 900; line-height: 1; text-transform: uppercase; } .usb-orga__header p { margin: 14px 0 0; color: var( --usb-muted ); font-size: 14px; } /* ========================================================== NIVEAUX DE L'ORGANIGRAMME ========================================================== */ .usb-orga__level { position: relative; display: grid; align-items: start; justify-content: center; gap: 20px; width: 100%; } .usb-orga__level--two { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__level--three { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } .usb-orga__level--four { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } /* ========================================================== CARTES ========================================================== */ .usb-orga__node { width: 100%; min-width: 0; padding: 23px; background: var( --usb-card ); border: 1px solid var( --usb-border ); border-top: 3px solid var( --usb-white ); box-sizing: border-box; } .usb-orga__node--president { width: min( 100%, 460px ); margin: 0 auto; padding: 30px; background: var( --usb-red ); border: none; text-align: center; } .usb-orga__node--president .usb-orga__type { color: rgba( 255, 255, 255, 0.75 ); } .usb-orga__node--president h3 { margin: 8px 0 7px; color: #ffffff; font-size: 25px; font-weight: 900; text-transform: uppercase; } .usb-orga__type { display: block; margin-bottom: 10px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; line-height: 1.3; text-transform: uppercase; } .usb-orga__node strong { display: block; color: var( --usb-white ); font-size: 18px; font-weight: 900; line-height: 1.35; text-transform: uppercase; } /* ========================================================== CONNECTEUR PRÉSIDENT ========================================================== */ .usb-orga__connector { position: relative; width: 100%; max-width: 1000px; height: 55px; margin: 0 auto; } .usb-orga__connector::before { position: absolute; top: 0; left: 50%; width: 1px; height: 28px; background: var( --usb-red ); content: ""; } .usb-orga__connector span { position: absolute; top: 28px; left: 16.66%; width: 66.68%; height: 1px; background: var( --usb-red ); } .usb-orga__connector::after { position: absolute; top: 28px; left: 16.66%; width: 66.68%; height: 27px; border-left: 1px solid var( --usb-red ); border-right: 1px solid var( --usb-red ); content: ""; } /* ========================================================== SECTIONS ========================================================== */ .usb-orga__section { position: relative; margin-top: 80px; padding-top: 40px; } .usb-orga__section::before { position: absolute; top: 0; left: 50%; width: 1px; height: 25px; background: var( --usb-white ); content: ""; } .usb-orga__section-heading { margin-bottom: 25px; } .usb-orga__section-heading span { display: block; margin-bottom: 7px; color: var( --usb-white ); font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; } .usb-orga__section-heading h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 25px, 3vw, 38px ); font-weight: 900; text-transform: uppercase; } /* ========================================================== BRANCHES ========================================================== */ .usb-orga__branch { min-width: 0; align-self: start; } /* ========================================================== CARTES REPLIABLES ========================================================== */ .usb-orga__node--expandable { padding: 0; overflow: hidden; } .usb-orga__node--expandable summary { display: flex; align-items: center; justify-content: space-between; min-height: 100px; padding: 22px; cursor: pointer; list-style: none; box-sizing: border-box; } .usb-orga__node--expandable summary::-webkit-details-marker { display: none; } .usb-orga__node--expandable summary::marker { content: ""; } .usb-orga__node--expandable summary small { display: block; margin-bottom: 8px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; } .usb-orga__node--expandable summary strong { font-size: 18px; } .usb-orga__node--expandable summary b { display: flex; align-items: center; justify-content: center; flex: 0 0 35px; width: 35px; height: 35px; margin-left: 16px; background: var( --usb-red ); color: #ffffff; font-size: 25px; font-weight: 400; line-height: 1; transition: transform 0.2s ease; } .usb-orga__node--expandable[open] summary b { transform: rotate( 45deg ); } .usb-orga__content { padding: 0 22px 22px; background: var( --usb-card-open ); border-top: 1px solid var( --usb-border ); } /* ========================================================== CONTENU DES PÔLES ========================================================== */ .usb-orga__person { padding: 16px 0; border-bottom: 1px solid rgba( 255, 255, 255, 0.08 ); } .usb-orga__person:last-child { border-bottom: none; } .usb-orga__person span { display: block; margin-bottom: 7px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; } .usb-orga__person p, .usb-orga__members { margin: 0; color: var( --usb-white ); font-size: 13px; font-weight: 600; line-height: 1.75; } /* ========================================================== TABLETTE ========================================================== */ @media (max-width: 1024px) { .usb-orga { padding: 45px 22px 70px; } .usb-orga__level--four { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__level--three { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__connector { display: none; } .usb-orga__level--three { margin-top: 25px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 700px) { .usb-orga { padding: 35px 14px 55px; } .usb-orga__header { margin-bottom: 42px; } .usb-orga__header h2 { font-size: 34px; } .usb-orga__level--two, .usb-orga__level--three, .usb-orga__level--four { grid-template-columns: 1fr; } .usb-orga__level { gap: 13px; } .usb-orga__node { padding: 20px; } .usb-orga__node--president { padding: 25px 16px; } .usb-orga__node--president h3 { font-size: 21px; } .usb-orga__node strong { font-size: 16px; } .usb-orga__section { margin-top: 55px; padding-top: 32px; } .usb-orga__section-heading { margin-bottom: 18px; } .usb-orga__section-heading h2 { font-size: 27px; } .usb-orga__node--expandable summary { min-height: 88px; padding: 18px; } .usb-orga__node--expandable summary strong { font-size: 16px; } .usb-orga__node--expandable summary b { flex-basis: 31px; width: 31px; height: 31px; margin-left: 10px; font-size: 22px; } .usb-orga__content { padding: 0 18px 18px; } } /* ========================================================== PETITS MOBILES ========================================================== */ @media (max-width: 380px) { .usb-orga__header h2 { font-size: 29px; } .usb-orga__node--expandable summary strong { font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-da8e25e *//* ========================================================== HISTOIRE USB STYLE CALENDRIER / ORGANIGRAMME ========================================================== */ /* ========================================================== VARIABLES ========================================================== */ .usb-history { --usb-red: #c80818; --usb-red-light: #e10a1b; --usb-black: #08090b; --usb-card: #111318; --usb-card-open: #0c0e12; --usb-white: #ffffff; --usb-muted: #a8abb1; --usb-border: rgba( 255, 255, 255, 0.75 ); --usb-line: rgba( 255, 255, 255, 0.25 ); width: 100%; padding: 55px 20px 90px; color: var( --usb-white ); box-sizing: border-box; } /* ========================================================== EN-TÊTE ========================================================== */ .usb-history__header { max-width: 900px; margin: 0 auto 70px; text-align: center; } .usb-history__eyebrow { display: block; margin-bottom: 12px; color: var( --usb-red-light ); font-size: 11px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; } .usb-history__header h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 35px, 5vw, 64px ); font-weight: 900; line-height: 1; text-transform: uppercase; } .usb-history__header p { margin: 15px 0 0; color: var( --usb-muted ); font-size: 14px; } /* ========================================================== CONTENEUR TIMELINE ========================================================== */ .usb-timeline { position: relative; width: 100%; max-width: 1250px; margin: 0 auto; padding: 10px 0 30px; box-sizing: border-box; } /* ========================================================== LIGNE CENTRALE ========================================================== */ .usb-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var( --usb-line ); transform: translateX( -50% ); } /* ========================================================== PROGRESSION ROUGE ========================================================== */ .usb-progress { position: absolute; top: 0; left: 50%; width: 3px; height: 0; background: var( --usb-red ); transform: translateX( -50% ); transition: height 0.15s linear; z-index: 1; } /* ========================================================== ÉLÉMENT ========================================================== */ .usb-item { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; margin-bottom: 85px; } /* Alternance gauche / droite */ .usb-item:nth-of-type( even ) { justify-content: flex-end; } /* ========================================================== PASTILLE ANNÉE ========================================================== */ .usb-dot { position: absolute; top: 55px; left: 50%; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var( --usb-red ); border: 3px solid var( --usb-white ); color: var( --usb-white ); box-shadow: 0 0 0 7px var( --usb-black ); font-size: 14px; font-weight: 900; letter-spacing: 0.5px; transform: translateX( -50% ); z-index: 5; } /* ========================================================== CARTE ========================================================== */ .usb-card { position: relative; width: calc( 50% - 65px ); overflow: hidden; background: var( --usb-card ); border: 1px solid var( --usb-border ); border-top: 3px solid var( --usb-red ); box-sizing: border-box; opacity: 0; transform: translateY( 45px ); transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.25s ease; } /* Animation */ .usb-item.visible .usb-card { opacity: 1; transform: translateY( 0 ); } /* Survol ordinateur */ @media ( hover: hover ) { .usb-card:hover { border-color: var( --usb-white ); transform: translateY( -5px ); } } /* ========================================================== IMAGE ========================================================== */ .usb-image { width: 100%; height: 250px; background-color: #202329; background-repeat: no-repeat; background-position: center; background-size: cover; } /* ========================================================== CONTENU ========================================================== */ .usb-card__content { padding: 26px; } /* Période */ .usb-card__period { display: block; margin-bottom: 10px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; } /* Titre */ .usb-card h3 { margin: 0 0 18px; color: var( --usb-white ); font-size: 25px; font-weight: 900; line-height: 1.15; text-transform: uppercase; } /* Paragraphes */ .usb-card p { margin: 0 0 15px; color: #d2d4d8; font-size: 14px; line-height: 1.75; } .usb-card p:last-child { margin-bottom: 0; } /* Texte important */ .usb-card strong { color: var( --usb-white ); font-weight: 800; } /* ========================================================== LISTES ========================================================== */ .usb-card ul { margin: 20px 0; padding: 17px 18px 17px 35px; background: rgba( 255, 255, 255, 0.04 ); border-left: 3px solid var( --usb-red ); } .usb-card li { margin: 7px 0; color: #d2d4d8; font-size: 13px; line-height: 1.55; } .usb-card li::marker { color: var( --usb-red ); } /* ========================================================== TABLETTE ========================================================== */ @media ( max-width: 1024px ) { .usb-history { padding: 45px 22px 70px; } .usb-card { width: calc( 50% - 48px ); } .usb-dot { width: 56px; height: 56px; font-size: 13px; } .usb-image { height: 210px; } .usb-card__content { padding: 22px; } .usb-card h3 { font-size: 21px; } } /* ========================================================== MOBILE ========================================================== */ @media ( max-width: 768px ) { .usb-history { padding: 35px 14px 60px; } .usb-history__header { margin-bottom: 45px; } .usb-history__header h2 { font-size: 34px; } /* Ligne à gauche */ .usb-line, .usb-progress { left: 25px; transform: none; } /* Tous les éléments sur une colonne */ .usb-item, .usb-item:nth-of-type( even ) { display: block; margin-bottom: 55px; } /* Année à gauche */ .usb-dot { top: 35px; left: 0; width: 50px; height: 50px; font-size: 11px; transform: none; } /* Carte */ .usb-card { width: auto; margin-left: 75px; } .usb-image { height: 200px; } .usb-card__content { padding: 20px; } .usb-card h3 { font-size: 21px; } } /* ========================================================== PETIT MOBILE ========================================================== */ @media ( max-width: 480px ) { .usb-history { padding-left: 8px; padding-right: 8px; } .usb-history__header h2 { font-size: 29px; } .usb-line, .usb-progress { left: 19px; } .usb-dot { width: 39px; height: 39px; font-size: 9px; } .usb-card { margin-left: 58px; } .usb-image { height: 155px; } .usb-card__content { padding: 17px; } .usb-card h3 { font-size: 18px; } .usb-card p { font-size: 13px; line-height: 1.65; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-e7e848a *//* ========================================================== ORGANIGRAMME USB STYLE CALENDRIER / RÉSULTATS ========================================================== */ /* ========================================================== VARIABLES ET CONTENEUR ========================================================== */ .usb-orga { --usb-red: #c80818; --usb-red-light: #e10a1b; --usb-black: #08090b; --usb-card: #111318; --usb-card-open: #0c0e12; --usb-white: #ffffff; --usb-muted: #a8abb1; --usb-border: rgba( 255, 255, 255, 0.14 ); --usb-line: rgba( 255, 255, 255, 0.20 ); width: 100%; max-width: 1400px; margin: 0 auto; padding: 55px 25px 90px; color: var( --usb-white ); box-sizing: border-box; } /* ========================================================== TITRE ========================================================== */ .usb-orga__header { margin-bottom: 65px; text-align: center; } .usb-orga__eyebrow { display: block; margin-bottom: 11px; color: var( --usb-red-light ); font-size: 11px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; } .usb-orga__header h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 35px, 5vw, 64px ); font-weight: 900; line-height: 1; text-transform: uppercase; } .usb-orga__header p { margin: 14px 0 0; color: var( --usb-muted ); font-size: 14px; } /* ========================================================== NIVEAUX DE L'ORGANIGRAMME ========================================================== */ .usb-orga__level { position: relative; display: grid; align-items: start; justify-content: center; gap: 20px; width: 100%; } .usb-orga__level--two { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__level--three { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } .usb-orga__level--four { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } /* ========================================================== CARTES ========================================================== */ .usb-orga__node { width: 100%; min-width: 0; padding: 23px; background: var( --usb-card ); border: 1px solid var( --usb-border ); border-top: 3px solid var( --usb-white ); box-sizing: border-box; } .usb-orga__node--president { width: min( 100%, 460px ); margin: 0 auto; padding: 30px; background: var( --usb-red ); border: none; text-align: center; } .usb-orga__node--president .usb-orga__type { color: rgba( 255, 255, 255, 0.75 ); } .usb-orga__node--president h3 { margin: 8px 0 7px; color: #ffffff; font-size: 25px; font-weight: 900; text-transform: uppercase; } .usb-orga__type { display: block; margin-bottom: 10px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; line-height: 1.3; text-transform: uppercase; } .usb-orga__node strong { display: block; color: var( --usb-white ); font-size: 18px; font-weight: 900; line-height: 1.35; text-transform: uppercase; } /* ========================================================== CONNECTEUR PRÉSIDENT ========================================================== */ .usb-orga__connector { position: relative; width: 100%; max-width: 1000px; height: 55px; margin: 0 auto; } .usb-orga__connector::before { position: absolute; top: 0; left: 50%; width: 1px; height: 28px; background: var( --usb-red ); content: ""; } .usb-orga__connector span { position: absolute; top: 28px; left: 16.66%; width: 66.68%; height: 1px; background: var( --usb-red ); } .usb-orga__connector::after { position: absolute; top: 28px; left: 16.66%; width: 66.68%; height: 27px; border-left: 1px solid var( --usb-red ); border-right: 1px solid var( --usb-red ); content: ""; } /* ========================================================== SECTIONS ========================================================== */ .usb-orga__section { position: relative; margin-top: 80px; padding-top: 40px; } .usb-orga__section::before { position: absolute; top: 0; left: 50%; width: 1px; height: 25px; background: var( --usb-white ); content: ""; } .usb-orga__section-heading { margin-bottom: 25px; } .usb-orga__section-heading span { display: block; margin-bottom: 7px; color: var( --usb-white ); font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; } .usb-orga__section-heading h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 25px, 3vw, 38px ); font-weight: 900; text-transform: uppercase; } /* ========================================================== BRANCHES ========================================================== */ .usb-orga__branch { min-width: 0; align-self: start; } /* ========================================================== CARTES REPLIABLES ========================================================== */ .usb-orga__node--expandable { padding: 0; overflow: hidden; } .usb-orga__node--expandable summary { display: flex; align-items: center; justify-content: space-between; min-height: 100px; padding: 22px; cursor: pointer; list-style: none; box-sizing: border-box; } .usb-orga__node--expandable summary::-webkit-details-marker { display: none; } .usb-orga__node--expandable summary::marker { content: ""; } .usb-orga__node--expandable summary small { display: block; margin-bottom: 8px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; } .usb-orga__node--expandable summary strong { font-size: 18px; } .usb-orga__node--expandable summary b { display: flex; align-items: center; justify-content: center; flex: 0 0 35px; width: 35px; height: 35px; margin-left: 16px; background: var( --usb-red ); color: #ffffff; font-size: 25px; font-weight: 400; line-height: 1; transition: transform 0.2s ease; } .usb-orga__node--expandable[open] summary b { transform: rotate( 45deg ); } .usb-orga__content { padding: 0 22px 22px; background: var( --usb-card-open ); border-top: 1px solid var( --usb-border ); } /* ========================================================== CONTENU DES PÔLES ========================================================== */ .usb-orga__person { padding: 16px 0; border-bottom: 1px solid rgba( 255, 255, 255, 0.08 ); } .usb-orga__person:last-child { border-bottom: none; } .usb-orga__person span { display: block; margin-bottom: 7px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; } .usb-orga__person p, .usb-orga__members { margin: 0; color: var( --usb-white ); font-size: 13px; font-weight: 600; line-height: 1.75; } /* ========================================================== TABLETTE ========================================================== */ @media (max-width: 1024px) { .usb-orga { padding: 45px 22px 70px; } .usb-orga__level--four { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__level--three { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__connector { display: none; } .usb-orga__level--three { margin-top: 25px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 700px) { .usb-orga { padding: 35px 14px 55px; } .usb-orga__header { margin-bottom: 42px; } .usb-orga__header h2 { font-size: 34px; } .usb-orga__level--two, .usb-orga__level--three, .usb-orga__level--four { grid-template-columns: 1fr; } .usb-orga__level { gap: 13px; } .usb-orga__node { padding: 20px; } .usb-orga__node--president { padding: 25px 16px; } .usb-orga__node--president h3 { font-size: 21px; } .usb-orga__node strong { font-size: 16px; } .usb-orga__section { margin-top: 55px; padding-top: 32px; } .usb-orga__section-heading { margin-bottom: 18px; } .usb-orga__section-heading h2 { font-size: 27px; } .usb-orga__node--expandable summary { min-height: 88px; padding: 18px; } .usb-orga__node--expandable summary strong { font-size: 16px; } .usb-orga__node--expandable summary b { flex-basis: 31px; width: 31px; height: 31px; margin-left: 10px; font-size: 22px; } .usb-orga__content { padding: 0 18px 18px; } } /* ========================================================== PETITS MOBILES ========================================================== */ @media (max-width: 380px) { .usb-orga__header h2 { font-size: 29px; } .usb-orga__node--expandable summary strong { font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-da8e25e *//* ========================================================== HISTOIRE USB STYLE CALENDRIER / ORGANIGRAMME ========================================================== */ /* ========================================================== VARIABLES ========================================================== */ .usb-history { --usb-red: #c80818; --usb-red-light: #e10a1b; --usb-black: #08090b; --usb-card: #111318; --usb-card-open: #0c0e12; --usb-white: #ffffff; --usb-muted: #a8abb1; --usb-border: rgba( 255, 255, 255, 0.75 ); --usb-line: rgba( 255, 255, 255, 0.25 ); width: 100%; padding: 55px 20px 90px; color: var( --usb-white ); box-sizing: border-box; } /* ========================================================== EN-TÊTE ========================================================== */ .usb-history__header { max-width: 900px; margin: 0 auto 70px; text-align: center; } .usb-history__eyebrow { display: block; margin-bottom: 12px; color: var( --usb-red-light ); font-size: 11px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; } .usb-history__header h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 35px, 5vw, 64px ); font-weight: 900; line-height: 1; text-transform: uppercase; } .usb-history__header p { margin: 15px 0 0; color: var( --usb-muted ); font-size: 14px; } /* ========================================================== CONTENEUR TIMELINE ========================================================== */ .usb-timeline { position: relative; width: 100%; max-width: 1250px; margin: 0 auto; padding: 10px 0 30px; box-sizing: border-box; } /* ========================================================== LIGNE CENTRALE ========================================================== */ .usb-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var( --usb-line ); transform: translateX( -50% ); } /* ========================================================== PROGRESSION ROUGE ========================================================== */ .usb-progress { position: absolute; top: 0; left: 50%; width: 3px; height: 0; background: var( --usb-red ); transform: translateX( -50% ); transition: height 0.15s linear; z-index: 1; } /* ========================================================== ÉLÉMENT ========================================================== */ .usb-item { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; margin-bottom: 85px; } /* Alternance gauche / droite */ .usb-item:nth-of-type( even ) { justify-content: flex-end; } /* ========================================================== PASTILLE ANNÉE ========================================================== */ .usb-dot { position: absolute; top: 55px; left: 50%; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var( --usb-red ); border: 3px solid var( --usb-white ); color: var( --usb-white ); box-shadow: 0 0 0 7px var( --usb-black ); font-size: 14px; font-weight: 900; letter-spacing: 0.5px; transform: translateX( -50% ); z-index: 5; } /* ========================================================== CARTE ========================================================== */ .usb-card { position: relative; width: calc( 50% - 65px ); overflow: hidden; background: var( --usb-card ); border: 1px solid var( --usb-border ); border-top: 3px solid var( --usb-red ); box-sizing: border-box; opacity: 0; transform: translateY( 45px ); transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.25s ease; } /* Animation */ .usb-item.visible .usb-card { opacity: 1; transform: translateY( 0 ); } /* Survol ordinateur */ @media ( hover: hover ) { .usb-card:hover { border-color: var( --usb-white ); transform: translateY( -5px ); } } /* ========================================================== IMAGE ========================================================== */ .usb-image { width: 100%; height: 250px; background-color: #202329; background-repeat: no-repeat; background-position: center; background-size: cover; } /* ========================================================== CONTENU ========================================================== */ .usb-card__content { padding: 26px; } /* Période */ .usb-card__period { display: block; margin-bottom: 10px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; } /* Titre */ .usb-card h3 { margin: 0 0 18px; color: var( --usb-white ); font-size: 25px; font-weight: 900; line-height: 1.15; text-transform: uppercase; } /* Paragraphes */ .usb-card p { margin: 0 0 15px; color: #d2d4d8; font-size: 14px; line-height: 1.75; } .usb-card p:last-child { margin-bottom: 0; } /* Texte important */ .usb-card strong { color: var( --usb-white ); font-weight: 800; } /* ========================================================== LISTES ========================================================== */ .usb-card ul { margin: 20px 0; padding: 17px 18px 17px 35px; background: rgba( 255, 255, 255, 0.04 ); border-left: 3px solid var( --usb-red ); } .usb-card li { margin: 7px 0; color: #d2d4d8; font-size: 13px; line-height: 1.55; } .usb-card li::marker { color: var( --usb-red ); } /* ========================================================== TABLETTE ========================================================== */ @media ( max-width: 1024px ) { .usb-history { padding: 45px 22px 70px; } .usb-card { width: calc( 50% - 48px ); } .usb-dot { width: 56px; height: 56px; font-size: 13px; } .usb-image { height: 210px; } .usb-card__content { padding: 22px; } .usb-card h3 { font-size: 21px; } } /* ========================================================== MOBILE ========================================================== */ @media ( max-width: 768px ) { .usb-history { padding: 35px 14px 60px; } .usb-history__header { margin-bottom: 45px; } .usb-history__header h2 { font-size: 34px; } /* Ligne à gauche */ .usb-line, .usb-progress { left: 25px; transform: none; } /* Tous les éléments sur une colonne */ .usb-item, .usb-item:nth-of-type( even ) { display: block; margin-bottom: 55px; } /* Année à gauche */ .usb-dot { top: 35px; left: 0; width: 50px; height: 50px; font-size: 11px; transform: none; } /* Carte */ .usb-card { width: auto; margin-left: 75px; } .usb-image { height: 200px; } .usb-card__content { padding: 20px; } .usb-card h3 { font-size: 21px; } } /* ========================================================== PETIT MOBILE ========================================================== */ @media ( max-width: 480px ) { .usb-history { padding-left: 8px; padding-right: 8px; } .usb-history__header h2 { font-size: 29px; } .usb-line, .usb-progress { left: 19px; } .usb-dot { width: 39px; height: 39px; font-size: 9px; } .usb-card { margin-left: 58px; } .usb-image { height: 155px; } .usb-card__content { padding: 17px; } .usb-card h3 { font-size: 18px; } .usb-card p { font-size: 13px; line-height: 1.65; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-e7e848a *//* ========================================================== ORGANIGRAMME USB STYLE CALENDRIER / RÉSULTATS ========================================================== */ /* ========================================================== VARIABLES ET CONTENEUR ========================================================== */ .usb-orga { --usb-red: #c80818; --usb-red-light: #e10a1b; --usb-black: #08090b; --usb-card: #111318; --usb-card-open: #0c0e12; --usb-white: #ffffff; --usb-muted: #a8abb1; --usb-border: rgba( 255, 255, 255, 0.14 ); --usb-line: rgba( 255, 255, 255, 0.20 ); width: 100%; max-width: 1400px; margin: 0 auto; padding: 55px 25px 90px; color: var( --usb-white ); box-sizing: border-box; } /* ========================================================== TITRE ========================================================== */ .usb-orga__header { margin-bottom: 65px; text-align: center; } .usb-orga__eyebrow { display: block; margin-bottom: 11px; color: var( --usb-red-light ); font-size: 11px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; } .usb-orga__header h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 35px, 5vw, 64px ); font-weight: 900; line-height: 1; text-transform: uppercase; } .usb-orga__header p { margin: 14px 0 0; color: var( --usb-muted ); font-size: 14px; } /* ========================================================== NIVEAUX DE L'ORGANIGRAMME ========================================================== */ .usb-orga__level { position: relative; display: grid; align-items: start; justify-content: center; gap: 20px; width: 100%; } .usb-orga__level--two { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__level--three { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } .usb-orga__level--four { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } /* ========================================================== CARTES ========================================================== */ .usb-orga__node { width: 100%; min-width: 0; padding: 23px; background: var( --usb-card ); border: 1px solid var( --usb-border ); border-top: 3px solid var( --usb-white ); box-sizing: border-box; } .usb-orga__node--president { width: min( 100%, 460px ); margin: 0 auto; padding: 30px; background: var( --usb-red ); border: none; text-align: center; } .usb-orga__node--president .usb-orga__type { color: rgba( 255, 255, 255, 0.75 ); } .usb-orga__node--president h3 { margin: 8px 0 7px; color: #ffffff; font-size: 25px; font-weight: 900; text-transform: uppercase; } .usb-orga__type { display: block; margin-bottom: 10px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; line-height: 1.3; text-transform: uppercase; } .usb-orga__node strong { display: block; color: var( --usb-white ); font-size: 18px; font-weight: 900; line-height: 1.35; text-transform: uppercase; } /* ========================================================== CONNECTEUR PRÉSIDENT ========================================================== */ .usb-orga__connector { position: relative; width: 100%; max-width: 1000px; height: 55px; margin: 0 auto; } .usb-orga__connector::before { position: absolute; top: 0; left: 50%; width: 1px; height: 28px; background: var( --usb-red ); content: ""; } .usb-orga__connector span { position: absolute; top: 28px; left: 16.66%; width: 66.68%; height: 1px; background: var( --usb-red ); } .usb-orga__connector::after { position: absolute; top: 28px; left: 16.66%; width: 66.68%; height: 27px; border-left: 1px solid var( --usb-red ); border-right: 1px solid var( --usb-red ); content: ""; } /* ========================================================== SECTIONS ========================================================== */ .usb-orga__section { position: relative; margin-top: 80px; padding-top: 40px; } .usb-orga__section::before { position: absolute; top: 0; left: 50%; width: 1px; height: 25px; background: var( --usb-white ); content: ""; } .usb-orga__section-heading { margin-bottom: 25px; } .usb-orga__section-heading span { display: block; margin-bottom: 7px; color: var( --usb-white ); font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; } .usb-orga__section-heading h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 25px, 3vw, 38px ); font-weight: 900; text-transform: uppercase; } /* ========================================================== BRANCHES ========================================================== */ .usb-orga__branch { min-width: 0; align-self: start; } /* ========================================================== CARTES REPLIABLES ========================================================== */ .usb-orga__node--expandable { padding: 0; overflow: hidden; } .usb-orga__node--expandable summary { display: flex; align-items: center; justify-content: space-between; min-height: 100px; padding: 22px; cursor: pointer; list-style: none; box-sizing: border-box; } .usb-orga__node--expandable summary::-webkit-details-marker { display: none; } .usb-orga__node--expandable summary::marker { content: ""; } .usb-orga__node--expandable summary small { display: block; margin-bottom: 8px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; } .usb-orga__node--expandable summary strong { font-size: 18px; } .usb-orga__node--expandable summary b { display: flex; align-items: center; justify-content: center; flex: 0 0 35px; width: 35px; height: 35px; margin-left: 16px; background: var( --usb-red ); color: #ffffff; font-size: 25px; font-weight: 400; line-height: 1; transition: transform 0.2s ease; } .usb-orga__node--expandable[open] summary b { transform: rotate( 45deg ); } .usb-orga__content { padding: 0 22px 22px; background: var( --usb-card-open ); border-top: 1px solid var( --usb-border ); } /* ========================================================== CONTENU DES PÔLES ========================================================== */ .usb-orga__person { padding: 16px 0; border-bottom: 1px solid rgba( 255, 255, 255, 0.08 ); } .usb-orga__person:last-child { border-bottom: none; } .usb-orga__person span { display: block; margin-bottom: 7px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; } .usb-orga__person p, .usb-orga__members { margin: 0; color: var( --usb-white ); font-size: 13px; font-weight: 600; line-height: 1.75; } /* ========================================================== TABLETTE ========================================================== */ @media (max-width: 1024px) { .usb-orga { padding: 45px 22px 70px; } .usb-orga__level--four { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__level--three { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__connector { display: none; } .usb-orga__level--three { margin-top: 25px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 700px) { .usb-orga { padding: 35px 14px 55px; } .usb-orga__header { margin-bottom: 42px; } .usb-orga__header h2 { font-size: 34px; } .usb-orga__level--two, .usb-orga__level--three, .usb-orga__level--four { grid-template-columns: 1fr; } .usb-orga__level { gap: 13px; } .usb-orga__node { padding: 20px; } .usb-orga__node--president { padding: 25px 16px; } .usb-orga__node--president h3 { font-size: 21px; } .usb-orga__node strong { font-size: 16px; } .usb-orga__section { margin-top: 55px; padding-top: 32px; } .usb-orga__section-heading { margin-bottom: 18px; } .usb-orga__section-heading h2 { font-size: 27px; } .usb-orga__node--expandable summary { min-height: 88px; padding: 18px; } .usb-orga__node--expandable summary strong { font-size: 16px; } .usb-orga__node--expandable summary b { flex-basis: 31px; width: 31px; height: 31px; margin-left: 10px; font-size: 22px; } .usb-orga__content { padding: 0 18px 18px; } } /* ========================================================== PETITS MOBILES ========================================================== */ @media (max-width: 380px) { .usb-orga__header h2 { font-size: 29px; } .usb-orga__node--expandable summary strong { font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-da8e25e *//* ========================================================== HISTOIRE USB STYLE CALENDRIER / ORGANIGRAMME ========================================================== */ /* ========================================================== VARIABLES ========================================================== */ .usb-history { --usb-red: #c80818; --usb-red-light: #e10a1b; --usb-black: #08090b; --usb-card: #111318; --usb-card-open: #0c0e12; --usb-white: #ffffff; --usb-muted: #a8abb1; --usb-border: rgba( 255, 255, 255, 0.75 ); --usb-line: rgba( 255, 255, 255, 0.25 ); width: 100%; padding: 55px 20px 90px; color: var( --usb-white ); box-sizing: border-box; } /* ========================================================== EN-TÊTE ========================================================== */ .usb-history__header { max-width: 900px; margin: 0 auto 70px; text-align: center; } .usb-history__eyebrow { display: block; margin-bottom: 12px; color: var( --usb-red-light ); font-size: 11px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; } .usb-history__header h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 35px, 5vw, 64px ); font-weight: 900; line-height: 1; text-transform: uppercase; } .usb-history__header p { margin: 15px 0 0; color: var( --usb-muted ); font-size: 14px; } /* ========================================================== CONTENEUR TIMELINE ========================================================== */ .usb-timeline { position: relative; width: 100%; max-width: 1250px; margin: 0 auto; padding: 10px 0 30px; box-sizing: border-box; } /* ========================================================== LIGNE CENTRALE ========================================================== */ .usb-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var( --usb-line ); transform: translateX( -50% ); } /* ========================================================== PROGRESSION ROUGE ========================================================== */ .usb-progress { position: absolute; top: 0; left: 50%; width: 3px; height: 0; background: var( --usb-red ); transform: translateX( -50% ); transition: height 0.15s linear; z-index: 1; } /* ========================================================== ÉLÉMENT ========================================================== */ .usb-item { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; margin-bottom: 85px; } /* Alternance gauche / droite */ .usb-item:nth-of-type( even ) { justify-content: flex-end; } /* ========================================================== PASTILLE ANNÉE ========================================================== */ .usb-dot { position: absolute; top: 55px; left: 50%; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var( --usb-red ); border: 3px solid var( --usb-white ); color: var( --usb-white ); box-shadow: 0 0 0 7px var( --usb-black ); font-size: 14px; font-weight: 900; letter-spacing: 0.5px; transform: translateX( -50% ); z-index: 5; } /* ========================================================== CARTE ========================================================== */ .usb-card { position: relative; width: calc( 50% - 65px ); overflow: hidden; background: var( --usb-card ); border: 1px solid var( --usb-border ); border-top: 3px solid var( --usb-red ); box-sizing: border-box; opacity: 0; transform: translateY( 45px ); transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.25s ease; } /* Animation */ .usb-item.visible .usb-card { opacity: 1; transform: translateY( 0 ); } /* Survol ordinateur */ @media ( hover: hover ) { .usb-card:hover { border-color: var( --usb-white ); transform: translateY( -5px ); } } /* ========================================================== IMAGE ========================================================== */ .usb-image { width: 100%; height: 250px; background-color: #202329; background-repeat: no-repeat; background-position: center; background-size: cover; } /* ========================================================== CONTENU ========================================================== */ .usb-card__content { padding: 26px; } /* Période */ .usb-card__period { display: block; margin-bottom: 10px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; } /* Titre */ .usb-card h3 { margin: 0 0 18px; color: var( --usb-white ); font-size: 25px; font-weight: 900; line-height: 1.15; text-transform: uppercase; } /* Paragraphes */ .usb-card p { margin: 0 0 15px; color: #d2d4d8; font-size: 14px; line-height: 1.75; } .usb-card p:last-child { margin-bottom: 0; } /* Texte important */ .usb-card strong { color: var( --usb-white ); font-weight: 800; } /* ========================================================== LISTES ========================================================== */ .usb-card ul { margin: 20px 0; padding: 17px 18px 17px 35px; background: rgba( 255, 255, 255, 0.04 ); border-left: 3px solid var( --usb-red ); } .usb-card li { margin: 7px 0; color: #d2d4d8; font-size: 13px; line-height: 1.55; } .usb-card li::marker { color: var( --usb-red ); } /* ========================================================== TABLETTE ========================================================== */ @media ( max-width: 1024px ) { .usb-history { padding: 45px 22px 70px; } .usb-card { width: calc( 50% - 48px ); } .usb-dot { width: 56px; height: 56px; font-size: 13px; } .usb-image { height: 210px; } .usb-card__content { padding: 22px; } .usb-card h3 { font-size: 21px; } } /* ========================================================== MOBILE ========================================================== */ @media ( max-width: 768px ) { .usb-history { padding: 35px 14px 60px; } .usb-history__header { margin-bottom: 45px; } .usb-history__header h2 { font-size: 34px; } /* Ligne à gauche */ .usb-line, .usb-progress { left: 25px; transform: none; } /* Tous les éléments sur une colonne */ .usb-item, .usb-item:nth-of-type( even ) { display: block; margin-bottom: 55px; } /* Année à gauche */ .usb-dot { top: 35px; left: 0; width: 50px; height: 50px; font-size: 11px; transform: none; } /* Carte */ .usb-card { width: auto; margin-left: 75px; } .usb-image { height: 200px; } .usb-card__content { padding: 20px; } .usb-card h3 { font-size: 21px; } } /* ========================================================== PETIT MOBILE ========================================================== */ @media ( max-width: 480px ) { .usb-history { padding-left: 8px; padding-right: 8px; } .usb-history__header h2 { font-size: 29px; } .usb-line, .usb-progress { left: 19px; } .usb-dot { width: 39px; height: 39px; font-size: 9px; } .usb-card { margin-left: 58px; } .usb-image { height: 155px; } .usb-card__content { padding: 17px; } .usb-card h3 { font-size: 18px; } .usb-card p { font-size: 13px; line-height: 1.65; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-e7e848a *//* ========================================================== ORGANIGRAMME USB STYLE CALENDRIER / RÉSULTATS ========================================================== */ /* ========================================================== VARIABLES ET CONTENEUR ========================================================== */ .usb-orga { --usb-red: #c80818; --usb-red-light: #e10a1b; --usb-black: #08090b; --usb-card: #111318; --usb-card-open: #0c0e12; --usb-white: #ffffff; --usb-muted: #a8abb1; --usb-border: rgba( 255, 255, 255, 0.14 ); --usb-line: rgba( 255, 255, 255, 0.20 ); width: 100%; max-width: 1400px; margin: 0 auto; padding: 55px 25px 90px; color: var( --usb-white ); box-sizing: border-box; } /* ========================================================== TITRE ========================================================== */ .usb-orga__header { margin-bottom: 65px; text-align: center; } .usb-orga__eyebrow { display: block; margin-bottom: 11px; color: var( --usb-red-light ); font-size: 11px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; } .usb-orga__header h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 35px, 5vw, 64px ); font-weight: 900; line-height: 1; text-transform: uppercase; } .usb-orga__header p { margin: 14px 0 0; color: var( --usb-muted ); font-size: 14px; } /* ========================================================== NIVEAUX DE L'ORGANIGRAMME ========================================================== */ .usb-orga__level { position: relative; display: grid; align-items: start; justify-content: center; gap: 20px; width: 100%; } .usb-orga__level--two { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__level--three { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } .usb-orga__level--four { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } /* ========================================================== CARTES ========================================================== */ .usb-orga__node { width: 100%; min-width: 0; padding: 23px; background: var( --usb-card ); border: 1px solid var( --usb-border ); border-top: 3px solid var( --usb-white ); box-sizing: border-box; } .usb-orga__node--president { width: min( 100%, 460px ); margin: 0 auto; padding: 30px; background: var( --usb-red ); border: none; text-align: center; } .usb-orga__node--president .usb-orga__type { color: rgba( 255, 255, 255, 0.75 ); } .usb-orga__node--president h3 { margin: 8px 0 7px; color: #ffffff; font-size: 25px; font-weight: 900; text-transform: uppercase; } .usb-orga__type { display: block; margin-bottom: 10px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; line-height: 1.3; text-transform: uppercase; } .usb-orga__node strong { display: block; color: var( --usb-white ); font-size: 18px; font-weight: 900; line-height: 1.35; text-transform: uppercase; } /* ========================================================== CONNECTEUR PRÉSIDENT ========================================================== */ .usb-orga__connector { position: relative; width: 100%; max-width: 1000px; height: 55px; margin: 0 auto; } .usb-orga__connector::before { position: absolute; top: 0; left: 50%; width: 1px; height: 28px; background: var( --usb-red ); content: ""; } .usb-orga__connector span { position: absolute; top: 28px; left: 16.66%; width: 66.68%; height: 1px; background: var( --usb-red ); } .usb-orga__connector::after { position: absolute; top: 28px; left: 16.66%; width: 66.68%; height: 27px; border-left: 1px solid var( --usb-red ); border-right: 1px solid var( --usb-red ); content: ""; } /* ========================================================== SECTIONS ========================================================== */ .usb-orga__section { position: relative; margin-top: 80px; padding-top: 40px; } .usb-orga__section::before { position: absolute; top: 0; left: 50%; width: 1px; height: 25px; background: var( --usb-white ); content: ""; } .usb-orga__section-heading { margin-bottom: 25px; } .usb-orga__section-heading span { display: block; margin-bottom: 7px; color: var( --usb-white ); font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; } .usb-orga__section-heading h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 25px, 3vw, 38px ); font-weight: 900; text-transform: uppercase; } /* ========================================================== BRANCHES ========================================================== */ .usb-orga__branch { min-width: 0; align-self: start; } /* ========================================================== CARTES REPLIABLES ========================================================== */ .usb-orga__node--expandable { padding: 0; overflow: hidden; } .usb-orga__node--expandable summary { display: flex; align-items: center; justify-content: space-between; min-height: 100px; padding: 22px; cursor: pointer; list-style: none; box-sizing: border-box; } .usb-orga__node--expandable summary::-webkit-details-marker { display: none; } .usb-orga__node--expandable summary::marker { content: ""; } .usb-orga__node--expandable summary small { display: block; margin-bottom: 8px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; } .usb-orga__node--expandable summary strong { font-size: 18px; } .usb-orga__node--expandable summary b { display: flex; align-items: center; justify-content: center; flex: 0 0 35px; width: 35px; height: 35px; margin-left: 16px; background: var( --usb-red ); color: #ffffff; font-size: 25px; font-weight: 400; line-height: 1; transition: transform 0.2s ease; } .usb-orga__node--expandable[open] summary b { transform: rotate( 45deg ); } .usb-orga__content { padding: 0 22px 22px; background: var( --usb-card-open ); border-top: 1px solid var( --usb-border ); } /* ========================================================== CONTENU DES PÔLES ========================================================== */ .usb-orga__person { padding: 16px 0; border-bottom: 1px solid rgba( 255, 255, 255, 0.08 ); } .usb-orga__person:last-child { border-bottom: none; } .usb-orga__person span { display: block; margin-bottom: 7px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; } .usb-orga__person p, .usb-orga__members { margin: 0; color: var( --usb-white ); font-size: 13px; font-weight: 600; line-height: 1.75; } /* ========================================================== TABLETTE ========================================================== */ @media (max-width: 1024px) { .usb-orga { padding: 45px 22px 70px; } .usb-orga__level--four { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__level--three { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__connector { display: none; } .usb-orga__level--three { margin-top: 25px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 700px) { .usb-orga { padding: 35px 14px 55px; } .usb-orga__header { margin-bottom: 42px; } .usb-orga__header h2 { font-size: 34px; } .usb-orga__level--two, .usb-orga__level--three, .usb-orga__level--four { grid-template-columns: 1fr; } .usb-orga__level { gap: 13px; } .usb-orga__node { padding: 20px; } .usb-orga__node--president { padding: 25px 16px; } .usb-orga__node--president h3 { font-size: 21px; } .usb-orga__node strong { font-size: 16px; } .usb-orga__section { margin-top: 55px; padding-top: 32px; } .usb-orga__section-heading { margin-bottom: 18px; } .usb-orga__section-heading h2 { font-size: 27px; } .usb-orga__node--expandable summary { min-height: 88px; padding: 18px; } .usb-orga__node--expandable summary strong { font-size: 16px; } .usb-orga__node--expandable summary b { flex-basis: 31px; width: 31px; height: 31px; margin-left: 10px; font-size: 22px; } .usb-orga__content { padding: 0 18px 18px; } } /* ========================================================== PETITS MOBILES ========================================================== */ @media (max-width: 380px) { .usb-orga__header h2 { font-size: 29px; } .usb-orga__node--expandable summary strong { font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-da8e25e *//* ========================================================== HISTOIRE USB STYLE CALENDRIER / ORGANIGRAMME ========================================================== */ /* ========================================================== VARIABLES ========================================================== */ .usb-history { --usb-red: #c80818; --usb-red-light: #e10a1b; --usb-black: #08090b; --usb-card: #111318; --usb-card-open: #0c0e12; --usb-white: #ffffff; --usb-muted: #a8abb1; --usb-border: rgba( 255, 255, 255, 0.75 ); --usb-line: rgba( 255, 255, 255, 0.25 ); width: 100%; padding: 55px 20px 90px; color: var( --usb-white ); box-sizing: border-box; } /* ========================================================== EN-TÊTE ========================================================== */ .usb-history__header { max-width: 900px; margin: 0 auto 70px; text-align: center; } .usb-history__eyebrow { display: block; margin-bottom: 12px; color: var( --usb-red-light ); font-size: 11px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; } .usb-history__header h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 35px, 5vw, 64px ); font-weight: 900; line-height: 1; text-transform: uppercase; } .usb-history__header p { margin: 15px 0 0; color: var( --usb-muted ); font-size: 14px; } /* ========================================================== CONTENEUR TIMELINE ========================================================== */ .usb-timeline { position: relative; width: 100%; max-width: 1250px; margin: 0 auto; padding: 10px 0 30px; box-sizing: border-box; } /* ========================================================== LIGNE CENTRALE ========================================================== */ .usb-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var( --usb-line ); transform: translateX( -50% ); } /* ========================================================== PROGRESSION ROUGE ========================================================== */ .usb-progress { position: absolute; top: 0; left: 50%; width: 3px; height: 0; background: var( --usb-red ); transform: translateX( -50% ); transition: height 0.15s linear; z-index: 1; } /* ========================================================== ÉLÉMENT ========================================================== */ .usb-item { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; margin-bottom: 85px; } /* Alternance gauche / droite */ .usb-item:nth-of-type( even ) { justify-content: flex-end; } /* ========================================================== PASTILLE ANNÉE ========================================================== */ .usb-dot { position: absolute; top: 55px; left: 50%; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var( --usb-red ); border: 3px solid var( --usb-white ); color: var( --usb-white ); box-shadow: 0 0 0 7px var( --usb-black ); font-size: 14px; font-weight: 900; letter-spacing: 0.5px; transform: translateX( -50% ); z-index: 5; } /* ========================================================== CARTE ========================================================== */ .usb-card { position: relative; width: calc( 50% - 65px ); overflow: hidden; background: var( --usb-card ); border: 1px solid var( --usb-border ); border-top: 3px solid var( --usb-red ); box-sizing: border-box; opacity: 0; transform: translateY( 45px ); transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.25s ease; } /* Animation */ .usb-item.visible .usb-card { opacity: 1; transform: translateY( 0 ); } /* Survol ordinateur */ @media ( hover: hover ) { .usb-card:hover { border-color: var( --usb-white ); transform: translateY( -5px ); } } /* ========================================================== IMAGE ========================================================== */ .usb-image { width: 100%; height: 250px; background-color: #202329; background-repeat: no-repeat; background-position: center; background-size: cover; } /* ========================================================== CONTENU ========================================================== */ .usb-card__content { padding: 26px; } /* Période */ .usb-card__period { display: block; margin-bottom: 10px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; } /* Titre */ .usb-card h3 { margin: 0 0 18px; color: var( --usb-white ); font-size: 25px; font-weight: 900; line-height: 1.15; text-transform: uppercase; } /* Paragraphes */ .usb-card p { margin: 0 0 15px; color: #d2d4d8; font-size: 14px; line-height: 1.75; } .usb-card p:last-child { margin-bottom: 0; } /* Texte important */ .usb-card strong { color: var( --usb-white ); font-weight: 800; } /* ========================================================== LISTES ========================================================== */ .usb-card ul { margin: 20px 0; padding: 17px 18px 17px 35px; background: rgba( 255, 255, 255, 0.04 ); border-left: 3px solid var( --usb-red ); } .usb-card li { margin: 7px 0; color: #d2d4d8; font-size: 13px; line-height: 1.55; } .usb-card li::marker { color: var( --usb-red ); } /* ========================================================== TABLETTE ========================================================== */ @media ( max-width: 1024px ) { .usb-history { padding: 45px 22px 70px; } .usb-card { width: calc( 50% - 48px ); } .usb-dot { width: 56px; height: 56px; font-size: 13px; } .usb-image { height: 210px; } .usb-card__content { padding: 22px; } .usb-card h3 { font-size: 21px; } } /* ========================================================== MOBILE ========================================================== */ @media ( max-width: 768px ) { .usb-history { padding: 35px 14px 60px; } .usb-history__header { margin-bottom: 45px; } .usb-history__header h2 { font-size: 34px; } /* Ligne à gauche */ .usb-line, .usb-progress { left: 25px; transform: none; } /* Tous les éléments sur une colonne */ .usb-item, .usb-item:nth-of-type( even ) { display: block; margin-bottom: 55px; } /* Année à gauche */ .usb-dot { top: 35px; left: 0; width: 50px; height: 50px; font-size: 11px; transform: none; } /* Carte */ .usb-card { width: auto; margin-left: 75px; } .usb-image { height: 200px; } .usb-card__content { padding: 20px; } .usb-card h3 { font-size: 21px; } } /* ========================================================== PETIT MOBILE ========================================================== */ @media ( max-width: 480px ) { .usb-history { padding-left: 8px; padding-right: 8px; } .usb-history__header h2 { font-size: 29px; } .usb-line, .usb-progress { left: 19px; } .usb-dot { width: 39px; height: 39px; font-size: 9px; } .usb-card { margin-left: 58px; } .usb-image { height: 155px; } .usb-card__content { padding: 17px; } .usb-card h3 { font-size: 18px; } .usb-card p { font-size: 13px; line-height: 1.65; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-e7e848a *//* ========================================================== ORGANIGRAMME USB STYLE CALENDRIER / RÉSULTATS ========================================================== */ /* ========================================================== VARIABLES ET CONTENEUR ========================================================== */ .usb-orga { --usb-red: #c80818; --usb-red-light: #e10a1b; --usb-black: #08090b; --usb-card: #111318; --usb-card-open: #0c0e12; --usb-white: #ffffff; --usb-muted: #a8abb1; --usb-border: rgba( 255, 255, 255, 0.14 ); --usb-line: rgba( 255, 255, 255, 0.20 ); width: 100%; max-width: 1400px; margin: 0 auto; padding: 55px 25px 90px; color: var( --usb-white ); box-sizing: border-box; } /* ========================================================== TITRE ========================================================== */ .usb-orga__header { margin-bottom: 65px; text-align: center; } .usb-orga__eyebrow { display: block; margin-bottom: 11px; color: var( --usb-red-light ); font-size: 11px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; } .usb-orga__header h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 35px, 5vw, 64px ); font-weight: 900; line-height: 1; text-transform: uppercase; } .usb-orga__header p { margin: 14px 0 0; color: var( --usb-muted ); font-size: 14px; } /* ========================================================== NIVEAUX DE L'ORGANIGRAMME ========================================================== */ .usb-orga__level { position: relative; display: grid; align-items: start; justify-content: center; gap: 20px; width: 100%; } .usb-orga__level--two { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__level--three { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } .usb-orga__level--four { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } /* ========================================================== CARTES ========================================================== */ .usb-orga__node { width: 100%; min-width: 0; padding: 23px; background: var( --usb-card ); border: 1px solid var( --usb-border ); border-top: 3px solid var( --usb-white ); box-sizing: border-box; } .usb-orga__node--president { width: min( 100%, 460px ); margin: 0 auto; padding: 30px; background: var( --usb-red ); border: none; text-align: center; } .usb-orga__node--president .usb-orga__type { color: rgba( 255, 255, 255, 0.75 ); } .usb-orga__node--president h3 { margin: 8px 0 7px; color: #ffffff; font-size: 25px; font-weight: 900; text-transform: uppercase; } .usb-orga__type { display: block; margin-bottom: 10px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; line-height: 1.3; text-transform: uppercase; } .usb-orga__node strong { display: block; color: var( --usb-white ); font-size: 18px; font-weight: 900; line-height: 1.35; text-transform: uppercase; } /* ========================================================== CONNECTEUR PRÉSIDENT ========================================================== */ .usb-orga__connector { position: relative; width: 100%; max-width: 1000px; height: 55px; margin: 0 auto; } .usb-orga__connector::before { position: absolute; top: 0; left: 50%; width: 1px; height: 28px; background: var( --usb-red ); content: ""; } .usb-orga__connector span { position: absolute; top: 28px; left: 16.66%; width: 66.68%; height: 1px; background: var( --usb-red ); } .usb-orga__connector::after { position: absolute; top: 28px; left: 16.66%; width: 66.68%; height: 27px; border-left: 1px solid var( --usb-red ); border-right: 1px solid var( --usb-red ); content: ""; } /* ========================================================== SECTIONS ========================================================== */ .usb-orga__section { position: relative; margin-top: 80px; padding-top: 40px; } .usb-orga__section::before { position: absolute; top: 0; left: 50%; width: 1px; height: 25px; background: var( --usb-white ); content: ""; } .usb-orga__section-heading { margin-bottom: 25px; } .usb-orga__section-heading span { display: block; margin-bottom: 7px; color: var( --usb-white ); font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; } .usb-orga__section-heading h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 25px, 3vw, 38px ); font-weight: 900; text-transform: uppercase; } /* ========================================================== BRANCHES ========================================================== */ .usb-orga__branch { min-width: 0; align-self: start; } /* ========================================================== CARTES REPLIABLES ========================================================== */ .usb-orga__node--expandable { padding: 0; overflow: hidden; } .usb-orga__node--expandable summary { display: flex; align-items: center; justify-content: space-between; min-height: 100px; padding: 22px; cursor: pointer; list-style: none; box-sizing: border-box; } .usb-orga__node--expandable summary::-webkit-details-marker { display: none; } .usb-orga__node--expandable summary::marker { content: ""; } .usb-orga__node--expandable summary small { display: block; margin-bottom: 8px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; } .usb-orga__node--expandable summary strong { font-size: 18px; } .usb-orga__node--expandable summary b { display: flex; align-items: center; justify-content: center; flex: 0 0 35px; width: 35px; height: 35px; margin-left: 16px; background: var( --usb-red ); color: #ffffff; font-size: 25px; font-weight: 400; line-height: 1; transition: transform 0.2s ease; } .usb-orga__node--expandable[open] summary b { transform: rotate( 45deg ); } .usb-orga__content { padding: 0 22px 22px; background: var( --usb-card-open ); border-top: 1px solid var( --usb-border ); } /* ========================================================== CONTENU DES PÔLES ========================================================== */ .usb-orga__person { padding: 16px 0; border-bottom: 1px solid rgba( 255, 255, 255, 0.08 ); } .usb-orga__person:last-child { border-bottom: none; } .usb-orga__person span { display: block; margin-bottom: 7px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; } .usb-orga__person p, .usb-orga__members { margin: 0; color: var( --usb-white ); font-size: 13px; font-weight: 600; line-height: 1.75; } /* ========================================================== TABLETTE ========================================================== */ @media (max-width: 1024px) { .usb-orga { padding: 45px 22px 70px; } .usb-orga__level--four { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__level--three { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__connector { display: none; } .usb-orga__level--three { margin-top: 25px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 700px) { .usb-orga { padding: 35px 14px 55px; } .usb-orga__header { margin-bottom: 42px; } .usb-orga__header h2 { font-size: 34px; } .usb-orga__level--two, .usb-orga__level--three, .usb-orga__level--four { grid-template-columns: 1fr; } .usb-orga__level { gap: 13px; } .usb-orga__node { padding: 20px; } .usb-orga__node--president { padding: 25px 16px; } .usb-orga__node--president h3 { font-size: 21px; } .usb-orga__node strong { font-size: 16px; } .usb-orga__section { margin-top: 55px; padding-top: 32px; } .usb-orga__section-heading { margin-bottom: 18px; } .usb-orga__section-heading h2 { font-size: 27px; } .usb-orga__node--expandable summary { min-height: 88px; padding: 18px; } .usb-orga__node--expandable summary strong { font-size: 16px; } .usb-orga__node--expandable summary b { flex-basis: 31px; width: 31px; height: 31px; margin-left: 10px; font-size: 22px; } .usb-orga__content { padding: 0 18px 18px; } } /* ========================================================== PETITS MOBILES ========================================================== */ @media (max-width: 380px) { .usb-orga__header h2 { font-size: 29px; } .usb-orga__node--expandable summary strong { font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-da8e25e *//* ========================================================== HISTOIRE USB STYLE CALENDRIER / ORGANIGRAMME ========================================================== */ /* ========================================================== VARIABLES ========================================================== */ .usb-history { --usb-red: #c80818; --usb-red-light: #e10a1b; --usb-black: #08090b; --usb-card: #111318; --usb-card-open: #0c0e12; --usb-white: #ffffff; --usb-muted: #a8abb1; --usb-border: rgba( 255, 255, 255, 0.75 ); --usb-line: rgba( 255, 255, 255, 0.25 ); width: 100%; padding: 55px 20px 90px; color: var( --usb-white ); box-sizing: border-box; } /* ========================================================== EN-TÊTE ========================================================== */ .usb-history__header { max-width: 900px; margin: 0 auto 70px; text-align: center; } .usb-history__eyebrow { display: block; margin-bottom: 12px; color: var( --usb-red-light ); font-size: 11px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; } .usb-history__header h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 35px, 5vw, 64px ); font-weight: 900; line-height: 1; text-transform: uppercase; } .usb-history__header p { margin: 15px 0 0; color: var( --usb-muted ); font-size: 14px; } /* ========================================================== CONTENEUR TIMELINE ========================================================== */ .usb-timeline { position: relative; width: 100%; max-width: 1250px; margin: 0 auto; padding: 10px 0 30px; box-sizing: border-box; } /* ========================================================== LIGNE CENTRALE ========================================================== */ .usb-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var( --usb-line ); transform: translateX( -50% ); } /* ========================================================== PROGRESSION ROUGE ========================================================== */ .usb-progress { position: absolute; top: 0; left: 50%; width: 3px; height: 0; background: var( --usb-red ); transform: translateX( -50% ); transition: height 0.15s linear; z-index: 1; } /* ========================================================== ÉLÉMENT ========================================================== */ .usb-item { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; margin-bottom: 85px; } /* Alternance gauche / droite */ .usb-item:nth-of-type( even ) { justify-content: flex-end; } /* ========================================================== PASTILLE ANNÉE ========================================================== */ .usb-dot { position: absolute; top: 55px; left: 50%; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var( --usb-red ); border: 3px solid var( --usb-white ); color: var( --usb-white ); box-shadow: 0 0 0 7px var( --usb-black ); font-size: 14px; font-weight: 900; letter-spacing: 0.5px; transform: translateX( -50% ); z-index: 5; } /* ========================================================== CARTE ========================================================== */ .usb-card { position: relative; width: calc( 50% - 65px ); overflow: hidden; background: var( --usb-card ); border: 1px solid var( --usb-border ); border-top: 3px solid var( --usb-red ); box-sizing: border-box; opacity: 0; transform: translateY( 45px ); transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.25s ease; } /* Animation */ .usb-item.visible .usb-card { opacity: 1; transform: translateY( 0 ); } /* Survol ordinateur */ @media ( hover: hover ) { .usb-card:hover { border-color: var( --usb-white ); transform: translateY( -5px ); } } /* ========================================================== IMAGE ========================================================== */ .usb-image { width: 100%; height: 250px; background-color: #202329; background-repeat: no-repeat; background-position: center; background-size: cover; } /* ========================================================== CONTENU ========================================================== */ .usb-card__content { padding: 26px; } /* Période */ .usb-card__period { display: block; margin-bottom: 10px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; } /* Titre */ .usb-card h3 { margin: 0 0 18px; color: var( --usb-white ); font-size: 25px; font-weight: 900; line-height: 1.15; text-transform: uppercase; } /* Paragraphes */ .usb-card p { margin: 0 0 15px; color: #d2d4d8; font-size: 14px; line-height: 1.75; } .usb-card p:last-child { margin-bottom: 0; } /* Texte important */ .usb-card strong { color: var( --usb-white ); font-weight: 800; } /* ========================================================== LISTES ========================================================== */ .usb-card ul { margin: 20px 0; padding: 17px 18px 17px 35px; background: rgba( 255, 255, 255, 0.04 ); border-left: 3px solid var( --usb-red ); } .usb-card li { margin: 7px 0; color: #d2d4d8; font-size: 13px; line-height: 1.55; } .usb-card li::marker { color: var( --usb-red ); } /* ========================================================== TABLETTE ========================================================== */ @media ( max-width: 1024px ) { .usb-history { padding: 45px 22px 70px; } .usb-card { width: calc( 50% - 48px ); } .usb-dot { width: 56px; height: 56px; font-size: 13px; } .usb-image { height: 210px; } .usb-card__content { padding: 22px; } .usb-card h3 { font-size: 21px; } } /* ========================================================== MOBILE ========================================================== */ @media ( max-width: 768px ) { .usb-history { padding: 35px 14px 60px; } .usb-history__header { margin-bottom: 45px; } .usb-history__header h2 { font-size: 34px; } /* Ligne à gauche */ .usb-line, .usb-progress { left: 25px; transform: none; } /* Tous les éléments sur une colonne */ .usb-item, .usb-item:nth-of-type( even ) { display: block; margin-bottom: 55px; } /* Année à gauche */ .usb-dot { top: 35px; left: 0; width: 50px; height: 50px; font-size: 11px; transform: none; } /* Carte */ .usb-card { width: auto; margin-left: 75px; } .usb-image { height: 200px; } .usb-card__content { padding: 20px; } .usb-card h3 { font-size: 21px; } } /* ========================================================== PETIT MOBILE ========================================================== */ @media ( max-width: 480px ) { .usb-history { padding-left: 8px; padding-right: 8px; } .usb-history__header h2 { font-size: 29px; } .usb-line, .usb-progress { left: 19px; } .usb-dot { width: 39px; height: 39px; font-size: 9px; } .usb-card { margin-left: 58px; } .usb-image { height: 155px; } .usb-card__content { padding: 17px; } .usb-card h3 { font-size: 18px; } .usb-card p { font-size: 13px; line-height: 1.65; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-e7e848a *//* ========================================================== ORGANIGRAMME USB STYLE CALENDRIER / RÉSULTATS ========================================================== */ /* ========================================================== VARIABLES ET CONTENEUR ========================================================== */ .usb-orga { --usb-red: #c80818; --usb-red-light: #e10a1b; --usb-black: #08090b; --usb-card: #111318; --usb-card-open: #0c0e12; --usb-white: #ffffff; --usb-muted: #a8abb1; --usb-border: rgba( 255, 255, 255, 0.14 ); --usb-line: rgba( 255, 255, 255, 0.20 ); width: 100%; max-width: 1400px; margin: 0 auto; padding: 55px 25px 90px; color: var( --usb-white ); box-sizing: border-box; } /* ========================================================== TITRE ========================================================== */ .usb-orga__header { margin-bottom: 65px; text-align: center; } .usb-orga__eyebrow { display: block; margin-bottom: 11px; color: var( --usb-red-light ); font-size: 11px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; } .usb-orga__header h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 35px, 5vw, 64px ); font-weight: 900; line-height: 1; text-transform: uppercase; } .usb-orga__header p { margin: 14px 0 0; color: var( --usb-muted ); font-size: 14px; } /* ========================================================== NIVEAUX DE L'ORGANIGRAMME ========================================================== */ .usb-orga__level { position: relative; display: grid; align-items: start; justify-content: center; gap: 20px; width: 100%; } .usb-orga__level--two { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__level--three { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } .usb-orga__level--four { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } /* ========================================================== CARTES ========================================================== */ .usb-orga__node { width: 100%; min-width: 0; padding: 23px; background: var( --usb-card ); border: 1px solid var( --usb-border ); border-top: 3px solid var( --usb-white ); box-sizing: border-box; } .usb-orga__node--president { width: min( 100%, 460px ); margin: 0 auto; padding: 30px; background: var( --usb-red ); border: none; text-align: center; } .usb-orga__node--president .usb-orga__type { color: rgba( 255, 255, 255, 0.75 ); } .usb-orga__node--president h3 { margin: 8px 0 7px; color: #ffffff; font-size: 25px; font-weight: 900; text-transform: uppercase; } .usb-orga__type { display: block; margin-bottom: 10px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; line-height: 1.3; text-transform: uppercase; } .usb-orga__node strong { display: block; color: var( --usb-white ); font-size: 18px; font-weight: 900; line-height: 1.35; text-transform: uppercase; } /* ========================================================== CONNECTEUR PRÉSIDENT ========================================================== */ .usb-orga__connector { position: relative; width: 100%; max-width: 1000px; height: 55px; margin: 0 auto; } .usb-orga__connector::before { position: absolute; top: 0; left: 50%; width: 1px; height: 28px; background: var( --usb-red ); content: ""; } .usb-orga__connector span { position: absolute; top: 28px; left: 16.66%; width: 66.68%; height: 1px; background: var( --usb-red ); } .usb-orga__connector::after { position: absolute; top: 28px; left: 16.66%; width: 66.68%; height: 27px; border-left: 1px solid var( --usb-red ); border-right: 1px solid var( --usb-red ); content: ""; } /* ========================================================== SECTIONS ========================================================== */ .usb-orga__section { position: relative; margin-top: 80px; padding-top: 40px; } .usb-orga__section::before { position: absolute; top: 0; left: 50%; width: 1px; height: 25px; background: var( --usb-white ); content: ""; } .usb-orga__section-heading { margin-bottom: 25px; } .usb-orga__section-heading span { display: block; margin-bottom: 7px; color: var( --usb-white ); font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; } .usb-orga__section-heading h2 { margin: 0; color: var( --usb-white ); font-size: clamp( 25px, 3vw, 38px ); font-weight: 900; text-transform: uppercase; } /* ========================================================== BRANCHES ========================================================== */ .usb-orga__branch { min-width: 0; align-self: start; } /* ========================================================== CARTES REPLIABLES ========================================================== */ .usb-orga__node--expandable { padding: 0; overflow: hidden; } .usb-orga__node--expandable summary { display: flex; align-items: center; justify-content: space-between; min-height: 100px; padding: 22px; cursor: pointer; list-style: none; box-sizing: border-box; } .usb-orga__node--expandable summary::-webkit-details-marker { display: none; } .usb-orga__node--expandable summary::marker { content: ""; } .usb-orga__node--expandable summary small { display: block; margin-bottom: 8px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; } .usb-orga__node--expandable summary strong { font-size: 18px; } .usb-orga__node--expandable summary b { display: flex; align-items: center; justify-content: center; flex: 0 0 35px; width: 35px; height: 35px; margin-left: 16px; background: var( --usb-red ); color: #ffffff; font-size: 25px; font-weight: 400; line-height: 1; transition: transform 0.2s ease; } .usb-orga__node--expandable[open] summary b { transform: rotate( 45deg ); } .usb-orga__content { padding: 0 22px 22px; background: var( --usb-card-open ); border-top: 1px solid var( --usb-border ); } /* ========================================================== CONTENU DES PÔLES ========================================================== */ .usb-orga__person { padding: 16px 0; border-bottom: 1px solid rgba( 255, 255, 255, 0.08 ); } .usb-orga__person:last-child { border-bottom: none; } .usb-orga__person span { display: block; margin-bottom: 7px; color: var( --usb-red-light ); font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; } .usb-orga__person p, .usb-orga__members { margin: 0; color: var( --usb-white ); font-size: 13px; font-weight: 600; line-height: 1.75; } /* ========================================================== TABLETTE ========================================================== */ @media (max-width: 1024px) { .usb-orga { padding: 45px 22px 70px; } .usb-orga__level--four { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__level--three { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .usb-orga__connector { display: none; } .usb-orga__level--three { margin-top: 25px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 700px) { .usb-orga { padding: 35px 14px 55px; } .usb-orga__header { margin-bottom: 42px; } .usb-orga__header h2 { font-size: 34px; } .usb-orga__level--two, .usb-orga__level--three, .usb-orga__level--four { grid-template-columns: 1fr; } .usb-orga__level { gap: 13px; } .usb-orga__node { padding: 20px; } .usb-orga__node--president { padding: 25px 16px; } .usb-orga__node--president h3 { font-size: 21px; } .usb-orga__node strong { font-size: 16px; } .usb-orga__section { margin-top: 55px; padding-top: 32px; } .usb-orga__section-heading { margin-bottom: 18px; } .usb-orga__section-heading h2 { font-size: 27px; } .usb-orga__node--expandable summary { min-height: 88px; padding: 18px; } .usb-orga__node--expandable summary strong { font-size: 16px; } .usb-orga__node--expandable summary b { flex-basis: 31px; width: 31px; height: 31px; margin-left: 10px; font-size: 22px; } .usb-orga__content { padding: 0 18px 18px; } } /* ========================================================== PETITS MOBILES ========================================================== */ @media (max-width: 380px) { .usb-orga__header h2 { font-size: 29px; } .usb-orga__node--expandable summary strong { font-size: 14px; } }/* End custom CSS */