/* ==========================================================
   MK Technologies et Innovations — Header + Accueil (hero + services)
   Mobile-first : les styles de base ciblent le mobile.
   Les media queries au-dessus élargissent progressivement.
   Services : grille de cercles, chaque service a sa couleur
   d'identité (fond teinté + halo), à réutiliser plus tard pour
   les sous-services de chaque catégorie.
   ========================================================== */

:root{
  /* --- couleur thème du site : réservée au CTA, au glow du hero,
         à la pagination. C'est la seule couleur "de marque". --- */
  --green-ink: #0E3A24;
  --green-deep: #1B6B44;

  /* --- couleurs d'identité de service : chacune sera réutilisée
         pour les sous-services de la catégorie correspondante.
         *-tint-hover : version plus saturée, utilisée au survol
         des conteneurs de services pour signaler qu'ils sont
         cliquables. --- */
  --green: #2F9E63;  --green-tint: #DFF3E7;  --green-tint-hover: #C4EAD5;
  --blue:  #3E7CB1;  --blue-tint:  #EAF1F8;  --blue-tint-hover:  #CFE3F1;
  --gold:  #B9852C;  --gold-tint:  #FBF3E3;  --gold-tint-hover:  #F3E0B8;
  --brick: #C24B3F;  --brick-tint: #FBEDEA;  --brick-tint-hover: #F5D6CF;

  --bg: #FFFFFF;
  --bg-services: #F2F5F3;
  --surface: #F2F5F3;
  --ink: #17241F;
  --ink-muted: #57645C;
  --card-line: #E3E8E5;
}

/* ==========================================================
   Mode sombre — mêmes noms de variables, valeurs redéfinies.
   Le header et le pied de page restent noirs dans les deux modes
   (ils le sont déjà nativement) : rien à redéfinir pour eux, ni pour
   le logo. Seuls les jetons ci-dessous changent, donc tout composant
   qui les utilise déjà (cartes, textes, fonds de section) s'adapte
   automatiquement sans règle supplémentaire.
   ========================================================== */
html[data-theme="dark"]{
  --green-ink: #4CC98A;   /* servait de survol plus foncé en clair ; plus clair en sombre pour rester visible */
  --green-deep: #5FE0A0;  /* texte vert sur fond sombre — besoin d'un vert plus clair pour le contraste */

  --green: #2F9E63;  --green-tint: #1B4632;  --green-tint-hover: #235038;
  --blue:  #3E7CB1;  --blue-tint:  #1C3A54;  --blue-tint-hover:  #24455F;
  --gold:  #B9852C;  --gold-tint:  #4A3618;  --gold-tint-hover:  #543F1E;
  --brick: #C24B3F;  --brick-tint: #4A241F;  --brick-tint-hover: #542B25;

  --bg: #121816;
  --bg-services: #172420;
  --surface: #1B2622;
  --ink: #EDF2EF;
  --ink-muted: #9BB0A6;
  --card-line: #2B3733;
}
html[data-theme="dark"] body{ background: var(--bg); }
/* Texte des pastilles de piliers (inactives) plus clair en mode
   sombre, pour bien les distinguer du texte courant environnant. */
html[data-theme="dark"] .nav-pill{ color: var(--ink); }

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------
   Header — style "pour le moment", reprend le noir + liseré
   vert déjà vu dans les aperçus. Redesign complet du logo :
   étape séparée à venir.
   ---------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: #000;
}
.site-header__inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  position: relative;
}

.logo{
  display: flex;
  align-items: center;
  text-decoration: none;
}
/* Positions du symbole calculées à partir du composite d'origine
   (mk-logo-sombre.png) : le symbole fait 79,5% de la hauteur du
   lettrage MK, décalé de -23,2% de sa largeur et -6,4% de sa hauteur,
   pour reproduire exactement le chevauchement dans le "M". */
.logo-mark{
  position: relative;
  display: inline-flex;
  height: 32px; /* hauteur compacte vérifiée lisible sur mobile */
}
.logo-letters{
  position: relative;
  z-index: 2;
  height: 100%;
  width: auto;
  display: block;
}
.logo-symbol{
  position: absolute;
  z-index: 1;
  height: 79.5%;
  width: auto;
  left: -23.2%;
  top: -6.4%;
}

/* Slogan centré dans l'espace libre du header — ne prend aucune
   hauteur supplémentaire puisqu'il est à côté du logo, pas en dessous.
   Mobile uniquement pour l'instant (repris ou ajusté lors de la passe
   desktop complète). */
.header-baseline{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 16px;
  width: auto;
}

/* Regroupe le bouton de langue et le hamburger pour qu'ils restent
   collés à droite — sans ça, un 3e élément direct dans le header
   (avec justify-content:space-between) atterrit au centre, exactement
   là où le slogan est déjà positionné. */
.header-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Colonne verticale : réserve la place au-dessus du bouton de langue
   pour le futur bouton mode clair/sombre. Les deux partageront le
   même alignement vertical une fois ajouté. */
/* Bouton de thème compact, même taille et même logique que le bouton
   de langue juste à côté — les deux tiennent dans la hauteur actuelle
   du header sans l'agrandir. Affiche l'icône du mode VERS lequel on
   bascule (lune en mode clair = "passer en sombre"), comme pour EN/FR. */
.theme-toggle-compact{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.48);
  background: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle-compact:hover,
.theme-toggle-compact:focus-visible{ border-color: var(--green); color: var(--green); }
.theme-toggle-compact svg{ width: 19px; height: 19px; }
.theme-toggle-compact .icon-sun{ display: none; }
html[data-theme="dark"] .theme-toggle-compact .icon-moon{ display: none; }
html[data-theme="dark"] .theme-toggle-compact .icon-sun{ display: block; }

/* Sélecteur de langue compact : visible uniquement en mobile, juste
   avant le hamburger. Affiche la langue vers laquelle on bascule
   (pas celle active), pour rester le plus court possible. La version
   FR/EN côte à côte reste réservée au desktop, où elle est déjà
   intégrée à la nav (voir .site-nav .lang-switch plus bas, masquée
   en dessous de 960px pour ne pas la dupliquer). */
.lang-toggle-compact{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.48);
  background: none;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lang-toggle-compact:hover,
.lang-toggle-compact:focus-visible{ border-color: var(--green); color: var(--green); }

.nav-toggle{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span{
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.nav-toggle:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }

.site-nav{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  background: #000;
  border-bottom: 3px solid var(--green);
  padding: 0 20px;
  transition: max-height .3s ease, opacity .25s ease, padding .3s ease;
}
.site-nav[data-state="open"]{
  max-height: 320px;
  opacity: 1;
  padding: 10px 20px 22px;
}
.site-nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.site-nav a{
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}
.site-nav a:hover,
.site-nav a:focus-visible{ color: var(--green); }

.lang-switch{
  display: none; /* réapparaît en desktop, ≥960px — voir media query plus bas */
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.lang-btn{
  background: none;
  border: none;
  padding: 4px;
  font-weight: 700;
  font-size: 14px;
  color: rgba(255,255,255,.55);
  cursor: pointer;
}
.lang-btn.is-active{ color: var(--green); }
.lang-sep{ color: rgba(255,255,255,.3); font-size: 13px; }

@media (min-width: 960px){
  .nav-toggle{ display: none; }
  .site-header__inner{ padding: 14px 32px; justify-content: flex-start; gap: 32px; max-width: none; }

  .header-brand{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; order: 1; }
  .header-baseline{ position: static; transform: none; height: 14px; }

  .site-nav{
    position: static;
    max-height: none;
    opacity: 1;
    overflow: visible;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 0;
    background: none;
    border: none;
    order: 2;
    margin-left: auto;
  }
  .site-nav ul{ flex-direction: row; gap: 28px; }
  .lang-switch{ display: none; }

  .header-actions{ order: 3; }
  .lang-toggle-compact{ display: flex; align-items: center; justify-content: center; order: 1; }
  .theme-toggle-compact{ order: 2; }
}

/* ---------------- Hero ---------------- */
.hero{
  position: relative;
  overflow: hidden;
  padding: 26px 22px 20px;
  scroll-margin-top: 63px;
}
.hero::before{
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,158,99,0.20), rgba(47,158,99,0) 70%);
  top: -100px;
  right: -80px;
  pointer-events: none;
}
.hero h1{
  position: relative;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  /* Taille fixe (au lieu d'une formule fluide qui doit tomber pile au
     bon endroit selon la largeur exacte de chaque écran — trop fragile,
     source des problèmes précédents). 24px, combiné au retour à la
     ligne forcé dans le HTML, tient de façon fiable sur 2 lignes à
     partir d'environ 355px de large, donc sur la quasi-totalité des
     mobiles réels. Remonte à 40px à partir de 640px (voir plus bas). */
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.hero p{
  position: relative;
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-muted);
  text-align: center;
  margin: 0 auto 16px;
}
.cta{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 11px 20px;
  border-radius: 100px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.cta:hover{ background: var(--green-ink); }
.cta:focus-visible{ outline: 2px solid var(--green-ink); outline-offset: 3px; }
.cta svg{ width: 16px; height: 16px; }

/* Flouté vert décoratif repris du hero, appliqué au début de chaque
   section qui a déjà le trait vert (voir border-top: 3px solid
   var(--green) sur .pillars-intro, .about-intro, .approach-intro). */
.section-glow{ position: relative; overflow: hidden; }
.section-glow::before{
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,158,99,0.20), rgba(47,158,99,0) 70%);
  top: -100px;
  right: -80px;
  pointer-events: none;
}

/* ---------------- Services ---------------- */
.services{
  background: var(--bg-services);
  padding: 16px 0 18px;
}
/* Petit espace supplémentaire pour que le premier écran (mobile) s'arrête
   juste après les 4 bandes de services, avant le trait vert des Piliers. */
@media (max-width: 639px){
  .services{ padding-bottom: 56px; }
}
.services-label{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 22px 16px;
  font-weight: 700;
  font-size: 15px;
}
.services-label::before{
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.services-list{ display: flex; flex-direction: column; gap: 8px; padding: 0 22px; }
.service-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 20px;
  padding: 10px 12px 10px 16px;
  min-height: 74px;
  text-decoration: none;
  color: inherit;
  transition: background-color .2s ease;
}
.service-bar--green{ background: var(--green-tint); }
.service-bar--blue { background: var(--blue-tint); }
.service-bar--gold { background: var(--gold-tint); }
.service-bar--brick{ background: var(--brick-tint); }

.service-bar--green:hover,
.service-bar--green:focus-visible{ background: var(--green-tint-hover); }
.service-bar--blue:hover,
.service-bar--blue:focus-visible{ background: var(--blue-tint-hover); }
.service-bar--gold:hover,
.service-bar--gold:focus-visible{ background: var(--gold-tint-hover); }
.service-bar--brick:hover,
.service-bar--brick:focus-visible{ background: var(--brick-tint-hover); }

.service-bar:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }

.service-bar:hover .service-bar-badge,
.service-bar:focus-visible .service-bar-badge{ transform: scale(1.08); }

.service-bar-text{ flex: 1 1 auto; min-width: 0; }
.service-bar-text h3{
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 3px;
  line-height: 1.2;
}
.service-bar-text p{
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-muted);
  margin: 0;
}

.service-bar-badge{
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px -8px rgba(23,36,31,.28);
  transition: transform .2s ease;
}
.badge-halo{
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, transparent 72%);
  opacity: .32;
  z-index: -1;
}
.service-bar-badge svg{ width: 24px; height: 24px; color: var(--c); }

.service-bar--green .service-bar-badge{ --c: var(--green); }
.service-bar--blue  .service-bar-badge{ --c: var(--blue); }
.service-bar--gold  .service-bar-badge{ --c: var(--gold); }
.service-bar--brick .service-bar-badge{ --c: var(--brick); }

/* ==========================================================
   Piliers de services — sous-services de chaque pilier.
   Fond général sur l'intro/clôture ; fond général aussi sur
   les sections de pilier ; la couleur d'identité de chaque
   service vit maintenant sur ses cartes (cohérent avec les
   cercles de la section Services ci-dessus).
   ========================================================== */
.pillars-intro{ background: var(--bg); border-top: 3px solid var(--green); padding: 36px 22px 26px; scroll-margin-top: 63px; }
.pillars-intro h2{
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 27px;
  line-height: 1.2;
  color: var(--ink);
  text-align: center;
  margin: 0 0 12px;
}
.pillars-intro p{ font-size: 15px; line-height: 1.55; color: var(--ink-muted); margin: 0; }

/* Délimite la portée du position:sticky de .pillars-nav : elle colle
   tant qu'on est dans ce conteneur, et se libère naturellement dès
   qu'on en sort (clôture, À propos, etc.). Aucun style requis ici —
   le comportement vient du CSS sticky lui-même. */
.pillars-wrapper{ }

.pillars-nav{
  position: sticky;
  top: 60px; /* sous le header sticky — à ajuster si sa hauteur réelle diffère */
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--card-line);
  padding: 10px 0;
}
.pillars-nav-inner{
  display: flex;
  gap: 6px;
  padding: 0 14px;
}
.nav-pill{
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 8px;
  border-radius: 100px;
  border: 1px solid var(--card-line);
  background: var(--surface);
  font-weight: 700;
  font-size: 11.5px;
  color: var(--ink-muted);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: .2s ease;
}
.nav-pill--green.is-active{ background: var(--green); border-color: var(--green); color: #fff; }
.nav-pill--blue.is-active { background: var(--blue);  border-color: var(--blue);  color: #fff; }
.nav-pill--gold.is-active { background: var(--gold);  border-color: var(--gold);  color: #fff; }
.nav-pill--brick.is-active{ background: var(--brick); border-color: var(--brick); color: #fff; }

.pillar{
  background: var(--bg);
  border-bottom: 1px solid var(--card-line);
  scroll-margin-top: 118px; /* header + nav sticky, pour que l'ancre ne se cache pas dessous */
}

.pillar-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Manrope', sans-serif;
}
.pillar-tag{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pillar-tag svg{ width: 21px; height: 21px; color: #fff; }
.pillar--green .pillar-tag{ background: var(--green); }
.pillar--blue  .pillar-tag{ background: var(--blue); }
.pillar--gold  .pillar-tag{ background: var(--gold); }
.pillar--brick .pillar-tag{ background: var(--brick); }

.pillar-toggle-text{ flex: 1 1 auto; min-width: 0; }
.pillar-toggle-title{
  display: block;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.25;
}
.pillar-toggle-subtitle{
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  margin-top: 2px;
}
.chevron{ flex: 0 0 auto; width: 18px; height: 18px; color: var(--ink); transition: transform .3s ease; }
.pillar-toggle[aria-expanded="true"] .chevron{ transform: rotate(180deg); }
.pillar-toggle:focus-visible{ outline: 2px solid var(--ink); outline-offset: -2px; }

.pillar-panel{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.pillar-panel[data-open="true"]{ grid-template-rows: 1fr; }
.pillar-panel-inner{ overflow: hidden; min-height: 0; }

.pillar-desc{
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 22px 20px;
  max-width: 52ch;
}
.pillar-cards{ display: flex; flex-direction: column; gap: 12px; padding: 0 22px 24px; }
.pillar-card{
  border-radius: 16px;
  padding: 18px;
  border: 1px solid rgba(23,36,31,.06);
}
.pillar--green .pillar-card{ background: var(--green-tint); }
.pillar--blue  .pillar-card{ background: var(--blue-tint); }
.pillar--gold  .pillar-card{ background: var(--gold-tint); }
.pillar--brick .pillar-card{ background: var(--brick-tint); }

.card-icon{
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(23,36,31,.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-icon svg{ width: 19px; height: 19px; }
.pillar--green .card-icon svg{ color: var(--green); }
.pillar--blue  .card-icon svg{ color: var(--blue); }
.pillar--gold  .card-icon svg{ color: var(--gold); }
.pillar--brick .card-icon svg{ color: var(--brick); }

.pillar-card h3{ font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); margin: 0 0 6px; }
.pillar-card p{ font-size: 14px; line-height: 1.45; color: var(--ink-muted); margin: 0 0 10px; }
.callout{
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

/* ---------------- Clôture ---------------- */
.closing{ background: var(--bg); padding: 40px 22px 36px; }
.closing h2{ font-family: 'Sora', sans-serif; font-weight: 800; font-size: 25px; color: var(--green-deep); margin: 0 0 10px; }
.closing-subtitle{ font-weight: 700; font-size: 16px; color: var(--ink); margin: 0 0 10px; }
.closing-desc{ font-size: 15px; line-height: 1.55; color: var(--ink-muted); margin: 0 0 22px; }

/* ==========================================================
   Page légale (Politique de confidentialité)
   Mêmes jetons que le reste du site : héritera du mode sombre
   automatiquement une fois celui-ci branché.
   ========================================================== */
.legal-page{ padding: 32px 22px 48px; max-width: 720px; margin: 0 auto; }
.legal-page h1{
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 10px;
}
@media (max-width: 420px){
  .legal-page h1{ font-size: 22px; }
}
.legal-meta{
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--green-tint);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 22px;
}
.legal-meta p{ font-size: 13px; color: var(--ink-muted); margin: 0; }
.legal-meta-label{ color: var(--green-ink); font-weight: 700; }
.legal-intro{ font-size: 15px; line-height: 1.6; color: var(--ink-muted); margin: 0 0 30px; }
.legal-page h2{
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  margin: 28px 0 8px;
  scroll-margin-top: 60px;
}
.legal-page p{ font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); margin: 0; }
.legal-inline-link{ color: var(--green-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-cta{
  display: inline-flex;
  align-items: center;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 100px;
  text-decoration: none;
  margin-top: 12px;
}
.legal-cta:hover{ background: var(--green-ink); }

/* ---------------- Retour en haut ---------------- */
.back-to-top{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(23,36,31,.35);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.back-to-top.is-visible{ opacity: 1; pointer-events: auto; }
.back-to-top:hover{ background: var(--green-ink); }
.back-to-top svg{ width: 20px; height: 20px; }

/* ==========================================================
   À propos / Qui sommes-nous
   ========================================================== */
.about-intro{ border-top: 3px solid var(--green); padding: 40px 22px 8px; scroll-margin-top: 60px; }
.about-intro h2{
  position: relative;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--ink);
  text-align: center;
  margin: 0 0 14px;
}
/* Filigrane du symbole, en "sceau" discret centré derrière le titre —
   contrairement au header où il se niche dans les lettres de "MK"
   (ça ne marche que sur un mot très court), ici il est simplement
   centré derrière toute la phrase, en faible opacité. */
.about-intro h2::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 118px;
  background-image: url('assets/logo/symbole-vert.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.14;
  z-index: -1;
  pointer-events: none;
}
.about-intro p{ font-size: 15px; line-height: 1.6; color: var(--ink-muted); margin: 0 0 12px; }

.expand-block{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.expand-block[data-open="true"]{ grid-template-rows: 1fr; }
.expand-inner{ overflow: hidden; min-height: 0; }

.read-more{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--green-ink);
  font-weight: 700;
  font-size: 15px;
  padding: 4px 0 20px;
  cursor: pointer;
}
.read-more svg{ width: 14px; height: 14px; transition: transform .3s ease; }
.read-more[aria-expanded="true"] svg{ transform: rotate(180deg); }

.about-block{ display: flex; gap: 14px; padding: 14px 22px; align-items: flex-start; }
.about-icon{
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--green-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-icon svg{ width: 20px; height: 20px; color: var(--green-ink); }
.about-block h3{ font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); margin: 0 0 4px; }
.about-block p{ font-size: 14px; line-height: 1.5; color: var(--ink-muted); margin: 0; }

.values-block{ padding: 14px 22px 10px; }
.values-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.values-head h3{ font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); margin: 0; }
.values-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.values-list li{ font-size: 14px; line-height: 1.5; color: var(--ink-muted); padding-left: 16px; position: relative; }
.values-list li::before{ content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.values-list strong{ color: var(--ink); font-weight: 700; }

/* --- Timeline : notre parcours --- */
.timeline-section{ padding: 28px 22px 8px; }
.timeline-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.timeline-head h3{ font-family: 'Sora', sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); margin: 0; }
.toggle-all{ background: none; border: none; color: var(--green-ink); font-weight: 700; font-size: 14px; cursor: pointer; padding: 4px; }

.timeline-list{ list-style: none; margin: 0; padding: 0; position: relative; }
.timeline-list::before{
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--card-line);
}
.timeline-item{ position: relative; }
.timeline-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Manrope', sans-serif;
}
.timeline-dot{
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  position: relative;
  z-index: 1;
}
.timeline-meta{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.timeline-date{ font-size: 13px; font-weight: 700; color: var(--green-ink); }
.timeline-title{ font-size: 15px; font-weight: 700; color: var(--ink); }
.timeline-toggle[aria-expanded="true"] .chevron{ transform: rotate(180deg); }

.timeline-panel{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; margin-left: 24px; }
.timeline-panel[data-open="true"]{ grid-template-rows: 1fr; }
.timeline-panel-inner{ overflow: hidden; min-height: 0; }
.timeline-panel p{ font-size: 14px; line-height: 1.5; color: var(--ink-muted); margin: 0 0 14px; }

/* --- Objectifs (futur) --- */
.goals-section{ padding: 24px 22px 40px; }
.goals-section h3{ font-family: 'Sora', sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); margin: 0 0 14px; }
.goal-card{ background: var(--surface); border: 1px solid var(--card-line); border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.goal-badge{
  display: inline-block;
  background: var(--green-tint);
  color: var(--green-ink);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 8px;
}
.goal-card h4{ font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); margin: 0 0 5px; }
.goal-card p{ font-size: 14px; line-height: 1.45; color: var(--ink-muted); margin: 0; }

/* ==========================================================
   Notre Approche
   ========================================================== */
.approach-intro{ border-top: 3px solid var(--green); padding: 36px 22px 8px; scroll-margin-top: 60px; }
.approach-intro h2{
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--green-deep);
  line-height: 1.2;
  text-align: center;
  margin: 0 0 10px;
}
.approach-intro .subtitle{ font-weight: 700; font-size: 16px; color: var(--ink); text-align: center; margin: 0 0 14px; }
.approach-intro p{ font-size: 15px; line-height: 1.6; color: var(--ink-muted); margin: 0 0 10px; }

.approach-cards{ padding: 14px 22px 8px; display: flex; flex-direction: column; gap: 14px; }
.approach-card{
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
}
.approach-icon{
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--green-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.approach-icon svg{ width: 24px; height: 24px; color: var(--green-ink); }
.approach-card h3{ font-family: 'Sora', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); margin: 0 0 8px; }
.approach-card p{ font-size: 14px; line-height: 1.5; color: var(--ink-muted); margin: 0; }

/* --- Confiance : logos en défilement continu --- */
.trust-section{ padding: 32px 0 8px; }
.trust-section h3{
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  text-align: center;
  margin: 0 0 18px;
}
.trust-marquee{
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.trust-track{
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  animation: marquee 24s linear infinite;
}
.trust-track:hover{ animation-play-state: paused; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .trust-track{ animation: none; overflow-x: auto; }
}
.trust-logo{
  flex: 0 0 auto;
  height: 76px;
  padding: 0 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--card-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-logo img{
  height: 54px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
}

/* --- Bloc Blog --- */
.blog-block{ padding: 28px 22px 40px; text-align: center; }
.blog-block p{ font-size: 15px; line-height: 1.55; color: var(--ink-muted); margin: 0 0 18px; }
.blog-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 100px;
  text-decoration: none;
}
.blog-cta:hover{ background: var(--green); border-color: var(--green); color: #fff; }
.blog-cta svg{ width: 15px; height: 15px; }

/* ==========================================================
   Contact — carte verte contenue plutôt qu'un fond plein écran,
   pour que le vert reste un accent fort et ponctuel comme
   partout ailleurs sur le site, pas un mur de couleur.
   ========================================================== */
.contact-section{ padding: 28px 18px 8px; scroll-margin-top: 60px; }
.contact-card{
  background: var(--green);
  border-radius: 22px;
  padding: 34px 22px;
  text-align: center;
}
.contact-card h2{
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: #fff;
  margin: 0 0 12px;
}
.contact-card .subtitle{
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
  margin: 0 auto 24px;
  max-width: 30ch;
}
.contact-buttons{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.contact-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #fff;
  color: var(--green-ink);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 18px;
  border-radius: 100px;
  text-decoration: none;
}
.contact-btn:hover{ background: var(--green-tint); }
.contact-btn svg{ width: 16px; height: 16px; }
.contact-email{ color: #fff; font-size: 15px; font-weight: 600; margin: 0 0 18px; }
.contact-location{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  font-weight: 600;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.25);
}
.contact-location svg{ width: 15px; height: 15px; }

/* ---------------- Footer ---------------- */
.site-footer{
  background: #000;
  color: rgba(255,255,255,.65);
  padding: 26px 22px 22px;
  text-align: center;
  margin-top: 24px;
}
.footer-copyright{ font-size: 13px; margin: 0 0 12px; }
.footer-legal-link{
  display: inline-block;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-bottom: 18px;
}
.footer-legal-link:hover{ color: var(--green); }
.footer-socials{ display: flex; justify-content: center; gap: 14px; }
.footer-social{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
}
.footer-social:hover{ background: var(--green); }
.footer-social svg{ width: 16px; height: 16px; }

/* ==========================================================
   Au-delà du mobile — traitement provisoire pour que la page
   reste correcte sur tablette/desktop en attendant la passe
   dédiée à ces gabarits.
   ========================================================== */
@media (min-width: 640px){
  .hero{ padding: 56px 48px 48px; }
  .hero h1{ font-size: 44px; max-width: 16ch; }
  .hero p{ font-size: 16px; }
  .cta{ font-size: 16.5px; padding: 12px 23px; }

  .services-list{ padding: 0 32px; }
  .service-bar-badge{ width: 82px; height: 82px; }
  .service-bar-badge svg{ width: 34px; height: 34px; }
  .service-bar-text h3{ font-size: 17px; }
  .service-bar-text p{ font-size: 13.5px; }

  .pillar-cards{ display: grid; grid-template-columns: 1fr 1fr; padding: 0 32px 28px; }
  .pillars-nav-inner{ padding: 0 32px; gap: 10px; }
  .nav-pill{ flex: 0 0 auto; padding: 9px 16px; font-size: 14px; }
  .pillars-intro{ padding: 44px 32px 30px; }
  .pillars-intro h2{ font-size: 34px; }
  .pillars-intro p{ font-size: 16px; }
  .pillar-toggle-title{ font-size: 19px; }
  .pillar-toggle-subtitle{ font-size: 14px; }
  .pillar-desc{ font-size: 15px; margin-left: 32px; margin-right: 32px; }
  .pillar-card h3{ font-size: 17px; }
  .pillar-card p{ font-size: 14.5px; }
  .closing h2{ font-size: 30px; }
  .closing-subtitle{ font-size: 17px; }
  .closing-desc{ font-size: 16px; max-width: 60ch; margin-left: auto; margin-right: auto; }

  .about-intro{ padding: 48px 32px 8px; }
  .about-intro h2{ font-size: 32px; }
  .about-intro p{ font-size: 16px; }
  .about-block{ padding: 14px 32px; }
  .about-block h3{ font-size: 17px; }
  .about-block p{ font-size: 14.5px; }
  .values-block{ padding: 14px 32px 10px; }
  .values-head h3{ font-size: 17px; }
  .values-list li{ font-size: 14.5px; }
  .timeline-section{ padding: 32px 32px 8px; }
  .timeline-head h3{ font-size: 21px; }
  .timeline-title{ font-size: 16px; }
  .goals-section{ padding: 28px 32px 44px; }
  .goals-section h3{ font-size: 21px; }
  .goal-card h4{ font-size: 16px; }
  .goal-card p{ font-size: 14.5px; }

  .approach-intro{ padding: 44px 32px 8px; }
  .approach-intro h2{ font-size: 32px; }
  .approach-intro .subtitle{ font-size: 17px; }
  .approach-intro p{ font-size: 16px; }
  .approach-cards{ flex-direction: row; padding: 14px 32px 8px; }
  .approach-card h3{ font-size: 18px; }
  .approach-card p{ font-size: 14.5px; }
  .trust-section h3{ font-size: 20px; }
  .blog-block{ padding: 32px 32px 44px; }
  .blog-block p{ font-size: 16px; }

  .contact-card h2{ font-size: 32px; }
  .contact-card .subtitle{ font-size: 16px; }
}

@media (min-width: 960px){
  .hero{ padding: 72px 64px 56px; text-align: center; scroll-margin-top: 81px; }
  .hero h1{ font-size: 60px; max-width: none; }
  .hero h1 br{ display: none; }
  .hero p{ max-width: 46ch; font-size: 19px; }
  .cta{ font-size: 17px; padding: 13px 26px; }

  .services{ padding: 40px 0; }
  .services-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 64px;
    gap: 20px;
  }
  .service-bar-badge{ width: 92px; height: 92px; }
  .service-bar-badge svg{ width: 38px; height: 38px; }
  .service-bar-text h3{ font-size: 19px; }
  .service-bar-text p{ font-size: 14.5px; }

  .pillars-intro{ padding: 52px 64px 34px; scroll-margin-top: 81px; }
  .pillars-intro h2{ font-size: 40px; }
  .pillars-intro p{ font-size: 17px; max-width: 720px; margin-left: auto; margin-right: auto; }
  .pillars-nav{ top: 82px; }
  .pillar{ scroll-margin-top: 136px; }
  .pillars-nav-inner{ padding: 0 64px; }
  .nav-pill{ font-size: 15px; }
  .pillar-toggle{ padding: 22px 64px; }
  .pillar-toggle-title{ font-size: 21px; }
  .pillar-toggle-subtitle{ font-size: 15px; }
  .pillar-desc{ margin: 0 64px 22px; font-size: 16px; }
  .pillar-cards{ grid-template-columns: repeat(4, 1fr); padding: 0 64px 32px; }
  .pillar-card h3{ font-size: 18px; }
  .pillar-card p{ font-size: 15px; }

  .pillar--green{ background: var(--green-tint); }
  .pillar--blue{ background: var(--blue-tint); }
  .pillar--gold{ background: var(--gold-tint); }
  .pillar--brick{ background: var(--brick-tint); }
  .pillar--green .pillar-card{ background: var(--bg); }
  .pillar--blue  .pillar-card{ background: var(--bg); }
  .pillar--gold  .pillar-card{ background: var(--bg); }
  .pillar--brick .pillar-card{ background: var(--bg); }

  .closing{ padding: 56px 64px 48px; }
  .closing h2{ font-size: 34px; }
  .closing-subtitle{ font-size: 18px; }
  .closing-desc{ font-size: 17px; }

  .about-intro{ padding: 60px 64px 8px; text-align: center; }
  .about-intro h2{ font-size: 38px; }
  .about-intro h2::before{ width: 175px; height: 188px; }
  .about-intro p{ font-size: 17px; text-align: left; max-width: 66%; margin-left: auto; margin-right: auto; }

  .about-block{ padding: 16px 64px 10px; }
  .about-block h3{ font-size: 18px; }
  .about-block p{ font-size: 15px; }

  .values-block{ padding: 16px 64px 10px; }
  .values-head h3{ font-size: 18px; }
  .values-list{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 28px; }
  .values-list li{ font-size: 15px; }
  .values-list strong{ display: block; margin-bottom: 4px; }

  .timeline-section{ padding: 40px 64px 8px; }
  .timeline-head h3{ font-size: 23px; }
  .timeline-date{ font-size: 14px; }
  .timeline-title{ font-size: 17px; }
  .timeline-panel p{ font-size: 15px; }

  .goals-section{ padding: 32px 64px 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
  .goals-section h3{ font-size: 23px; grid-column: 1 / -1; }
  .goal-card{ margin-bottom: 0; }
  .goal-card h4{ font-size: 17px; }
  .goal-card p{ font-size: 15px; }

  .closing{ text-align: center; }
  .closing-desc{ text-align: left; max-width: 60ch; margin-left: auto; margin-right: auto; }

  .approach-intro{ padding: 56px 64px 8px; }
  .approach-intro h2{ font-size: 38px; }
  .approach-intro .subtitle{ font-size: 18px; }
  .approach-intro p:not(.subtitle){ max-width: 66%; margin-left: auto; margin-right: auto; text-align: left; font-size: 17px; }
  .approach-cards{ padding: 16px 64px 8px; gap: 20px; }
  .approach-card{ flex: 1; }
  .approach-card h3{ font-size: 19px; }
  .approach-card p{ font-size: 15px; }
  .trust-section h3{ font-size: 22px; }
  .trust-logo{ height: 108px; padding: 0 18px; }
  .trust-logo img{ height: 86px; max-width: 190px; }
  .trust-marquee{ max-width: 1000px; margin: 0 auto; -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); }
  .blog-block{ padding: 40px 64px 56px; }
  .blog-block p{ font-size: 17px; }

  .contact-section{ padding: 40px 64px 8px; }
  .contact-card{ padding: 48px 40px; }
  .contact-card h2{ font-size: 38px; }
  .contact-card .subtitle{ max-width: 46ch; font-size: 17px; }
  .contact-buttons{ flex-direction: row; justify-content: center; }
  .contact-btn{ font-size: 16px; }
  .contact-email{ font-size: 16px; }
  .contact-location{ font-size: 15px; }

  .footer-copyright{ font-size: 14px; }
  .footer-legal-link{ font-size: 13px; }

  .legal-page h1{ font-size: 34px; }
  .legal-meta p{ font-size: 14px; }
  .legal-intro{ font-size: 17px; }
  .legal-page h2{ font-size: 19px; }
  .legal-page p{ font-size: 16px; }
  .legal-cta{ font-size: 15px; }
}