/* =========================================================
   ALOO NETTOYAGE — SERVICES FINAL WEB
   Approved layout:
   [ blue icon ] [ 01/02/03... ] on the same row
   diagonal blue line exactly follows the photo edge
   ========================================================= */

.photo1-services{
    padding:76px 0 70px;
    overflow:hidden;
    background:
        radial-gradient(circle at 8% 10%,rgba(18,132,229,.05),transparent 26%),
        radial-gradient(circle at 94% 15%,rgba(18,132,229,.05),transparent 24%),
        linear-gradient(180deg,#fbfdff 0%,#f5fbff 100%);
}
.photo1-services__head{max-width:1160px;margin:0 auto 38px;text-align:center}
.photo1-services__eyebrow{display:inline-flex;align-items:center;gap:13px;margin-bottom:12px;color:#0b6fd4;font-size:12px;font-weight:900;letter-spacing:.26em}
.photo1-services__eyebrow::before,.photo1-services__eyebrow::after{content:"";width:58px;height:2px;border-radius:999px;background:#1688ef}
.photo1-services__head h2{margin:0;color:#082f69;font-size:clamp(44px,4.2vw,62px);line-height:1.04;font-weight:900;letter-spacing:-.045em}
.photo1-services__head h2 span{color:#1688ef}
.photo1-services__head p{max-width:980px;margin:16px auto 0;color:#687e99;font-size:16px;line-height:1.6}
.photo1-services__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

.photo1-card{
    --diag-top:54%;
    --diag-bottom: 74%;
    --panel-width: 74%;
    --shape-opacity:.92;
    --shape-width: 52%;
    --shape-height:31%;
    --shape-right: -5px;
    --shape-bottom: -5px;
    position:relative;
    min-width:0;
    aspect-ratio:1.45/1;
    overflow:hidden;
    border:1px solid #d8e7f3;
    border-radius:18px;
    background:#fff;
    box-shadow:0 16px 38px rgba(10,54,102,.09);
}

.photo1-card__photo{position:absolute;inset:0 0 0 var(--diag-top);display:block;overflow:hidden;background:#eaf4fb}
.photo1-card__photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;transition:transform .35s ease}
.photo1-card:hover .photo1-card__photo img{transform:scale(1.025)}

.photo1-card__panel{
    position:absolute;z-index:4;inset:0 auto 0 0;width:var(--panel-width);height:100%;box-sizing:border-box;
    display:flex;flex-direction:column;
    padding:clamp(24px,1.88vw,31px) clamp(18px,1.46vw,24px) clamp(20px,1.7vw,28px) clamp(26px,2.06vw,34px);
    background:#fff;
    /* 54 / 74 = 72.97%; the lower point is 100% of this panel = 74% of the card */
    clip-path:polygon(0 0,72.97% 0,100% 100%,0 100%);
}

/* ICON + NUMBER: same line, vertically centered */
.photo1-card__meta{position:relative;z-index:6;display:flex;align-items:center;gap: clamp(16px,10.45vw,61px);margin-bottom: clamp(18px,1.55vw,27px);}
.photo1-card__top-icon{width: clamp(39px,2.75vw,78px);height: clamp(50px,2.75vw,78px);flex: 0 0 clamp(39px,4.75vw,78px);display:grid;place-items:center;border-radius:50%;background:linear-gradient(180deg,#1690f4,#0877df);box-shadow:0 10px 24px rgba(10,118,218,.16);color:#fff}
.photo1-card__top-icon svg{width:clamp(33px,2.55vw,42px);height:clamp(33px,2.55vw,42px);display:block;color:#fff;stroke:#fff}
.photo1-card__number{display:block;color:#dceeff;font-size: clamp(41px,3.25vw,70px);line-height:.82;font-weight:900;letter-spacing: -0.055em;transform:translateY(-1px)}

.photo1-card h3{position:relative;z-index:5;max-width:270px;margin:0;color:#082f69;font-size:clamp(20px,1.52vw,25px);line-height:1.12;font-weight:900;letter-spacing:-.025em}
.photo1-card__panel>p{position:relative;z-index:5;max-width: 200px;margin:clamp(10px,.97vw,16px) 0 0;color:#5e7693;font-size:clamp(11px,.85vw,14px);line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.photo1-card__more{position:relative;z-index:9;display:inline-flex;align-items:center;gap:clamp(10px,.85vw,14px);align-self:flex-start;margin-top:auto;margin-bottom:clamp(4px,.5vw,8px);color:#0b79df;font-size:clamp(11px,.91vw,15px);font-weight:900;white-space:nowrap}
.photo1-card__more::after{content:"";position:absolute;left:0;bottom:-6px;width:clamp(82px,6.55vw,108px);height:2px;border-radius:999px;background:#0b79df}
.photo1-card__more span{font-size:clamp(21px,1.64vw,27px);line-height:1}

/* Exact blue separator: its box spans 54% -> 74%, then the SVG line goes corner-to-corner. */
.photo1-card__divider{position:absolute;z-index:7;top:0;left:var(--diag-top);width:calc(var(--diag-bottom) - var(--diag-top));height:100%;overflow:visible;pointer-events:none}
.photo1-card__divider line{stroke:#168cf0;stroke-width:1.15;vector-effect:non-scaling-stroke;opacity:.72}

.photo1-card__shape{position:absolute;z-index:8;right:var(--shape-right);bottom:var(--shape-bottom);width:var(--shape-width);height:var(--shape-height);pointer-events:none;overflow:visible}
.photo1-card__shape-image{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;object-position:right bottom;opacity:var(--shape-opacity);pointer-events:none}
.photo1-card__shape .photo1-card__bottom-icon{position:absolute;z-index:3;right: 20%;bottom:15%;width:clamp(48px,3.55vw,58px);height:clamp(48px,3.55vw,58px);display:grid;place-items:center;color:#fff;transform:none!important}
.photo1-card__shape .photo1-card__bottom-icon svg{width:clamp(39px,2.9vw,48px);height:clamp(39px,2.9vw,48px);color:#fff;stroke:#fff;transform:none!important}

.photo1-services__benefits{max-width:1100px;margin:42px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.photo1-services__benefits>div{display:flex;align-items:center;justify-content:center;gap:14px;min-height:72px}
.photo1-benefit__icon{width:62px;height:62px;flex:0 0 62px;display:grid;place-items:center;border-radius:50%;background:#e9f5ff;color:#1686ed;font-size:25px}
.photo1-services__benefits strong{color:#173b63;font-size:15px;line-height:1.32}

@media (min-width:768px) and (max-width:1199px){
    .photo1-services{padding:62px 0 58px}
    .photo1-services__head h2{font-size:42px}
    .photo1-services__head p{font-size:14px}
    .photo1-services__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
    .photo1-card__panel{padding:22px 17px 18px 24px}
    .photo1-card__meta{gap:16px;margin-bottom:18px}
    .photo1-card__top-icon{width:64px;height:64px;flex-basis:64px}
    .photo1-card__top-icon svg{width:34px;height:34px}
    .photo1-card__number{font-size:54px}
    .photo1-card h3{font-size:20px}
    .photo1-card__panel>p{font-size:11px}
    .photo1-card__more{font-size:11px}
    .photo1-card{--shape-width:51%;--shape-height:34%}
    .photo1-card__shape .photo1-card__bottom-icon{width:44px;height:44px;right:11%;bottom:14%}
    .photo1-card__shape .photo1-card__bottom-icon svg{width:36px;height:36px}
}

@media (max-width:767px){
    .photo1-services{padding:50px 0 46px}
    .photo1-services__head{margin-bottom:24px}
    .photo1-services__eyebrow{font-size:10px}
    .photo1-services__eyebrow::before,.photo1-services__eyebrow::after{width:32px}
    .photo1-services__head h2{font-size:31px}
    .photo1-services__head p{font-size:12px;line-height:1.5}
    .photo1-services__grid{grid-template-columns:1fr;gap:14px}
    .photo1-card{border-radius:16px;--shape-width:52%;--shape-height:34%}
    .photo1-card__panel{padding:17px 11px 14px 17px}
    .photo1-card__meta{gap:11px;margin-bottom:11px}
    .photo1-card__top-icon{width:48px;height:48px;flex-basis:48px}
    .photo1-card__top-icon svg{width:25px;height:25px}
    .photo1-card__number{font-size:43px}
    .photo1-card h3{max-width:165px;font-size:16px}
    .photo1-card__panel>p{max-width:160px;margin-top:8px;font-size:9px;line-height:1.45;-webkit-line-clamp:3;line-clamp:3}
    .photo1-card__more{gap:7px;font-size:9px}
    .photo1-card__more::after{bottom:-5px;width:58px}
    .photo1-card__more span{font-size:16px}
    .photo1-card__divider line{stroke-width:1;opacity:.64}
    .photo1-card__shape .photo1-card__bottom-icon{right:10%;bottom:13%;width:32px;height:32px}
    .photo1-card__shape .photo1-card__bottom-icon svg{width:26px;height:26px}
    .photo1-services__benefits{grid-template-columns:repeat(2,1fr);gap:6px;margin-top:20px}
    .photo1-services__benefits>div{min-height:54px;justify-content:flex-start;gap:8px}
    .photo1-benefit__icon{width:38px;height:38px;flex-basis:38px;font-size:16px}
    .photo1-services__benefits strong{font-size:10px}
}