/*body {*/
/*    background-color: skyblue;*/
/*}*/

/* --- PRELOADER --- */
/* --- PRELOADER --- */
/* --- PRELOADER --- */
#preloader{
    position: fixed;
    inset: 0;
    z-index: 2147483647;     /* au-dessus de la debug toolbar */
    display: grid;
    place-items: center;
    /*background:#0d2bff;*/
    background:#eeedeb;
}
.preloader__inner{
    display:grid;
    gap:32px;
    justify-items:center;
}
/*#preloader::before{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    background:
        !* grille principale 24px *!
            linear-gradient(to right, rgba(13,43,255,.06) 1px, transparent 1px) 0 0 / 24px 24px,
            linear-gradient(to bottom, rgba(13,43,255,.06) 1px, transparent 1px) 0 0 / 24px 24px,
                !* sous-grille 6px très légère *!
            linear-gradient(to right, rgba(13,43,255,.025) 1px, transparent 1px) 0 0 / 6px 6px,
            linear-gradient(to bottom, rgba(13,43,255,.025) 1px, transparent 1px) 0 0 / 6px 6px;
    !* léger grain pour “papier” (facultatif) *!
    !* filter: contrast(1.02) brightness(1.01); *!
}

#preloader::before{
    background:
            linear-gradient(to right, rgba(13,43,255,.055) 1px, transparent 1px) 0 0 / 24px 24px,
            linear-gradient(to bottom, rgba(13,43,255,.055) 1px, transparent 1px) 0 0 / 24px 24px,
            linear-gradient(to right, rgba(13,43,255,.02) 1px, transparent 1px) 0 0 / 6px 6px,
            linear-gradient(to bottom, rgba(13,43,255,.02) 1px, transparent 1px) 0 0 / 6px 6px;
}*/

#preloader::before{ content:none; background:none; }


#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

/*.preloader__inner{*/
/*    position: relative;*/
/*    width: min(48vmin, 220px);*/
/*    display: grid;*/
/*    gap: 50px;*/
/*    justify-items: center;*/
/*}*/

/*.preloader__logo { width: 100%; height: auto; }*/
/*.preloader__stroke{*/
/*    stroke: #fffbea;               !* ivoire doux *!*/
/*    stroke-width: 6;               !* ajuste selon ton export *!*/
/*    filter: drop-shadow(0 0 0 rgba(255,255,255,.0));*/
/*    stroke-dasharray: 780;         !* sera écrasé via JS/css au besoin *!*/
/*    stroke-dashoffset: 780;*/
/*    animation: draw 1.6s ease forwards .2s, glow 1.2s ease-in-out 1.8s infinite alternate;*/
/*}*/

/* Fallback PNG (si utilisé) */
.preloader__png{ width: 100%; height: auto; filter: drop-shadow(0 4px 14px rgba(0,0,0,.15)); animation: pngFade .7s ease .2s both; }
@keyframes pngFade { from { opacity: 0; transform: translateY(6px);} to {opacity:1; transform:none;} }

.preloader__bar{
    width: min(40vw, 320px);
    height: 3px;
    border-radius: 999px;
    /*background: rgba(255,255,255,.28);*/
    overflow: hidden;
    background: rgba(0,0,0,.12);
}
.preloader__bar > span{
    display: block;
    height: 100%;
    width: 0%;
    /*background: #fffbea;*/
    background:#ff7a00;
    animation: load 1.8s ease-in-out .4s forwards;
}

/* Animations */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes glow { from { filter: drop-shadow(0 0 0 rgba(255,255,255,.0)); } to { filter: drop-shadow(0 6px 20px rgba(255,255,255,.55)); } }
@keyframes load { to { width: 100%; } }

/* Respecte l’accessibilité : réduit les animations si l’utilisateur l’a demandé */
@media (prefers-reduced-motion: reduce){
    .preloader__stroke, .preloader__png, .preloader__bar > span { animation: none !important; }
}

.preloader__logo { width: clamp(120px, 22vmin, 220px); height: auto; display:block; }

.preloader__stroke{
    stroke:#fffbea;
    stroke-width:6;
    stroke-linecap:round;
    stroke-linejoin:round;
    /* no dasharray/offset here – JS sets them to the real length */
    animation: glow 2s ease-in-out 2.4s infinite alternate;
}

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes glow { from { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
    to   { filter: drop-shadow(0 6px 20px rgba(255,255,255,.55)); } }

@keyframes draw { to { stroke-dashoffset: 0; } }

.preloader__logo svg{
    width: clamp(120px, 22vmin, 220px);
    height: auto;
    display: block;
}

/*!* traits + remplissage *!
.preloader__logo svg path{
    fill:#0d2bff;          !* bleu final *!
    fill-opacity:0;        !* caché au début *!
    stroke:#0d2bff;
    stroke-width:6;
    stroke-linecap:round;
    stroke-linejoin:round;
}*/

/* plein bleu, pas de stroke ni d’animation */
.preloader__logo svg path{
    fill:#0d2bff;
    stroke:none;
    animation: none !important;
}

/* quand on déclenche le remplissage, on masque le stroke avant la fin */
/*@keyframes fillIn{*/
/*    0%   { fill-opacity:0; stroke-opacity:1; }*/
/*    100% { fill-opacity:1; stroke-opacity:0; }*/
/*}*/

/* CATEGORIES */
/* CATEGORIES */
/* CATEGORIES */
.cat-card{
    display:block;
    border-radius:16px;
    overflow:hidden;
    background:#f6f7fb;
    text-decoration:none;
    color:inherit;
    box-shadow:0 1px 0 rgba(0,0,0,.03);
    transition:transform .2s ease, box-shadow .2s ease;
}
.cat-card:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.08); }

/* >>> carré */
.cat-thumb{
    width:100%;
    aspect-ratio:1 / 1;     /* carré */
    object-fit:cover;       /* rogne proprement */
    display:block;
}

/* placeholders / “Tous” */
.cat-thumb--all,
.cat-thumb--ph{
    display:grid;
    place-items:center;
    background:#0d2bff;
    color:#fff;
    font-weight:700;
    font-size:40px;
    aspect-ratio:1 / 1;     /* carré aussi */
}

.cat-name{
    padding:10px 12px;
    background:#fff;
    border-radius:0 0 12px 12px;
}

.cat-card.active .cat-name{ text-decoration:underline; }

/* images projets inchangées */
.single_project_thumb img{
    width:100%; height:auto; display:block; border-radius:4px;
}
.cat-thumb { aspect-ratio: 1 / 1; object-fit: cover; }
.cat-thumb--ph { aspect-ratio: 1 / 1; }

/* grille (tu as déjà les col-*, on ajoute juste le gap) */
.project-categories .row.g-4 { row-gap: 22px; }

/* carte */
.cat-card{ position:relative; border-radius:14px; overflow:hidden; }
.cat-thumb-wrap{ position:relative; }
.cat-thumb{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }

/* libellé en overlay (pills) */
.cat-name{
    position:absolute; left:12px; bottom:12px;
    background:rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    padding:.38rem .6rem;
    border-radius:10px;
    font-size:.92rem; font-weight:600;
    color:#0f172a;
}
.cat-card:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(15,23,42,.08); }

/* fallback “lettre” centré */
.cat-thumb--ph{ display:grid; place-items:center; font-size:42px; font-weight:800; color:#fff; background:#0d2bff; }


/* conteneur carré infaillible */
.cat-thumb-wrap{
    position: relative;
    width: 100%;
    padding-top: 100%;   /* 1:1 */
    border-radius: 16px;
    overflow: hidden;
    background:#f6f7fb;
}
.cat-thumb-wrap > img,
.cat-thumb-wrap > .cat-thumb--ph{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* au cas où tu gardes sans wrapper */
.cat-thumb{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.cat-thumb--ph{ display:grid; place-items:center; background:#0d2bff; color:#fff; font-weight:700; font-size:40px; aspect-ratio:1/1; }

/* carte (garde une cohérence des arrondis) */
.cat-card{ position:relative; border-radius:14px; overflow:hidden; }
.cat-thumb-wrap{ position:relative; }
.cat-thumb{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }

/* === Capsule compacte (remplace l'ancien badge) === */
.cat-chip{
    position: absolute; left: 12px; bottom: 12px;
    max-width: calc(100% - 24px);  /* bord à bord */
    display: inline-block;

    padding: 6px 10px;              /* compact */
    border-radius: 7px;
    background: #0d2bff;            /* bleu yes */
    color: #fff;
    font-weight: 700;
    font-size: 14px;                /* plus petit */
    line-height: 1.15;
    letter-spacing: .01em;

    box-shadow: 0 8px 20px rgba(13,43,255,.22); /* ombre douce */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    opacity: 75%;
}

.cat-card:hover .cat-chip{
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(13,43,255,.28);
    opacity: 100%;
}

/* Variante “verre” (si tu préfères plus neutre)
.cat-chip{
  background: rgba(18,18,22,.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16);
}
.cat-card:hover .cat-chip{ box-shadow: 0 10px 26px rgba(0,0,0,.22); }
*/

/* placeholder */
.cat-thumb--ph{
    display:grid; place-items:center;
    font-size:40px; font-weight:800; color:#fff; background:#0d2bff;
}

/* responsive : encore plus petit sur mobile si besoin */
@media (max-width: 576px){
    .cat-chip{ padding: 5px 9px; font-size: 13px; border-radius: 9px; }
}


/* ===== Hero typographique (centré) ===== */
/* ===== Hero typographique (centré) ===== */
/* ===== Hero typographique (centré) ===== */
.hero-typo{
    position: relative;
    padding: clamp(56px, 9vw, 140px) 0 clamp(40px, 6vw, 90px);
    background: #fff;
    overflow: hidden;
}
/* Espacement vertical plus respirant */
.hero-typo{ padding-bottom: clamp(44px, 6vw, 80px); }

.hero-typo .container{
    position: relative;
    z-index: 1;
    max-width: 980px;          /* largeur de lecture confortable */
    margin: 0 auto;
    text-align: center;
}

.hero-typo__eyebrow{
    text-transform: uppercase;
    letter-spacing: .28em;
    font-size: .85rem;
    color: #6b7280;
    margin: 0 0 14px;
}

.hero-typo__title{
    margin: 0 0 16px;
    font-size: clamp(30px, 5vw, 56px);
    letter-spacing: 0.02em;
    line-height: 1.12;
}

.hero-typo__lead{
    margin: 0 auto;
    max-width: 72ch;
    color: #374151;
    letter-spacing: 0.03em;
    font-size: clamp(16px, 1.2vw, 18px);
}

/* Mot géant en outline, très discret */
.hero-typo__bg{
    position: absolute;
    inset: auto 0 -8%;
    height: 70%;
    display: grid;
    place-items: center;
    font-weight: 800;
    letter-spacing: .02em;
    font-size: clamp(160px, 26vw, 640px);
    color: transparent;
    -webkit-text-stroke: 1px #EEF2F7;
    text-stroke: 1px #EEF2F7;
    opacity: .65;
    pointer-events: none;
    user-select: none;
}

/* Dégradé léger en haut pour la profondeur */
.hero-typo--projects::before{
    content:"";
    position:absolute; inset:0 0 auto 0; height:50%;
    background: linear-gradient(180deg, rgba(13,43,255,.06), rgba(13,43,255,0));
    pointer-events:none;
}

/* Variante centrée (au cas où tu réutilises le composant) */
.hero-typo--center .container{ text-align:center; }



/* === Charger plus (look moderne, thème yes) ========================= */
/* === Charger plus (look moderne, thème yes) ========================= */
/* === Charger plus (look moderne, thème yes) ========================= */
#load-more {
    --btn-bg: #11141a;           /* fond */
    --btn-fg: #ffffff;           /* texte */
    --btn-bg-hover: #0d2bff;     /* hover/active */
    --btn-shadow: 0 6px 18px rgba(0,0,0,.12);
    --btn-shadow-hover: 0 10px 30px rgba(13,43,255,.25);

    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;

    padding: 12px 22px;
    border-radius: 999px;        /* pilule */
    border: 1px solid transparent;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--btn-shadow);
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

#load-more:hover {
    background: var(--btn-bg-hover);
    transform: translateY(-1px);
    box-shadow: var(--btn-shadow-hover);
}

#load-more:active {
    transform: translateY(0);
}

#load-more:focus-visible {
    outline: none;
    box-shadow:
            0 0 0 3px rgba(13,43,255,.18),
            var(--btn-shadow);
}

/* Désactivé (pendant le chargement) */
#load-more[disabled],
#load-more:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

/* Spinner optionnel quand disabled + data-loading="1" */
#load-more[data-loading="1"]::after {
    content: "";
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.6);
    border-top-color: transparent;
    display: inline-block;
    animation: lm-spin .9s linear infinite;
}

@keyframes lm-spin { to { transform: rotate(360deg); } }

/* Variante claire si tu veux poser le bouton sur fond sombre */
.load-more--light {
    --btn-bg: #ffffff;
    --btn-fg: #11141a;
    --btn-bg-hover: #e9ecff;
    border-color: #e9ecff;
}

/* Respecte l’accessibilité (moins d’animations) */
@media (prefers-reduced-motion: reduce) {
    #load-more { transition: none; }
    #load-more:hover { transform: none; }
}

#load-more.is-loading { position: relative; pointer-events: none; opacity: .85; }
#load-more.is-loading::after{
    content: "";
    position: absolute; inset-inline-end: 12px; top: 50%;
    width: 16px; height: 16px; margin-top: -8px;
    border: 2px solid rgba(255,255,255,.7);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ysSpin .8s linear infinite;
}
@keyframes ysSpin { to { transform: rotate(360deg); } }



/* badge date sur la vignette */
/* badge date sur la vignette */
/* badge date sur la vignette */
.blog_item .blog_item_date{
    position:absolute; left:20px; bottom:20px;
    background:#0d2bff; color:#fff; text-align:center;
    width:64px; height:64px; border-radius:8px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(13,43,255,.25);
}
.blog_item .blog_item_date h3{ margin:0; font-size:20px; line-height:1; }
.blog_item .blog_item_date p{ margin:0; font-size:12px; opacity:.9; }

.article-content img { max-width: 100%; height: auto; }
.navigation-area .detials h4 { font-size: 16px; line-height: 1.3; margin: 0; }

.post-share .social-icons a{ color:#888; transition:.2s }
.post-share .social-icons a:hover{ color:#111 }
.post-share .fa{ font-size:16px }

/* (optionnel) confort de lecture */
.article-content {
    line-height: 1.8;
    text-align: justify;
}

.comment-form .form-control{ border-radius:4px; }
.comment-form .btn_1{ padding:12px 22px; }
.blog-info-link a{ color:inherit; text-decoration:none }
.blog-info-link a:hover{ text-decoration:underline }



/*!*projet*!!*projet*!!*projet*!*/
/*!*projet*!!*projet*!!*projet*!*/
/*!*projet*!!*projet*!!*projet*!*/
/*!* Slider : évite un gros vide en bas *!*/
.details_slider_area { margin-bottom: 3%; }

/*!* Section détails : supprime le padding/offset par défaut du thème *!*/
.project_details { padding-top: 3%; }

.project_details .project_details_left .single_details { margin-top: 0; }
.project_details .article-content { text-align: justify; /*hyphens: auto;*/ }
.details_thumb .owl-stage-outer { overflow: hidden; border-radius: 6px; }
.details_thumb img { display:block; width:100%; height:auto; }

/* Slider 1 : assure une hauteur pour les DIV de slide (background-image) */
.details_active .single_details{
    min-height: 520px;        /* ajuste à ton design */
    background-size: cover;
    background-position: center;
}

/* Breadcrumb compact, sans grands espacements */
/* Breadcrumb compact, sans grands espacements */
/* Breadcrumb compact, sans grands espacements */
.ys-breadcrumb { margin: 16px 0 20px; line-height: 1.15; }
.ys-breadcrumb__list{
    display:flex; gap:.25rem; flex-wrap:wrap;
    list-style:none; padding:0; margin:0;
    font-size:.9rem; color:#666;
}
.ys-breadcrumb__item + .ys-breadcrumb__item::before{
    content: "›"; margin: 0 .35rem; color:#bbb;
}
.ys-breadcrumb a{ color:inherit; text-decoration:none; }
.ys-breadcrumb a:hover{ text-decoration:underline; }

/*!*Optionnel : une discrète ligne séparatrice sous le breadcrumb*!*/
/*!*.ys-breadcrumb { border-bottom:1px solid #eee; padding-bottom:8px; }*!*/


/*services*//*services*//*services*/
/*services*//*services*//*services*/
/*services*//*services*//*services*/

.justi {
  /*line-height: 1.8;*/
  text-align: justify;
}


/* Hero bleu uni (bleu très clair) */
/* Hero bleu uni (bleu très clair) */
/* Hero bleu uni (bleu très clair) */
.hero-soft{
    background-color: #ebf3ff;     /* même bleu que le départ du gradient */
    padding: 96px 0 72px;
    border-bottom: 1px solid #eef2f7;
    text-align: center;            /* centre tout le contenu */
}

.hero-soft__title{
    margin: 0;
    font-size: clamp(30px, 4.2vw, 46px);
    line-height: 1.15;
    letter-spacing: .04em;
    font-weight: 700;
    color: #0c1b33;                /* bleu nuit doux du thème */
}

.hero-soft__crumbs {
    margin-top: 10px; /* breadcrumb SOUS le titre */
    display: inline-flex;
    align-items: center;
}

/*service*/
.single_dream .thumb{
    width: 200px;        /* taille du médaillon */
    height: 200px;
    margin: 0 auto 20px; /* centré */
    border-radius: 3%;
    overflow: hidden;    /* rogne proprement */
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
}

.single_dream .thumb img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;        /* remplit le cercle sans déformer */
    object-position: 50% 50%; /* centre le cadrage (à ajuster si besoin) */
}



.about_area{
    padding-top: 40px;
    padding-bottom: 40px;
}


.bigger_p {
    font-size: 16px;
}


/* ===== Footer yestudio ===== */
.ys-footer{color:#222;background:#f7f7f7;}
.ys-footer a{color:inherit;text-decoration:none}
.ys-footer a:hover{opacity:.8}

/* CTA */
.ys-footer__cta{background:#0d0d0d;color:#fff}
.ys-footer__cta .container{max-width:1100px;margin:0 auto;padding:28px 20px}
.ys-footer__cta-row{display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap}
.clearr {color: #dcdcdc}
.ys-btn{display:inline-block;border:1px solid #fff;border-radius:999px;padding:10px 18px;line-height:1}
.ys-btn--light{background:#fff;color:#0d0d0d;border-color:#fff}

/* Main */
.ys-footer__main .container{max-width:1100px;margin:0 auto;padding:36px 20px}
.ys-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.ys-col h4{font-size:16px;margin:0 0 10px;color:#555;text-transform:uppercase;letter-spacing:.04em}
.ys-list{list-style:none;margin:0;padding:0}
.ys-list li{margin:6px 0}
.ys-footer__logo{display:inline-block;margin-bottom:12px}
.ys-footer__addr{font-style:normal;color:#555;margin-bottom:8px}
.ys-footer__contact{list-style:none;margin:0;padding:0}
.ys-footer__contact li{margin:4px 0}
.ys-social{list-style:none;margin:0;padding:0}
.ys-social li{margin:6px 0}
.ys-social i{margin-right:8px;position:relative;top:1px}

/* Legal */
.ys-footer__legal{border-top:1px solid rgba(0,0,0,.06);background:#f1f1f1}
.ys-footer__legal .container{max-width:1100px;margin:0 auto;padding:14px 20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ys-footer__legal p{margin:0;color:#666;font-size:14px}

/* Responsive */
@media (max-width: 992px){ .ys-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 560px){
    .ys-grid{grid-template-columns:1fr}
    .ys-footer__cta-row{flex-direction:column;align-items:flex-start}
}


/* honeypot */
.hp-wrap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}


/* valeurs réelles du thème Ararat : padding: 35px 8px 35px 8px; */
.header-area .main-header-area .main-menu ul li a{
    --nav-vpad: 35px;   /* padding-top/bottom */
    --nav-hpad: 8px;    /* padding-left/right */
    position: relative;
}

/* si le thème change aux breakpoints, ajuste les variables ici */
@media (min-width: 992px) and (max-width: 1200px){
    .header-area .main-header-area .main-menu ul li a{
        --nav-vpad: 35px;
        --nav-hpad: 8px;
    }
}

/* Soulignement animé G→D, borné au texte (hors padding) */
#navigation > li > a{ text-decoration: none; }

#navigation > li > a::after{
    content:"";
    position:absolute;
    left:  var(--nav-hpad);      /* ← borne à gauche */
    right: var(--nav-hpad);      /* ← borne à droite */
    bottom: calc(var(--nav-vpad) - 6px);  /* place sous le texte, ajuste 6px au goût */
    height: 1px;                 /* épaisseur du trait */
    background: currentColor;

    /* anim G→D (et disparition G→D) */
    clip-path: inset(0 100% 0 0);
    transition: clip-path .35s ease;
}

#navigation > li > a:hover::after,
#navigation > li > a:focus-visible::after,
#navigation > li > a.active::after{
    clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce){
    #navigation > li > a::after{ transition: none; }
}


/*tag*/
/*tag*/
/*tag*/
.tag_cloud_widget .list{
    display:flex; flex-wrap:wrap; gap:8px;
}
.tag_cloud_widget .list a{
    display:inline-block; padding:.25rem .5rem; border:1px solid #e3e3e3;
    border-radius:999px; font-size:.875rem; color:#333;
}
.tag_cloud_widget .list a:hover{ background:#f5f5f5; }
.tag_cloud_widget .list a.font-weight-bold{
    border-color:#111; color:#111; background:#f7f7f7;
}

/* Barre de filtres */
.ys-filterbar{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap; margin:16px 0 22px;
}
.ys-filterbar form{ display:flex; gap:12px; flex-wrap:wrap; }

.ys-filter label{ font-size:12px; color:#666; margin-right:6px; }
.ys-filter select{
    border:1px solid #e3e3e3; padding:6px 10px; border-radius:8px; background:#fff;
}

/* Chips actifs */
.ys-active{ display:flex; gap:8px; flex-wrap:wrap; }
.ys-chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 10px; border:1px solid #e3e3e3; border-radius:999px;
    font-size:.875rem; color:#333; background:#fff; text-decoration:none;
}
.ys-chip:hover{ background:#f5f5f5; }
.ys-chip--clear{ border-color:#ddd; color:#666; }
.ys-chip span{ font-weight:600; line-height:1; }



/* === SEARCH OVERLAY === */
/* === SEARCH OVERLAY === */
/* === SEARCH OVERLAY === */
.ys-search {
    position: fixed; inset: 0;
    display: grid; place-items: center;
    z-index: 9998;
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.ys-search.is-open { opacity: 1; visibility: visible; }

.ys-search__backdrop {
    position: absolute; inset: 0;
    background:
            radial-gradient(1200px 600px at 60% -10%, rgba(255,255,255,.06), transparent 60%),
            linear-gradient(180deg, rgba(13,43,255,.22), rgba(0,0,0,.85));
    backdrop-filter: blur(2px);
}

/* décor “grille” et ligne */
.ys-search__decor .ys-search__grid {
    position: absolute; inset: 0; pointer-events: none;
    background:
            linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 28px 28px,
            linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 28px 28px;
}
.ys-search__decor .ys-search__line {
    position: absolute; inset: 0; pointer-events: none;
    background:
            repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.05) 18px 19px);
    mask-image: radial-gradient(600px 240px at 50% 50%, #000, transparent 70%);
    animation: ysLine 6s linear infinite;
}
@keyframes ysLine {
    from { transform: translateX(-40px); }
    to   { transform: translateX(0); }
}

.ys-search__panel {
    position: relative;
    width: min(860px, 92vw);
    background: rgba(15,15,18,.8);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    padding: clamp(16px, 4vw, 28px);
    transform: translateY(10px) scale(.98);
    opacity: 0;
    transition: all .28s ease;
}
.is-open .ys-search__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.ys-search__form { display: grid; gap: 10px; }
.ys-search__controls {
    display: grid;
    grid-template-columns: 1fr 170px 54px;
    gap: 10px;
}
.ys-search__controls input[type="search"]{
    background: #0f1320;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 14px 16px;
    color: #fff; font-size: 1.1rem;
    outline: none;
}
.ys-search__controls input::placeholder { color: rgba(255,255,255,.45); }

.ys-search__controls select{
    background: #0f1320;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 12px 14px;
    color: #fff;
}

.ys-search__btn{
    display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    background: #0d2bff; color: #fff;
    border-radius: 12px;
    transition: transform .12s ease, filter .12s ease;
}
.ys-search__btn:hover{ filter: brightness(1.06); transform: translateY(-1px); }

.ys-search__hint{
    margin: 0; font-size: .9rem; color: rgba(255,255,255,.6);
    text-align: right;
}

/* mobile */
@media (max-width: 576px){
    .ys-search__controls{ grid-template-columns: 1fr; }
    .ys-search__btn{ height: 48px; }
}

/* utilitaire */
.sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* === SUGGEST DROPDOWN === */
.ys-suggest{
    margin-top: 8px;
    background: rgba(18,18,22,.92);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.45);
    max-height: 60vh;
    overflow: auto;
}

.ys-suggest__group{
    padding: 10px 12px 6px;
    font-size: .85rem;
    color: rgba(255,255,255,.6);
    border-bottom: 1px dashed rgba(255,255,255,.08);
}

.ys-suggest__item{
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    color: #fff;
    transition: background .12s ease;
}
.ys-suggest__item:hover,
.ys-suggest__item[aria-selected="true"]{
    background: rgba(13,43,255,.22);
}

.ys-suggest__title{
    font-weight: 600; margin: 0 0 2px;
}
.ys-suggest__meta{
    font-size: .85rem; color: rgba(255,255,255,.68);
}

/* bouton de l’overlay pendant chargement */
.ys-search__btn.is-loading{ position: relative; pointer-events: none; opacity: .9; }
.ys-search__btn.is-loading::after{
    content: "";
    position: absolute; width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.8);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ysSpin .8s linear infinite;
}

/* --- wrapper pour positionner le spinner à côté du caret --- */
.ys-inputwrap{
    position: relative;
}

/* spinner minimal, positionné dynamiquement au pixel près par JS */
.ys-caret-spinner{
    position: absolute;
    top: 50%;
    width: 16px; height: 16px;
    margin-top: -8px;
    border: 2px solid rgba(255,255,255,.85);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ysSpin .8s linear infinite;
    pointer-events: none;
    /* Valeurs par défaut si JS tarde : proche du bord gauche */
    left: 10px;
    opacity: .9;
}

@keyframes ysSpin { to { transform: rotate(360deg); } }

/* accessibilité : réduit l’animation si l’utilisateur a demandé “reduced motion” */
@media (prefers-reduced-motion: reduce) {
    .ys-caret-spinner{ animation: none; }
}



/**/


/* le wrapper occupe toute la 1ère colonne du grid */
.ys-inputwrap{
    position: relative;
    width: 100%;
}

/* l'input remplit son wrapper et garde la même hauteur que select/bouton */
.ys-inputwrap input[type="search"]{
    width: 100%;
    display: block;
    box-sizing: border-box;
    height: 52px;                 /* même hauteur partout */
    padding: 14px 16px;
    background: #0f1320;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    color: #fff;
    font-size: 1.1rem;
    outline: none;
}



/* ===== Search results layout ===== */
.ys-results__header h1{
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: .25rem;
}
.ys-results__header .links{
    color: #6b7280; /* gray-500 */
    font-size: .95rem;
}
.ys-results__header .links a{ color: inherit; text-decoration: underline; }
.ys-results__header .links a:hover{ color: #111827; }

.ys-section-title{
    display:flex; align-items:center; gap:.5rem;
    font-weight:700; letter-spacing:.01em;
}
.ys-section-title .badge{
    background:#eef2ff; color:#3730a3; /* indigo */
    border-radius:999px; padding:.1rem .5rem; font-size:.8rem;
}

/* column cards */
.ys-cards{
    display:grid; grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 480px){ .ys-cards{ grid-template-columns: 1fr; } }
@media (min-width: 768px){ .ys-cards{ grid-template-columns: 1fr; } }

/* media card */
.ys-card{
    display:grid; grid-template-columns: 120px 1fr; gap:12px;
    align-items:start;
    background:#fff; border:1px solid #e5e7eb; border-radius:12px;
    padding:10px; text-decoration:none; color:inherit;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.ys-card:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    border-color:#d1d5db;
}

/* thumbnail with fixed ratio */
.ys-thumb{
    width:120px; aspect-ratio: 4 / 3; /* 120x90 */
    border-radius:10px; overflow:hidden; background:#f3f4f6;
    display:flex; align-items:center; justify-content:center;
    border:1px solid #e5e7eb;
}
.ys-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ys-thumb--ph{ font-weight:700; color:#9ca3af; }

/* text area */
.ys-card h3{
    margin:0 0 4px; font-size:1.05rem; line-height:1.35; font-weight:700;
}
.ys-card .meta{
    font-size:.85rem; color:#6b7280; margin-top:2px;
    display:flex; gap:.75rem; flex-wrap:wrap;
}
.ys-card .excerpt{
    font-size:.9rem; color:#374151; margin-top:2px;
    display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;
}

/* empty state */
.ys-empty{
    color:#6b7280; background:#f9fafb; border:1px dashed #e5e7eb; border-radius:12px;
    padding:16px; font-size:.95rem;
}

/* spacing between the two columns on lg */
@media (min-width: 992px){
    .ys-col{ padding-right:16px; }
    .ys-col + .ys-col{ padding-right:0; padding-left:16px; border-left: 1px solid #f3f4f6; }
}


/* état de verrouillage global */
html.ys-lock, body.ys-lock { overflow: hidden !important; }

/* préloader caché ne capte rien */
#preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }




/* ===== Auth page ===== */
/* ===== Auth page ===== */
/* ===== Auth page ===== */
/* ===== Auth page ===== */
.auth{
    min-height: calc(100vh - 120px);
    display: grid; place-items: center;
    padding: clamp(24px, 6vw, 48px) 16px;
    background:
            radial-gradient(1200px 600px at 60% -10%, rgba(13,43,255,.06), transparent 60%),
            linear-gradient(180deg, #b4c6fa, #ffffff);
}
.auth__container{
    width: min(420px, 100%);
    display: grid; gap: 16px; justify-items: center;
}
.auth__logo img{ height: auto; display: block; }

.auth__card{
    width: 100%;
    background: #fff;
    border: 1px solid #eaeef6;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(13,43,255,.07);
    padding: clamp(18px, 4.5vw, 26px);
}
.auth__title{
    margin: 0 0 4px;
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 800; letter-spacing: .01em;
}
.auth__subtitle{ margin: 0 0 16px; color:#6b7280; }

.auth__alert{
    background: #fff3f3;
    border: 1px solid #ffd7d7;
    color: #b42318;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.auth__info{
    background:#f6f9ff; border:1px solid #e5ecff; color:#0c1b33;
    padding:10px 12px; border-radius:10px; margin-bottom:12px; font-size:.95rem;
}
.auth__info a{ color:#0d2bff; text-decoration:none; }
.auth__info a:hover{ text-decoration:underline; }

.auth__form{ display:grid; gap:14px; }
.auth__field label{
    display:block; font-size:.9rem; color:#4b5563; margin-bottom:6px;
}
.auth__field input{
    width:100%;
    border:1px solid #dbe2ef;
    background:#fff;
    border-radius:10px;
    padding:12px 14px;
    font-size:1rem;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.auth__field input:focus{
    border-color:#0d2bff;
    box-shadow: 0 0 0 3px rgba(13,43,255,.12);
}

/* password with toggle */
.auth__passwordwrap{
    position: relative;
}
.auth__toggle{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    display:grid; place-items:center;
    width:36px; height:36px; border-radius:8px;
    border:1px solid transparent; background:#f6f7fb; color:#111;
    cursor:pointer; transition: background .15s ease, border-color .15s ease;
}
.auth__toggle:hover{ background:#eef2ff; border-color:#e0e7ff; }

.auth__row{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; flex-wrap:wrap; margin-top:4px;
}
.auth__check{ color:#374151; font-size:.95rem; }
.auth__link{ color:#0d2bff; text-decoration:none; font-size:.95rem; }
.auth__link:hover{ text-decoration:underline; }

.auth__btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:100%;
    cursor: pointer;
    padding:12px 18px;
    border-radius:12px;
    background:#0d2bff; color:#fff; border:1px solid #0d2bff;
    font-weight:700; letter-spacing:.02em;
    transition: filter .15s ease, transform .1s ease;
}
.auth__btn:hover{ filter:brightness(1.05); transform: translateY(-1px); }
.auth__btn:active{ transform:none; }

@media (max-width: 480px){
    .auth{ padding: 24px 12px; }
}


/*contact btn*/
/*contact btn*/
/*contact btn*/
.cta-btn{
    background:#fff;
    display:inline-block;
    padding:18px 44px;
    font-family: 'Poppins', sans-serif;
    font-size:14px;
    font-weight:600;
    border:2px solid #0d2bff;
    letter-spacing:3px;
    text-align:center;
    color:#0d2bff !important;
    text-transform:uppercase
}
.cta-btn:hover{
    background:#0d2bff;
    color:#fff !important;
    border:2px solid #0d2bff
}
.cta-btn:focus{
    outline:none
}
.cta-btn.large-width{
    width:220px
}

#navigation > li > a.is-active{
    color: #888888;        /* bleu yes */
}


/* === Back to top (thème yes) === */
/* === Back to top (thème yes) === */
/* === Back to top (thème yes) === */
.ys-to-top{
    position: fixed; right: 18px; bottom: 18px;
    z-index: 9990;
    width: 44px; height: 44px;
    display: grid; place-items: center;

    background: #0d2bff;         /* bleu yes */
    color: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(13,43,255,.22);
    cursor: pointer;
    /* 1. SET DEFAULT OPACITY TO BE SLIGHTLY TRANSPARENT */
    opacity: 0.5;

    transition: transform .12s ease, filter .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.ys-to-top:hover{
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(13,43,255,.26);
    /* 2. SET OPACITY BACK TO 1 ON HOVER */
    opacity: 1;
}
.ys-to-top:active{ transform: none; }
.ys-to-top[hidden]{ display: none; }

/* un peu plus grand sur mobile si tu veux */
@media (max-width: 480px){
    .ys-to-top{ width: 48px; height: 48px; right: 14px; bottom: 14px; }
}