/* V235 — Section « Nos services » (accueil) : nouveau design inspiré de la maquette.
   Cartes sombres / claires en alternance, icône sur l'image, liste à crochets, bouton « En savoir plus ». */

#services.svx{
  --svx-blue:#1f55f0;--svx-blue2:#3b82ff;--svx-navy:#0a1638;--svx-navy2:#0f2153;
  --svx-ink:#0b1533;--svx-muted:#56658a;
  position:relative;overflow:hidden;
  padding-block:clamp(40px,4.4vw,96px) clamp(44px,4.6vw,100px);
  background:
    radial-gradient(60% 70% at 85% 0%,rgba(59,130,255,.10),transparent 70%),
    linear-gradient(180deg,#f7faff 0%,#eef4fe 100%);
}

/* ---------- En-tête ---------- */
.svx-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,64px);align-items:end;margin-bottom:clamp(26px,2.6vw,52px)}
.svx-eyebrow{display:flex;align-items:center;gap:16px;font-size:clamp(.72rem,.7vw,.9rem);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#1b2a52;margin-bottom:clamp(12px,1.2vw,22px)}
.svx-eyebrow::before{content:"";width:clamp(28px,2.2vw,44px);height:3px;border-radius:3px;background:linear-gradient(90deg,var(--svx-blue),#12c2ff)}
.svx h2{font-size:clamp(1.85rem,3.3vw,4.1rem);line-height:1.04;font-weight:800;letter-spacing:-.035em;color:var(--svx-ink);max-width:19ch}
.svx h2 em{font-style:normal;background:linear-gradient(90deg,#1f55f0,#3b82ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.svx-lead{margin-top:clamp(12px,1.1vw,20px);max-width:58ch;font-size:clamp(.95rem,1.05vw,1.3rem);line-height:1.5;color:var(--svx-muted)}

.svx-aside{display:flex;flex-direction:column;align-items:flex-end;gap:clamp(20px,2.2vw,44px)}
.svx-cta{display:inline-flex;align-items:center;gap:18px;padding:10px 10px 10px clamp(22px,1.8vw,34px);border-radius:999px;background:linear-gradient(90deg,#1f55f0,#3b82ff);color:#fff;font-weight:600;font-size:clamp(.95rem,1vw,1.2rem);box-shadow:0 14px 30px rgba(31,85,240,.32);transition:transform .2s ease,box-shadow .2s ease}
.svx-cta i{display:grid;place-items:center;width:clamp(38px,2.6vw,50px);height:clamp(38px,2.6vw,50px);border-radius:50%;background:#fff;color:var(--svx-blue)}
.svx-cta:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(31,85,240,.4)}
.svx-cta svg,.svx-btn svg{width:48%;height:48%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.svx-perks{list-style:none;display:flex;gap:clamp(16px,1.8vw,36px)}
.svx-perks li{display:flex;align-items:center;gap:12px;font-size:clamp(.78rem,.78vw,.98rem);font-weight:500;line-height:1.25;color:#24345e}
.svx-perks span{display:grid;place-items:center;flex:none;width:clamp(40px,2.8vw,54px);height:clamp(40px,2.8vw,54px);border-radius:50%;background:#fff;color:var(--svx-blue);box-shadow:0 8px 20px rgba(31,60,140,.12)}
.svx-perks svg{width:50%;height:50%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Cartes ---------- */
.svx-cards{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.1vw,24px)}
.svx-card{--bg:#fff;position:relative;display:flex;flex-direction:column;border-radius:clamp(16px,1.3vw,24px);overflow:hidden;background:var(--bg);box-shadow:0 14px 34px rgba(20,45,110,.12);transition:transform .25s ease,box-shadow .25s ease}
.svx-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(20,45,110,.2)}
.svx-dark{--bg:#0c1940;background:linear-gradient(180deg,#0d1b45 0%,#0a1534 100%);color:#fff;box-shadow:0 16px 36px rgba(8,20,60,.32)}
.svx-light{border:1px solid #e3ebf8}

.svx-media{position:relative;aspect-ratio:608/560}
.svx-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.svx-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,color-mix(in srgb,var(--bg) 55%,transparent) 74%,var(--bg) 100%);pointer-events:none}
.svx-ic{position:absolute;z-index:1;left:clamp(14px,1.2vw,22px);bottom:clamp(8px,.6vw,12px);display:grid;place-items:center;width:clamp(44px,3.1vw,62px);height:clamp(44px,3.1vw,62px);border-radius:clamp(12px,.9vw,16px);background:linear-gradient(150deg,#4f8dff,#1f55f0);color:#fff;box-shadow:0 10px 22px rgba(31,85,240,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.svx-ic svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.svx-body{display:flex;flex-direction:column;flex:1;padding:clamp(10px,.8vw,16px) clamp(14px,1.2vw,24px) clamp(14px,1.2vw,24px)}
.svx-card h3{font-size:clamp(1.05rem,1.2vw,1.55rem);line-height:1.15;font-weight:800;letter-spacing:-.015em;color:var(--svx-ink)}
.svx-card p{margin-top:clamp(6px,.6vw,12px);font-size:clamp(.8rem,.82vw,1.02rem);line-height:1.45;color:var(--svx-muted)}
.svx-list{list-style:none;display:grid;gap:clamp(6px,.5vw,10px);margin:clamp(12px,1vw,20px) 0 clamp(16px,1.3vw,26px)}
.svx-list li{display:flex;align-items:center;gap:9px;font-size:clamp(.76rem,.74vw,.95rem);line-height:1.3;color:#2b3a62}
.svx-list svg{flex:none;width:clamp(16px,1.05vw,20px);height:clamp(16px,1.05vw,20px);fill:none;stroke:var(--svx-blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.svx-dark h3{color:#fff}
.svx-dark p{color:#c3cdea}
.svx-dark .svx-list li{color:#e6ebfa}
.svx-dark .svx-list svg{stroke:#fff}

.svx-btn{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 6px 6px clamp(16px,1.3vw,26px);border-radius:999px;background:#fff;color:var(--svx-blue);font-weight:600;font-size:clamp(.82rem,.85vw,1.05rem);box-shadow:0 6px 18px rgba(20,45,110,.10);border:1px solid #e3ebf8;transition:box-shadow .2s ease}
.svx-btn i{display:grid;place-items:center;flex:none;width:clamp(34px,2.4vw,46px);height:clamp(34px,2.4vw,46px);border-radius:50%;background:linear-gradient(150deg,#3b82ff,#1f55f0);color:#fff;transition:transform .2s ease}
.svx-btn:hover{box-shadow:0 10px 24px rgba(31,85,240,.22)}
.svx-btn:hover i{transform:translateX(3px)}
.svx-dark .svx-btn{border-color:transparent}

/* ---------- Tablette (3 colonnes) ---------- */
@media(max-width:1180px){
  .svx-head{grid-template-columns:1fr;align-items:start}
  .svx-aside{flex-direction:row-reverse;justify-content:space-between;align-items:center;flex-wrap:wrap}
  .svx-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svx-card h3{font-size:1.15rem}
  .svx-card p{font-size:.88rem}
  .svx-list li{font-size:.84rem}
  .svx-btn{font-size:.9rem}
}

/* ---------- Petite tablette (2 colonnes) ---------- */
@media(max-width:760px){
  .svx-aside{flex-direction:column-reverse;align-items:flex-start}
  .svx-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Mobile : carrousel horizontal ---------- */
@media(max-width:560px){
  .svx h2{max-width:none}
  .svx-perks{flex-wrap:wrap;gap:12px 18px}
  .svx-perks li{font-size:.78rem}
  .svx-cta{align-self:stretch;justify-content:space-between}
  .svx-cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--side));padding:6px var(--side) 18px;scroll-padding-inline:var(--side);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .svx-cards::-webkit-scrollbar{display:none}
  .svx-card{flex:0 0 80%;scroll-snap-align:start}
  .svx-card:hover{transform:none}
  .svx-card h3{font-size:1.15rem}
}

@media(prefers-reduced-motion:reduce){
  .svx-card,.svx-cta,.svx-btn,.svx-btn i{transition:none}
}

/* ---------- Ajustements ---------- */
.svx h2{max-width:24ch}
.svx-btn{white-space:nowrap}
.svx-list li{text-wrap:pretty}
@media(min-width:1181px){
  .svx-cards{margin-inline:calc(-1 * (var(--side) - clamp(16px,1.4vw,32px)))}
  .svx-body{padding-inline:clamp(12px,1vw,24px)}
  .svx-card p{font-size:clamp(.76rem,.78vw,1.02rem)}
  .svx-list li{font-size:clamp(.72rem,.7vw,.95rem);gap:7px}
  .svx-btn{font-size:clamp(.76rem,.8vw,1.05rem);padding-left:clamp(14px,1.1vw,26px)}
}
@media(max-width:560px){
  .svx-perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
  .svx-perks li{flex-direction:column;align-items:flex-start;gap:8px;font-size:.74rem}
  .svx-perks br{display:none}
  .svx-perks span{width:36px;height:36px}
  .svx-media{aspect-ratio:608/500}
}

/* ---------- V236 : section plus compacte ---------- */
#services.svx{padding-block:clamp(28px,2.6vw,60px) clamp(32px,2.8vw,64px)}
.svx-head{margin-bottom:clamp(18px,1.6vw,34px);gap:clamp(16px,2vw,48px)}
.svx-eyebrow{margin-bottom:clamp(8px,.7vw,14px)}
.svx h2{font-size:clamp(1.6rem,2.4vw,3.1rem);max-width:30ch}
.svx-lead{margin-top:clamp(8px,.7vw,14px);font-size:clamp(.9rem,.92vw,1.15rem)}
.svx-aside{gap:clamp(14px,1.4vw,28px)}
.svx-media{aspect-ratio:608/430}
.svx-media img{object-position:center 40%}
.svx-media::after{background:linear-gradient(180deg,transparent 52%,color-mix(in srgb,var(--bg) 55%,transparent) 76%,var(--bg) 100%)}
.svx-ic{width:clamp(38px,2.6vw,54px);height:clamp(38px,2.6vw,54px);bottom:clamp(6px,.5vw,10px)}
.svx-body{padding-top:clamp(6px,.5vw,10px)}
.svx-card p{margin-top:clamp(4px,.4vw,8px)}
.svx-list{gap:clamp(4px,.35vw,7px);margin:clamp(8px,.7vw,14px) 0 clamp(12px,1vw,20px)}
.svx-btn{padding-block:4px}
.svx-btn i{width:clamp(30px,2vw,40px);height:clamp(30px,2vw,40px)}
@media(max-width:560px){
  .svx h2{font-size:1.55rem}
  .svx-lead{font-size:.88rem}
  .svx-media{aspect-ratio:608/380}
  .svx-cta{padding-block:7px}
}
.svx-media{flex:none;min-height:0;overflow:hidden}
.svx-media img{position:absolute;inset:0}
.svx-media{aspect-ratio:608/530}
.svx-media img{object-position:center 30%}
@media(max-width:560px){.svx-media{aspect-ratio:608/450}}
/* V237 : image nette, sans fondu en bas */
.svx-media::after{content:none}
/* V240 : cartes plus carrées, coins légèrement arrondis */
.svx-card{border-radius:clamp(10px,.7vw,14px)}
@media(max-width:560px){.svx-card{border-radius:12px}}
/* V251 : listes retirées — espace entre la description et le bouton */
.svx-card p{margin-bottom:clamp(14px,1.2vw,22px)}
/* V255 : bouton « Parler de mon projet » retiré — le texte d'intro prend sa place à droite */
.svx-aside .svx-lead{margin-top:0;max-width:44ch}
@media(max-width:1180px){.svx-aside{flex-direction:column;justify-content:flex-start;align-items:flex-start}.svx-aside .svx-lead{max-width:58ch}}
/* V259 : « Nos réalisations » au même style que « Nos services » */
.rz .rz-eyebrow{display:flex;align-items:center;gap:16px;font:600 clamp(.72rem,.7vw,.9rem)/1.5 Poppins,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#1b2a52;margin-bottom:clamp(8px,.7vw,14px)}
.rz .rz-eyebrow::before{content:"";flex:none;width:clamp(28px,2.2vw,44px);height:3px;border-radius:3px;background:linear-gradient(90deg,#1f55f0,#12c2ff)}
/* V260 : titre sur 2 lignes — « Des solutions numériques pour » / « faire grandir votre entreprise » */
#services .svx h2,.svx h2{max-width:none}
.svx h2 em{display:block}
.svx h2{white-space:nowrap;font-size:min(clamp(1.6rem,2.4vw,3.1rem),calc((100vw - 2 * var(--side,20px)) / 15.5))}


/* V281 : fond de la section « Nos services » en blanc uni */
#services.svx{background:#fff;background-image:none}

/* V282 : fond de la section « Nos réalisations » en blanc uni */
#realisations.rz{background:#fff;background-image:none}

/* V302 — Section « Nos réalisations » : le grand titre est retiré;
   « Nos réalisations » devient le titre (même style lettres espacées + ligne dégradée, en plus grand). */
#realisations .rz-eyebrow.rz-title{font:700 clamp(1.15rem,1.45vw,1.9rem)/1.25 Poppins,sans-serif;letter-spacing:.2em;gap:clamp(16px,1.3vw,24px);color:#12244d;margin:0 0 clamp(14px,1.3vw,24px)}
#realisations .rz-eyebrow.rz-title::before{width:clamp(40px,3.2vw,64px);height:4px}
@media (max-width:699px){#realisations .rz-eyebrow.rz-title{font-size:1.1rem;letter-spacing:.16em}#realisations .rz-eyebrow.rz-title::before{width:36px}}

/* V303 — « Nos réalisations » : bouton et flèches harmonisés avec le nouveau titre
   et avec le style carré de la section Services (bouton marine compact + flèche en carré bleu). */
#realisations .rz-btn{gap:18px;padding:8px 8px 8px clamp(18px,1.4vw,26px);border-radius:6px;background:#0a1638;color:#fff;font-weight:600;font-size:clamp(.9rem,.95vw,1.12rem);box-shadow:0 14px 30px -14px rgba(10,22,56,.6)}
#realisations .rz-btn i{display:grid;place-items:center;width:clamp(34px,2.3vw,44px);aspect-ratio:1;border-radius:4px;background:linear-gradient(135deg,#3b82ff,#1f55f0);transition:transform .2s}
#realisations .rz-btn svg{width:46%;height:46%;fill:none;stroke:#fff;stroke-width:2.4}
#realisations .rz-btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(10,22,56,.7)}
#realisations .rz-btn:hover i{transform:translateX(3px)}
#realisations .rz-arrow{border-radius:6px;border-color:#9fb6e6}

/* V304 — Cartes du carrousel « Nos réalisations » alignées sur le style carré de la page :
   coins de 6 px, halo bleu remplacé par un contour net marine ardoise, flèche en carré. */
#realisations .rz-card{border-radius:6px}
#realisations .rz-track .rz-card[data-pos="0"]{border:2px solid #34446b;box-shadow:0 26px 56px -26px rgba(10,22,56,.55),0 6px 18px -10px rgba(31,85,240,.25)}
#realisations .rz-track .rz-card[data-pos="1"],#realisations .rz-track .rz-card[data-pos="-1"],
#realisations .rz-track .rz-card[data-pos="1"]:hover,#realisations .rz-track .rz-card[data-pos="-1"]:hover{border:1.5px solid #c3d1ec;box-shadow:0 16px 36px -22px rgba(10,22,56,.35)}
#realisations .rz-go{border-radius:4px;background:#e6eefc}
#realisations .rz-card[data-pos="0"] .rz-go,#realisations .rz-card:hover .rz-go{background:linear-gradient(135deg,#3b82ff,#1f55f0);color:#fff}

/* V307 — Titre « Nos réalisations » un peu plus grand (≈ +22 %), identique à « Nos services » */
#realisations .rz-eyebrow.rz-title{font-size:clamp(1.4rem,1.78vw,2.35rem);gap:clamp(18px,1.5vw,28px)}
#realisations .rz-eyebrow.rz-title::before{width:clamp(46px,3.8vw,76px)}
@media (max-width:699px){#realisations .rz-eyebrow.rz-title{font-size:1.3rem}#realisations .rz-eyebrow.rz-title::before{width:40px}}
/* V307 — « Nos réalisations » toujours sur une ligne : la taille s'adapte à la largeur de la colonne */
#realisations .rz-intro{container-type:inline-size}
#realisations .rz-eyebrow.rz-title{white-space:nowrap;font-size:min(clamp(1.4rem,1.78vw,2.35rem),calc((100cqi - clamp(46px,3.8vw,76px) - clamp(18px,1.5vw,28px) - 6px) / 12.9))}
@media (max-width:699px){#realisations .rz-eyebrow.rz-title{font-size:min(1.3rem,calc((100cqi - 40px - 24px) / 12.9))}}