/* ════════════════════════════════════════════════════════════
   Addict e-services — Feuille de style partagée des pages services
   Thème éditorial : papier clair + encre + accent rouge
   ════════════════════════════════════════════════════════════ */
:root{
  --paper:#f6f5f2; --paper-2:#ffffff; --ink:#17191d; --ink-soft:#5b5e66;
  --hair:rgba(23,25,29,0.12); --hair-soft:rgba(23,25,29,0.07);
  --dark:#15171b; --accent:#e63329; --accent-light:#f0504a; --sky:#2e9fd8;
  --drop-red:#e63329; --drop-blue:#2e9fd8; --drop-green:#3aaa35;
  --drop-darkgreen:#1e7a2a; --drop-yellow:#f5c500;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper);
  line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Syne',sans-serif;line-height:1.1;letter-spacing:-0.5px}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-light)}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 6%}

/* NAV */
nav{position:sticky;top:0;z-index:100;background:rgba(246,245,242,0.85);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--hair);height:68px;display:flex;align-items:center}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 6%;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-brand img{height:40px;width:auto}
.nav-links{display:flex;align-items:center;gap:1.6rem;list-style:none}
.nav-links a{color:var(--ink-soft);font-weight:500;font-size:0.92rem}
.nav-links a:hover{color:var(--ink)}
.nav-cta{background:var(--accent)!important;color:#fff!important;
  padding:9px 18px;border-radius:6px;font-weight:600}
.nav-cta:hover{background:var(--accent-light)!important}
@media(max-width:760px){.nav-links li:not(.cta-li){display:none}}

/* HERO de page */
.page-hero{padding:5rem 0 3.5rem;border-bottom:1px solid var(--hair)}
.eyebrow{font-size:0.72rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:0.9rem}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);max-width:18ch;margin-bottom:1.2rem}
.page-hero h1::after{content:'';display:block;width:64px;height:3px;
  background:var(--accent);margin-top:1.4rem}
.lead{font-size:1.18rem;color:var(--ink-soft);max-width:60ch;margin-bottom:2rem}
.hero-actions{display:flex;gap:0.9rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:6px;
  font-family:'Syne',sans-serif;font-weight:600;font-size:0.95rem;cursor:pointer;
  transition:background .2s,border-color .2s,transform .15s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-light);color:#fff;transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--hair);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}

/* SECTIONS de contenu */
section.block{padding:4rem 0;border-bottom:1px solid var(--hair)}
section.block h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:1rem}
section.block p{color:var(--ink-soft);max-width:65ch;margin-bottom:1rem}
section.block p strong{color:var(--ink)}

/* Grille de bénéfices */
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2rem}
.feature{background:var(--paper-2);border:1px solid var(--hair);border-radius:10px;padding:1.6rem}
.feature h3{font-size:1.05rem;margin-bottom:0.5rem;display:flex;align-items:center;gap:10px}
.feature h3 svg{width:22px;height:22px;color:var(--accent);flex-shrink:0}
.feature p{font-size:0.95rem;color:var(--ink-soft);margin:0}
@media(max-width:680px){.feature-grid{grid-template-columns:1fr}}

/* Liste à puces (check) */
.checklist{list-style:none;margin-top:1.2rem;display:grid;gap:0.7rem}
.checklist li{display:flex;align-items:flex-start;gap:10px;color:var(--ink-soft)}
.checklist li::before{content:'';flex-shrink:0;width:20px;height:20px;margin-top:2px;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat}

/* Bandeau CTA sombre */
.cta-band{background:var(--dark);color:#fff;border-radius:14px;padding:3rem;margin:4rem 0;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.cta-band h2{font-family:'Syne',sans-serif;font-size:1.6rem;color:#fff;max-width:20ch}
.cta-band p{color:rgba(248,246,241,0.7);margin-top:0.4rem}

/* Maillage interne : autres services */
.others{padding:3.5rem 0}
.others h2{font-size:1.2rem;margin-bottom:1.2rem}
.others-grid{display:flex;flex-wrap:wrap;gap:0.8rem}
.others-grid a{border:1px solid var(--hair);border-radius:100px;padding:8px 16px;
  color:var(--ink);font-size:0.9rem;font-weight:500}
.others-grid a:hover{border-color:var(--accent);color:var(--accent)}

/* FOOTER */
footer{background:var(--dark);color:rgba(248,246,241,0.6);padding:2.5rem 6%;text-align:center;font-size:0.88rem}
footer a{color:rgba(248,246,241,0.8)}
footer a:hover{color:#fff}

/* Accessibilité */
a:focus-visible,.btn:focus-visible,.nav-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ════════════════════════════════════════════════════════════
   COULEURS + MOUVEMENT — un site plus vivant (surcouche 2)
   Dégradés de marque, blobs animés, cartes 3D, ombres colorées
   ════════════════════════════════════════════════════════════ */

/* Filet de marque dégradé sous la nav (nav déjà en position: sticky) */
nav::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--drop-red),var(--drop-yellow),var(--drop-green),var(--drop-blue));opacity:.85}

/* Blobs de couleur animés en fond du hero de page et du bloc "autres services".
   Les fonds s'étendent sur toute la largeur de l'écran (pleine largeur via
   marges négatives), le contenu reste aligné sur le conteneur. */
body{overflow-x:hidden}
.page-hero,.others{
  position:relative;overflow:hidden;isolation:isolate;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);
}
.page-hero>*,.others>*{position:relative;z-index:1}
.page-hero::before,.page-hero::after,.others::before,.others::after{
  content:'';position:absolute;z-index:0;border-radius:50%;width:520px;height:520px;
  pointer-events:none;filter:blur(60px);opacity:.14;animation:blobFloat 22s ease-in-out infinite alternate}
.page-hero::before{background:var(--drop-red);top:-200px;left:-160px}
.page-hero::after{background:var(--drop-blue);bottom:-240px;right:-180px;animation-delay:-6s}
.others::before{background:var(--drop-green);top:-180px;right:-140px}
.others::after{background:var(--drop-yellow);bottom:-200px;left:-160px;animation-delay:-9s}
@keyframes blobFloat{0%{transform:translate(0,0) scale(1)}50%{transform:translate(36px,-26px) scale(1.1)}100%{transform:translate(-26px,18px) scale(.96)}}

/* Eyebrow : grappe des 4 gouttes du logo (signature de marque) */
.eyebrow{display:inline-flex;align-items:center}
.eyebrow::before{content:'';width:9px;height:9px;flex-shrink:0;
  background:var(--drop-red);border-radius:50% 50% 50% 0;
  box-shadow:14px 0 0 var(--drop-green),28px 0 0 var(--drop-blue),42px 0 0 var(--drop-yellow);
  margin-right:54px}

/* Boutons en dégradé + lueur */
.btn-primary{background:linear-gradient(135deg,var(--accent) 0%,var(--drop-blue) 140%);
  box-shadow:0 10px 28px -8px rgba(230,51,41,.5)}
.btn-primary:hover{background:linear-gradient(135deg,var(--accent-light) 0%,var(--sky) 140%);
  box-shadow:0 14px 34px -6px rgba(46,159,216,.5);transform:translateY(-3px)}
.nav-cta{background:linear-gradient(120deg,var(--accent),var(--drop-blue))!important;
  box-shadow:0 6px 16px -6px rgba(230,51,41,.5)}
.nav-cta:hover{box-shadow:0 8px 20px -4px rgba(46,159,216,.55)}

/* Cartes "feature" : tilt 3D + ombre colorée, dégradé sur l'icône */
.feature{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.feature:hover{transform:perspective(900px) rotateX(3deg) rotateY(-3deg) translateY(-8px) scale(1.015);z-index:2}
.feature h3 svg{padding:9px;width:20px;height:20px;border-radius:10px;color:#fff}
.feature:nth-child(4n+1) h3 svg{background:linear-gradient(135deg,var(--drop-red),#ff7a70);box-shadow:0 8px 18px -6px rgba(230,51,41,.5)}
.feature:nth-child(4n+2) h3 svg{background:linear-gradient(135deg,var(--drop-blue),#7fd2ff);box-shadow:0 8px 18px -6px rgba(46,159,216,.5)}
.feature:nth-child(4n+3) h3 svg{background:linear-gradient(135deg,var(--drop-green),#7fe08a);box-shadow:0 8px 18px -6px rgba(58,170,53,.5)}
.feature:nth-child(4n+4) h3 svg{background:linear-gradient(135deg,var(--drop-yellow),#ffe37a);color:#7a5400;box-shadow:0 8px 18px -6px rgba(245,197,0,.5)}
.feature:nth-child(4n+1):hover{box-shadow:0 22px 54px -18px rgba(230,51,41,.4)}
.feature:nth-child(4n+2):hover{box-shadow:0 22px 54px -18px rgba(46,159,216,.4)}
.feature:nth-child(4n+3):hover{box-shadow:0 22px 54px -18px rgba(58,170,53,.4)}
.feature:nth-child(4n+4):hover{box-shadow:0 22px 54px -18px rgba(245,197,0,.4)}

/* Bandeau CTA en dégradé de marque */
.cta-band{background:linear-gradient(120deg,var(--dark) 0%,#1c2a3a 100%);position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 15% 20%,rgba(230,51,41,.35),transparent 45%),
  radial-gradient(circle at 85% 80%,rgba(46,159,216,.35),transparent 45%)}
.cta-band>*{position:relative;z-index:1}

/* Maillage interne : liens en pilule, dégradé au survol */
.others-grid a{transition:border-color .2s,color .2s,transform .2s}
.others-grid a:hover{transform:translateY(-2px);border-color:transparent;
  background:linear-gradient(90deg,rgba(230,51,41,.1),rgba(46,159,216,.1))}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn-primary:hover,.feature:hover{transform:none}
  .page-hero::before,.page-hero::after,.others::before,.others::after{animation:none}
}

@media(max-width:680px){
  .page-hero::before,.page-hero::after,.others::before,.others::after{width:300px;height:300px;filter:blur(36px)}
}

/* ════════════════════════════════════════════════════════════
   SIGNATURE DE MARQUE — cohérence avec l'accueil
   ════════════════════════════════════════════════════════════ */
::selection{background:rgba(230,51,41,.85);color:#fff}

/* Le filet sous le H1 devient les 4 couleurs du logo */
.page-hero h1::after{
  background:linear-gradient(90deg,var(--drop-red) 0 25%,var(--drop-green) 0 50%,var(--drop-blue) 0 75%,var(--drop-yellow) 0 100%);
  width:84px}

/* Footer : filet dégradé en écho à la nav */
footer{position:relative}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--drop-red),var(--drop-yellow),var(--drop-green),var(--drop-blue));opacity:.85}