*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f7fbfd;color:#102737}.top{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,80px);background:#fff;border-bottom:1px solid #e3edf2;position:sticky;top:0;z-index:30}.brand img{width:155px;max-height:66px;object-fit:contain}.top nav{display:flex;align-items:center;gap:8px}.top nav>a,.drop>button{border:0;background:transparent;text-decoration:none;color:#17384c;padding:13px 12px;border-radius:10px;font-weight:700;cursor:pointer}.top nav>a:hover,.drop>button:hover{background:#edf7fc}.drop{position:relative}.submenu{position:absolute;top:45px;left:0;min-width:245px;padding:10px;background:#fff;border:1px solid #dce9f0;border-radius:14px;box-shadow:0 18px 55px #17496c1f;display:none}.drop:hover .submenu,.drop:focus-within .submenu{display:grid}.submenu a{padding:11px 12px;text-decoration:none;color:#25465a;border-radius:9px}.submenu a:hover{background:#edf7fc}.internet-pill{background:#0c6fa5!important;color:#fff!important}.navtoggle{display:none;border:0;background:#eef7fb;padding:10px 13px;border-radius:10px;font-size:1.25rem}.hero{min-height:620px;padding:70px clamp(22px,7vw,110px);display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:40px;background:radial-gradient(circle at 85% 20%,#cfeefa,transparent 32%),linear-gradient(135deg,#fbfeff,#edf8fd)}.eyebrow,.section-head span,.pagehero span{color:#0c75ab;text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;font-weight:900}.hero h1,.pagehero h1{font-size:clamp(2.4rem,5vw,5.1rem);line-height:1.02;margin:.22em 0;color:#0a273a}.hero p,.pagehero p{font-size:1.12rem;line-height:1.7;color:#5b7280;max-width:720px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.primary,.wifi{display:inline-flex;align-items:center;gap:10px;padding:15px 20px;border-radius:13px;text-decoration:none;font-weight:850}.primary{background:linear-gradient(135deg,#0c6598,#168bc1);color:#fff;box-shadow:0 12px 25px #0b669533}.wifi{background:#fff;color:#0c6598;border:1px solid #cfe3ed}.wifi span,.wifi-icon{font-size:2rem}.visual{display:grid;place-items:center}.orb{width:min(380px,70vw);aspect-ratio:1;border-radius:38% 62% 63% 37%/45% 44% 56% 55%;display:grid;place-items:center;text-align:center;background:linear-gradient(145deg,#0b5c8d,#2294ca);color:#fff;font-size:5rem;font-weight:900;box-shadow:0 35px 70px #176b9133;animation:morph 8s ease-in-out infinite}.orb small{font-size:1.2rem;font-weight:700}.section{padding:80px clamp(22px,7vw,110px)}.section-head h2{font-size:clamp(1.8rem,3vw,3rem);margin:.25em 0 1em}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fff;border:1px solid #dfebf1;border-radius:20px;padding:25px;text-decoration:none;color:inherit;box-shadow:0 15px 40px #173e5510;transition:.2s}.card:hover{transform:translateY(-5px);box-shadow:0 22px 50px #173e5520}.card i{font-style:normal;font-size:1.8rem;color:#0c75ab}.card p{color:#667d8a;line-height:1.6}.dark{background:#0e2d40;color:#fff}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.metrics div{padding:28px;border:1px solid #ffffff1d;border-radius:18px;background:#ffffff09}.metrics b,.metrics span{display:block}.metrics b{font-size:2.2rem}.metrics span{color:#bad1dc;margin-top:7px}.pagehero{padding:80px clamp(22px,7vw,110px) 50px;background:#eef8fd}.prose{max-width:920px;line-height:1.8;color:#385568}.internet-box{width:min(720px,92vw);margin:70px auto;padding:45px;text-align:center;background:#fff;border:1px solid #dceaf0;border-radius:28px;box-shadow:0 25px 60px #153f541a}.internet-box h1{font-size:2.6rem;margin:.2em}.big{margin-top:18px}.note{color:#728691;font-size:.9rem;margin-top:22px}.footer{display:flex;justify-content:space-between;gap:20px;padding:30px clamp(22px,7vw,110px);background:#082536;color:#d3e4ec}.footer p{margin:.4em 0;color:#9eb8c5}.live{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.stat{background:#ffffff0f;border:1px solid #ffffff18;padding:10px 12px;border-radius:999px}@keyframes morph{0%,100%{border-radius:38% 62% 63% 37%/45% 44% 56% 55%}50%{border-radius:58% 42% 38% 62%/51% 61% 39% 49%}}@media(max-width:900px){.navtoggle{display:block}.top nav{position:absolute;top:86px;left:12px;right:12px;display:none;flex-direction:column;align-items:stretch;background:#fff;border:1px solid #dbe8ef;border-radius:16px;padding:12px;box-shadow:0 18px 50px #123d561c}.top nav.open{display:flex}.drop>button{text-align:left;width:100%}.submenu{position:static;box-shadow:none;border:0;background:#f5fafc;margin:4px 0}.drop:hover .submenu{display:none}.drop.open .submenu{display:grid}.hero{grid-template-columns:1fr;min-height:auto}.visual{order:-1}.orb{width:230px;font-size:3.3rem}.cards{grid-template-columns:1fr 1fr}.metrics{grid-template-columns:1fr}.footer{flex-direction:column}}@media(max-width:600px){.top{height:74px}.brand img{width:130px}.top nav{top:74px}.hero{padding-top:35px}.cards{grid-template-columns:1fr}.internet-box{padding:28px 20px}.section{padding-top:55px;padding-bottom:55px}}
/*
 * YB-DIGILAB FRONTEND RICHTEXT V1
 * Présentation publique des structures éditoriales autorisées.
 * Portée volontairement limitée à .section.prose.
 */

.section.prose h2,
.section.prose h3,
.section.prose h4 {
    color: #17384c;
    line-height: 1.3;
    margin: 1.4em 0 .55em;
}

.section.prose p {
    margin: 0 0 1em;
}

.section.prose ol,
.section.prose ul {
    margin: 1em 0;
    padding-left: 1.7rem;
}

/*
 * Quill 2 peut stocker les puces et les éléments numérotés
 * dans le même <ol>. Les marqueurs sont donc reconstruits
 * à partir de data-list.
 */
.section.prose ol:has(> li[data-list]) {
    list-style: none;
    padding-left: 0;
    counter-reset: yb-richtext-list;
}

.section.prose li[data-list] {
    position: relative;
    list-style: none;
    padding-left: 2rem;
    margin: .35em 0;
}

.section.prose li[data-list="ordered"] {
    counter-increment: yb-richtext-list;
}

.section.prose li[data-list="ordered"]::before {
    content: counter(yb-richtext-list) ".";
    position: absolute;
    left: 0;
    width: 1.5rem;
    text-align: right;
    font-weight: 700;
    color: #0c75ab;
}

.section.prose li[data-list="bullet"]::before {
    content: "•";
    position: absolute;
    left: .45rem;
    font-weight: 900;
    color: #0c75ab;
}

.section.prose blockquote {
    margin: 1.4em 0;
    padding: .8em 1.1em;
    border-left: 4px solid #0c75ab;
    background: #eef8fd;
    color: #385568;
    border-radius: 0 10px 10px 0;
}

.section.prose .ql-code-block-container {
    margin: 1.4em 0;
    padding: .9rem 1rem;
    overflow-x: auto;
    background: #0e2d40;
    color: #eaf5fa;
    border-radius: 12px;
    line-height: 1.55;
}

.section.prose .ql-code-block {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
                 Consolas, "Liberation Mono", "Courier New", monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.section.prose a {
    color: #0c6fa5;
    text-decoration-thickness: .08em;
    text-underline-offset: .15em;
}

.section.prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.4em auto;
    border-radius: 12px;
}

@media (max-width: 600px) {
    .section.prose li[data-list] {
        padding-left: 1.75rem;
    }

    .section.prose blockquote {
        margin-left: 0;
        margin-right: 0;
    }

    .section.prose .ql-code-block-container {
        padding: .75rem;
        border-radius: 9px;
    }
}

/*
 * YB-DIGILAB CONTROLLED COLORS V1
 * Palette RichText locale.
 * Correspondance stricte avec core/richtext.py.
 */

/* Texte */

.yb-color-red { color: rgb(230, 0, 0); }
.yb-color-orange { color: rgb(255, 153, 0); }
.yb-color-yellow { color: rgb(255, 255, 0); }
.yb-color-green { color: rgb(0, 138, 0); }
.yb-color-blue { color: rgb(0, 102, 204); }
.yb-color-purple { color: rgb(153, 51, 255); }

.yb-color-white { color: rgb(255, 255, 255); }

.yb-color-light-red { color: rgb(250, 204, 204); }
.yb-color-light-orange { color: rgb(255, 235, 204); }
.yb-color-light-yellow { color: rgb(255, 255, 204); }
.yb-color-light-green { color: rgb(204, 232, 204); }
.yb-color-light-blue { color: rgb(204, 224, 245); }
.yb-color-light-purple { color: rgb(235, 214, 255); }

.yb-color-gray { color: rgb(187, 187, 187); }

.yb-color-medium-red { color: rgb(240, 102, 102); }
.yb-color-medium-orange { color: rgb(255, 194, 102); }
.yb-color-medium-yellow { color: rgb(255, 255, 102); }
.yb-color-medium-green { color: rgb(102, 185, 102); }
.yb-color-medium-blue { color: rgb(102, 163, 224); }
.yb-color-medium-purple { color: rgb(194, 133, 255); }

.yb-color-dark-gray { color: rgb(136, 136, 136); }

.yb-color-dark-red { color: rgb(161, 0, 0); }
.yb-color-dark-orange { color: rgb(178, 107, 0); }
.yb-color-dark-yellow { color: rgb(178, 178, 0); }
.yb-color-dark-green { color: rgb(0, 97, 0); }
.yb-color-dark-blue { color: rgb(0, 71, 178); }
.yb-color-dark-purple { color: rgb(107, 36, 178); }

.yb-color-charcoal { color: rgb(68, 68, 68); }

.yb-color-deep-red { color: rgb(92, 0, 0); }
.yb-color-deep-orange { color: rgb(102, 61, 0); }
.yb-color-deep-yellow { color: rgb(102, 102, 0); }
.yb-color-deep-green { color: rgb(0, 55, 0); }
.yb-color-deep-blue { color: rgb(0, 41, 102); }
.yb-color-deep-purple { color: rgb(61, 20, 102); }


/* Arrière-plan */

.yb-bg-red { background-color: rgb(230, 0, 0); }
.yb-bg-orange { background-color: rgb(255, 153, 0); }
.yb-bg-yellow { background-color: rgb(255, 255, 0); }
.yb-bg-green { background-color: rgb(0, 138, 0); }
.yb-bg-blue { background-color: rgb(0, 102, 204); }
.yb-bg-purple { background-color: rgb(153, 51, 255); }

.yb-bg-white { background-color: rgb(255, 255, 255); }

.yb-bg-light-red { background-color: rgb(250, 204, 204); }
.yb-bg-light-orange { background-color: rgb(255, 235, 204); }
.yb-bg-light-yellow { background-color: rgb(255, 255, 204); }
.yb-bg-light-green { background-color: rgb(204, 232, 204); }
.yb-bg-light-blue { background-color: rgb(204, 224, 245); }
.yb-bg-light-purple { background-color: rgb(235, 214, 255); }

.yb-bg-gray { background-color: rgb(187, 187, 187); }

.yb-bg-medium-red { background-color: rgb(240, 102, 102); }
.yb-bg-medium-orange { background-color: rgb(255, 194, 102); }
.yb-bg-medium-yellow { background-color: rgb(255, 255, 102); }
.yb-bg-medium-green { background-color: rgb(102, 185, 102); }
.yb-bg-medium-blue { background-color: rgb(102, 163, 224); }
.yb-bg-medium-purple { background-color: rgb(194, 133, 255); }

.yb-bg-dark-gray { background-color: rgb(136, 136, 136); }

.yb-bg-dark-red { background-color: rgb(161, 0, 0); }
.yb-bg-dark-orange { background-color: rgb(178, 107, 0); }
.yb-bg-dark-yellow { background-color: rgb(178, 178, 0); }
.yb-bg-dark-green { background-color: rgb(0, 97, 0); }
.yb-bg-dark-blue { background-color: rgb(0, 71, 178); }
.yb-bg-dark-purple { background-color: rgb(107, 36, 178); }

.yb-bg-charcoal { background-color: rgb(68, 68, 68); }

.yb-bg-deep-red { background-color: rgb(92, 0, 0); }
.yb-bg-deep-orange { background-color: rgb(102, 61, 0); }
.yb-bg-deep-yellow { background-color: rgb(102, 102, 0); }
.yb-bg-deep-green { background-color: rgb(0, 55, 0); }
.yb-bg-deep-blue { background-color: rgb(0, 41, 102); }
.yb-bg-deep-purple { background-color: rgb(61, 20, 102); }
/*
 * YB-DIGILAB - Portail d'accueil
 * Styles volontairement limites a .yb-home
 * afin de ne pas impacter les autres pages.
 */

.yb-home{
    background:#fff;
    color:#102737;
}

/* Introduction */
.yb-home-intro{
    text-align:center;
    padding:48px 24px 28px;
    max-width:1050px;
    margin:auto;
}

.yb-home-kicker{
    display:inline-block;
    color:#0c75ab;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:.72rem;
    font-weight:900;
    margin-bottom:12px;
}

.yb-home-intro h1{
    max-width:850px;
    margin:0 auto 14px;
    color:#0a273a;
    font-size:clamp(2rem,3.4vw,3.35rem);
    line-height:1.08;
    letter-spacing:-.035em;
}

.yb-home-intro p{
    max-width:780px;
    margin:0 auto;
    color:#627987;
    font-size:1.05rem;
    line-height:1.7;
}

/* Zone services */
.yb-service-zone{
    position:relative;
    max-width:1320px;
    margin:auto;
    padding:25px 40px 65px;
}

.yb-service-zone::before{
    content:"";
    position:absolute;
    left:15%;
    right:15%;
    top:8%;
    height:72%;
    border-radius:50%;
    background:
      radial-gradient(circle at center,
      rgba(12,117,171,.08) 0,
      rgba(12,117,171,.025) 42%,
      transparent 70%);
    pointer-events:none;
}

/* Logo central */
.yb-service-center{
    position:relative;
    z-index:2;
    width:210px;
    height:210px;
    margin:0 auto 38px;
    border-radius:50%;
    background:#fff;
    border:1px solid #dcecf4;
    box-shadow:0 20px 60px rgba(17,82,118,.12);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.yb-service-center::before{
    content:"";
    position:absolute;
    inset:-13px;
    border:1px solid #cce6f3;
    border-radius:50%;
}

.yb-service-center img{
    width:135px;
    max-height:100px;
    object-fit:contain;
}

.yb-service-center span{
    margin-top:10px;
    color:#0c75ab;
    font-size:.68rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.16em;
}

/* Grille */
.yb-service-grid{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

/* Carte = bouton */
.yb-service-card{
    min-height:245px;
    padding:28px 25px;
    background:#fff;
    border:1px solid #dceaf1;
    border-radius:24px;
    text-decoration:none;
    color:#102737;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-shadow:0 12px 36px rgba(16,63,88,.07);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.yb-service-card:hover,
.yb-service-card:focus-visible{
    transform:translateY(-7px);
    border-color:#79bfdf;
    box-shadow:0 22px 55px rgba(12,103,151,.16);
    outline:none;
}

.yb-service-icon{
    width:84px;
    height:84px;
    margin-bottom:18px;
    border-radius:22px;
    display:grid;
    place-items:center;
    background:
      linear-gradient(145deg,#eef9fe,#d9f0fa);
    border:1px solid #cce7f3;
    color:#0c75ab;
    font-style:normal;
    font-size:2rem;
    font-weight:900;
    box-shadow:inset 0 0 25px rgba(12,117,171,.06);
}

.yb-service-card h2{
    margin:0 0 9px;
    color:#0b2c40;
    font-size:1.15rem;
    line-height:1.25;
}

.yb-service-card p{
    margin:0;
    color:#667d8a;
    line-height:1.55;
    font-size:.94rem;
    max-width:330px;
}

/* Acces Internet */
.yb-internet-zone{
    text-align:center;
    padding:8px 20px 70px;
}

.yb-internet-button{
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:16px 28px;
    border-radius:16px;
    text-decoration:none;
    background:linear-gradient(135deg,#0c6598,#168bc1);
    color:#fff;
    font-weight:850;
    box-shadow:0 15px 32px rgba(11,102,149,.22);
    transition:transform .2s ease,box-shadow .2s ease;
}

.yb-internet-button:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 40px rgba(11,102,149,.28);
}

.yb-internet-button strong{
    font-size:1.3rem;
}

/* Principes */
.yb-values{
    background:#f5fafc;
    border-top:1px solid #e1edf2;
    border-bottom:1px solid #e1edf2;
    padding:48px 25px;
}

.yb-values-grid{
    max-width:950px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.yb-value{
    text-align:center;
    padding:18px;
}

.yb-value-icon{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    margin:0 auto 10px;
    border-radius:50%;
    background:#e4f4fb;
    color:#0c75ab;
    font-size:1.3rem;
}

.yb-value b{
    display:block;
    color:#0a3046;
    margin-bottom:5px;
}

.yb-value span{
    color:#718692;
    font-size:.9rem;
}

/* Responsive */
@media(max-width:900px){
    .yb-home-intro{
        padding-top:38px;
    }

    .yb-service-zone{
        padding-left:22px;
        padding-right:22px;
    }

    .yb-service-center{
        width:170px;
        height:170px;
        margin-bottom:30px;
    }

    .yb-service-center img{
        width:110px;
    }

    .yb-service-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px){
    .yb-home-intro{
        padding:32px 20px 20px;
    }

    .yb-home-intro h1{
        font-size:2rem;
    }

    .yb-service-zone{
        padding:18px 18px 45px;
    }

    .yb-service-center{
        width:145px;
        height:145px;
    }

    .yb-service-center img{
        width:95px;
    }

    .yb-service-center span{
        font-size:.58rem;
    }

    .yb-service-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .yb-service-card{
        min-height:205px;
        padding:23px 20px;
    }

    .yb-values-grid{
        grid-template-columns:1fr;
        gap:5px;
    }
}

/* ==========================================================
   Cartes services - image administrable depuis le CMS
   ========================================================== */

.yb-service-media{
    width:100%;
    aspect-ratio:16 / 9;
    margin:0 0 20px;
    overflow:hidden;
    border-radius:18px;
    background:#f3f8fb;
    border:1px solid #dceaf1;
}

.yb-service-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform .35s ease;
}

.yb-service-card:hover .yb-service-media img,
.yb-service-card:focus-visible .yb-service-media img{
    transform:scale(1.035);
}

/*
 * Lorsqu'une image CMS est utilisée, la carte conserve
 * une structure verticale adaptée aux différentes tailles
 * d'écran.
 */
.yb-service-card:has(.yb-service-media){
    justify-content:flex-start;
}

/* Tablettes et petits écrans */
@media(max-width:900px){
    .yb-service-media{
        aspect-ratio:16 / 9;
        margin-bottom:17px;
    }
}

/* Smartphones */
@media(max-width:600px){
    .yb-service-media{
        aspect-ratio:16 / 9;
        border-radius:15px;
        margin-bottom:15px;
    }
}


/* ==========================================================
   Messages d'accueil administrables
   Animation locale, sans dépendance externe.
   ========================================================== */

.yb-home-ticker{
    position:relative;
    z-index:2;
    width:min(100%, 980px);
    margin:0 auto 38px;
}

.yb-home-ticker-viewport{
    overflow:hidden;
    border:1px solid #dcecf4;
    border-radius:22px;
    background:#fff;
    box-shadow:0 16px 45px rgba(17,82,118,.10);
}

.yb-home-ticker-track{
    display:flex;
    align-items:stretch;
    width:max-content;
    min-width:100%;
    animation:yb-home-ticker-ltr 24s linear infinite;
    will-change:transform;
}

.yb-home-ticker-item{
    box-sizing:border-box;
    width:min(78vw, 420px);
    min-height:112px;
    padding:22px 30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    border-right:1px solid #e1edf2;
}

.yb-home-ticker-item strong{
    color:#0a3046;
    font-size:1.08rem;
    line-height:1.35;
}

.yb-home-ticker-item span{
    margin-top:7px;
    color:#667d8a;
    font-size:.92rem;
    line-height:1.5;
}

/*
 * Déplacement demandé de gauche vers la droite.
 * Le contenu débute légèrement hors champ à gauche
 * puis traverse horizontalement la zone visible.
 */
@keyframes yb-home-ticker-ltr{
    from{
        transform:translateX(-35%);
    }

    to{
        transform:translateX(35%);
    }
}

.yb-home-ticker:hover .yb-home-ticker-track{
    animation-play-state:paused;
}

@media(max-width:900px){
    .yb-home-ticker{
        width:100%;
        margin-bottom:30px;
    }

    .yb-home-ticker-item{
        width:min(82vw, 390px);
    }
}

@media(max-width:600px){
    .yb-home-ticker{
        margin-bottom:25px;
    }

    .yb-home-ticker-viewport{
        border-radius:17px;
    }

    .yb-home-ticker-item{
        width:82vw;
        min-height:100px;
        padding:18px 22px;
    }
}

@media(prefers-reduced-motion:reduce){
    .yb-home-ticker-track{
        animation:none;
        transform:none;
        flex-wrap:wrap;
        width:100%;
    }

    .yb-home-ticker-item{
        flex:1 1 260px;
        width:auto;
    }
}
/* Production: le menu et le bouton Accès Internet sont volontairement absents. */
.prose img{max-width:100%;height:auto;border-radius:14px}.prose table{width:100%;border-collapse:collapse;display:block;overflow:auto}.prose th,.prose td{border:1px solid #d7e5ec;padding:10px}.prose a{color:#0c75ab}.yb-service-media{height:150px;aspect-ratio:auto}.yb-service-card{overflow:hidden}.yb-service-card h2{margin-top:4px}@media(min-width:1500px){.yb-service-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1500px;margin:auto}.yb-service-zone{max-width:1700px}}


/* ==========================================================
   YB-DIGILAB
   Ticker administrable de la carte centrale
   PHASE MODIFICATION 1
   ========================================================== */

.yb-center-ticker{
    position:relative;
    width:82%;
    max-width:168px;
    margin-top:11px;
    overflow:hidden;

    /*
     * Masque progressif sur les deux extrémités :
     * évite une coupure visuelle brutale du texte.
     */
    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0,
            #000 12%,
            #000 88%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0,
            #000 12%,
            #000 88%,
            transparent 100%
        );
}


.yb-center-ticker-track{
    display:flex;
    width:max-content;

    /*
     * Sens demandé :
     * gauche -> droite.
     */
    animation:
        yb-center-scroll-right
        15s
        linear
        infinite;

    will-change:transform;
}


.yb-center-ticker-group{
    display:flex;
    align-items:center;
    flex-shrink:0;
    white-space:nowrap;
}


.yb-center-ticker-item{
    margin:0 !important;
    padding:0 .34rem;

    color:#2E6E99 !important;

    font-size:.64rem !important;
    line-height:1.25;

    font-weight:900 !important;

    text-transform:uppercase;
    letter-spacing:.14em;

    white-space:nowrap;
}


.yb-center-ticker-separator{
    margin:0 !important;
    padding:0 .12rem;

    color:#70b9df !important;

    font-size:.62rem !important;
    font-weight:900;

    line-height:1;
}


/*
 * Animation continue de gauche vers la droite.
 *
 * Les deux groupes identiques dans index.php
 * permettent d'éviter une rupture brutale.
 */
@keyframes yb-center-scroll-right{

    from{
        transform:translateX(-50%);
    }

    to{
        transform:translateX(0);
    }

}


/*
 * Pause au survol :
 * pratique sur ordinateur pour faciliter la lecture.
 */
.yb-service-center:hover
.yb-center-ticker-track{
    animation-play-state:paused;
}


/*
 * Tablettes
 */
@media(max-width:900px){

    .yb-center-ticker{
        width:84%;
        max-width:140px;
        margin-top:9px;
    }

    .yb-center-ticker-item{
        font-size:.58rem !important;
        letter-spacing:.12em;
    }

}


/*
 * Smartphones
 */
@media(max-width:600px){

    .yb-center-ticker{
        width:86%;
        max-width:118px;
        margin-top:7px;
    }

    .yb-center-ticker-track{
        animation-duration:13s;
    }

    .yb-center-ticker-item{
        font-size:.52rem !important;
        letter-spacing:.10em;
        padding:0 .27rem;
    }

    .yb-center-ticker-separator{
        font-size:.50rem !important;
    }

}


/*
 * Accessibilité :
 * si l'utilisateur demande une réduction
 * des animations dans son OS/navigateur,
 * le mouvement est supprimé.
 */
@media(prefers-reduced-motion:reduce){

    .yb-center-ticker-track{
        animation:none;
        transform:none;
    }

    .yb-center-ticker{
        overflow:auto;

        -webkit-mask-image:none;
        mask-image:none;

        scrollbar-width:none;
    }

    .yb-center-ticker::-webkit-scrollbar{
        display:none;
    }

}



/* ==========================================================
   YB-DIGILAB
   PHASE MODIFICATION 1B
   Zone centrale sélectionnable :
   Logo / Messages animés
   ========================================================== */


/*
 * Carte du mode Messages animés.
 * Elle remplace entièrement le cercle lorsque ce mode
 * est sélectionné depuis le backend.
 */

.yb-center-animated-card{
    position:relative;

    width:min(620px, 88%);
    min-height:112px;

    margin:0 auto 36px;
    padding:24px 0 22px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    background:#ffffff;

    border:1px solid #d6e7f0;
    border-radius:24px;

    box-shadow:
        0 14px 35px rgba(20, 75, 105, .07);
}


/*
 * Titre fixe de la carte.
 */

.yb-center-animated-title{
    position:relative;
    z-index:2;

    margin:0 0 11px;
    padding:0 24px;

    color:#12384c;

    font-size:1.08rem;
    line-height:1.2;
    font-weight:900;

    text-align:center;
}


/*
 * Fenêtre du ticker.
 */

.yb-horizontal-ticker{
    position:relative;

    width:100%;
    max-width:100%;

    overflow:hidden;

    /*
     * Fondu discret sur les bords :
     * le texte apparaît et disparaît progressivement.
     */
    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            #000 7%,
            #000 93%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            #000 7%,
            #000 93%,
            transparent 100%
        );
}


/*
 * Rail d'animation.
 */

.yb-horizontal-ticker-track{
    display:flex;

    width:max-content;

    /*
     * Départ vers la gauche et déplacement
     * vers la droite.
     */
    transform:translateX(-50%);

    animation:
        yb-horizontal-scroll-right
        22s
        linear
        infinite;

    will-change:transform;
}


/*
 * Chaque groupe contient l'intégralité
 * des messages.
 */

.yb-horizontal-ticker-group{
    display:flex;
    align-items:center;
    flex-shrink:0;

    white-space:nowrap;

    padding-right:1.4rem;
}


/*
 * Messages.
 */

.yb-horizontal-ticker-item{
    display:inline-block;

    flex:none;

    margin:0 !important;
    padding:0 .48rem;

    color:#718999 !important;

    font-size:1rem !important;
    line-height:1.45;

    font-weight:500 !important;

    text-transform:none;
    letter-spacing:0;

    white-space:nowrap;
}


/*
 * Séparateurs.
 */

.yb-horizontal-ticker-dot{
    display:inline-block;

    flex:none;

    margin:0 !important;
    padding:0 .12rem;

    color:#2E6E99 !important;

    font-size:.95rem !important;
    line-height:1;

    font-weight:800;
}


/*
 * Défilement gauche -> droite.
 */

@keyframes yb-horizontal-scroll-right{

    from{
        transform:translateX(-50%);
    }

    to{
        transform:translateX(0);
    }

}


/*
 * Pause au survol.
 */

.yb-center-animated-card:hover
.yb-horizontal-ticker-track{
    animation-play-state:paused;
}


/*
 * Cas où aucun message n'est défini.
 */

.yb-horizontal-ticker-empty{
    color:#718999;

    font-size:.95rem;
    text-align:center;
}


/*
 * ==========================================================
 * RESPONSIVE
 * ========================================================== */

@media(max-width:900px){

    .yb-center-animated-card{
        width:min(560px, 92%);
        min-height:104px;

        margin-bottom:30px;
        padding:21px 0;
    }

    .yb-center-animated-title{
        font-size:1rem;
        margin-bottom:10px;
    }

    .yb-horizontal-ticker-item{
        font-size:.94rem !important;
    }

}


@media(max-width:600px){

    .yb-center-animated-card{
        width:94%;
        min-height:96px;

        margin-bottom:25px;

        padding:18px 0;

        border-radius:19px;
    }

    .yb-center-animated-title{
        font-size:.94rem;
        margin-bottom:9px;
    }

    .yb-horizontal-ticker-track{
        animation-duration:18s;
    }

    .yb-horizontal-ticker-item{
        font-size:.87rem !important;
        padding:0 .38rem;
    }

}


/*
 * ==========================================================
 * ACCESSIBILITE
 * ========================================================== */

@media(prefers-reduced-motion:reduce){

    .yb-horizontal-ticker-track{
        animation:none;
        transform:none;
    }

    .yb-horizontal-ticker{
        overflow-x:auto;

        -webkit-mask-image:none;
        mask-image:none;

        scrollbar-width:none;
    }

    .yb-horizontal-ticker::-webkit-scrollbar{
        display:none;
    }

}