/* =========================================================================
   WEBCRAFT — atelier-visuels.css · 2026
   Surcouche « galerie éclairée » : papier blanc, illustration omniprésente,
   composition magazine, dégradé de charte violet → bleu → menthe, mouvement
   gauche-droite au scroll. Ne touche NI aux textes NI aux liens.
   Uniquement de la mise en forme : aucun contenu n'est ajouté.
   ========================================================================= */

:root{
  --papier:#FFFFFF;
  --papier-2:#F6F4EF;
  --papier-3:#FBFAF7;
  --encre:#0C0C10;
  --texte:#191920;
  --doux:#565663;
  --ligne:rgba(12,12,16,.10);
  --ligne-forte:rgba(12,12,16,.22);
  --degrade:linear-gradient(96deg,#AF26FA 0%,#6E1FFB 34%,#0101FD 66%,#78FFB2 100%);
  --degrade-sourd:linear-gradient(120deg,rgba(175,38,250,.14),rgba(1,1,253,.10) 48%,rgba(120,255,178,.14));
  --marge:clamp(22px,5vw,96px);
  --rythme:clamp(72px,9vw,168px);
}

/* -------------------------------------------------------------------------
   0. PROPORTIONS DE TEXTE — plancher absolu 13 px
   ------------------------------------------------------------------------- */
body{background:#FFFFFF;font-size:17.5px;line-height:1.68;color:var(--texte)}
p{max-width:60ch}
.chapeau{font-size:clamp(18px,1.35vw,20px);line-height:1.62}
.doux{color:var(--doux);font-size:max(15.5px,1em)}
h2{font-size:clamp(32px,4vw,62px);letter-spacing:-.035em;line-height:1.02}
h3{font-size:clamp(21px,1.7vw,27px)}
.pastille,.rail__lien,.rail__lien small,.rail__nom small,.rail__pied,
.confiance__titre,.pied__titre,.pied__col a,.pied__col p,
.hero__note,.depliable__corps,.carte-service p,.compteur__label,
.galerie__secteur,.galerie__services,.projets__nom,.bandeau a{
  font-size:max(13px,var(--t,0px));
}
.pastille{font-size:clamp(13px,1vw,15px);letter-spacing:.18em;font-weight:800}
.hero__note{font-size:14px}
.confiance__titre,.pied__titre{font-size:13px}
.rail__lien{font-size:14.5px;line-height:1.35}

/* -------------------------------------------------------------------------
   1. RAIL — clair, mais avec une colonne illustrée en dégradé
   ------------------------------------------------------------------------- */
.rail{
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 42%,#FCFBFF 72%,#F7FFF9 100%);
  border-right:1px solid var(--ligne);
}
/* Halos violet et vert de l'ancienne direction retirés (23/10, Raphaël) : le rail reste une nuit unie. */
.rail::after{content:none}
.rail > *{position:relative;z-index:1}
.rail__nom{font-size:15.5px}
.rail__nom small{font-size:13px;letter-spacing:.16em}
.rail__marque img{width:34px;height:34px}
.rail__lien{padding:6px 0;color:var(--texte)}
.rail__lien:hover{color:var(--bleu)}
.rail__services summary{font-size:13.5px;letter-spacing:.06em}
.rail__cta{background:var(--encre);color:#fff;font-size:14px}
.rail__repli{background:#fff}
.rail__pied{font-size:13.5px;line-height:1.55}

/* -------------------------------------------------------------------------
   2. HERO — composition magazine, grande œuvre graphique à droite
   ------------------------------------------------------------------------- */
.hero{
  position:relative;padding-top:clamp(44px,7vh,96px);padding-bottom:var(--rythme);
  background:
    radial-gradient(70% 60% at 100% 0%,rgba(175,38,250,.13),transparent 62%),
    radial-gradient(60% 55% at 88% 92%,rgba(120,255,178,.20),transparent 68%),
    radial-gradient(50% 40% at 55% 8%,rgba(1,1,253,.08),transparent 70%),
    #FFFFFF;
}
.hero__grille{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:end;gap:clamp(30px,4vw,64px)}
.hero__titre{font-size:clamp(42px,5.6vw,92px);line-height:.98}
.hero__titre em{
  background:none;color:inherit;
  padding-right:.06em;
}
.hero__actions{margin-top:34px}
.bouton{background:var(--encre);font-size:16px;padding:16px 28px}
.bouton--ligne{background:#fff}

/* l'œuvre : deux cadres d'écran posés en décalage, filet dégradé */
.hero__scene{
  position:relative;aspect-ratio:1/1.02;isolation:isolate;
}
.hero__scene::before{
  content:"";position:absolute;inset:-6% -15% 18% 12%;z-index:-2;
  background:var(--degrade);filter:blur(46px);opacity:.34;border-radius:50%;
}
.hero__scene::after{
  content:"";position:absolute;left:2%;top:-2%;width:64%;height:1.5px;z-index:3;
  background:var(--degrade);transform-origin:left center;
  animation:trait 2.6s var(--eas) both;
}
@keyframes trait{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
.hero__carte{
  border-radius:6px;border:1px solid var(--ligne);background:#fff;
  box-shadow:0 2px 3px rgba(12,12,16,.05),0 26px 60px -26px rgba(12,12,16,.30),0 60px 120px -70px rgba(1,1,253,.55);
}
.hero__carte--grande{inset:4% 14% 12% 0;transform:rotate(-1.6deg)}
.hero__carte--petite{width:44%;aspect-ratio:9/16;right:0;bottom:0;transform:rotate(2.8deg);border-radius:14px}
.hero__tache{
  width:72%;aspect-ratio:1;right:-16%;top:-14%;
  background:
    radial-gradient(circle at 38% 36%,rgba(175,38,250,.34),transparent 58%),
    radial-gradient(circle at 66% 66%,rgba(1,1,253,.22),transparent 60%),
    radial-gradient(circle at 46% 78%,rgba(120,255,178,.30),transparent 62%);
  filter:blur(24px);opacity:.95;
}

/* grand numéro d'appel en filigrane, purement décoratif */
.plan{position:relative;background:#fff}
.plan::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--degrade);opacity:.9;
}

/* -------------------------------------------------------------------------
   3. BANDEAU CLIENTS — ruban sur papier chaud
   ------------------------------------------------------------------------- */
.confiance{
  background:
    linear-gradient(90deg,var(--degrade-sourd),rgba(255,255,255,0) 60%),
    var(--papier-3);
  border-block:1px solid var(--ligne);
}
.bandeau-logos img{filter:grayscale(1);opacity:.62;transition:filter .5s,opacity .5s}
.bandeau-logos img:hover{filter:none;opacity:1}

/* -------------------------------------------------------------------------
   4. SOLUTIONS — les pictos deviennent des petites œuvres
   ------------------------------------------------------------------------- */
.solutions{
  position:relative;padding-block:var(--rythme);
  background:
    radial-gradient(52% 46% at 92% 4%,rgba(175,38,250,.10),transparent 66%),
    radial-gradient(46% 40% at 6% 96%,rgba(120,255,178,.16),transparent 68%),
    #FFFFFF;
}
.solutions__entete{align-items:end;border-bottom:1px solid var(--ligne);padding-bottom:clamp(20px,3vw,40px)}
.solutions__grille{gap:clamp(22px,3vw,40px)}
.carte-service{
  position:relative;padding:clamp(24px,2.6vw,38px) 0 0;
  background:transparent;border:0;border-radius:0;
  border-top:1px solid var(--ligne-forte);
}
.carte-service::before{
  content:"";position:absolute;left:0;top:-1px;width:0;height:1.5px;background:var(--degrade);
  transition:width .8s var(--eas);
}
.carte-service:hover::before{width:100%}
.carte-service__icone{
  width:58px;height:58px;border-radius:0;background:transparent;
  display:grid;place-items:center;margin-bottom:20px;
  box-shadow:none;
}
.carte-service__icone img{width:52px;height:52px;max-width:52px}
.carte-service h3{margin-bottom:12px}
.carte-service p{font-size:16px;color:var(--doux);max-width:46ch}
.carte-service .lien,.lien{
  display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;
  color:var(--encre);border-bottom:1px solid var(--ligne-forte);padding-bottom:2px;
}
.carte-service .lien:hover,.lien:hover{color:var(--bleu);border-color:var(--bleu)}

/* -------------------------------------------------------------------------
   5. COMPTEURS — grands chiffres en dégradé
   ------------------------------------------------------------------------- */
.compteurs{
  position:relative;margin-block:var(--rythme);padding:clamp(30px,4vw,60px) clamp(4px,2vw,28px);
  border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  background:linear-gradient(180deg,rgba(248,247,255,.7),rgba(247,255,250,.7));
}
.compteur__valeur{
  font-size:clamp(44px,5.4vw,80px);letter-spacing:-.05em;
  background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;
}
.compteur__label{font-size:14.5px;color:var(--doux)}

/* -------------------------------------------------------------------------
   6. RÉALISATIONS — la « salle » : numéro géant, cadre d'écran, mobile en écho
   ------------------------------------------------------------------------- */
.projets{position:relative;padding-block:var(--rythme);background:#fff}
.projets__piste{gap:clamp(40px,6vw,96px)}
.projets__piste > a{
  position:relative;display:block;border-radius:4px;overflow:visible;
}
.projets__piste > a::after{
  content:"";position:absolute;inset:auto 0 -14px 0;height:1px;background:var(--ligne);
}
.projets__piste > a img{
  border-radius:4px;border:1px solid var(--ligne);
  box-shadow:0 2px 3px rgba(12,12,16,.05),0 30px 60px -30px rgba(12,12,16,.32);
  transition:transform .8s var(--eas),box-shadow .8s var(--eas);
}
.projets__piste > a:hover img{transform:translateY(-8px);box-shadow:0 40px 80px -34px rgba(1,1,253,.42)}
.projets__nom{font-size:15.5px;font-weight:700;letter-spacing:-.01em}

/* -------------------------------------------------------------------------
   7. BLOCS texte + image — alternance franche, grande respiration
   ------------------------------------------------------------------------- */
.bloc{padding-block:var(--rythme);position:relative}
.bloc + .bloc{border-top:1px solid var(--ligne)}
.bloc__grille{gap:clamp(30px,5vw,88px);align-items:center}
.cadre{
  border-radius:4px;overflow:hidden;border:1px solid var(--ligne);background:var(--papier-3);
  box-shadow:0 30px 70px -40px rgba(12,12,16,.40);
}
.cadre img{width:100%;height:100%;object-fit:cover}

/* -------------------------------------------------------------------------
   8. BLOCS NOIRS — l'encre devient un accent, pas le fond
   ------------------------------------------------------------------------- */
.appel{
  border-radius:6px;background:#0C0C10;
  box-shadow:0 40px 90px -50px rgba(175,38,250,.55),0 20px 60px -40px rgba(1,1,253,.5);
}
.appel::before{background:radial-gradient(ellipse at center,rgba(175,38,250,.46),transparent 62%)}
.appel::after{background:radial-gradient(circle,rgba(120,255,178,.30),transparent 65%)}
.pied{background:var(--papier-2);border-top:1px solid var(--ligne)}
.pied__col a,.pied__col p{font-size:14.5px}

/* -------------------------------------------------------------------------
   9. MOUVEMENT — dérive gauche-droite au scroll pilotée par atelier.js
      (les classes .mv / .est-vu restent la source de vérité du JS)
   ------------------------------------------------------------------------- */
.mv{will-change:transform,opacity}
.mv--g:not(.est-vu){transform:translate3d(-46px,10px,0) rotate(-.4deg)}
.mv--d:not(.est-vu){transform:translate3d(46px,10px,0) rotate(.4deg)}
.mv--g,.mv--d{transition:transform 1.1s var(--eas),opacity 1s var(--eas)}
.reduit .mv,.reduit .mv--g,.reduit .mv--d{transform:none !important;opacity:1 !important}

@media (prefers-reduced-motion:reduce){
  .mv,.mv--g,.mv--d{transform:none !important;opacity:1 !important;transition:none !important}
  .hero__scene::after{animation:none}
}

/* -------------------------------------------------------------------------
   10. RESPONSIVE — de 390 px aux très grands écrans
   ------------------------------------------------------------------------- */
@media (min-width:1900px){
  .enveloppe{max-width:1640px}
  body{font-size:18px}
}
@media (max-width:1100px){
  .hero__grille,.hero__scene{grid-template-columns:1fr}
  .hero__scene{aspect-ratio:16/11;margin-top:24px}
  .hero__carte--grande{inset:0 22% 10% 0}
}
@media (max-width:780px){
  body{font-size:17px}
  .hero__scene{aspect-ratio:4/3}
  .hero__carte--petite{width:38%;aspect-ratio:9/16}
  .compteurs{grid-template-columns:1fr 1fr}
  .rail__lien,.rail__pied{font-size:14px}
}
@media (max-width:520px){
  .hero__titre{font-size:clamp(34px,9vw,44px)}
  .compteurs{grid-template-columns:1fr}
  .projets__piste{gap:34px}
}