/* ============================================================
   services.css — styles propres à la page « Services »
   Chargé uniquement par services.php. La base, la barre, le pied
   de page et le bouton WhatsApp viennent de msm.css.
   ============================================================ */

/* ================= PAGE HERO ================= */

.page-hero{
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    padding-top:160px;
    padding-bottom:34px;
}

.page-hero::before{
    content:'';
    position:absolute;
    width:600px;
    height:600px;
    background:#3FA0A0;
    filter:blur(250px);
    opacity:.18;
    top:-200px;
    right:-200px;
}

.page-hero .container{
    position:relative;
    z-index:1;
    text-align:center;
    max-width:800px;
}

.page-hero h1{
    font-size:40px;
    line-height:1.3;
    margin-bottom:20px;
    font-weight:800;
}

.page-hero p{
    font-size:17px;
    color:#cbd5e1;
    line-height:1.8;
}

/* ================= SERVICES DETAIL =================
   Un rail horizontal, identique sur mobile et sur bureau : on fait
   defiler les six services au lieu de les empiler. Le bleu #2563eb
   qui restait du design d'origine laisse la place au laiton et au
   teal de la barre, et les cartes reprennent le verre de l'accueil.
   ==================================================== */

.services-detail-section{
    padding:8px 0 80px;
}

.services-detail-grid{
    display:flex;
    align-items:stretch;
    gap:22px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-left:4px;
    padding:8px 4px 22px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.services-detail-grid::-webkit-scrollbar{ display:none; }

.service-detail-card{
    flex:0 0 340px;
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    padding:26px 24px;

    /* Meme verre que les cartes de l'accueil. */
    border-radius:26px;
    background:linear-gradient(160deg, rgba(246,237,224,.07), rgba(2,16,32,.42));
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border:1px solid rgba(246,237,224,.09);
    box-shadow:
        10px 26px 42px -18px rgba(0,0,0,.8),
        inset 0 1px 0 rgba(246,237,224,.10);
    transition:transform .45s cubic-bezier(.2,.8,.2,1),
               border-color .3s, background .3s, box-shadow .45s ease;
}

.service-detail-card:hover,
.service-detail-card:focus-within{
    transform:translateY(-8px);
    border-color:rgba(227,168,87,.35);
    background:linear-gradient(160deg, rgba(63,160,160,.16), rgba(2,16,32,.5));
    box-shadow:
        14px 40px 62px -22px rgba(0,0,0,.85),
        inset 0 1px 0 rgba(246,237,224,.16);
}

/* --- icone : etoile khatim, plus le carre bleu --- */
.service-detail-icon{
    position:relative;
    width:50px; height:50px;
    display:grid; place-items:center;
    margin-bottom:14px;
    color:#E3A857;
    font-size:19px;
    background:none;
    border-radius:0;
}
.service-detail-icon::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(140deg, rgba(227,168,87,.20), rgba(63,160,160,.16));
    clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
    transform:scale(1.5);
    transition:transform .45s cubic-bezier(.22,1,.36,1), background .3s;
}
.service-detail-card:hover .service-detail-icon::before{
    transform:scale(1.5) rotate(45deg);
    background:linear-gradient(140deg, rgba(227,168,87,.34), rgba(63,160,160,.22));
}
.service-detail-icon i{ position:relative; }

.service-detail-card h3{
    font-size:19px;
    margin-bottom:14px;
    color:#F6EDE0;
}

.service-detail-list{
    margin-bottom:18px;
    flex-grow:1;
}

.service-detail-list li{
    color:rgba(246,237,224,.74);
    padding:6px 26px 6px 0;
    position:relative;
    line-height:1.5;
    font-size:13.5px;
    border-bottom:1px solid rgba(246,237,224,.05);
}

.service-detail-list li:last-child{
    border-bottom:none;
}

.service-detail-list li::before{
    content:'\f00c';
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    position:absolute;
    right:0;
    top:7px;
    color:#E3A857;
    font-size:11px;
}

html[dir="ltr"] .service-detail-list li{
    padding-right:0;
    padding-left:28px;
}

html[dir="ltr"] .service-detail-list li::before{
    right:auto;
    left:0;
}

.service-detail-cta{
    display:block;
    text-align:center;
    padding:12px 18px;
    border-radius:12px;
    font-size:14.5px;
    background:linear-gradient(135deg, #E3A857, #EDC889);
    color:#021020;
    font-weight:700;
    transition:transform .3s, filter .3s;
}

.service-detail-cta:hover{
    filter:brightness(1.08);
    transform:translateY(-3px);
}

.service-detail-cta:focus-visible{
    outline:2px solid #E3A857; outline-offset:4px;
}

/* --- reperes du rail : fleches + points --- */
.svc-rail-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-top:6px;
}
.svc-rail-nav[hidden]{ display:none; }

.svc-rail-arrow{
    width:44px; height:44px;
    display:grid; place-items:center;
    border-radius:50%;
    border:1px solid rgba(246,237,224,.14);
    background:rgba(246,237,224,.05);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    color:#E3A857;
    font-size:14px;
    cursor:pointer;
    transition:background .3s, border-color .3s, color .3s, opacity .3s;
}
.svc-rail-arrow:hover:not(:disabled){
    background:rgba(227,168,87,.16);
    border-color:rgba(227,168,87,.4);
    color:#EDC889;
}
.svc-rail-arrow:disabled{
    opacity:.3;
    cursor:default;
}
.svc-rail-arrow:focus-visible{
    outline:2px solid #E3A857; outline-offset:3px;
}
/* La fleche suit la direction du texte, comme le reste du site. */
html[dir="rtl"] .svc-rail-arrow i{ transform:scaleX(-1); }

.svc-rail-dots{
    display:flex;
    align-items:center;
    gap:9px;
}

.svc-rail-dot{
    width:8px; height:8px;
    padding:0;
    border:none;
    border-radius:50%;
    background:rgba(246,237,224,.22);
    cursor:pointer;
    transition:background .3s, width .35s cubic-bezier(.2,.8,.2,1);
}
.svc-rail-dot:hover{ background:rgba(246,237,224,.45); }
.svc-rail-dot.is-active{
    width:24px;
    border-radius:99px;
    background:#E3A857;
}
.svc-rail-dot:focus-visible{
    outline:2px solid #E3A857; outline-offset:3px;
}

/* Une cible de 8px se rate au doigt : on l'elargit sans la grossir. */
.svc-rail-dot{ position:relative; }
.svc-rail-dot::after{
    content:"";
    position:absolute;
    inset:-9px;
}

@media(max-width:700px){
    .page-hero h1{ font-size:32px; }
    .services-detail-grid{ gap:16px; scroll-snap-type:x mandatory; }
    .service-detail-card{
        flex:0 0 84%; max-width:340px;
        scroll-snap-align:center;
        padding:28px 24px;
        border-radius:22px;
    }
    .service-detail-card h3{ font-size:20px; }
}

@media (prefers-reduced-motion: reduce){
    .service-detail-card, .service-detail-icon::before, .service-detail-cta{ transition:none; }
    .service-detail-card:hover{ transform:none; }
    .service-detail-card:hover .service-detail-icon::before{ transform:scale(1.5); }
}

/* L'espaceur de header.php réserve déjà la hauteur de la barre :
   on ne gère ici que la respiration propre à la page. */
.page-hero{ padding-top:56px; }

@media(max-width:700px){
  .page-hero{ padding-top:34px; padding-bottom:40px; min-height:auto; }
}