/* base/fonts.css */
/* Self-hosted Inter (variable, latin + latin-ext). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* base/tokens.css */
/* Base tokens
 * Rôle: variables globales (couleurs, rayons, ombres, largeur max).
 * Chargement: premier fichier CSS de la stack.
 * Note: toute évolution visuelle globale doit passer par ces variables.
 */
:root{
  --bg:#1F2C47;
  --bg2:#172338;
  --panel:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.08);
  --text:#EAEAEA;
  --muted:#AFC3D6;
  --accent:#7FD0D2;
  --accent2:#55C3A5;
  --max:1180px;
  --radius:24px;
  --radius-lg:22px;
  --shadow:0 20px 60px rgba(0,0,0,0.35);
}

/* base/reset.css */
/* Base reset
 * Rôle: normalisation des comportements navigateur + contraintes globales.
 * Dépendances: utilise les variables de tokens.css.
 * Note: garder ce fichier neutre, sans styles de composants.
 */
*{
  box-sizing:border-box;
  min-width:0;
}

html{
  scroll-behavior:auto;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

body{
  margin:0;
  font-family:'Inter', Arial, sans-serif;
  background:transparent;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  padding-top:112px;
}

main,
.site-footer{
  position:relative;
  z-index:1;
}

img,svg,video,canvas,iframe{
  max-width:100%;
}

a{color:inherit}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 2000;
  padding: 10px 14px;
  border-radius: 8px;
  background: #0b1220;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-140%);
  transition: transform .2s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.container{
  width:100%;
  max-width:var(--max);
  margin:auto;
  padding:0 16px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media(max-width:900px){
  body{padding-top:108px}
}

/* base/typography.css */
/* Base typography
 * Rôle: hiérarchie typographique globale (titres, textes, labels utilitaires).
 * Dépendances: variables de couleur/espacement de tokens.css.
 * Note: éviter d'ajouter des règles spécifiques à une page ici.
 */
h1,h2,h3,p{margin-top:0}

h1{
  margin:0;
  max-width:980px;
  font-size:clamp(38px,6vw,60px);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-0.045em;
}

h2{
  font-size:clamp(28px,4vw,40px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.03em;
  margin-bottom:0;
}

h3{
  font-size:24px;
  font-weight:700;
  line-height:1.18;
  letter-spacing:-0.025em;
  margin-bottom:0;
}

.eyebrow{
  display:inline-block;
  margin:0 0 18px 0;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(127,208,210,0.10);
  border:1px solid rgba(127,208,210,0.24);
  color:#D7F2F3;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.intro,.lead{
  max-width:920px;
  margin:22px 0 0 0;
  font-size:clamp(16px, 2.2vw, 19px);
  line-height:1.8;
  letter-spacing:-0.015em;
  color:var(--muted);
}

.label{
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:12px;
  font-weight:700;
  margin-bottom:16px;
}

.label.green{color:var(--accent2)}

.muted{
  color:var(--muted);
  font-size:clamp(15px, 1.7vw, 16px);
  font-weight:400;
  line-height:1.8;
  letter-spacing:-0.012em;
}

.text-body{
  font-family:'Inter', Arial, sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.8;
  letter-spacing:-0.012em;
  color:var(--muted);
}

.gradient-accent{
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
}

/* layout/header.css */
/* Layout header
 * Rôle: structure et comportements visuels de l'en-tête global.
 * Dépendances: piloté par layout.js pour le menu mobile (.is-menu-open).
 * Note: conserver ici uniquement ce qui concerne le header/navigation.
 */
.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  background:rgba(31,44,71,0.86);
  border-bottom:1px solid var(--border);
  transition:background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.site-header.is-scrolled{
  background:rgba(23,35,56,0.92);
  box-shadow:0 12px 32px rgba(0,0,0,0.22);
}

.site-header-inner{
  width:100%;
  max-width:var(--max);
  margin:auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.menu{
  display:flex;
  gap:22px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.header-cta{
  display:flex;
  align-items:center;
}

.header-button{
  padding:10px 18px;
  border-radius:999px;
  background:linear-gradient(135deg, #7FD0D2, #55C3A5);
  color:#0b1220;
  font-weight:600;
  text-decoration:none;
  transition:all 0.2s ease;
}

.header-button:hover{
  transform:translateY(-1px);
  opacity:0.9;
}

.tooltip{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.tooltip-text{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg, #7FD0D2, #55C3A5);
  color:#0b1220;
  padding:8px 12px;
  border-radius:6px;
  font-size:13px;
  width:max-content;
  max-width:240px;
  text-align:center;
  line-height:1.35;
  white-space:normal;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease, transform 0.2s ease;
}

.tooltip-text::after{
  content:"";
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  border-width:5px;
  border-style:solid;
  border-color:transparent transparent rgba(127,208,210,0.95) transparent;
}

.tooltip:hover .tooltip-text{
  opacity:1;
  transform:translateX(-50%) translateY(4px);
}

.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  min-height:42px;
}

.brand img{
  height:72px;
  width:auto;
  max-width:220px;
  display:block;
  object-fit:contain;
}

.menu a{
  text-decoration:none;
  color:#E7EEF4;
  font-weight:600;
  font-size:15px;
  letter-spacing:-0.01em;
  transition:color .18s ease;
}

.menu a:hover,
.menu a.active{color:var(--accent)}

.menu-toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(127,208,210,0.35);
  border-radius:12px;
  background:rgba(255,255,255,0.04);
  padding:10px 9px;
  cursor:pointer;
}

.menu-toggle-bar{
  display:block;
  width:100%;
  height:2px;
  margin:5px 0;
  border-radius:2px;
  background:#E7EEF4;
}

@media(max-width:900px){
  .site-header-inner{
    flex-direction:row;
    align-items:center;
    gap:12px;
  }

  .menu-toggle{
    display:block;
    margin-left:auto;
  }

  .menu{
    order:3;
    width:100%;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:10px 0 4px;
  }

  .header-cta{
    order:4;
    width:100%;
    display:none;
    justify-content:flex-start;
    padding-bottom:6px;
  }

  .site-header.is-menu-open .menu{
    display:flex;
  }

  .site-header.is-menu-open .header-cta{
    display:flex;
  }

  .brand img{height:56px; max-width:190px}
  .tooltip-text{display:none}
}

/* layout/footer.css */
/* Layout footer
 * Rôle: grille, contenus et responsive du pied de page global.
 * Dépendances: tokens.css pour palette/ombres.
 * Note: les liens et textes restent dans includes/footer.php.
 */
.site-footer{
  margin-top:60px;
  padding:44px 0 0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 36%);
  border-top:0;
}

.cookie-banner{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:1200;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(23,35,56,0.96);
  pointer-events:auto;
}

.cookie-banner.is-visible{
  display:flex;
}

.cookie-banner-text{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.cookie-banner-text a{
  color:var(--accent);
}

.cookie-banner-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.cookie-btn{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  font:inherit;
  font-weight:600;
  cursor:pointer;
}

.cookie-btn-primary{
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  color:#172338;
}

.cookie-btn-secondary{
  background:rgba(255,255,255,0.05);
  color:var(--text);
}

.footer-grid{
  justify-content: center;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:40px;
}

.footer-logo-link{
  display:inline-flex;
  max-width:100%;
}

.footer-logo{
  height:60px;
  width:auto;
  max-width:100%;
  display:block;
  object-fit:contain;
  margin-bottom:12px;
}

.footer-description{
  max-width:240px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.footer-title{
  margin-bottom:12px;
  color:var(--accent2);
  font-size:15px;
  font-weight:700;
  letter-spacing:-0.01em;
}

.footer-cert-column{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.footer-certification-large{
  margin-top:12px;
  margin-bottom:10px;
}

.footer-certification-large img{
  height:80px;
  width:auto;
  filter:brightness(0) saturate(100%) invert(76%) sepia(28%) saturate(347%) hue-rotate(140deg);
  opacity:0.9;
}

.footer-cert-text{
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
  max-width:220px;
}

.footer-nav a,
.footer-contact a,
.footer-bottom a{
  color:var(--muted);
  font-size:14px;
  text-decoration:none;
  transition:color 0.18s ease;
}

.footer-nav a:hover,
.footer-contact a:hover,
.footer-bottom a:hover{
  color:var(--accent);
}

.footer-contact p,
.footer-subscribe-text,
.footer-privacy-note{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.footer-email{
  color:var(--accent);
  font-weight:500;
}

.footer-actions{
  margin-top:14px;
}

.footer-cta{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  color:#172338;
  font-weight:700;
  text-decoration:none;
  transition:transform 0.18s ease, opacity 0.18s ease;
}

.footer-cta:hover{
  transform:translateY(-1px);
}

.footer-bottom{
  margin-top:28px;
  padding:16px 0 22px;
  border-top:1px solid rgba(255,255,255,0.06);
  color:var(--muted);
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.footer-bottom-left{
  min-width:0;
}

.footer-bottom-right{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:flex-end;
  min-width:0;
}

.footer-social a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent);
  font-weight:600;
  text-decoration:none;
  transition:opacity 0.2s ease;
}

.linkedin-icon{
  width:18px;
  height:18px;
  fill:var(--accent);
  display:block;
  transform:translateY(-3px);
}

@media (max-width: 900px) {
  .cookie-banner{
    flex-direction:column;
    align-items:flex-start;
  }

  .site-footer {
    padding: 34px 0 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-column {
    justify-self: center;
    text-align: left;
    min-width: 0;
  }

  .footer-logo {
    height: 66px;
  }

  .footer-description {
    max-width: none;
  }

  .footer-cert-column {
    align-items: flex-start;
  }

  .footer-certification-large img {
    height: 96px;
    max-width: 100%;
  }

  .footer-bottom {
    display: grid;
    justify-items:center;
    text-align:center;
    gap: 10px;
    font-size: 13px;
  }

  .footer-bottom-right {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content:center;
    width:100%;
    padding:0 20px;
    box-sizing:border-box;
  }
}

/* layout/atmosphere.css */
/* Layout atmosphere
 * Rôle: fond animé continu (mesh + orbes) et apparitions au scroll.
 * Inspiré des fonds Linear/Stripe: blobs larges, mouvement lent, overlap flou.
 * Couleurs: uniquement --accent / --accent2. Pas de grain ni de teinte hors marque.
 */
.site-atmosphere{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.site-atmosphere-mesh,
.site-atmosphere-orb{
  position:absolute;
  pointer-events:none;
}

.site-atmosphere-mesh{
  inset:-22%;
  background:
    radial-gradient(ellipse 48% 42% at 82% 8%, rgba(127,208,210,0.22), transparent 62%),
    radial-gradient(ellipse 42% 52% at 8% 38%, rgba(85,195,165,0.16), transparent 64%),
    radial-gradient(ellipse 46% 38% at 72% 82%, rgba(127,208,210,0.13), transparent 66%),
    radial-gradient(ellipse 36% 46% at 28% 88%, rgba(85,195,165,0.11), transparent 62%),
    radial-gradient(ellipse 28% 30% at 52% 48%, rgba(127,208,210,0.08), transparent 70%);
  filter:blur(28px);
  animation:mitisMeshDrift 40s ease-in-out infinite alternate;
}

.site-atmosphere-orb{
  border-radius:50%;
  filter:blur(42px);
  mix-blend-mode:screen;
  will-change:transform;
}

.site-atmosphere-orb--a{
  top:-12%;
  right:-8%;
  width:min(58vw, 640px);
  height:min(58vw, 640px);
  background:radial-gradient(circle, rgba(127,208,210,0.28) 0%, rgba(127,208,210,0) 70%);
  animation:mitisOrbA 28s ease-in-out infinite;
}

.site-atmosphere-orb--b{
  left:-14%;
  bottom:-18%;
  width:min(52vw, 560px);
  height:min(48vw, 520px);
  background:radial-gradient(circle, rgba(85,195,165,0.24) 0%, rgba(85,195,165,0) 72%);
  animation:mitisOrbB 34s ease-in-out infinite;
}

.site-atmosphere-orb--c{
  top:38%;
  left:42%;
  width:min(36vw, 380px);
  height:min(36vw, 380px);
  background:radial-gradient(circle, rgba(127,208,210,0.14) 0%, rgba(85,195,165,0.08) 46%, transparent 72%);
  animation:mitisOrbC 22s ease-in-out infinite alternate;
}

@keyframes mitisMeshDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-3.5%, 2.5%, 0) scale(1.07)}
}

@keyframes mitisOrbA{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-9vw, 7vh, 0) scale(1.12)}
}

@keyframes mitisOrbB{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(8vw, -6vh, 0) scale(1.08)}
}

@keyframes mitisOrbC{
  0%{transform:translate3d(0,0,0) scale(0.92)}
  100%{transform:translate3d(5vw, -4vh, 0) scale(1.14)}
}

.mitis-reveal{
  opacity:0;
  transform:translate3d(0, 24px, 0);
}

.mitis-reveal.is-inview{
  opacity:1;
  transform:none;
  transition:opacity 0.8s ease, transform 0.8s cubic-bezier(.22,1,.36,1);
}

@media (max-width: 900px){
  .site-atmosphere-mesh{
    inset:-12%;
    filter:blur(22px);
    animation:none;
  }

  .site-atmosphere-orb{
    animation:none;
    opacity:0.7;
  }

  .site-atmosphere-orb--c{
    display:none;
  }

  .mitis-reveal,
  .mitis-reveal.is-inview{
    opacity:1;
    transform:none;
    transition:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .site-atmosphere-mesh,
  .site-atmosphere-orb{
    animation:none;
  }

  .mitis-reveal,
  .mitis-reveal.is-inview{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* layout/sections.css */
/* Layout sections
 * Rôle: gabarits communs de sections (hero, spacing, animations décoratives).
 * Dépendances: variables globales + composants (btns, cards) chargés après.
 * Note perf: privilégier transform/opacity pour les animations.
 */
.section{padding:64px 0}

.hero{
  position:relative;
  overflow:visible;
  padding:90px 0 70px;
}

.hero > .container{
  position:relative;
  z-index:1;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:50px;
  align-items:center;
}

.hero-text{
  max-width:720px;
}

.hero-visual{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

.hero-visual::before{
  content:"";
  position:absolute;
  width:380px;
  height:340px;
  border-radius:58% 42% 46% 54% / 44% 52% 48% 56%;
  background:radial-gradient(circle at 45% 45%, rgba(127,208,210,0.20), transparent 72%);
  filter:blur(24px);
  z-index:0;
  animation:mitisFloatB 20s ease-in-out infinite;
}

.hero-visual img{
  position:relative;
  z-index:1;
  max-width:520px;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 16px 38px rgba(0,0,0,0.32));
  transform:rotate(-4deg) scale(1.02);
  animation:mitisHeroFloat 16s ease-in-out infinite;
}

.hero-text h1 {
  max-width: 680px;
}

.hero-subsection {
  padding-top: 20px;
}

.hero-subcontent {
  max-width: 820px;
}

.hero-subcontent .lead {
  margin-top: 0;
}

.hero-subcontent .btns {
  margin-top: 24px;
}

.hero-compact {
  padding: 78px 0 54px;
}

@keyframes mitisFloatB{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(18px,-14px,0) scale(1.06)}
  100%{transform:translate3d(0,0,0) scale(1)}
}

@keyframes mitisHeroFloat{
  0%,100%{transform:rotate(-4deg) scale(1.02) translate3d(0,0,0)}
  50%{transform:rotate(-2.5deg) scale(1.02) translate3d(0,-12px,0)}
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    margin-top: 40px;
  }

  .hero-visual img {
    transform: scale(1);
    max-width: 420px;
    animation: none;
  }

  .hero{padding:72px 0 56px}
}

@media (max-width: 900px) {
  .hero-visual::before {
    display: none;
  }
}

/* components/buttons.css */
/* Components: buttons
 * Rôle: styles des CTA réutilisables (.btn, .btn-primary, .btn-secondary).
 * Dépendances: tokens.css pour couleurs et rayons.
 * Note: garder des interactions légères pour limiter le coût au scroll.
 */
.btns{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}

.btn{
  display:inline-block;
  padding:14px 22px;
  border-radius:16px;
  font:inherit;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

button.btn{
  appearance:none;
  -webkit-appearance:none;
}

.btn:hover{transform:translateY(-2px)}

.btn-primary{
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  color:#172338;
  border:1px solid transparent;
}

.btn-primary:hover{
  box-shadow:0 12px 26px rgba(85,195,165,0.22);
}

.btn-secondary{
  background:rgba(255,255,255,.04);
  color:var(--text);
  border:1px solid rgba(127,208,210,.18);
}

/* components/cards.css */
/* Components: cards
 * Rôle: blocs carte/stat/cta partagés entre plusieurs pages.
 * Dépendances: palettes et ombres depuis tokens.css.
 * Note: les variantes strictement métier doivent aller dans pages/*.css.
 */
.card,.stat,.cta,.service-card{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(0,0,0,0.24);
}

.card,.cta{padding:30px}

.stat{
  padding:28px;
  min-height:145px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.stat .value{font-size:30px; font-weight:800}
.stat .label{margin-top:8px; color:var(--muted); font-size:15px}

.pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

.pill{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(127,208,210,.16);
  background:rgba(255,255,255,.04);
  font-size:14px;
}

ul.clean{margin:16px 0 0; padding-left:18px; color:#d7e2ef}

.card-link{
  text-decoration:none;
  color:inherit;
  display:block;
}

.card{
  transition:transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
  cursor:default;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.card-link .card{
  cursor:pointer;
}

.card-link:hover .card{
  transform:translateY(-6px);
  border-color:rgba(127,208,210,0.42);
  box-shadow:0 18px 40px rgba(0,0,0,0.28), 0 0 0 1px rgba(127,208,210,0.12);
}

.card-link:hover .label {
  color: var(--accent2);
}

.card-link:focus-visible{
  outline:none;
}

.card-link:focus-visible .card{
  transform:translateY(-6px);
  border-color:rgba(127,208,210,0.52);
  box-shadow:0 0 0 3px rgba(127,208,210,0.22), 0 18px 40px rgba(0,0,0,0.28);
}

.card .pills{
  flex:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  align-content:center;
  justify-content:center;
  gap:14px;
}

.edge-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:32px;
}

.edge-card h3,
.edge-card .label{
  margin-bottom:16px;
}

.edge-card ul{
  margin-top:10px;
}

/* components/grids.css */
/* Components: grids
 * Rôle: primitives de layout (2/3 colonnes, cards grid, split sections).
 * Dépendances: appliqué transversalement sur plusieurs pages.
 * Note: modifier ici impacte la structure globale du site.
 */
.grid-2,.grid-3,.cards,.stats,.services-grid{
  display:grid;
  gap:26px;
}

.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

.section-heading{
  margin-bottom:34px;
  contain:layout paint;
}

.section-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}

@media(max-width:900px){
  .grid-2,.grid-3,.cards,.stats,.services-grid{grid-template-columns:1fr}
  .section-split{grid-template-columns:1fr}
}