@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');
/* V2 : couleurs. Les teintes "-text" passent le contraste WCAG AA (4.5:1) pour du texte. */
:root {
    --at-blue: #1e47c6;
    --at-navy: #1d2947;
    --at-teal: #10ccb6;          /* décoratif uniquement (2:1 sur blanc) */
    --at-teal-text: #0b7d70;     /* 5:1 */
    --at-coral: #f26653;         /* décoratif (3.1:1 sur blanc) */
    --at-coral-text: #c8412e;    /* 4.9:1 */
    --at-coral-hover: #b93a28;
    --at-surface: #f4f7fd;
    --at-border: #dfe5f3;
    --at-radius: 15px;
    --at-shadow: 5px 5px 20px -13px rgba(0,0,0,0.5);
    --at-flag: #fff4c2;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    letter-spacing: 0.5px;
    color: #1d2947;
    background-color: #ffffff;
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: initial !important;
}

a,
a:visited {
    color: var(--at-coral-text); /* V2 : était #f26653 (3.1:1) */
}

a:hover,
a:focus,
a:active {
    color: var(--at-coral-hover); /* V2 : était #f29353 */
}

p {
    font-size: 15px;
    font-style: normal;
    margin: 0 0 15px 0 !important;
    min-height: 20px;
    line-height: 2;
}

/* V2 : un <p></p> vide laissé par l'éditeur ne crée plus d'espace */
p:empty {
    min-height: 0;
    margin: 0 !important;
}

b,
strong {
    font-weight: bolder;
    color: #1e47c6;
}

main .editable ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

main .editable ul li {
    margin: 5px 0;
}

main .editable ul li::before {
    content: "\f061";
    font-family: Icons;
    font-size: 11px;
    vertical-align: top;
    color: #10ccb6;
    margin: 1%;
}

h1.main,
h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 35px;
    margin: 2% 0 2% 0 !important;
    color: #1e47c6;
    text-transform: uppercase;
    position: relative;
}

h1.main::after,
h1::after {
    content: "─";
    font-size: 120px;
    color: #10ccb6;
    display: block;
}

h1 b,
h2 b,
h3 b {
    font-weight: 900;
}

h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 35px;
    margin: 2% 0 2% 0 !important;
    color: #1e47c6;
    text-transform: uppercase;
}

h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 800;
    margin: 2% 0 2% 0 !important;
    color: #1d2947;
    text-transform: uppercase;
}

h2 span.sstitre {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 800;
    margin: 2% 0 2% 0 !important;
    color: #1d2947;
    text-transform: uppercase;
}

h1 span.black {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 800;
    margin: 2% 0 2% 0 !important;
    color: #1d2947;
    text-transform: uppercase;
}

h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    margin: 2% 0 2% 0 !important;
    color: var(--at-teal-text); /* V2 : était #10ccb6 (2:1) */
    text-transform: uppercase;
}

h5 {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1d2947;
}

h6 {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1e47c6;
}

main button,
main .button {
    padding: 10px 15px !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    background: var(--at-coral-text) !important; /* V2 : était #f26653 */
    color: white !important;
    display: inline-block;
    border-radius: 5px;
    min-height: 44px; /* V2 : cible tactile */
    line-height: 24px;
    text-decoration: none;
}

button:hover,
.button:hover {
    box-shadow: none;
    background: var(--at-coral-hover) !important; /* V2 */
    transition: all 0.4s ease 0s;
}

.spacing {
    margin-bottom: 5% !important;
}


/*** THEME ***********************************************************************/

.theme-61 header {
    background: rgb(12,59,206);
    background: linear-gradient(0deg, #0c3bce 0%, rgba(11,215,191,1) 100%);
    padding: 0 0 25px 0;
}

.theme-72 header {
    padding: 0 0 350px 0;
}

.theme-72 .content {
    margin-top: -400px;
}

/*** HEADER ***********************************************************************/

.wrapper {
    width: 1118px;
    margin: 0 auto;
    position: relative;
}

header {
    background: rgb(12,59,206);
    background: linear-gradient(0deg,#0c3bce 0%, rgba(11,215,191,1) 100%);
}

header .wrapper {
    display: flex;
    align-items: flex-end;
}

.left-block {
    width: 20%;
}

    .logo {
        display: block;
        max-width: 100%;
        padding: 20px 0 0 0;
    }

.right-block {
    width: 80%;
    text-align: right;
}

    .access {
        position: absolute;
        right: 0;
        top: 0;
    }

    .tryit,
    .join  {
        padding: 10px 15px !important;
        font-size: 14px !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        background: var(--at-coral-text) !important; /* V2 */
        color: white !important;
        display: inline-block;
        border-bottom-left-radius: 10px;
        margin-left: 15px;
        -webkit-box-shadow: 5px 3px 10px 0px rgba(0,0,0,0.5);
        -moz-box-shadow: 5px 3px 10px 0px rgba(0,0,0,0.5);
        box-shadow: 5px 3px 10px 0px rgba(0,0,0,0.5);
    }

    .tryit:hover,
    .join:hover  {
        transition: all 0.4s ease 0s;
        background: var(--at-coral-hover) !important; /* V2 */
    }

section.menu {
    width: 100%;
    position: relative;
}

.wrapper-slider {
    width: 1118px;
    margin: 0 auto;
    padding: 3% 0px;
}

.wrapper-slider img {
   max-width: 100%;
   width: 100%;
}

.waves {
    content: url(/f/6896748488006c410623573b37bc4a29b92912cd/waves-header.png);
    width: 100%;
}

/*** MENU RESPONSIVE VERTICAL *******************************************************/

header nav {
    position: relative;
    line-height: initial;
    z-index: 2;
}

/* button */

header nav .arrow {
    display: flex;
    justify-content: center;
    background: #005aa8;
    cursor: pointer;
    width: 30px;
    height: 100%;
    line-height: 30px;
    position: absolute;
    right: 0;
    top: 0;
}

header nav .arrow::before {
    content: "\f0dd";
    font-family: 'Icons';
}

/***/

header nav .button {
    width: 100%;
    padding: 1em;
    background: rgba(255,255,255,0.1) !important;
    color: white;
    cursor: pointer;
}

header nav .button:hover {
    width: 100%;
    padding: 1em;
    background: rgba(255,255,255,0.3) !important;
    color: white;
    cursor: pointer;
}

header nav .button:before {
    content: "Menu";
}

header nav .button+input {
    width: 100%;
    height: 50px;
    opacity: 0;
    position: absolute;
    cursor: pointer;
    margin: 0;
    left: 0;
    top: 0;
}

/**/

header nav ul {
    padding: 0;
    margin: 0;
    font-size: 0;
    color: transparent;
    overflow: hidden;
    transition: font-size 0.3s 0.2s, color 0.2s;
}

header nav input:checked+ul {
    font-size: 14px;
    color: #fff;
    transition: font-size 0.3s, color 0.2s 0.3s;
}

header nav li:focus>ul {
    font-size: 13px;
    color: #fff;
    transition: font-size 0.3s, color 0.2s 0.3s;
}

header nav li:hover,
header nav li:focus {

    border-bottom: none;
}

header nav li {
    list-style-type: none;
    outline: none;
    position: relative;
    border-bottom: none;
}

header nav li a,
header nav li .label,
header nav li a:visited {
    padding: 1em;
    display: block;
    cursor: pointer;
    color: inherit;
}

header nav li a:hover,
header nav li a:focus,
header nav li a:active {
    color: #fff;
    background: rgba(255,255,255,0.1) !important;
}

item-gallery[view="4528"] div.date {
	display: none;
}

item-gallery[view="4528"] div.title {
	min-height: 80px !important;
}


/*** MENU PRINCIPAL HORIZONTAL *******************************************************/

@media screen and (min-width: 900px) {

    /* button */
    header nav .button {
        display: none;
    }

    header nav ul li .arrow {
        display: none;
    }

    /* submenu show*/
    header nav ul li ul {
        display: none;
        z-index: 10;
    }

    header nav ul li:hover ul {
        display: block;
        position: absolute;
        transition: 0.4s;
    }

    /***/
    header nav ul {
        display: flex;
        justify-content: flex-end;
        overflow: inherit;
    }

    header nav ul li {
        list-style-type: none; /* V2 : "position: initial" supprimé (écrasé deux lignes plus bas) */
        outline: none;
        position: relative;
        border-bottom: 3px solid transparent !important;
    }

    header nav li:hover,
    header nav li:focus {
        color: #1e47c6 !important;
        border-bottom: 3px solid #1e47c6 !important;
    }


    header nav ul li a,
    header nav ul li .label,
    header nav ul li a:visited {
        font-size: 14px;
        color: white;
        text-transform: uppercase; 
    }

    header nav li a:hover,
    header nav li a:focus,
    header nav li a:active {
        color: #fff;
        background: none !important;
    }

    header nav ul li ul li a {
        font-size: 14px;
    }

    header nav ul li ul li a:hover {
        background: #167dd6 !important;
    }

    /* V2 : sous-menu "Solutions" */
    header nav ul li ul.submenu {
        min-width: 260px;
        background: var(--at-blue);
        border-radius: 0 0 10px 10px;
        box-shadow: 0 10px 25px -10px rgba(0,0,0,0.5);
        padding: 6px 0;
        text-align: left;
        flex-direction: column;
    }
    header nav ul li ul.submenu li {
        border-bottom: none !important;
    }
    header nav ul li ul.submenu li a {
        text-transform: none;
        padding: 0.8em 1.2em;
    }
    /* V2 : ouverture du sous-menu au clavier */
    header nav ul li:focus-within ul {
        display: block;
        position: absolute;
    }
    /* V2 : menu sur une seule ligne + flèche du sous-menu */
    header nav ul li a,
    header nav ul li .label {
        white-space: nowrap;
    }
    header nav ul li > .label::after {
        content: "\f0d7";
        font-family: 'Icons';
        margin-left: 6px;
    }
}

/* V2 : écrans 900-1180 px, menu resserré pour tenir sur une ligne */
@media screen and (min-width: 900px) and (max-width: 1180px) {
    header nav ul li a,
    header nav ul li .label,
    header nav ul li a:visited {
        font-size: 12.5px;
        padding: 1em 0.6em;
    }
}

/* V2 : focus visible au clavier (le menu supprimait le contour avec outline: none) */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
summary:focus-visible,
header nav li:focus-visible {
    outline: 3px solid var(--at-blue);
    outline-offset: 3px;
    border-radius: 4px;
}
header a:focus-visible,
header nav li:focus-visible,
footer a:focus-visible {
    outline-color: #ffffff;
}
header nav li.active > a {
    border-bottom: 3px solid #ffffff;
}


.item-data.block-26381.type-file {
	text-align: center;
}

/*** MAIN ***********************************************************************/

.tryfree {
    padding: 1% 0 1% 0;
    margin: 0;
    color: white;
    text-align: center;
    background: rgb(12,59,206);
    background: linear-gradient(0deg, rgba(12,59,206,1) 0%, rgba(11,215,191,1) 100%);
}

.tryfree h1,
.tryfree h2,
.tryfree h3,
.tryfree h4,
.tryfree h5,
.tryfree h6,
.tryfree p,
.tryfree b {
    color: white;
}

.tryfree a {
    padding: 10px 15px !important;
    font-size: 18px !important;
    font-weight: 700;
    text-transform: uppercase !important;
    cursor: pointer !important;
    background: var(--at-coral-text) !important; /* V2 */
    color: white !important;
    display: inline-block;
    border-radius: 5px;
    -webkit-box-shadow: 5px 3px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 3px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 5px 3px 10px 0px rgba(0,0,0,0.5);
}

.tryfree a:hover {
    transition: all 0.4s ease 0s;
    background: var(--at-coral-hover) !important; /* V2 */
}

/** associations **/

.asso-2,
.asso-3,
.asso-4,
.asso-5,
.asso-6,
.asso-7,
.asso-8 {
    margin-top: 3% !important;
    margin-bottom: 8% !important;
}

.asso-2 .three-columns > div:nth-child(1),
.asso-3 .three-columns > div:nth-child(2),
.asso-4 .three-columns > div:nth-child(1),
.asso-5 .three-columns > div:nth-child(2),
.asso-6 .three-columns > div:nth-child(1),
.asso-7 .three-columns > div:nth-child(2),
.asso-8 .three-columns > div:nth-child(1) {
    width: 15%;
}

.asso-2 .three-columns > div:nth-child(2),
.asso-3 .three-columns > div:nth-child(3),
.asso-4 .three-columns > div:nth-child(2),
.asso-5 .three-columns > div:nth-child(3),
.asso-6 .three-columns > div:nth-child(2),
.asso-7 .three-columns > div:nth-child(3),
.asso-8 .three-columns > div:nth-child(2) {
    width: 45%;
}

.asso-2 .three-columns > div:nth-child(3),
.asso-3 .three-columns > div:nth-child(1),
.asso-4 .three-columns > div:nth-child(3),
.asso-5 .three-columns > div:nth-child(1),
.asso-6 .three-columns > div:nth-child(3),
.asso-7 .three-columns > div:nth-child(1),
.asso-8 .three-columns > div:nth-child(3) {
    width: 36%;
    background: #1d2947;
    color: white;
    border-radius: 15px;
    padding: 2%;
    font-weight: 300;
    font-size: 14px;
}


/** Actualités **/

item-gallery .content > .title,
[data-is="item-gallery"] .content >
.title, item-gallery .content > .label,
[data-is="item-gallery"] .content > .label,
item-gallery .content > .text,
[data-is="item-gallery"] .content > .text,
item-gallery .content > .date,
[data-is="item-gallery"] .content > .date {
    margin: 0 !important;
  }


/** Fonctionnalités **/

.functionnality-structure {
    display: flex !important;
}

.left-img {
    margin: 0 3% 0 0;
    width: 37%;
}

.right-text {
    width: 60%;
}

.margin {
    margin-top: 12%;
}

.negative-margin {
    margin-top: -5% !important;
}

/** offre  **/

#pack .one-column > div {
    -webkit-box-shadow: 5px 5px 20px -13px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 5px 20px -13px rgba(0,0,0,0.5);
    box-shadow: 5px 5px 20px -13px rgba(0,0,0,0.5);
    border-radius: 15px;
    background: white;
    padding: 2%;
}

#pack .two-columns {
    -webkit-box-shadow: 0px 8px 20px -17px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 8px 20px -17px rgba(0,0,0,0.5);
    box-shadow: 0px 8px 20px -17px rgba(0,0,0,0.5);
    border-radius: 15px;
    background: white;
    padding: 2%;
}



#pack .one-column p,
#pack .two-columns p{
    font-size: 13px;
    line-height: 1.5;
}

#pack .one-column h3 {
    font-size: 30px;
    color: #f26653;
    text-transform: none;
    margin: 0 0 20px 0 !important;
}

#pack .one-column h4 {
    font-size: 25px;
    color: #1d2947;
    font-weight: 800;
    line-height: 0.8;
    margin: 25px 0 !important;
}

#pack .one-column h4 span {
    font-size: 14px;
    font-weight: 700;
}

#pack .one-column h5 {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    margin: 20px 0;
}

#pack .one-column table td {
    padding: 5px 0;
    text-align: center;
}

#pack .one-column hr {
    background-color: #0edbb3;
    height: 4px;
    border: 0;
}

#pack .one-column a {
    display: block;
    width: 210px;
}

#fonctionnality h2 {
    color: #f26653;
    font-size: 25px;
    font-weight: 800;
}

#fonctionnality .two-columns {
    padding: 2% 0;
    background: #1d2947;
    color: white;
    border-radius: 15px;
    padding: 2%;
}

/*** FOOTER ***********************************************************************/

.waves-footer {
    content: url(/f/4afdade0cbbbb3fc3a6b6b3d4a80a4355cef6556/waves-footer.png);
    width: 100%;
    margin-top: 6%;
}

footer {
    padding: 1% 0;
    margin: 0;
    background: rgb(12,59,206);
    background: linear-gradient(0deg, rgba(12,59,206,1) 0%, rgba(11,215,191,1) 100%);
    color: white;
    text-align: center;
    /*clip-path: polygon(82% 6%, 100% 15%, 100% 100%, 0 100%, 0 14%, 25% 0, 55% 14%);*/
}

footer div {
    text-align: left;
}

footer h3 {
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

footer h3::after {
    content: "";
    height: 2px;
    width: 60px;
    background: white;
    display: block;
    margin: 10px 0 20px 0;
}

footer a {
    color: white !important;
}

footer a:hover {
    text-decoration: underline !important;
}

footer .icon  {
    font-size: 25px;
    margin: 0 0 10px 0;
}

footer ul li a { /* V2 */
    display: inline-block;
    padding: 3px 0;
}

footer ul {
    overflow: inherit;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

footer p {
    font-size: 13px;
}

.mentions {
    text-align: center;
    font-size: 10px;
}

.legal {
    text-align: center;
    font-size: 11px;
    border-top: 1px solid #d3d3d3;
}

/***  actus  ***/


.item {
  margin: 0 0 4% 0;
}


/*** galerie ******************************************************************************/

.slick-dotted.slick-slider {
    margin-bottom: 0 !important;
}

file-carousel .carousel,
[data-is="file-carousel"] .carousel {
    max-width: 100% !important;
}

file-carousel img,
[data-is="file-carousel"] img {
    width: 100%;
}

.slick-initialized .slick-slide {
    width: 100%;
    position: relative;
}

.slick-slide img {
    padding: 0 !important;
    margin: 0 !important;
}

.slick-prev,
.slick-next {
    display: none !important;
}

/*** Carousel ***********************************************************************/

.carousel {
    position: relative;
}

.carousel .content {
    position: absolute;
    width: 45%;
    top: 40%;
    transform: translate(0, -40%);
}

.carousel .title {
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 800;
    line-height: 50px;
    color: #fff;
    text-align: left;
    padding-bottom: 3%;
    text-shadow: 5px 3px 10px rgba(0, 0, 0, 0.5);
}

.carousel .description {
    font-size: 20px;
    line-height: 1.5;
    color: #fff;
    margin: 0 0 20px 0;

}

.carousel .link,
.link_actu {
    text-align: center;
}

.carousel .link a,
.link_actu a {
    color: white !important;
    background: var(--at-coral-text); /* V2 */
    font-size: 16px;
    padding: 13px;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 5px;
    -webkit-box-shadow: 5px 3px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 3px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 5px 3px 10px 0px rgba(0,0,0,0.5);
}

.carousel .link a:hover,
.link_actu a:hover { /* V2 : le survol manquait sur .link_actu */
    transition: all 0.4s ease 0s;
    background: var(--at-coral-hover) !important;
}

/*** Login ***********************************************************************/

user-login .actions {
    margin-top: 6%;
}

/*** COLUMNS ***********************************************************************/
/**basics **/

.one-column>*,
.two-columns>*,
.three-columns>*,
.four-columns>*,
.six-columns>*,
.eight-columns>* {
    display: block;
    box-sizing: border-box;
    vertical-align: top;
    padding: 0;
}

.one-column,
.two-columns,
.three-columns,
.four-columns,
.six-columns,
.eight-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 2% 0;
    justify-content: space-between;
}

:root {
    --margin: 3%;
    --quarter: 25%;
    --third: 33%;
}

.one-column>* {
    width: 100%;
}

.one-column.centered>* {
    width: 50%;
    margin: 0 auto;
}

.two-columns.third-left> :first-child,
.two-columns.third-right> :last-child {
    width: var(--third);
}

.two-columns.quarter-left> :first-child,
.two-columns.quarter-right> :last-child {
    width: var(--quarter);
}

.two-columns.third-left> :last-child,
.two-columns.third-right> :first-child {
    width: calc((100% - (var(--margin) + var(--third))));
}

.two-columns.quarter-left> :last-child,
.two-columns.quarter-right> :first-child {
    width: calc((100% - (var(--margin) + var(--quarter))));
}

.two-columns>* {
    width: calc((100% - var(--margin)) / 2);
}

.three-columns>* {
    width: calc((100% - (var(--margin)) * 2) / 3);
}

.four-columns>* {
    width: calc((100% - (var(--margin)) * 3) / 4);
}

.six-columns>* {
    width: calc((100% - (var(--margin)) * 5) / 6);
}

.eight-columns>* {
    width: calc((100% - (var(--margin)) * 7) / 8);
}


/*** RESPONSIVE ***********************************************************************/

@media screen and (max-width: 1118px) {

    header .wrapper {
        width: 100%;
        margin: 0;
    }

    .wrapper {
        width: 96%;
        margin: 0 2%;
    }

    .wrapper-slider {
        padding: 5% 0px;
        width: 90%;
        margin: 0 5%;
    }

    .carousel .content {
        width: 50%;
    }

    .left-block {
        margin: 0 0 0 2%;
    }

    .access {
        right: 2%;
    }

}

@media screen and (max-width: 1064px) {

    .carousel .title {
        font-size: 35px;
        line-height: 40px;
    }

}


@media screen and (max-width: 900px) {

    header .wrapper {
        display: block;
    }

    .right-block {
        width: 100%;
        text-align: center;
        margin-top: 2%;
    }

    .wrapper-slider {
        padding: 2% 0px;
    }

    .slick-slide img {
        display: block;
        margin: 4% 0 !important;
    }

    .carousel .title {
        font-size: 30px;
        line-height: 33px;
    }

    .carousel .description {
        font-size: 15px;
        line-height: 1.5;
        color: #fff;
        margin: 0 0 30px 0;
    }

}


@media screen and (max-width: 850px) {

    .margin {
        margin-top: 0;
    }

    .left-img img {
        max-width: 100%;
        height: auto !important;
    }

    .left-block {
        width: 100%;
        margin: 0;
    }

    .logo {
        width: 190px;
    }


/*functionnality*/

#functionnality-3 .two-columns > div:nth-child(1),
#functionnality-5 .two-columns > div:nth-child(1),
#functionnality-7 .two-columns > div:nth-child(1),
#functionnality-9 .two-columns > div:nth-child(1) {
    order: 2;
}

/*assos*/

    .asso-2 .three-columns > div:nth-child(2),
    .asso-3 .three-columns > div:nth-child(3),
    .asso-4 .three-columns > div:nth-child(2),
    .asso-5 .three-columns > div:nth-child(3),
    .asso-6 .three-columns > div:nth-child(2),
    .asso-7 .three-columns > div:nth-child(3),
    .asso-8 .three-columns > div:nth-child(2) {
        width: 88%;
        order: 2;
    }

    .asso-2 .three-columns > div:nth-child(3),
    .asso-3 .three-columns > div:nth-child(1),
    .asso-4 .three-columns > div:nth-child(3),
    .asso-5 .three-columns > div:nth-child(1),
    .asso-6 .three-columns > div:nth-child(3),
    .asso-7 .three-columns > div:nth-child(1),
    .asso-8 .three-columns > div:nth-child(3) {
        width: 100%;
        order: 3;
        margin-bottom: 6%;
    }

    .asso-2 .three-columns > div:nth-child(1),
    .asso-3 .three-columns > div:nth-child(2),
    .asso-4 .three-columns > div:nth-child(1),
    .asso-5 .three-columns > div:nth-child(2),
    .asso-6 .three-columns > div:nth-child(1),
    .asso-7 .three-columns > div:nth-child(2),
    .asso-8 .three-columns > div:nth-child(1) {
        width: 10%;
        order: 1;
        margin-right: 2%;
    }

    /*footer**/

    footer .four-columns>* {
        width: 50%;
        margin: 0 0 4% 0;
        padding: 0 2%;
    }

    /***/

    .one-column>* {
        width: 100%;
    }

    .one-column.centered>* {
        width: 100%;
    }

    .two-columns>* {
        width: 100%;
    }

    .two-columns.third-left> :first-child,
    .two-columns.third-right> :last-child {
        width: 100%;
    }

    .two-columns.third-left> :last-child,
    .two-columns.third-right> :first-child {
        width: 100%;
    }

    .two-columns.quarter-left> :first-child,
    .two-columns.quarter-right> :last-child {
        width: 100%;
    }

    .two-columns.quarter-left> :last-child,
    .two-columns.quarter-right> :first-child {
        width: 100%;
    }

    .four-columns>* {
        width: 100%;
    }

    .six-columns>* {
        width: 100%;
    }

    .eight-columns>* {
        width: 100%;
    }

}


@media screen and (max-width: 700px) {

    .carousel .description {
        display: none;
    }

    .carousel .title {
        font-size: 27px;
        margin: 0 0 6% 0;
    }


}

@media screen and (max-width: 550px) {

    .wrapper-slider {
        display: none;
    }

    h1.main, h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 28px;
    }

    #fonctionnality h2 {
        font-size: 20px;
    }

    .access {
        right: 0;
        width: 100%;
    }

    .tryit, .join {
        padding: 6px 10px !important;
        font-size: 13px !important;
        margin-left: 10px;
    }

    .left-block {
        padding: 45px 0 0 0;
    }

    .logo {
        margin: 0 auto;
    }

    .three-columns>* {
        width: 100%;
    }

    /*footer**/

    footer .four-columns>* {
        width: 100%;
        margin: 0 0 4% 0;
        padding: 0 2%;
        text-align: center;
    }

    footer h3::after {
        margin: 10px auto;
    }

}


@media screen and (max-width: 400px) {

    h1.main, h1, h2, h3 {
        text-align: center !important;
    }

    .functionnality-structure {
        display: initial !important;
    }

    .right-text,
    .left-img {
        width: 100%;
    }

    .tryfree {
        padding: 2%;
    }

    .asso-2 .three-columns > div:nth-child(1),
    .asso-3 .three-columns > div:nth-child(2),
    .asso-4 .three-columns > div:nth-child(1),
    .asso-5 .three-columns > div:nth-child(2),
    .asso-6 .three-columns > div:nth-child(1),
    .asso-7 .three-columns > div:nth-child(2),
    .asso-8 .three-columns > div:nth-child(1) {
        width: 100%;
        order: 1;
        margin-right: 0;
    }

    .asso-2 .three-columns > div:nth-child(2),
    .asso-3 .three-columns > div:nth-child(3),
    .asso-4 .three-columns > div:nth-child(2),
    .asso-5 .three-columns > div:nth-child(3),
    .asso-6 .three-columns > div:nth-child(2),
    .asso-7 .three-columns > div:nth-child(3),
    .asso-8 .three-columns > div:nth-child(2) {
        width: 100%;
        text-align: center !important;
    }

}

/*** V2 : BLOCS "at" ET COMPOSANTS ************************************************
   Ne s'appliquent qu'aux blocs qui ont la classe "at" : les pages actuelles ne changent pas.
   **********************************************************************************/

/* ---------------------------------------------------------------------------
   2. BLOCS "at" : typographie plus lisible
   --------------------------------------------------------------------------- */

.at p,
.at li {
    font-size: 16px;
    line-height: 1.7;
}
.at p {
    max-width: 75ch;
}
/* texte pleine largeur dans les blocs à une colonne, sauf les paragraphes centrés */
.at .one-column p {
    max-width: none;
}
.at .one-column .text-center p,
.at .one-column p.text-center {
    max-width: 75ch;
}
.at .text-center p,
.at p.text-center {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Titres de section : casse normale, plus lisibles que les capitales légères */
.at h2 {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    color: var(--at-blue);
    margin: 0 0 18px 0 !important;
}
.at h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: none;
    color: var(--at-navy);
    margin: 0 0 10px 0 !important;
}
.at h1 {
    line-height: 1.25;
}
/* Le trait décoratif sous le H1 (120px) crée un grand vide : on le réduit */
.at h1::after {
    font-size: 70px;
    line-height: 0.5;
    margin-top: 18px;
}
.at h1.text-center::after {
    text-align: center;
}

/* Sur-titre (remplace les h4 turquoise peu lisibles) */
.at .at-kicker {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--at-teal-text);
    margin: 0 0 8px 0 !important;
    min-height: 0;
}

/* Chapô */
.at .at-lead {
    font-size: 19px;
    line-height: 1.6;
    color: var(--at-navy);
}

.at a:not(.button) {
    color: var(--at-coral-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.at a:not(.button):hover {
    color: var(--at-coral-hover);
}

/* Repères à compléter : visibles tant qu'ils ne sont pas remplacés */
.at .at-todo {
    background: var(--at-flag);
    border: 1px dashed #c9a200;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
}

/* ---------------------------------------------------------------------------
   3. COMPOSANTS
   --------------------------------------------------------------------------- */

/* Groupe de boutons */
.at .at-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 20px 0 0 0;
}
.at .at-actions.text-center {
    justify-content: center;
}
.at .button.at-ghost {
    background: transparent !important;
    color: var(--at-blue) !important;
    border: 2px solid var(--at-blue);
}
.at .button.at-ghost:hover {
    background: var(--at-blue) !important;
    color: #fff !important;
}

/* Barre de preuves */
.at ul.at-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 18px 0 0 0;
}
.at ul.at-proof li {
    margin: 0;
    padding: 8px 14px;
    background: var(--at-surface);
    border: 1px solid var(--at-border);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--at-navy);
}
.at ul.at-proof li::before {
    content: none !important;
}
.at ul.at-proof li .icon {
    color: var(--at-teal-text);
}

/* Panneau (fond clair) */
.at .at-panel {
    background: var(--at-surface);
    border-radius: var(--at-radius);
    padding: 32px;
}

/* Cartes */
.at .at-card {
    background: #fff;
    border: 1px solid var(--at-border);
    border-radius: var(--at-radius);
    box-shadow: var(--at-shadow);
    padding: 26px;
    display: flex !important;
    flex-direction: column;
    margin-bottom: 20px;
}
.at .at-card > .icon {
    font-size: 28px;
    color: var(--at-blue);
    margin: 0 0 14px 0;
    height: auto;
}
.at .at-card .at-card-link {
    margin-top: auto;
    padding-top: 10px;
    font-weight: 600;
    align-self: flex-start;
}
.at .at-card.at-dark {
    background: var(--at-navy);
    border-color: var(--at-navy);
    color: #fff;
}
.at .at-card.at-dark h3,
.at .at-card.at-dark p,
.at .at-card.at-dark b,
.at .at-card.at-dark strong,
.at .at-card.at-dark a:not(.button) {
    color: #fff;
}
.at .at-card.at-dark > .icon {
    color: var(--at-teal);   /* décoratif sur fond sombre : 8.2:1 */
}

/* Chiffres clés */
.at .at-stat {
    text-align: center;
    padding: 18px 10px;
}
.at .at-stat .at-stat-value {
    display: block;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--at-blue);
    font-variant-numeric: tabular-nums;
}
.at .at-stat .at-stat-label {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 6px;
}

/* Étapes numérotées */
.at ol.at-steps {
    counter-reset: at-step;
    list-style: none;
    margin: 0;
    padding: 0;
}
.at ol.at-steps > li {
    counter-increment: at-step;
    position: relative;
    padding: 0 0 22px 62px;
    margin: 0;
}
.at ol.at-steps > li::before {
    content: counter(at-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--at-blue);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    line-height: 42px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}
.at ol.at-steps > li::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 46px;
    bottom: 4px;
    width: 2px;
    background: var(--at-border);
}
.at ol.at-steps > li:last-child::after {
    display: none;
}
.at ol.at-steps > li h3 {
    margin-bottom: 4px !important;
}

/* Citations */
.at blockquote.at-quote {
    margin: 0 0 20px 0;
    padding: 24px 26px 20px 26px;
    background: #fff;
    border-left: 5px solid var(--at-teal);
    border-radius: 0 var(--at-radius) var(--at-radius) 0;
    box-shadow: var(--at-shadow);
}
.at blockquote.at-quote p {
    font-style: italic;
    max-width: none;
}
.at blockquote.at-quote footer,
.at blockquote.at-quote .at-quote-author {
    background: none;
    padding: 0;
    margin: 0;
    text-align: left;
    color: var(--at-navy);
    font-size: 14px;
    font-weight: 600;
}

/* Logos clients */
.at .at-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px 40px;
}
.at .at-logos img {
    max-height: 70px;
    width: auto;
    height: auto;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: filter 0.2s, opacity 0.2s;
}
.at .at-logos img:hover {
    filter: none;
    opacity: 1;
}

/* Sommaire */
.at ul.at-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.at ul.at-toc li {
    margin: 0;
}
.at ul.at-toc li::before {
    content: none !important;
}
.at ul.at-toc a {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--at-border);
    border-radius: 999px;
    font-size: 14px;
    text-decoration: none !important;
    color: var(--at-blue) !important;
    background: #fff;
}
.at ul.at-toc a:hover {
    background: var(--at-surface);
}

/* Tableaux */
.at table.at-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
    margin: 10px 0 20px 0;
}
.at table.at-table th,
.at table.at-table td {
    border-bottom: 1px solid var(--at-border);
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
}
.at table.at-table thead th {
    background: var(--at-navy);
    color: #fff;
    font-weight: 600;
}
.at table.at-table tbody tr:nth-child(even) {
    background: var(--at-surface);
}
.at table.at-table .at-highlight {
    background: #e7fbf8;
    font-weight: 500;
}
.at .at-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* FAQ en accordéon (sans JavaScript) */
.at details.at-faq {
    border: 1px solid var(--at-border);
    border-radius: 10px;
    margin: 0 0 12px 0;
    background: #fff;
}
.at details.at-faq summary {
    cursor: pointer;
    padding: 16px 48px 16px 20px;
    font-weight: 600;
    font-size: 16px;
    color: var(--at-navy);
    list-style: none;
    position: relative;
    min-height: 44px;
}
.at details.at-faq summary::-webkit-details-marker {
    display: none;
}
.at details.at-faq summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: var(--at-blue);
}
.at details.at-faq[open] summary::after {
    content: "\2212";
}
.at details.at-faq > div,
.at details.at-faq > p {
    padding: 0 20px 6px 20px;
}

/* Encadré "à savoir" */
.at .at-note {
    border-left: 4px solid var(--at-blue);
    background: var(--at-surface);
    padding: 16px 20px;
    border-radius: 0 10px 10px 0;
    margin: 0 0 20px 0;
}

/* Bandeau d'appel à l'action (complète .tryfree existant) */
.at.tryfree,
.tryfree.at {
    border-radius: var(--at-radius);
    padding: 40px 24px;
    /* .tryfree { margin: 0 } est déclaré après .wrapper { margin: 0 auto } dans le thème :
       sans ceci, le bandeau se colle à gauche au-delà de 1118 px */
    margin-left: auto;
    margin-right: auto;
}
.at.tryfree a:not(.button) {
    text-decoration: none;
}
.at.tryfree h2 {
    color: #fff;
}
.at.tryfree p {
    color: #fff;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------------------------------------------------------------------------
   4. RESPONSIVE & MOUVEMENT
   --------------------------------------------------------------------------- */

@media screen and (max-width: 850px) {
    .at h2 { font-size: 25px; }
    .at .at-lead { font-size: 17px; }
    .at .at-panel { padding: 22px; }
    .at .at-stat .at-stat-value { font-size: 32px; }
}

@media screen and (max-width: 550px) {
    .at h2 { font-size: 22px; }
    .at .at-actions { flex-direction: column; align-items: stretch; }
    .at .at-actions .button { text-align: center; }
    .at ol.at-steps > li { padding-left: 54px; }
    .at table.at-table { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   5. COULEUR : bandeaux pleine largeur, illustrations, accents
   Les fonds pleine largeur utilisent border-image (pas de défilement horizontal,
   aucune modification de la structure du CMS : il suffit d'ajouter une classe au bloc).
   Dégradé texte blanc : #0c3bce -> #0b7d70 (contraste 8.3 et 5.0, conforme AA).
   --------------------------------------------------------------------------- */

:root {
    --at-gradient: linear-gradient(120deg, #0c3bce 0%, #0b6e9a 55%, #0b7d70 100%);
    --at-tint: #eef8fa;
    --at-teal-tint: #e6f7f4;
    --at-blue-tint: #e9eefc;
    --at-coral-tint: #fdeeeb;
}

/* Bandeau clair pleine largeur */
.at.at-band {
    border-image: linear-gradient(var(--at-tint), var(--at-tint)) fill 0 // 0 100vw;
    padding-top: 56px;
    padding-bottom: 40px;
}

/* Bandeau dégradé pleine largeur (même famille que l'en-tête, version foncée lisible) */
.at.at-band-blue {
    border-image: var(--at-gradient) fill 0 // 0 100vw;
    padding-top: 60px;
    padding-bottom: 44px;
    color: #fff;
}
/* texte blanc partout dans le bandeau... */
.at.at-band-blue h2,
.at.at-band-blue h3,
.at.at-band-blue p,
.at.at-band-blue li,
.at.at-band-blue b,
.at.at-band-blue strong,
.at.at-band-blue .at-kicker,
.at.at-band-blue .at-stat-label,
.at.at-band-blue a:not(.button) {
    color: #fff;
}
/* ...sauf dans les cartes blanches, qui gardent leurs couleurs */
.at.at-band-blue .at-card:not(.at-dark) h3,
.at.at-band-blue .at-card:not(.at-dark) p,
.at.at-band-blue .at-card:not(.at-dark) li {
    color: var(--at-navy);
}
.at.at-band-blue .at-card:not(.at-dark) b,
.at.at-band-blue .at-card:not(.at-dark) strong {
    color: var(--at-blue);
}
.at.at-band-blue .at-card:not(.at-dark) a:not(.button) {
    color: var(--at-coral-text);
}
.at.at-band-blue .at-kicker {
    background: rgba(255,255,255,0.16);
}
.at.at-band-blue h2.text-center::after {
    background: #fff;
}

/* Bandeau d'appel à l'action : pleine largeur, comme l'ancien "Besoin d'être convaincu" */
.at.tryfree {
    background: none;
    border-image: var(--at-gradient) fill 0 // 0 100vw;
    border-radius: 0;
    padding: 56px 24px 48px 24px;
}
.at.tryfree img.at-mascotte {
    display: block;
    margin: 0 auto 18px auto;
    max-width: 184px;
    height: auto;
}

/* Sur-titre en pastille */
.at .at-kicker {
    display: inline-block;
    background: var(--at-teal-tint);
    padding: 4px 12px;
    border-radius: 999px;
}
.at .one-column .at-kicker.text-center {
    display: table;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Petit trait de couleur sous les titres centrés (rappel du trait du H1) */
.at h2.text-center::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: var(--at-teal);
    margin: 14px auto 0 auto;
}

/* Icônes des cartes dans une pastille colorée, couleurs en alternance */
.at .at-card > .icon {
    width: 56px;
    height: 56px !important;
    line-height: 56px;
    border-radius: 50%;
    text-align: center;
    font-size: 24px;
    background: var(--at-blue-tint);
    color: var(--at-blue);
    margin-bottom: 16px;
}
.at .at-card:nth-child(3n+2) > .icon {
    background: var(--at-teal-tint);
    color: var(--at-teal-text);
}
.at .at-card:nth-child(3n+3) > .icon {
    background: var(--at-coral-tint);
    color: var(--at-coral-text);
}
.at .at-card.at-dark > .icon {
    background: rgba(16,204,182,0.18);
    color: var(--at-teal);
}

/* Liseré de couleur en haut des cartes */
.at .at-card {
    border-top: 4px solid var(--at-blue);
}
.at .at-card:nth-child(3n+2) {
    border-top-color: var(--at-teal);
}
.at .at-card:nth-child(3n+3) {
    border-top-color: var(--at-coral);
}
.at .at-card.at-dark {
    border-top-color: var(--at-teal);
}

/* Cartes avec illustration (mascottes Assotools) */
.at .at-card img.at-illu {
    display: block;
    width: 130px;
    height: auto;
    margin: 0 auto 12px auto;
}
.at .at-card.at-card-illu {
    text-align: center;
    border-top: none;
}
.at .at-card.at-card-illu .at-card-link {
    align-self: center;
}
.at .at-card.at-card-illu:hover {
    transform: translateY(-3px);
    box-shadow: 5px 12px 24px -12px rgba(12,59,206,0.35);
}
.at .at-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Chiffres clés en couleur */
.at .at-stat .at-stat-value {
    background: var(--at-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.at.at-band-blue .at-stat .at-stat-value {
    background: none;
    color: #fff;
}

/* Barre de preuves : pastilles blanches sur fond coloré clair */
.at ul.at-proof li {
    background: #fff;
    border-color: var(--at-teal);
}

@media screen and (max-width: 850px) {
    .at.at-band,
    .at.at-band-blue {
        padding-top: 40px;
        padding-bottom: 28px;
    }
    .at.tryfree {
        padding: 40px 16px 36px 16px;
    }
}

/* Liste des références clients (page Témoignages) */
.at ul.at-references {
    columns: 2;
    column-gap: 40px;
}
.at ul.at-references li {
    break-inside: avoid;
}
@media screen and (max-width: 550px) {
    .at ul.at-references { columns: 1; }
}

/* Logo client au-dessus d'une étude de cas ou d'une citation */
.at img.at-client-logo {
    display: block;
    width: 120px;
    height: auto;
    margin: 0 0 14px 0;
    border-radius: 10px;
}

/* Grilles de 3 cartes : quand la dernière ligne n'a que 2 cartes, elles restent
   alignées à gauche au lieu de s'écarter aux deux bords */
.at .three-columns::after {
    content: "";
    width: calc((100% - (var(--margin)) * 2) / 3);
}
@media screen and (max-width: 550px) {
    .at .three-columns::after { display: none; }
}

/* V2 : sous 400 px le thème centre tous les titres ; dans les blocs "at" on garde
   l'alignement à gauche (étapes numérotées, cartes), sauf les titres centrés exprès */
@media screen and (max-width: 400px) {
    .at h1:not(.text-center),
    .at h2:not(.text-center),
    .at h3 {
        text-align: left !important;
    }
}

.transition .item {
	margin: 0;
}

/* Banière Cookie*/
#tarteaucitronRoot #tarteaucitronAlertBig { background: #1d2947 !important; font-family: Poppins, Arial, sans-serif !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert { color: #fff !important; font-family: Poppins, Arial, sans-serif !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 { background: #fff !important; color: #1d2947 !important; border: 2px solid #fff !important; border-radius: 6px; padding: 6px 14px !important; font-weight: 600; font-family: Poppins, Arial, sans-serif !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert { background: transparent !important; color: #fff !important; border: 2px solid #fff !important; border-radius: 6px; padding: 6px 14px !important; font-weight: 600; font-family: Poppins, Arial, sans-serif !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl { color: #fff !important; text-decoration: underline; font-family: Poppins, Arial, sans-serif !important; }
#tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronCheck::before,
#tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronCross::before { color: #1d2947 !important; }
#tarteaucitronRoot #tarteaucitronAlertBig button:focus-visible { outline: 3px solid #10ccb6 !important; outline-offset: 2px; }