/* ==========================================================================
   APEXSOFT — thème public
   Chargé après apexsoft.css. Redéfinit les jetons de couleur et construit
   l'interface publique : navigation flottante, hero, domaines, section sombre,
   méthode, catalogue, réalisations, pages d'authentification.

   Contraintes tenues :
   - aucun CDN : polices système uniquement ;
   - animations facultatives : sans JavaScript, tout reste lisible ;
   - prefers-reduced-motion respecté ;
   - charte conservée : vert #16543F, bleu #183D58, ivoire.
   ========================================================================== */

:root{
  /* Nouveaux jetons */
  --deep:#0A1512;          /* presque noir, teinté vert */
  --deep-2:#132520;        /* surface des cartes sombres */
  --deep-3:#1D332C;        /* bordure sur fond sombre */
  --lime:#C9F24D;          /* accent acide */
  --lime-soft:#E3FA9E;
  --lime-ink:#0A1512;      /* texte posé sur le lime */
  --paper:#FBFAF7;         /* blanc chaud */
  --field:#EFEEEA;         /* gris de fond, côté shot */
  --muted:#6B7A76;
  --hair:#E4E5DF;

  /* Rayons généreux, comme la référence */
  --radius-sm:12px;
  --radius-lg:24px;
  --radius-xl:34px;
  --radius-pill:999px;

  /* Ombres diffuses */
  --shadow-soft:0 1px 2px rgba(10,21,18,.04),0 12px 32px -12px rgba(10,21,18,.10);
  --shadow-lift:0 2px 4px rgba(10,21,18,.05),0 26px 60px -22px rgba(10,21,18,.22);

  /* Typographie */
  --font-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  /* Recalibrage des jetons hérités (portail inclus) */
  --radius:14px;
  --mist:#EDF3F0;
  --line:#E4E5DF;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body{font-family:var(--font);background:var(--field);color:var(--deep);-webkit-font-smoothing:antialiased}
.public-shell{background:var(--field)}
.public-shell main{background:transparent}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.1}

::selection{background:var(--lime);color:var(--lime-ink)}

/* Le conteneur public reprend la largeur de la référence. Les sections gèrent
   elles-mêmes leur espacement vertical : on neutralise les marges héritées. */
.container{max-width:1320px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px);width:100%}
.public-main{padding:0;background:transparent}
.muted{color:var(--muted)}

/* Lien d'évitement, conservé */
.skip-link{background:var(--deep);color:#fff}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.button,.btn{
  display:inline-flex;align-items:center;gap:.6em;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:.98rem;line-height:1;
  padding:.95em 1.6em;border-radius:var(--radius-pill);border:1px solid transparent;
  background:var(--green);color:#fff;text-decoration:none;cursor:pointer;
  transition:transform .35s var(--ease-out),background-color .25s,box-shadow .35s var(--ease-out),color .25s;
}
.button:hover,.btn:hover{background:#1c6a4f;transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.button:active,.btn:active{transform:translateY(0)}

.button.secondary{background:transparent;color:var(--deep);border-color:var(--hair)}
.button.secondary:hover{background:#fff;border-color:#cfd3cb}

.button.subtle{background:transparent;color:var(--green);border-color:transparent;padding-inline:.9em}
.button.subtle:hover{background:rgba(22,84,63,.07);box-shadow:none}

.button.small{padding:.7em 1.15em;font-size:.88rem}
.button.full-width{width:100%}
.button.ivory{background:var(--paper);color:var(--deep)}
.button.ivory:hover{background:#fff}

/* Bouton-pilule de navigation, comme « Get Started → » */
.btn-pill{
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--paper);color:var(--deep);border:1px solid var(--hair);
  padding:.72em 1.15em;border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:600;font-size:.92rem;text-decoration:none;
  transition:background-color .25s,transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.btn-pill:hover{background:#fff;transform:translateY(-1px);box-shadow:var(--shadow-soft)}
.btn-pill .arrow{transition:transform .35s var(--ease-out)}
.btn-pill:hover .arrow{transform:translateX(3px)}

.nav-link{
  font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--deep);
  text-decoration:none;padding:.5em .2em;transition:opacity .2s;
}
.nav-link:hover{opacity:.6}

/* --------------------------------------------------------------------------
   En-tête : navigation flottante en pilule
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;background:transparent;
  padding:18px clamp(16px,4vw,40px) 0;
}
.nav-shell{
  max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:20px;
  background:rgba(251,250,247,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--hair);border-radius:var(--radius-pill);
  padding:10px 12px 10px 20px;
  transition:box-shadow .4s var(--ease-out),background-color .3s;
}
.site-header.is-stuck .nav-shell{box-shadow:var(--shadow-soft);background:rgba(251,250,247,.94)}

/* Sur grand écran, le conteneur de navigation s'efface : ses enfants
   (pilule de liens + actions) participent directement à la ligne flex. */
.nav-drawer{display:contents}

.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--deep);flex-shrink:0}
.brand img{border-radius:10px;display:block}
.brand span{
  font-family:var(--font-display);font-weight:800;font-size:1.06rem;
  letter-spacing:-.02em;line-height:1.05;display:flex;flex-direction:column;
}
.brand small{font-weight:500;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.nav-pill{
  display:flex;align-items:center;gap:4px;margin-left:8px;
  background:var(--field);border-radius:var(--radius-pill);padding:5px;
}
.nav-pill a{
  font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--deep);
  text-decoration:none;padding:.62em 1.05em;border-radius:var(--radius-pill);
  transition:background-color .25s,color .25s;white-space:nowrap;
}
.nav-pill a:hover{background:rgba(255,255,255,.85)}
.nav-pill a[aria-current="page"]{background:#fff;box-shadow:0 1px 2px rgba(10,21,18,.06)}

.nav-actions{display:flex;align-items:center;gap:14px;margin-left:auto;flex-shrink:0}
.nav-logout{
  background:none;border:0;font-family:var(--font-display);font-weight:600;font-size:.92rem;
  color:var(--deep);cursor:pointer;padding:.5em .2em;transition:opacity .2s;
}
.nav-logout:hover{opacity:.6}

.menu-toggle{
  display:none;margin-left:auto;background:var(--paper);border:1px solid var(--hair);
  border-radius:var(--radius-pill);padding:.6em 1.1em;font-family:var(--font-display);
  font-weight:600;font-size:.9rem;cursor:pointer;color:var(--deep);
}

/* --------------------------------------------------------------------------
   Hero — le cœur de la référence
   -------------------------------------------------------------------------- */
.hero{position:relative;max-width:1320px;margin:0 auto;padding:clamp(28px,5vw,64px) clamp(16px,4vw,40px) clamp(70px,10vw,130px)}
.hero-stage{position:relative}

/* Plaque blanche portant le mot-symbole */
.hero-plate{
  position:relative;z-index:2;background:var(--paper);border:1px solid var(--hair);
  border-radius:var(--radius-xl);padding:clamp(24px,4vw,46px) clamp(20px,3vw,38px) clamp(120px,16vw,210px);
  overflow:hidden;
}
.hero-plate::after{
  /* lavage dégradé sur le mot-symbole, comme sur la référence */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 38%,rgba(255,255,255,.85) 52%,transparent 72%);
  mix-blend-mode:screen;
}

.hero-wordmark{
  margin:0;font-family:var(--font-display);font-weight:900;
  font-size:clamp(3.4rem,15.5vw,15rem);line-height:.82;letter-spacing:-.055em;
  color:var(--deep);white-space:nowrap;
}
.hero-wordmark .dot{color:var(--green)}

/* Halo animé derrière la scène */
.hero-halo{
  position:absolute;left:50%;top:38%;width:min(760px,86vw);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 42% 40%,rgba(201,242,77,.34),rgba(201,242,77,0) 62%),
             radial-gradient(circle at 62% 66%,rgba(24,61,88,.16),rgba(24,61,88,0) 60%);
  filter:blur(14px);animation:halo-drift 18s var(--ease-in-out) infinite;
}
@keyframes halo-drift{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  33%{transform:translate(-46%,-54%) scale(1.08)}
  66%{transform:translate(-54%,-46%) scale(.96)}
}

/* Illustration : déborde de la plaque, comme l'objet 3D de la référence */
.hero-visual{
  position:relative;z-index:3;margin:clamp(-150px,-19vw,-96px) auto 0;
  width:min(600px,80vw);display:block;
}
.hero-visual svg{width:100%;height:auto;display:block;filter:drop-shadow(0 34px 60px rgba(10,21,18,.20))}
.hero-visual .orbital{transform-origin:center;animation:spin 26s linear infinite}
.hero-visual .orbital--slow{animation-duration:38s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* Statistique à gauche, index à droite — sur le champ gris */
.hero-stat{
  position:absolute;z-index:4;left:clamp(0px,2vw,26px);top:56%;
  display:flex;flex-direction:column;gap:10px;
}
.hero-faces{display:flex;align-items:center;gap:12px}
.hero-faces .face{
  width:34px;height:34px;border-radius:50%;border:2px solid var(--paper);
  background:linear-gradient(140deg,var(--green),var(--navy));
  display:grid;place-items:center;color:#fff;font-family:var(--font-display);
  font-weight:800;font-size:.72rem;margin-left:-12px;
}
.hero-faces .face:first-child{margin-left:0}
.hero-stat strong{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em}
.hero-stat span{font-size:.8rem;color:var(--muted)}

.hero-index{
  position:absolute;z-index:4;right:clamp(0px,2vw,26px);top:56%;
  list-style:none;margin:0;padding:0;text-align:right;
  display:grid;gap:8px;font-size:.85rem;color:var(--muted);
}
.hero-index li span{color:#B3BAB6;margin-left:6px;font-variant-numeric:tabular-nums}

/* Bas de hero : phrase + bouton circulaire */
.hero-foot{
  position:relative;z-index:4;display:flex;align-items:flex-end;justify-content:space-between;
  gap:30px;margin-top:clamp(18px,3vw,34px);
}
.hero-lede{max-width:30ch;margin:0;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.5;font-weight:500}
.hero-dots{
  height:12px;margin-top:14px;max-width:260px;color:#C4C9C3;
  background-image:radial-gradient(circle,currentColor 1.6px,transparent 1.7px);
  background-size:13px 13px;background-repeat:repeat-x;
}

.hero-orb{
  flex-shrink:0;width:clamp(132px,15vw,186px);aspect-ratio:1;border-radius:50%;
  background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;text-align:center;
  font-family:var(--font-display);font-weight:700;font-size:clamp(.82rem,1.1vw,.98rem);
  text-decoration:none;padding:18px;line-height:1.25;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
  animation:orb-pulse 5.5s var(--ease-in-out) infinite;
}
.hero-orb:hover,.hero-orb:focus-visible{transform:scale(1.06);box-shadow:0 20px 50px -14px rgba(201,242,77,.75)}
@keyframes orb-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(201,242,77,.5)}
  55%{box-shadow:0 0 0 22px rgba(201,242,77,0)}
}

/* --------------------------------------------------------------------------
   Bande de références — logos de clients ayant autorisé la mention de leur nom.
   Le conteneur s’adapte au nombre de logos présents : aucun emplacement vide
   n’est affiché si une autorisation est retirée.
   -------------------------------------------------------------------------- */
.trust{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,40px) clamp(52px,7vw,88px)}
.trust-label{
  margin:0 0 clamp(18px,2.6vw,28px);text-align:center;
  font-family:var(--font-display);font-weight:700;font-size:.76rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.trust-logos{
  list-style:none;margin:0;padding:clamp(20px,3vw,34px) clamp(16px,3vw,32px);
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-soft);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(12px,2vw,28px);align-items:center;
}
.trust-logos li{display:flex;justify-content:center;min-width:0}
.trust-logos a{
  display:grid;place-items:center;width:100%;max-width:280px;
  padding:clamp(10px,1.4vw,18px);border-radius:var(--radius-lg);
  transition:transform .45s var(--ease-out),background-color .3s;
}
.trust-logos a:hover,.trust-logos a:focus-visible{transform:translateY(-4px);background:var(--field)}
/* Boîte de hauteur fixe + object-fit : des logos de formats très différents
   gardent un poids visuel comparable, quelle que soit leur proportion. */
.trust-logos img{display:block;height:clamp(52px,6vw,74px);width:100%;object-fit:contain}
.trust-foot{margin:18px 0 0;text-align:center;font-size:.9rem;color:var(--muted)}
.trust-foot a{color:var(--green);font-weight:600;text-decoration:none}
.trust-foot a:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   Domaines — nos propres domaines d’intervention (aucun logo tiers)
   -------------------------------------------------------------------------- */
.domains{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,40px) clamp(60px,8vw,100px)}
.domains h2{
  font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:800;letter-spacing:-.035em;
  margin:0 0 clamp(20px,3vw,32px);
}
.domains-panel{
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius-lg);
  padding:clamp(22px,3.4vw,38px) clamp(18px,3vw,32px);
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
}
.domains-panel .domain{
  text-align:center;padding:12px 10px;border-left:1px solid var(--hair);
  font-family:var(--font-display);font-weight:700;font-size:clamp(.85rem,1.25vw,1.1rem);
  letter-spacing:-.01em;color:var(--deep);text-decoration:none;
  transition:color .25s,transform .35s var(--ease-out);
}
.domains-panel .domain:first-child{border-left:0}
.domains-panel .domain:hover{color:var(--green);transform:translateY(-2px)}
.domains-panel .domain small{display:block;font-weight:500;font-size:.68rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-top:5px}

/* --------------------------------------------------------------------------
   Section sombre
   -------------------------------------------------------------------------- */
.dark-section{
  background:var(--deep);color:#fff;border-radius:var(--radius-xl);
  max-width:1320px;margin:0 auto;padding:clamp(52px,8vw,110px) clamp(20px,4vw,60px);
}
.dark-section h2{
  font-size:clamp(1.8rem,4.6vw,3.5rem);font-weight:800;letter-spacing:-.035em;
  text-align:center;max-width:20ch;margin:0 auto clamp(38px,5vw,64px);line-height:1.12;
}
.hl{
  background:var(--lime);color:var(--lime-ink);border-radius:var(--radius-pill);
  padding:.06em .42em;display:inline-block;
}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.feature-card{
  background:var(--deep-2);border:1px solid var(--deep-3);border-radius:var(--radius-lg);
  padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:18px;
  transition:transform .45s var(--ease-out),border-color .3s,background-color .3s;
}
.feature-card:hover{transform:translateY(-6px);border-color:rgba(201,242,77,.45);background:#182B25}
.feature-chips{display:flex;gap:10px}
.feature-chip{
  width:44px;height:44px;border-radius:50%;background:var(--deep-3);
  display:grid;place-items:center;color:var(--lime);flex-shrink:0;
  transition:background-color .3s,color .3s;
}
.feature-card:hover .feature-chip{background:rgba(201,242,77,.14)}
.feature-chip svg{width:20px;height:20px}
.feature-card h3{margin:auto 0 0;font-size:1.22rem;font-weight:700;letter-spacing:-.02em;color:#fff}
.feature-card hr{border:0;border-top:1px solid var(--deep-3);margin:0}
.feature-card p{margin:0;color:#9DAFA9;font-size:.92rem;line-height:1.6}

/* --------------------------------------------------------------------------
   Méthode
   -------------------------------------------------------------------------- */
.method{max-width:1320px;margin:0 auto;padding:clamp(60px,8vw,120px) clamp(16px,4vw,40px)}
.method-head{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(32px,4vw,54px)}
.method-head h2{font-size:clamp(1.8rem,4.4vw,3.2rem);font-weight:800;letter-spacing:-.035em;margin:0;max-width:16ch}
.method-head p{margin:0;max-width:44ch;color:var(--muted);line-height:1.6}
.method-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);counter-reset:step}
.method-list li{
  counter-increment:step;background:var(--paper);border:1px solid var(--hair);
  border-radius:var(--radius-lg);padding:clamp(20px,2.4vw,28px);
  display:flex;flex-direction:column;gap:12px;
  transition:transform .45s var(--ease-out),border-color .3s,box-shadow .45s var(--ease-out);
}
.method-list li:hover{transform:translateY(-5px);border-color:#cfd3cb;box-shadow:var(--shadow-soft)}
.method-list li::before{
  content:counter(step,decimal-leading-zero);font-family:var(--font-display);font-weight:800;
  font-size:.82rem;letter-spacing:.08em;color:var(--green);
}
.method-list h3{margin:0;font-size:1.08rem;font-weight:700;letter-spacing:-.015em}
.method-list p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}

/* --------------------------------------------------------------------------
   Bandeau d'appel
   -------------------------------------------------------------------------- */
.cta-band{max-width:1320px;margin:0 auto clamp(60px,8vw,110px);padding:0 clamp(16px,4vw,40px)}
.cta-inner{
  background:var(--green);color:#fff;border-radius:var(--radius-xl);
  padding:clamp(36px,6vw,72px) clamp(24px,4vw,60px);
  display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;
  position:relative;overflow:hidden;
}
.cta-inner::after{
  content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,242,77,.30),transparent 68%);pointer-events:none;
}
.cta-inner h2{margin:0;font-size:clamp(1.6rem,3.6vw,2.7rem);font-weight:800;letter-spacing:-.03em;max-width:22ch}
.cta-inner p{margin:10px 0 0;color:rgba(255,255,255,.82);max-width:40ch;line-height:1.6}
.cta-inner .button{position:relative;z-index:1}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.site-footer{background:var(--deep);color:#9DAFA9;padding:clamp(44px,6vw,72px) clamp(16px,4vw,40px) 28px}
.footer-inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.footer-inner>div strong{
  display:block;font-family:var(--font-display);font-weight:800;font-size:1.15rem;
  color:#fff;letter-spacing:-.02em;margin-bottom:6px;
}
.footer-inner>div p{margin:0 0 14px;line-height:1.6}
.footer-inner a{display:block;color:#9DAFA9;text-decoration:none;padding:5px 0;transition:color .2s}
.footer-inner a:hover{color:var(--lime)}
.footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-content:start}
.footer-nav a{padding:5px 0}
.footer-inner .copyright{
  grid-column:1/-1;margin:26px 0 0;padding-top:22px;border-top:1px solid var(--deep-3);
  font-size:.82rem;color:#6E817B;
}
.site-footer .footer-inner>div:first-child{display:flex;flex-direction:column}

/* --------------------------------------------------------------------------
   Contenu éditorial (à propos, confidentialité, contact)
   -------------------------------------------------------------------------- */
.page-section{max-width:1320px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(16px,4vw,40px) clamp(70px,9vw,120px)}
.editorial-heading h1{
  font-size:clamp(2.1rem,6vw,4.6rem);font-weight:900;letter-spacing:-.045em;
  line-height:.98;margin:0 0 22px;max-width:20ch;
}
.editorial-heading p{max-width:62ch;color:var(--muted);font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.65}
.page-prose{max-width:70ch;line-height:1.75}
.page-prose p{margin:0 0 1.1em}
.eyebrow{
  font-family:var(--font-display);font-weight:700;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);margin:0 0 14px;
}
.prose{line-height:1.75;max-width:70ch}
.prose p{margin:0 0 1.1em}

.callout{
  background:var(--paper);border:1px solid var(--hair);border-left:3px solid var(--green);
  border-radius:var(--radius-lg);padding:clamp(22px,3vw,34px);margin-block:clamp(28px,4vw,46px);
  max-width:80ch;
}
.callout h2{margin:0 0 10px;font-size:1.35rem;font-weight:700;letter-spacing:-.02em}
.callout p{margin:0 0 14px;color:var(--muted);line-height:1.65}

.two-column{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,34px);margin-block:24px}
.about-principles{margin-block:clamp(34px,5vw,60px)}
.about-principles h2{font-size:clamp(1.5rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.03em;margin:0 0 18px}
.about-principles h3{margin:0 0 8px;font-size:1.1rem}
.about-principles p{color:var(--muted);line-height:1.65;margin:0 0 12px}

.process-list{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.process-list li{
  counter-increment:p;background:var(--paper);border:1px solid var(--hair);
  border-radius:var(--radius-lg);padding:22px;display:flex;gap:16px;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.process-list li:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.process-list li>span{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--deep);color:var(--lime);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:.85rem;
}
.process-list h3{margin:0 0 6px;font-size:1rem}
.process-list p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}

/* --------------------------------------------------------------------------
   Catalogue
   -------------------------------------------------------------------------- */
.breadcrumb{font-size:.88rem;color:var(--muted);margin:0 0 22px}
.breadcrumb a{color:var(--green);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{margin:0 8px;color:#B3BAB6}

.catalog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  margin-block:clamp(30px,4vw,48px);
}
.catalog-card{
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--hair);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .3s;
}
.catalog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:#cfd3cb}
.catalog-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--mist)}
.catalog-card-body{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.4vw,28px);flex:1}
.catalog-card h2{margin:0;font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
.catalog-card h2 a{color:var(--deep);text-decoration:none}
.catalog-card h2 a:hover{color:var(--green)}
.catalog-card p{margin:0;color:var(--muted);line-height:1.6;font-size:.94rem}
.catalog-card .actions{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;gap:8px}
.catalog-price{
  font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green);
  background:rgba(22,84,63,.07);border-radius:var(--radius-pill);padding:.42em .9em;align-self:flex-start;
}

.service-detail{max-width:900px}
.service-illustration{display:block;width:100%;max-width:900px;height:auto;border-radius:var(--radius-lg);margin:28px 0;border:1px solid var(--hair)}
.service-detail .lead,.lead{font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.55;color:var(--deep)}
.detail-block{margin-block:clamp(28px,4vw,44px)}
.detail-block h2{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.028em;margin:0 0 14px}

.checklist{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.checklist li{position:relative;padding-left:32px;line-height:1.6;color:var(--ink)}
.checklist li::before{
  content:"";position:absolute;left:0;top:.42em;width:13px;height:7px;
  border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg);
}

.related-services{margin-top:clamp(40px,6vw,70px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--hair)}
.related-services h2{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.028em;margin:0 0 20px}

/* --------------------------------------------------------------------------
   Grille de services (inclus dans l'accueil et la page à propos)
   -------------------------------------------------------------------------- */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);padding-block:8px 18px}
.service-item{
  background:var(--paper);border:1px solid var(--hair);border-top:3px solid var(--green);
  border-radius:var(--radius-lg);padding:clamp(20px,2.4vw,28px);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.service-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft)}
.service-item h3{margin:0 0 10px;font-size:1.08rem;font-weight:700;letter-spacing:-.015em}
.service-item h3 a{color:var(--deep);text-decoration:none}
.service-item h3 a:hover{color:var(--green)}
.service-item p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6}

/* --------------------------------------------------------------------------
   Réalisations
   -------------------------------------------------------------------------- */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);margin-block:clamp(30px,4vw,48px)}
.work-card{
  display:flex;flex-direction:column;gap:12px;background:var(--paper);border:1px solid var(--hair);
  border-top:3px solid var(--green);border-radius:var(--radius-lg);padding:clamp(20px,2.4vw,28px);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.work-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.work-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-sm);background:var(--mist)}
.work-card h2,.work-card h3{margin:0;font-size:1.12rem;font-weight:700;letter-spacing:-.02em}
.work-card h2 a,.work-card h3 a{color:var(--deep);text-decoration:none}
.work-card h2 a:hover,.work-card h3 a:hover{color:var(--green)}
.work-card p{margin:0;color:var(--muted);line-height:1.6;font-size:.92rem}
.work-card .badge{align-self:flex-start}
/* Logo du client dans une carte de réalisation : hauteur fixe, largeur libre. */
.work-card-logo{
  margin:0;display:grid;place-items:center;background:#fff;border:1px solid var(--hair);
  border-radius:var(--radius-sm);padding:12px 16px;
}
.work-card-logo img{height:44px;width:auto;max-width:100%;object-fit:contain;display:block}
/* Logo du client sur la page détail */
.client-logo{
  margin:0 0 18px;display:inline-grid;place-items:center;background:#fff;
  border:1px solid var(--hair);border-radius:var(--radius-sm);padding:14px 22px;
}
.client-logo img{height:58px;width:auto;max-width:240px;object-fit:contain;display:block}
/* Aperçu du logo dans le tableau de gestion de l’équipe */
.mini-logo{display:block;height:30px;width:auto;max-width:86px;object-fit:contain;background:#fff;border:1px solid var(--hair);border-radius:4px;padding:3px}

/* --------------------------------------------------------------------------
   Authentification
   -------------------------------------------------------------------------- */
.auth-layout{
  max-width:1320px;margin:0 auto;padding:clamp(36px,6vw,76px) clamp(16px,4vw,40px) clamp(60px,8vw,100px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center;
}
.auth-intro h1{
  font-size:clamp(2.3rem,6vw,4.4rem);font-weight:900;letter-spacing:-.05em;line-height:.95;margin:0 0 20px;
}
.auth-intro p{max-width:42ch;color:var(--muted);font-size:1.05rem;line-height:1.65}
.auth-lines{display:grid;gap:9px;margin:26px 0 0;max-width:230px}
.auth-lines span{height:2px;border-radius:2px;background:var(--hair);display:block}
.auth-lines span:nth-child(2){width:70%;background:var(--lime)}
.auth-lines span:nth-child(3){width:44%}

.auth-card{
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius-xl);
  padding:clamp(24px,3.4vw,40px);box-shadow:var(--shadow-soft);max-width:520px;width:100%;justify-self:end;
}
.auth-card h2{margin:0 0 8px;font-size:clamp(1.35rem,2.6vw,1.8rem);font-weight:800;letter-spacing:-.03em}
.auth-footnote{margin-top:16px}
.auth-card hr{border:0;border-top:1px solid var(--hair);margin:24px 0}
.signup-points{margin:24px 0 0;padding-left:20px;line-height:1.85;color:var(--muted)}
.signup-points li{margin-bottom:5px}

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */
.form-field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.form-field label{
  font-family:var(--font-display);font-weight:600;font-size:.88rem;color:var(--deep);letter-spacing:-.005em;
}
.form-field .required{color:#9B282B}
.form-field input[type="text"],.form-field input[type="email"],.form-field input[type="password"],
.form-field input[type="number"],.form-field input[type="date"],.form-field input[type="search"],
.form-field input[type="tel"],.form-field input[type="url"],.form-field select,.form-field textarea{
  width:100%;padding:.9em 1.05em;border:1px solid var(--hair);border-radius:var(--radius-sm);
  background:#fff;color:var(--deep);font:inherit;font-size:.95rem;
  transition:border-color .2s,box-shadow .2s;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,84,63,.14);
}
.form-field.checkbox-field{flex-direction:row-reverse;align-items:flex-start;justify-content:flex-end;gap:10px}
.form-field.checkbox-field input{width:auto;margin-top:3px;accent-color:var(--green)}
.help-text{font-size:.82rem;color:var(--muted);line-height:1.5}
.field-errors{list-style:none;margin:0;padding:0;font-size:.84rem;color:#9B282B}
.form-errors{
  background:#FDF3F3;border:1px solid #E9C9C9;border-left:3px solid #9B282B;
  border-radius:var(--radius-sm);padding:18px 20px;margin-bottom:22px;
}
.form-errors h2{margin:0 0 8px;font-size:1rem;color:#7E1F22}
.form-errors ul{margin:0;padding-left:18px;font-size:.9rem}

/* --------------------------------------------------------------------------
   Blocs portail réutilisés
   -------------------------------------------------------------------------- */
.detail-list{display:grid;grid-template-columns:minmax(160px,auto) 1fr;gap:10px 24px;margin:0}
.detail-list dt{font-family:var(--font-display);font-weight:600;color:var(--navy)}
.detail-list dd{margin:0;color:var(--ink)}
.plain-list{margin:0;padding-left:20px;line-height:1.8}

.notice{background:var(--paper);border-left:3px solid var(--navy);border-radius:var(--radius-sm);padding:18px 20px;margin-block:20px}
.notice h3{margin:0 0 8px;font-size:1rem;color:var(--navy)}
.notice p{margin:0 0 8px;line-height:1.55}
.notice p:last-child{margin-bottom:0}
.notice-warning{background:#FBF3E4;border-left-color:#B8801F}
.notice-warning h3{color:#8A5F13}
.notice code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:3px;font-size:.9em}

.filter-links{display:flex;flex-wrap:wrap;gap:10px}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-layout{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(22px,3.4vw,48px);
  align-items:start;margin-top:clamp(24px,3vw,40px);
}
.contact-details{background:var(--deep);color:#fff;border-radius:var(--radius-lg);padding:clamp(22px,3vw,34px)}
.contact-details h2{margin:0 0 20px;font-size:1.15rem;color:#fff;letter-spacing:-.02em}
.contact-details p{margin:0 0 18px;line-height:1.5;color:#9DAFA9;font-size:.92rem}
.contact-details p a{color:var(--lime);text-decoration:none;font-weight:600}
.contact-details p a:hover{text-decoration:underline}
.contact-details .muted{color:#7E918B}

/* Cartes publiques : les classes héritées du portail adoptent le nouveau style. */
.public-shell .panel{
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius-xl);
  padding:clamp(22px,3vw,36px);box-shadow:var(--shadow-soft);
}
.public-shell .panel h2{font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:800;letter-spacing:-.03em;margin:0 0 12px}
.public-shell .form-card{margin:0}

.success-state{text-align:center;padding:14px 0}
.success-symbol{
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--lime);color:var(--lime-ink);font-size:1.7rem;font-weight:800;margin:0 auto 18px;
}
.success-state h2{margin:0 0 10px}
.success-state p{color:var(--muted);max-width:46ch;margin:0 auto 20px;line-height:1.6}

.public-shell .empty-state{
  background:var(--paper);border:1px dashed var(--hair);border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,52px);text-align:center;
}
.public-shell .empty-state h3{margin:0 0 10px;font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
.public-shell .empty-state p{color:var(--muted);max-width:52ch;margin:0 auto 16px;line-height:1.6}

.badge{
  display:inline-block;background:rgba(22,84,63,.08);color:var(--green);
  border-radius:var(--radius-pill);padding:.36em .85em;
  font-family:var(--font-display);font-weight:700;font-size:.74rem;
  letter-spacing:.05em;text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   Portail — alignement sur la charte publique
   La structure du portail ne change pas : seuls la teinte de la barre latérale
   et l’état actif reprennent les jetons du site public. Les contrastes restent
   élevés (texte clair sur fond très sombre, texte sombre sur vert clair).
   -------------------------------------------------------------------------- */
.portal-shell .sidebar{background:var(--deep)}
.portal-shell .sidebar-brand{border-bottom-color:rgba(255,255,255,.14)}
.portal-shell .portal-nav a{color:#CFE0D8}
.portal-shell .portal-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.portal-shell .portal-nav a[aria-current]{background:var(--lime);color:var(--lime-ink)}
.portal-shell .sidebar-caption,.portal-shell .sidebar-brand small{color:rgba(255,255,255,.62)}
.portal-shell .sidebar-logout{color:var(--lime-soft)}

/* --------------------------------------------------------------------------
   Révélation au défilement
   Sans JavaScript, [data-reveal] reste visible : seul .js-enabled les masque.
   -------------------------------------------------------------------------- */
.js-enabled [data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
  transition-delay:calc(var(--i,0) * 90ms);
}
.js-enabled [data-reveal].is-visible{opacity:1;transform:none}

.js-enabled .hero-wordmark{opacity:0;transform:translateY(24px) scale(.985)}
.js-enabled .hero-wordmark.is-visible{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}

/* Accessibilité : mouvement réduit */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js-enabled [data-reveal],.js-enabled .hero-wordmark{opacity:1!important;transform:none!important}
  .hero-halo{animation:none}
  .hero-orb{animation:none}
  .hero-visual .orbital{animation:none}
}

/* --------------------------------------------------------------------------
   Adaptation
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .catalog-grid,.work-grid,.service-grid,.feature-grid,.method-list,.process-list{grid-template-columns:repeat(2,1fr)}
  .domains-panel{grid-template-columns:repeat(3,1fr)}
  .domains-panel .domain:nth-child(4){border-left:0}
  .auth-layout{grid-template-columns:1fr;gap:34px}
  .auth-card{justify-self:stretch;max-width:none}
  .footer-inner{grid-template-columns:1fr 1fr}
  .contact-layout{grid-template-columns:1fr}
}

@media (max-width:960px){
  .site-header{padding:12px 12px 0}
  .nav-shell{border-radius:var(--radius-xl);padding:10px 12px;position:relative}
  .menu-toggle{display:inline-flex}

  /* Le tiroir devient un panneau déroulant sous la barre. */
  .nav-drawer{
    display:none;position:absolute;left:0;right:0;top:calc(100% + 10px);
    background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lift);padding:10px;z-index:60;
    flex-direction:column;gap:10px;
  }
  .nav-drawer.is-open{display:flex}
  .nav-pill{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:0;background:transparent;border-radius:0}
  .nav-pill a{padding:.85em 1.1em}
  .nav-pill a[aria-current="page"]{background:var(--field);box-shadow:none}
  .nav-actions{
    display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;
    margin:0;padding-top:10px;border-top:1px solid var(--hair);
  }
  .nav-actions .btn-pill{justify-content:center}
  .nav-actions .nav-link{text-align:center;padding:.7em}

  .hero{padding-inline:12px}
  .hero-plate{padding:22px 18px 90px;border-radius:var(--radius-lg)}
  .hero-wordmark{font-size:clamp(2.6rem,15vw,5rem);white-space:normal;word-break:break-word}
  .hero-visual{width:min(360px,86vw);margin-top:-70px}
  .hero-stat,.hero-index{position:static;text-align:left;margin-top:22px}
  .hero-index{text-align:left}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:24px}
  .hero-orb{width:140px}

  .catalog-grid,.work-grid,.service-grid,.feature-grid,.method-list,.process-list,.two-column{grid-template-columns:1fr}
  .domains-panel{grid-template-columns:1fr 1fr}
  .domains-panel .domain{border-left:0;border-top:1px solid var(--hair);padding-block:16px}
  .domains-panel .domain:first-child,.domains-panel .domain:nth-child(2){border-top:0}
  .footer-inner{grid-template-columns:1fr}
  .footer-nav{grid-template-columns:1fr 1fr}
  .dark-section{border-radius:var(--radius-lg)}
  .auth-layout{padding-inline:12px}
}