/* ============================================================
   LIMBUS STUDIO — 2026
   Feuille unique, partagée par l'accueil (.accueil) et les
   sous-pages (.interne). Aucune dépendance externe.
   Animations scroll : pilotées par --scroll (voir site.js)
   ============================================================ */

@font-face {
  font-family: 'intervariable';
  src: url('assets/InterVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
}

:root {
  --scroll: 0;

  --bg: #f2f2f2;
  --blanc: #ffffff;
  --fg: #000000;
  --noir: #000000;
  --gris-txt: #565656;
  --gris-noir: #c9c9c9;

  --c1: #000064; /* bleu nuit  — Formules    */
  --c2: #4d009d; /* violet     — Performance */
  --c3: #a700ab; /* magenta    — WordPress   */
  --c4: #ff5b30; /* orange     — Data        */
  --c5: #e70000; /* rouge      — Dév         */
  --c6: #7f7f7f; /* gris       — Design      */
  --c7: #00ab8f; /* vert d'eau — Branding    */
  --c8: #7efe3a; /* vert vif   — Le studio   */

  --entete-h: 76px;
}

/* Une classe de thème par rubrique.
   --accent       : la couleur
   --accent-fg    : le texte lisible SUR cette couleur
   --accent-clair : variante lisible sur fond noir
   --rdv-fg       : texte du bouton rendez-vous */
.theme-studio    { --accent: var(--c7); --accent-fg: #000; --accent-clair: #35e0c0; --rdv-fg: #fff; }
.theme-design    { --accent: var(--c2); --accent-fg: #fff; --accent-clair: #a97bff; --rdv-fg: #fff; }
.theme-digital   { --accent: var(--c5); --accent-fg: #fff; --accent-clair: #ff6b6b; --rdv-fg: #fff; }
.theme-dataviz   { --accent: var(--c4); --accent-fg: #000; --accent-clair: #ff8a66; --rdv-fg: #fff; }
.theme-wordpress { --accent: var(--c3); --accent-fg: #fff; --accent-clair: #e368e6; --rdv-fg: #fff; }
.theme-services  { --accent: var(--c1); --accent-fg: #fff; --accent-clair: #7f8cff; --rdv-fg: #fff; }
.theme-contact   { --accent: var(--c7); --accent-fg: #000; --accent-clair: #35e0c0; --rdv-fg: #fff; }

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--entete-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'intervariable', Helvetica, Arial, sans-serif;
  font-variation-settings: "wght" 300;
  overflow-x: hidden;

  /* --- Lissage du texte ---
     antialiased + grayscale : rendu identique sur Chrome, Safari et
     Firefox macOS. Sans -moz-osx-font-smoothing, Firefox rendait le
     texte sensiblement plus gras que les autres.
     On évite text-rendering: optimizeLegibility, connu pour des bugs
     de rendu et des ralentissements sur les longues pages : le crénage
     et les ligatures sont demandés explicitement, c'est prévisible. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-synthesis: none;
}

a { color: inherit; }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--fg);
  color: #fff;
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ============================================================
   HEADER — pleine largeur, logo à gauche, menu à droite
   Accueil : masqué, apparaît au scroll.
   Sous-pages : visible d'emblée.
   ============================================================ */

.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--entete-h);
  background: var(--blanc);
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 4vw;
  transform: translateY(-100%);
  transition: transform .35s ease;
}
.entete.est-visible { transform: none; }

/* Sous-pages : header toujours là, le contenu est décalé */
.interne .entete { transform: none; }
.interne { padding-top: var(--entete-h); }

.entete__logo { display: flex; align-items: center; flex: none; }
.entete__logo img { display: block; width: 140px; height: auto; }

.entete__droite {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Accessibilité : texte réservé aux lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Mon compte / Panier */
.actions {
  display: flex;
  align-items: center;
  flex: none;
  gap: 10px;
  margin: 0;
  padding: 0 0 0 24px;
  list-style: none;
  border-left: 1px solid #e6e6e6;
}

.action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 2px;
  font-size: 14px;
  font-variation-settings: "wght" 500;
  text-decoration: none;
  transition: color .25s ease;
}
.action:hover { color: var(--accent, var(--fg)); }

/* Pictos seuls : le libellé reste pour les lecteurs d'écran */
.action__texte {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.action__icone {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.action__compteur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--fg);
  color: #fff;
  font-size: 11px;
  font-variation-settings: "wght" 700;
  line-height: 1;
}

.nav__liste {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__liste a {
  display: inline-block;
  padding: 6px 2px;
  font-size: 15px;
  font-variation-settings: "wght" 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: font-variation-settings .25s ease, border-color .25s ease;
}
.nav__liste a:hover { font-variation-settings: "wght" 800; }
.nav__liste a[aria-current="page"] {
  font-variation-settings: "wght" 800;
  border-bottom-color: var(--accent, var(--fg));
}

/* ---------- Sous-menu ----------
   Ouverture au survol ET au focus clavier (:focus-within), sans JS.
   Sur mobile, le sous-menu est imbriqué et toujours visible dans le
   panneau du burger : le survol n'existe pas au doigt. */

.nav__parent { position: relative; }

/* Chevron discret sur l'entrée parente */
.nav__parent > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .5;
}

.nav__sous {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 60;
  min-width: 208px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--blanc);
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .09);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav__parent:hover .nav__sous,
.nav__parent:focus-within .nav__sous {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__sous a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  border-bottom: 0;
  font-size: 14px;
  white-space: nowrap;
}
.nav__sous a:hover,
.nav__sous a:focus-visible { background: var(--bg); }
.nav__sous a[aria-current="page"] {
  border-bottom: 0;
  color: var(--accent);
  font-variation-settings: "wght" 800;
}

/* On est dans la rubrique WordPress sans être sur la page WordPress :
   le parent est souligné, mais sans aria-current (ce n'est pas la page
   courante, ce serait mentir aux lecteurs d'écran). */
.nav__liste > li > a.est-rubrique-active {
  font-variation-settings: "wght" 800;
  border-bottom-color: var(--accent);
}

/* Couleur de survol propre à chaque rubrique (6 intitulés) */
.nav__liste > li:nth-child(1) > a:hover { border-bottom-color: var(--c7); } /* Studio    */
.nav__liste > li:nth-child(2) > a:hover { border-bottom-color: var(--c2); } /* Design    */
.nav__liste > li:nth-child(3) > a:hover { border-bottom-color: var(--c5); } /* Digital   */
.nav__liste > li:nth-child(4) > a:hover { border-bottom-color: var(--c4); } /* Dataviz   */
.nav__liste > li:nth-child(5) > a:hover { border-bottom-color: var(--c3); } /* WordPress */
.nav__liste > li:nth-child(6) > a:hover { border-bottom-color: var(--c1); } /* Services  */

.burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.burger__bar,
.burger__bar::before,
.burger__bar::after {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--fg);
  transition: transform .25s ease, background .25s ease;
}
.burger__bar { top: 21px; }
.burger__bar::before { content: ""; top: -7px; left: 0; }
.burger__bar::after  { content: ""; top:  7px; left: 0; }
.burger[aria-expanded="true"] .burger__bar { background: transparent; }
.burger[aria-expanded="true"] .burger__bar::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar::after  { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   DEMI-CERCLES — rotation "scrubbée" au scroll (--scroll)
   ============================================================ */

/* Conteneur qui clippe les anneaux au viewport.
   transform: translateZ(0) fait de .cercles le bloc conteneur des
   enfants position:fixed : ils sont alors bornés par son overflow.
   Sans cela, ils débordent à droite sur les petits écrans. */
.cercles {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  transform: translateZ(0);
}

.cercle-scroll-1, .cercle-scroll-2, .cercle-scroll-3, .cercle-scroll-4,
.cercle-scroll-5, .cercle-scroll-6, .cercle-scroll-7, .cercle-scroll-8 {
  position: fixed;
  z-index: 1;
  width: 50vw;
  height: 50vw;
  top: 50%;
  left: 90%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.cercle-scroll-1 { animation-name: cerclescroll1; }
.cercle-scroll-2 { animation-name: cerclescroll2; }
.cercle-scroll-3 { animation-name: cerclescroll3; }
.cercle-scroll-4 { animation-name: cerclescroll4; }
.cercle-scroll-5 { animation-name: cerclescroll5; }
.cercle-scroll-6 { animation-name: cerclescroll6; }
.cercle-scroll-7 { animation-name: cerclescroll7; }
.cercle-scroll-8 { animation-name: cerclescroll8; }

.cercle-scroll-1 > .cercle-rot { animation: rotation-lente1 60s  linear infinite; }
.cercle-scroll-2 > .cercle-rot { animation: rotation-lente2 70s  linear infinite; }
.cercle-scroll-3 > .cercle-rot { animation: rotation-lente3 80s  linear infinite; }
.cercle-scroll-4 > .cercle-rot { animation: rotation-lente4 90s  linear infinite; }
.cercle-scroll-5 > .cercle-rot { animation: rotation-lente5 100s linear infinite; }
.cercle-scroll-6 > .cercle-rot { animation: rotation-lente6 110s linear infinite; }
.cercle-scroll-7 > .cercle-rot { animation: rotation-lente7 120s linear infinite; }
.cercle-scroll-8 > .cercle-rot { animation: rotation-lente8 130s linear infinite; }

/* La rotation lente est portée par un div, jamais par le <svg> :
   Safari iOS n'anime pas de façon fiable un SVG imbriqué dans un
   ancêtre position:fixed. Sur un élément HTML, l'animation est
   composée sur le GPU et fonctionne partout. */
.cercle-rot {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}
.cercle-rot > svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-box: view-box;
  transform-origin: 50% 50%;
}

/* Couleur des anneaux.
   --couleur-cercles est posée par le JS au niveau de chaque section :
   tous les anneaux prennent la couleur de la rubrique, en fondu.
   Sans cette variable (hero, footer), chacun garde sa couleur propre. */
.cercle-scroll-1 svg { fill: var(--couleur-cercles, var(--c1)); stroke: var(--couleur-cercles, var(--c1)); }
.cercle-scroll-2 svg { fill: var(--couleur-cercles, var(--c2)); stroke: var(--couleur-cercles, var(--c2)); }
.cercle-scroll-3 svg { fill: var(--couleur-cercles, var(--c3)); stroke: var(--couleur-cercles, var(--c3)); }
.cercle-scroll-4 svg { fill: var(--couleur-cercles, var(--c4)); stroke: var(--couleur-cercles, var(--c4)); }
.cercle-scroll-5 svg { fill: var(--couleur-cercles, var(--c5)); stroke: var(--couleur-cercles, var(--c5)); }
.cercle-scroll-6 svg { fill: var(--couleur-cercles, var(--c6)); stroke: var(--couleur-cercles, var(--c6)); }
.cercle-scroll-7 svg { fill: var(--couleur-cercles, var(--c7)); stroke: var(--couleur-cercles, var(--c7)); }
.cercle-scroll-8 svg { fill: var(--couleur-cercles, var(--c8)); stroke: var(--couleur-cercles, var(--c8)); }

.cercles svg {
  transition: fill .7s ease, stroke .7s ease;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}

@keyframes cerclescroll1 { 0%{transform:translate(-50%,-50%) rotate(0deg)} 100%{transform:translate(-50%,-50%) rotate(-500deg)} }
@keyframes cerclescroll2 { 0%{transform:translate(-50%,-50%) rotate(0deg)} 100%{transform:translate(-50%,-50%) rotate(1000deg)} }
@keyframes cerclescroll3 { 0%{transform:translate(-50%,-50%) rotate(0deg)} 100%{transform:translate(-50%,-50%) rotate(-1500deg)} }
@keyframes cerclescroll4 { 0%{transform:translate(-50%,-50%) rotate(0deg)} 100%{transform:translate(-50%,-50%) rotate(2000deg)} }
@keyframes cerclescroll5 { 0%{transform:translate(-50%,-50%) rotate(0deg)} 100%{transform:translate(-50%,-50%) rotate(-2500deg)} }
@keyframes cerclescroll6 { 0%{transform:translate(-50%,-50%) rotate(0deg)} 100%{transform:translate(-50%,-50%) rotate(3000deg)} }
@keyframes cerclescroll7 { 0%{transform:translate(-50%,-50%) rotate(0deg)} 100%{transform:translate(-50%,-50%) rotate(-3500deg)} }
@keyframes cerclescroll8 { 0%{transform:translate(-50%,-50%) rotate(0deg)} 100%{transform:translate(-50%,-50%) rotate(4000deg)} }

@keyframes rotation-lente1 { 0%{transform:rotate(0deg)} 100%{transform:rotate(-360deg)} }
@keyframes rotation-lente2 { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes rotation-lente3 { 0%{transform:rotate(0deg)} 100%{transform:rotate(-360deg)} }
@keyframes rotation-lente4 { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes rotation-lente5 { 0%{transform:rotate(0deg)} 100%{transform:rotate(-360deg)} }
@keyframes rotation-lente6 { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes rotation-lente7 { 0%{transform:rotate(0deg)} 100%{transform:rotate(-360deg)} }
@keyframes rotation-lente8 { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

/* ============================================================
   ACCUEIL — sections plein écran
   ============================================================ */

.section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vh 6vw;
}

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #f2f2f2;
}
.section:nth-child(even)::before { background: #ffffff; }

.section .inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 66%;
  container-type: inline-size;
}

.titre-accueil h1,
.titre-accueil h2 {
  margin: 0;
  font-variation-settings: "wght" 900;
  font-weight: 900;
  font-size: clamp(4rem, 10vw, 6rem);
  line-height: .95;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.sur-titre {
  margin: 0 0 1.2rem;
  font-size: 30px;
  font-variation-settings: "wght" 700;
  letter-spacing: 0.02em;
}

/* Sur-titre coloré selon la rubrique (accueil) */
#limbus-studio .sur-titre { color: var(--c7); } /* vert d'eau */
#design        .sur-titre { color: var(--c2); } /* violet     */
#digital       .sur-titre { color: var(--c5); } /* rouge      */
#dataviz       .sur-titre { color: var(--c4); } /* orange     */
#wordpress     .sur-titre { color: var(--c3); } /* magenta    */
#services      .sur-titre { color: var(--c1); } /* bleu nuit  */


.hero h1 { margin-bottom: 3rem; }

.sommaire { list-style: none; margin: 0; padding: 0; }
.sommaire li { margin: 5px 0; }
.sommaire a {
  text-decoration: none;
  color: #000;
  transition: font-variation-settings .6s ease-out, color .6s ease-out;
}
.sommaire li:first-child a { font-size: 30px; font-variation-settings: "wght" 600; }
.sommaire li:not(:first-child) a { font-size: 20px; font-variation-settings: "wght" 500; }
.sommaire a:hover { font-variation-settings: "wght" 800; transition: font-variation-settings .3s ease-out, color .3s ease-out; }

/* Survol : couleur de la rubrique visée (6 entrées) */
.sommaire li:nth-child(1) a:hover { color: var(--c7); } /* Limbus Studio    */
.sommaire li:nth-child(2) a:hover { color: var(--c2); } /* Design           */
.sommaire li:nth-child(3) a:hover { color: var(--c5); } /* Digital          */
.sommaire li:nth-child(4) a:hover { color: var(--c4); } /* Dataviz          */
.sommaire li:nth-child(5) a:hover { color: var(--c3); } /* WordPress        */
.sommaire li:nth-child(6) a:hover { color: var(--c1); } /* Suivi & Forfaits */

.liste-accueil {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.9;
  font-variation-settings: "wght" 600;
  columns: 2;
  max-width: 520px;
}

.texte-largeur-max { max-width: 400px; margin: 2rem 0 0; }
.texte-largeur-max p {
  font-size: 14px;
  line-height: 1.8;
  font-variation-settings: "wght" 400;
}
.texte-largeur-max strong { font-variation-settings: "wght" 700; }

.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-top: 2rem;
  border-radius: 50%;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  transition: transform .25s ease, background .25s ease;
}
.btn-arrow:hover { transform: translateX(6px); }

/* Formules — 3 blocs blancs */
#formules .inner { max-width: 80%; }

.formules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 2.5rem 0 0;
  max-width: 980px;
}

.formule-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  padding: 28px 26px 24px;
  box-shadow: 0 2px 20px rgba(0, 0, 100, 0.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.formule-card:hover { transform: translateY(-4px); box-shadow: 0 10px 34px rgba(0, 0, 100, 0.12); }

.formule-kicker {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: "wght" 700;
  color: var(--c1);
}
.formule-prix {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
  font-variation-settings: "wght" 800;
  letter-spacing: -0.02em;
}
.formule-prix .unite { font-size: 15px; font-variation-settings: "wght" 500; }
.formule-alt { margin: 6px 0 0; font-size: 14px; font-variation-settings: "wght" 500; color: #555; }

.formule-inclus {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.7;
  font-variation-settings: "wght" 400;
}
.formule-inclus li { padding-left: 16px; position: relative; }
.formule-inclus li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c1);
}

.formule-lien {
  margin-top: auto;
  padding-top: 20px;
  font-size: 14px;
  font-variation-settings: "wght" 600;
  text-decoration: none;
  color: var(--c1);
}
.formule-lien:hover { text-decoration: underline; }

/* ============================================================
   SOUS-PAGES — blocs
   ============================================================ */

.bloc {
  position: relative;
  padding: 12vh 6vw;
}

/* Fond posé en ::before (z-index -1) pour que le demi-cercle
   reste visible AU-DESSUS du fond, mais SOUS le texte. */
.bloc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
}
.bloc--gris::before   { background: var(--bg); }
.bloc--blanc::before  { background: var(--blanc); }
.bloc--accent::before { background: var(--accent); }
.bloc--noir::before   { background: var(--noir); }
.bloc--noir { color: #fff; }
.bloc--accent { color: var(--accent-fg, #000); }
.bloc--accent .cta { background: var(--fg); color: #fff; }

/* Le contenu occupe les 2/3 gauche : le tiers droit reste
   libre pour l'animation du demi-cercle. */
.bloc__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 66%;
  container-type: inline-size;
}

.bloc__titre {
  margin: 0 0 1rem;
  font-size: clamp(3rem, 7vw, 5rem);
  font-variation-settings: "wght" 900;
  letter-spacing: -0.02em;
  line-height: .95;
}

.bloc__chapo {
  max-width: 620px;
  margin: 0 0 3.2rem;
  font-size: 17px;
  line-height: 1.65;
  font-variation-settings: "wght" 400;
}
.bloc--noir .bloc__chapo { color: #d6d6d6; font-variation-settings: "wght" 450; }

/* ---------- Hero de sous-page ----------
   Titre + sous-titre sur toute la largeur des 2/3.
   Puis deux colonnes égales : texte (1/3 de l'écran) et slider (1/3). */

/* La taille vient de la règle de base .titre-accueil h1 : la
   redéclarer ici (spécificité supérieure) écraserait les tailles
   mobiles. On ne garde que ce qui est propre au hero. */
.bloc--hero .titre-accueil h1 { margin: 0; }
.bloc--hero .sous-titre {
  margin: 1.4rem 0 0;
  font-size: 30px;
  font-variation-settings: "wght" 700;
  letter-spacing: 0.02em;
  color: var(--accent);
}

/* Texte et liste de services côte à côte ; le slider passe
   en dessous, sur la largeur des deux colonnes. */
.hero__bas { margin-top: 3.4rem; }

.hero__bas .slider { margin-top: 0; }

.bloc--hero .texte-largeur-max { max-width: none; margin: 0; }
.bloc--hero .texte-largeur-max p { font-size: 15px; line-height: 1.85; margin: 0 0 1.1rem; }
.bloc--hero .texte-largeur-max p:last-child { margin-bottom: 0; }

/* ---------- Slider : défilement horizontal ----------
   Le défilement est natif (overflow-x + scroll-snap) : sur mobile,
   le doigt et l'inertie du système font tout le travail, sans JS.
   Le JS n'ajoute que les flèches, le compteur et le glisser souris. */

/* ------------------------------------------------------------
   DEUX VARIANTES DE SLIDER, à combiner avec les classes ci-dessous
   selon la section :

   1) PAYSAGE PLEINE LARGEUR — proportions 1500×1000 (3:2)
      class="slider slider--paysage"
      Occupe toute la largeur du bloc (2/3 de la page, cercle à droite).
      À utiliser hors grille, directement dans .bloc__inner.
      Sur mobile : pleine largeur d'écran.

   2) CARRÉ EN COLONNE — proportions 1:1
      Dans une grille .sousrub__grille (texte | slider), le slider
      occupe la 2e colonne (1/3 de la page). C'est le .slider nu.
      Sur mobile : repasse en pleine largeur de la colonne.

   Le moteur JS est identique pour les deux ; seules changent les
   proportions (aspect-ratio) et le placement (grille ou pleine largeur).
   ------------------------------------------------------------ */
.slider { position: relative; }

.slider__piste {
  display: flex;
  aspect-ratio: 1 / 1;
  overflow-x: auto;
  overflow-y: hidden;
  background: #e4e4e4;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;
  cursor: grab;
}
.slider__piste::-webkit-scrollbar { display: none; }
.slider__piste.glisse { cursor: grabbing; scroll-snap-type: none; }

.slider--paysage .slider__piste { aspect-ratio: 3 / 2; }

.slider__piste img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  user-select: none;
  -webkit-user-drag: none;
}

/* --- Flèches --- */
.slider__fleche {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
  color: #000;
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease;
}
/* Les flèches chevauchent le bord de l'image */
.slider__fleche--prec { left: 0;  transform: translate(-50%, -50%); }
.slider__fleche--suiv { right: 0; transform: translate(50%, -50%); }
.slider__fleche:hover { background: #fff; }

.slider__fleche svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Sur écran tactile, pas de survol : les flèches gênent plus qu'elles n'aident */

/* --- Chiffres clés --- */
.chiffres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 colonnes maximum */
  gap: 36px 24px;
  margin: 2.6rem 0 0;
  padding: 0;
  list-style: none;
}
.chiffre { display: flex; flex-direction: column; }
.chiffre__valeur {
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  font-variation-settings: "wght" 900;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.chiffre__label { margin-top: 8px; font-size: 14px; line-height: 1.4; font-variation-settings: "wght" 500; }

/* --- Métier & méthode (fond noir) --- */
.etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 colonnes maximum */
  gap: 48px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.etape { padding-top: 26px; border-top: 1px solid #3a3a3a; }
.etape__titre {
  margin: 0 0 1.2rem;
  font-size: 26px;
  font-variation-settings: "wght" 700;
  color: var(--accent-clair, var(--accent));
}
.etape p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  font-variation-settings: "wght" 400;
  color: #e8e8e8;
}

/* --- Équipe --- */
.equipe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 colonnes maximum */
  gap: 32px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.membre__nom { margin: 14px 0 2px; font-size: 17px; font-variation-settings: "wght" 700; }

/* --- Clients --- */
/* Mur de logos : posés à même le fond vert, sans cartouche.

   IMPORTANT : mix-blend-mode ne fusionne l'image qu'avec ce qui est peint
   sous elle DANS LE MÊME contexte d'empilement. Le fond de section
   (.bloc--accent::before, z-index:-1) est hors de ce contexte, à cause du
   z-index:2 de .bloc__inner. On repeint donc l'accent sur la grille
   elle-même : le multiply a alors un fond vert à mordre, et le blanc
   des JPG disparaît. */
.clients {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 26px 22px;
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
  background: var(--accent);
  isolation: auto;
}
.clients li {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--accent);
}
.clients img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.05);
  opacity: .9;
  transition: opacity .3s ease, transform .3s ease;
}
.clients li:hover img { opacity: 1; transform: scale(1.04); }

/* Repli : si le navigateur ignore mix-blend-mode, on garde des logos
   lisibles plutôt qu'un carré blanc. */
@supports not (mix-blend-mode: multiply) {
  .clients li { border-radius: 10px; background: #fff; }
  .clients img { opacity: .8; }
}

.cta {
  display: inline-block;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--fg);
  color: #fff;
  font-size: 15px;
  font-variation-settings: "wght" 600;
  text-decoration: none;
  transition: transform .25s ease;
}
/* Au survol : pas de changement de couleur, un léger agrandissement */
.cta:hover,
.cta:focus-visible { transform: scale(1.05); }
.cta:disabled { opacity: .55; transform: none; cursor: progress; }

/* ============================================================
   FOOTER — fond noir + demi-cercle
   ============================================================ */

.pied {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--noir);
  color: #fff;
  padding: 84px 6vw 0;
}

.pied__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 64px;
}
.pied__menu { columns: 2; column-gap: 30px; }

.pied__titre { margin: 0; font-size: 30px; font-variation-settings: "wght" 900; color: #fff; }
.pied__baseline { margin: .6rem 0 0; font-size: 15px; font-variation-settings: "wght" 500; color: #d6d6d6; }

.pied__adresse { font-style: normal; font-size: 15px; line-height: 1.8; font-variation-settings: "wght" 500; color: #d6d6d6; }
.pied__adresse a { color: #fff; text-decoration: none; font-variation-settings: "wght" 600; }
.pied__adresse a:hover { text-decoration: underline; }

.pied__liens { margin: 0; padding: 0; list-style: none; }
.pied__liens li { margin-bottom: 8px; }
.pied__liens a { font-size: 15px; font-variation-settings: "wght" 500; color: #d6d6d6; text-decoration: none; transition: color .25s ease; }
.pied__liens a:hover { color: #fff; text-decoration: underline; }

.socket {
  position: relative;
  z-index: 2;
  padding: 22px 0 26px;
  border-top: 1px solid #2a2a2a;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-variation-settings: "wght" 500;
  color: #b0b0b0;
}
.socket p { margin: 0; }
.socket__liens { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; list-style: none; }
.socket__liens a { color: #b0b0b0; text-decoration: none; }
.socket__liens a:hover { color: #fff; }

/* ============================================================
   APPARITION ANIMÉE (droite → gauche, rejouable)
   ============================================================ */

.js-reveal .reveal { opacity: 0; }

.js-reveal .is-visible .reveal {
  animation: reveal-in .8s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes reveal-in {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   LE PREMIER ÉCRAN NE SE CACHE JAMAIS
   ------------------------------------------------------------
   Le hero est déjà sous les yeux du visiteur au chargement :
   le masquer à opacity 0 pour le révéler ensuite produisait
   trois défauts.

   1. Un clignotement. site.js est chargé en « defer » : le titre
      s'affichait d'abord en clair (la classe js-reveal n'existait
      pas encore), puis disparaissait, puis réapparaissait.

   2. Un retard de rendu réel. Le contenu principal restait
      invisible jusqu'au déclenchement de l'IntersectionObserver.

   3. PageSpeed ne pouvait plus mesurer. Chrome exclut du calcul
      du LCP tout élément à opacity 0 : le titre, qui EST le plus
      grand élément de la page, n'était donc candidat à rien.

   La correction : le hero reste opaque, et s'anime en TRANSLATION
   seule. Le mouvement est conservé, l'élément est peint dès la
   première image, et le LCP mesuré correspond à ce que le
   visiteur voit vraiment.

   On évite volontairement l'astuce « opacity: 0.01 » : elle rend
   l'élément mesurable tout en le laissant invisible à l'œil.
   PageSpeed afficherait un bon score pour un contenu que
   personne ne voit encore. C'est flatter la mesure, pas
   accélérer le site.
   ------------------------------------------------------------ */

.js-reveal .hero .reveal,
.js-reveal .bloc--hero .reveal { opacity: 1; }

.js-reveal .hero.is-visible .reveal,
.js-reveal .bloc--hero.is-visible .reveal { animation-name: reveal-glisse; }

@keyframes reveal-glisse {
  from { transform: translateX(36px); }
  to   { transform: none; }
}

.sur-titre.reveal         { --d: 0ms; }
.titre-accueil.reveal     { --d: 90ms; }
.bloc__titre.reveal       { --d: 0ms; }
.sous-titre.reveal        { --d: 170ms; }
.sous-liste.reveal        { --d: 160ms; }
.bloc__chapo.reveal       { --d: 90ms; }
.liste-accueil.reveal     { --d: 190ms; }
.sommaire.reveal          { --d: 190ms; }
.texte-largeur-max.reveal { --d: 280ms; }
.clients.reveal           { --d: 180ms; }
.cta.reveal               { --d: 260ms; }

.formule-card.reveal:nth-child(1) { --d: 240ms; }
.formule-card.reveal:nth-child(2) { --d: 340ms; }
.formule-card.reveal:nth-child(3) { --d: 440ms; }

.chiffre.reveal:nth-child(1) { --d: 120ms; }
.chiffre.reveal:nth-child(2) { --d: 200ms; }
.chiffre.reveal:nth-child(3) { --d: 280ms; }
.chiffre.reveal:nth-child(4) { --d: 360ms; }
.chiffre.reveal:nth-child(5) { --d: 440ms; }

.etape.reveal:nth-child(1) { --d: 100ms; }
.etape.reveal:nth-child(2) { --d: 180ms; }
.etape.reveal:nth-child(3) { --d: 260ms; }
.etape.reveal:nth-child(4) { --d: 340ms; }
.etape.reveal:nth-child(5) { --d: 420ms; }

.membre.reveal:nth-child(1) { --d: 120ms; }
.membre.reveal:nth-child(2) { --d: 210ms; }
.membre.reveal:nth-child(3) { --d: 300ms; }
.membre.reveal:nth-child(4) { --d: 390ms; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  /* Tablette & mobile : 1/4 libre à droite (comme sur l'accueil) */
  .section .inner { max-width: 75%; }
  .bloc__inner { max-width: 75%; }
  #formules .inner { max-width: 75%; }
  .chiffres, .etapes, .equipe { grid-template-columns: repeat(2, 1fr); }
  .clients { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .hero__col { grid-template-columns: 1fr; gap: 32px; }
  .formules-grid { grid-template-columns: 1fr; max-width: 420px; }
  .cercle-scroll-1, .cercle-scroll-2, .cercle-scroll-3, .cercle-scroll-4,
  .cercle-scroll-5, .cercle-scroll-6, .cercle-scroll-7, .cercle-scroll-8 {
    width: 50vw;
    height: 50vw;
    left: 100%;
  }
  .pied__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .burger { display: block; }
  .entete { gap: 10px; padding: 0 16px; }
  .entete__droite { gap: 10px; min-width: 0; }
  .actions { padding-left: 0; border-left: 0; order: 2; gap: 4px; }
  .action { gap: 0; padding: 6px; }
  .action__compteur { min-width: 17px; height: 17px; padding: 0 4px; }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--entete-h);
    background: var(--blanc);
    border-bottom: 1px solid #e6e6e6;
    display: none;
  }
  .nav.est-ouvert { display: block; }

  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 6vw 20px; }
  .nav__liste a { display: block; padding: 12px 0; border-bottom: 1px solid #f0f0f0; font-size: 17px; }

  /* Sous-menu : imbriqué et déplié, le survol n'existe pas au doigt */
  .nav__parent > a::after { display: none; }
  .nav__sous {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 0 16px;
    border: 0;
    border-left: 2px solid #dcdcdc;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .nav__sous a { font-size: 15px; padding: 10px 0; border-radius: 0; }

  /* Le filet reprend la couleur de la rubrique parente */
  .nav__liste > li:nth-child(2) .nav__sous { border-left-color: var(--c2); } /* Design    */
  .nav__liste > li:nth-child(5) .nav__sous { border-left-color: var(--c3); } /* WordPress */
}

@media (max-width: 768px) {
  .chiffres, .etapes, .equipe { grid-template-columns: 1fr; }
  .clients { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 18px 14px; }
  .liste-accueil { columns: 1; }
  .bloc { padding: 9vh 6vw; }
  .formule-card { padding: 24px 22px 20px; }
  .pied__inner { grid-template-columns: 1fr; gap: 32px; }
  .socket { justify-content: flex-start; }
}

@media (max-width: 420px) {
  .entete__logo img { width: 118px; }
  .cercle-scroll-1, .cercle-scroll-2, .cercle-scroll-3, .cercle-scroll-4,
  .cercle-scroll-5, .cercle-scroll-6, .cercle-scroll-7, .cercle-scroll-8 {
    width: 78vw;
    height: 78vw;
    left: 96%;
  }
}

/* ============================================================
   ACCESSIBILITÉ — mouvement réduit
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cercles .cercle-rot { animation: none; }

  .js-reveal .reveal,
  .js-reveal .is-visible .reveal { animation: none; opacity: 1; transform: none; }
  .formule-card, .cta, .entete { transition: none; }
  .cta:hover, .cta:focus-visible, .formule-card:hover { transform: none; }
  .clients li:hover img { transform: none; }
  .slider__piste { scroll-behavior: auto; }
}

/* ============================================================
   COMPOSANTS DES PAGES RUBRIQUES
   ============================================================ */

/* Colonne services du hero (1/3 de l'écran, donc une seule colonne) */
.hero__services,
.sousrub__services {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 1;
  font-size: 16px;
  line-height: 2;
  font-variation-settings: "wght" 600;
}
.hero__services li,
.sousrub__services li { border-bottom: 1px solid #dcdcdc; }

/* Prestations : 3 colonnes maximum */
.prestations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 40px;
  margin: 2.8rem 0 0;
  padding: 0;
  list-style: none;
}
.prestation__titre {
  margin: 0 0 .6rem;
  padding-top: 22px;
  border-top: 1px solid currentColor;
  font-size: 21px;
  font-variation-settings: "wght" 800;
}
.prestation p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  font-variation-settings: "wght" 400;
}

/* Cas d'usage */
.cas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin: 2.8rem 0 0;
  padding: 0;
  list-style: none;
}
.cas__titre {
  margin: 0 0 .6rem;
  font-size: 20px;
  font-variation-settings: "wght" 800;
  color: var(--accent);
}
.cas p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  font-variation-settings: "wght" 400;
  color: var(--gris-txt);
}

/* FAQ : accordéon natif, sans JS */
.faq { margin: 2.4rem 0 3rem; max-width: 720px; }

.faq details {
  border-top: 1px solid #dcdcdc;
}
.faq details:last-of-type { border-bottom: 1px solid #dcdcdc; }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  font-size: 17px;
  font-variation-settings: "wght" 700;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 22px;
  line-height: 1;
  font-variation-settings: "wght" 400;
  color: var(--accent);
  transition: transform .25s ease;
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--accent); }

.faq details p {
  margin: 0 0 20px;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.8;
  font-variation-settings: "wght" 400;
  color: var(--gris-txt);
}

/* Bandeau d'appel à l'action */
.appel { margin-top: 1rem; }
.appel__titre {
  margin: 0 0 1.2rem;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-variation-settings: "wght" 900;
  letter-spacing: -0.02em;
}

@media (max-width: 1024px) {
  .prestations, .cas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .prestations, .cas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* ============================================================
   BOUTONS D'APPEL (écrire / prendre rendez-vous)
   ============================================================ */

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 1.4rem;
}

/* Rendez-vous : fond de la rubrique, texte blanc
   (noir sur le vert clair, seul fond trop lumineux pour du blanc) */
.cta--rdv {
  background: var(--accent);
  color: var(--rdv-fg, #fff);
}
.cta--rdv:hover,
.cta--rdv:focus-visible { transform: scale(1.05); }

/* Sur une section déjà colorée, on borde le bouton pour qu'il se détache */
.bloc--accent .cta--rdv { box-shadow: 0 0 0 2px var(--accent-fg, #000); }

button.cta { font-family: inherit; cursor: pointer; border: 0; }

/* ============================================================
   POPUP (dialog natif)
   ============================================================ */

dialog.modale {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: var(--fg);
}
dialog.modale::backdrop { background: rgba(0, 0, 0, .55); }

.modale__inner { padding: 34px 34px 30px; }

.modale__titre {
  margin: 0 0 .4rem;
  font-size: 28px;
  font-variation-settings: "wght" 900;
  letter-spacing: -0.02em;
}
.modale__chapo {
  margin: 0 0 1.6rem;
  font-size: 15px;
  line-height: 1.6;
  font-variation-settings: "wght" 400;
  color: var(--gris-txt);
}

.modale__fermer {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #f0f0f0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.modale__fermer:hover { background: #e2e2e2; }

.champ { margin-bottom: 16px; }
.champ label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-variation-settings: "wght" 600;
}
.champ input,
.champ textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--fg);
}
.champ input:focus,
.champ textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.champ textarea { min-height: 130px; resize: vertical; }

/* Anti-spam : champ leurre, invisible pour l'humain */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
}

.modale__etat { margin: 14px 0 0; font-size: 14px; }
.modale__etat[data-etat="erreur"]  { color: #c40000; }
.modale__etat[data-etat="succes"]  { color: #007a52; }

/* ============================================================
   ÉQUIPE : deux pôles
   ============================================================ */

.equipe--poles { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }

.membre--pole { display: flex; flex-direction: column; }

.membre__photo {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  background: #e4e4e4;
}

.membre__pole {
  margin: 18px 0 2px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variation-settings: "wght" 700;
  color: var(--accent);
}
.membre--pole .membre__nom { margin: 0 0 .5rem; font-size: 24px; font-variation-settings: "wght" 800; }
.membre__expertises {
  margin: 0 0 1rem;
  font-size: 15px;
  line-height: 1.6;
  font-variation-settings: "wght" 500;
}
.membre__bio {
  margin: 0 0 1.2rem;
  font-size: 15px;
  line-height: 1.75;
  font-variation-settings: "wght" 400;
  color: var(--gris-txt);
}
.membre__contact { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.8; }
.membre__contact a { font-variation-settings: "wght" 600; text-decoration: none; }
.membre__contact a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .equipe--poles { grid-template-columns: 1fr; }
  .pied__menu { columns: 1; }
}

/* Deux colonnes de contenu : texte à gauche, liste de services à droite.
   Utilisé dans le hero des pages rubriques et dans les sous-rubriques
   dont le slider est en pleine largeur (Design). */
.hero__col,
.sousrub__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 56px;
}
.sousrub__cols { margin-bottom: 3.2rem; }

/* ============================================================
   PAGE WP & WOO : forfaits, pictos, onglets
   ============================================================ */

.picto {
  width: 56px;
  height: 56px;
  display: block;
  margin-bottom: 16px;
}
.bloc--noir .picto,
.bloc--accent .picto { filter: invert(1); }
.theme-wordpress .bloc--accent .picto { filter: invert(1); }

/* Onglets annuel / mensuel */
.onglets {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 2.4rem;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .08);
}
.onglet {
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-variation-settings: "wght" 600;
  color: inherit;
  cursor: pointer;
  transition: background .2s ease;
}
.onglet[aria-selected="true"] { background: var(--fg); color: #fff; }

/* Cartes de forfait */
.forfaits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.forfaits[hidden] { display: none; }

.forfait {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 24px;
  border-radius: 18px;
  background: #fff;
  color: var(--fg);
  box-shadow: 0 2px 20px rgba(0, 0, 0, .06);
}

.forfait__cat {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variation-settings: "wght" 700;
  color: var(--accent);
}
.forfait__nom { margin: 0 0 .6rem; font-size: 21px; font-variation-settings: "wght" 800; }
.forfait__prix {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
  font-variation-settings: "wght" 900;
  letter-spacing: -0.02em;
}
.forfait__prix .unite { font-size: 15px; font-variation-settings: "wght" 500; }
.forfait__detail {
  margin: 6px 0 16px;
  font-size: 13px;
  line-height: 1.6;
  font-variation-settings: "wght" 500;
  color: #555;
}
.forfait__cible {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.7;
  font-variation-settings: "wght" 400;
  color: var(--gris-txt);
}
.forfait__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.forfait__souscrire {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--fg);
  color: #fff;
  font-size: 14px;
  font-variation-settings: "wght" 600;
  text-decoration: none;
  transition: transform .25s ease;
}
.forfait__souscrire:hover { transform: scale(1.05); }
.forfait__savoir { font-size: 14px; font-variation-settings: "wght" 500; color: var(--gris-txt); }

/* Grille « ce que comprend la maintenance » */
.inclus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 40px;
  margin: 2.6rem 0 0;
  padding: 0;
  list-style: none;
}
.inclus__titre {
  margin: 0 0 .5rem;
  font-size: 18px;
  font-variation-settings: "wght" 800;
}
.inclus p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  font-variation-settings: "wght" 400;
  color: var(--gris-txt);
}
.bloc--noir .inclus p { color: #dcdcdc; }

/* Illustration d'appui */
.illustration {
  width: 100%;
  max-width: 260px;
  height: auto;
  margin-bottom: 1.6rem;
}
.bloc--noir .illustration { filter: invert(1); }

/* Étapes numérotées (parcours réel) */
.parcours { counter-reset: pas; }
.parcours .etape { position: relative; padding-left: 56px; }
.parcours .etape::before {
  counter-increment: pas;
  content: counter(pas, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 26px;
  font-size: 14px;
  font-variation-settings: "wght" 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-clair, var(--accent));
}

@media (max-width: 1024px) {
  .forfaits, .inclus { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .forfaits, .inclus { grid-template-columns: 1fr; }
  .parcours .etape { padding-left: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .forfait__souscrire:hover { transform: none; }
}

/* ============================================================
   FORMULES DE CRÉATION (3 types x 2 formules)
   Une ligne par type, trois colonnes alignées.
   subgrid fait hériter aux colonnes les rangées de la carte :
   libellés, titres et boutons se calent sur les mêmes lignes,
   quelle que soit la longueur des textes.
   ============================================================ */

.creations {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 2.6rem 0 0;
  padding: 0;
  list-style: none;
}

.creation {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  /* libellé · titre · sous-ligne · bouton · reste */
  grid-template-rows: auto auto auto auto 1fr;
  padding: 36px 34px 32px;
  border: 1px solid #e6e6e6;
  border-radius: 20px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 30px 0 rgba(255, 91, 48, .15);
}

.colonne {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  align-content: start;
  padding-right: 34px;
}
.colonne--achat,
.colonne--abo {
  position: relative;
  padding-left: 34px;
  border-left: 1px solid #e6e6e6;
}
.colonne--abo { padding-right: 0; }

/* Rangée 1 : libellés */
.col__label {
  margin: 0 0 10px;
  align-self: end;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-variation-settings: "wght" 700;
}
.colonne .col__label { color: var(--accent); }
.colonne--achat .col__label,
.colonne--abo .col__label { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--fg); }

/* Rangée 2 : titres et prix */
.col__titre {
  margin: 0;
  align-self: end;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  line-height: 1.05;
  font-variation-settings: "wght" 900;
  letter-spacing: -0.02em;
}
.col__prix { font-variant-numeric: tabular-nums; }
.col__prix .unite { font-size: 15px; font-variation-settings: "wght" 500; letter-spacing: 0; }

/* Rangée 3 : sous-lignes */
.col__sous {
  margin: 10px 0 0;
  align-self: start;
  font-size: 14px;
  line-height: 1.6;
  font-variation-settings: "wght" 500;
  color: var(--gris-txt);
}
.col__accroche {
  margin-top: 26px;
  font-size: 18px;
  line-height: 1.35;
  font-variation-settings: "wght" 800;
  color: var(--fg);
}

/* Rangée 4 : boutons (et, colonne 1, la cible) */
.col__action { margin: 26px 0 0; align-self: end; }
.col__cible {
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-variation-settings: "wght" 600;
  color: var(--gris-txt);
}

/* Rangée 5 : le reste */
.col__reste { margin-top: 20px; }

.creation__picto { width: 96px; height: 96px; }

.creation__desc {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.7;
  font-variation-settings: "wght" 400;
  color: var(--gris-txt);
}

.offre__bouton {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--fg);
  color: #fff;
  font-size: 15px;
  font-variation-settings: "wght" 600;
  text-decoration: none;
  transition: transform .25s ease;
}
.offre__bouton:hover { transform: scale(1.05); }
.offre__bouton--3x {
  background: transparent;
  color: var(--fg);
  border: 1px solid #d7d7d7;
}

.offre__inclus {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.75;
  font-variation-settings: "wght" 400;
  color: var(--gris-txt);
}
.offre__inclus li { padding-left: 17px; position: relative; margin-bottom: 4px; }
.offre__inclus li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Badge « Recommandé », à cheval sur le bord haut */
.creation__badge {
  position: absolute;
  top: -13px;
  right: 34px;
  z-index: 2;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg, #fff);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variation-settings: "wght" 700;
}

/* Pastille « Ou », posée sur le filet séparateur */
.creation__ou {
  position: absolute;
  left: 0;
  top: 74px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #e6e6e6;
  border-radius: 50%;
  background: #fff;
  font-size: 14px;
  font-variation-settings: "wght" 600;
  color: var(--gris-txt);
}

/* Repli si subgrid n'est pas gérée : colonnes en flux normal */
@supports not (grid-template-rows: subgrid) {
  .colonne { display: flex; flex-direction: column; }
  .col__reste { margin-top: auto; padding-top: 20px; }
}

/* Empilement : une colonne sous l'autre */
@media (max-width: 1024px) {
  .creation { grid-template-columns: 1fr; grid-template-rows: none; padding: 30px 24px 28px; }
  .colonne {
    display: block;
    grid-row: auto;
    padding: 24px 0 0;
    margin-top: 24px;
    border-left: 0;
    border-top: 1px solid #e6e6e6;
  }
  .colonne:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
  .colonne--achat, .colonne--abo { padding-left: 0; }
  .creation__ou { display: none; }
  .creation__badge { right: 24px; }
  .col__accroche { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) { .offre__bouton:hover { transform: none; } }


/* ============================================================
   AVIS CLIENTS — HTML pur, aucun script ni appel externe
   ============================================================ */

.avis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 2.6rem 0 0;
  padding: 0;
  list-style: none;
}

.avis__carte {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 24px;
  border: 1px solid #e6e6e6;
  border-radius: 18px;
  background: #fff;
}

.etoiles { display: flex; gap: 2px; margin-bottom: 14px; }
.etoiles svg { width: 15px; height: 15px; fill: #ffcc00; }

.avis__texte {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.55;
  font-variation-settings: "wght" 700;
  letter-spacing: -0.01em;
}
.avis__contexte {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.7;
  font-variation-settings: "wght" 400;
  color: var(--gris-txt);
}

.avis__auteur {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #eee;
  font-size: 13px;
  line-height: 1.5;
  font-variation-settings: "wght" 600;
}
.avis__auteur span {
  display: block;
  font-variation-settings: "wght" 400;
  color: var(--gris-txt);
}

.avis__source {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-variation-settings: "wght" 600;
  color: var(--accent);
}

/* Bandeau des notes */
.notes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
}
.note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  transition: transform .25s ease;
}
.note:hover { transform: scale(1.03); }
.note__valeur { font-size: 22px; font-variation-settings: "wght" 900; font-variant-numeric: tabular-nums; }
.note__detail { font-size: 13px; line-height: 1.4; font-variation-settings: "wght" 500; color: var(--gris-txt); }
.note__detail strong { display: block; font-variation-settings: "wght" 700; color: var(--fg); }

@media (max-width: 1024px) { .avis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .avis { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .note:hover { transform: none; } }

/* ============================================================
   MOBILE — bloc final, placé en dernier pour que rien ne
   l'écrase. Corrige quatre choses d'un coup :
   1. les titres se dimensionnent sur la largeur de leur colonne
      (unités cqw) et non sur celle de l'écran (vw) ;
   2. toutes les grilles passent à une colonne ;
   3. le slider s'étend sur toute la largeur de l'écran ;
   4. le header laisse la place au burger.
   ============================================================ */

@media (max-width: 900px) {

  /* --- 1. Titres proportionnels à leur colonne --- */
  .titre-accueil h1,
  .titre-accueil h2       { font-size: clamp(1.4rem, 11.5cqw, 3rem); }
  .bloc__titre            { font-size: clamp(1.4rem, 11cqw, 2.6rem); }
  .bloc--hero .sous-titre { font-size: clamp(1.05rem, 7cqw, 1.6rem); }
  .sur-titre              { font-size: clamp(1rem, 6.5cqw, 1.5rem); }
  .appel__titre           { font-size: clamp(1.3rem, 9cqw, 2rem); }

  /* --- 2. Une colonne partout --- */
  .hero__col, .sousrub__cols,
  .chiffres, .etapes, .equipe, .equipe--poles,
  .prestations, .cas, .inclus, .avis,
  .forfaits, .formules-grid, .creations { grid-template-columns: 1fr; }

  .creation { grid-template-columns: 1fr; grid-template-rows: none; }
  .colonne  { display: block; grid-row: auto; }
  .liste-accueil { columns: 1; }
  .pied__inner { grid-template-columns: 1fr; }
  .pied__menu { columns: 1; }

  /* --- 3. Le slider prend toute la largeur de l'écran ---
     La section a 6vw de marge intérieure : on l'annule.
     Vaut pour TOUTES les variantes : hero, paysage, et carré
     (sousrub__grille, hero du studio). */
  .bloc--hero .slider,
  .slider--paysage,
  .sousrub__grille .slider,
  .hero__bas--studio .slider {
    width: 100vw;
    margin-left: -6vw;
    margin-right: -6vw;
    max-width: none;
  }

  /* Les flèches restent utiles au doigt : on les garde, à l'intérieur */
  .slider__fleche { display: grid; }
  .slider__fleche--prec { left: 10px;  transform: translateY(-50%); }
  .slider__fleche--suiv { right: 10px; transform: translateY(-50%); }

  /* --- 4. Header : le burger doit tenir --- */
  .entete { gap: 10px; padding: 0 16px; }
  .entete__droite { gap: 10px; min-width: 0; }
  .actions { gap: 4px; padding-left: 0; border-left: 0; }
  .burger { display: block; flex: none; margin-left: 6px; }
  .burger__bar,
  .burger__bar::before,
  .burger__bar::after { background: #000; }
  .burger[aria-expanded="true"] .burger__bar { background: transparent; }
}

@media (max-width: 480px) {
  .entete__logo img { width: 112px; }
  .bloc { padding: 8vh 6vw; }
  .avis__carte, .forfait, .creation { padding: 24px 22px 20px; }
}

/* Repli : si les unités de conteneur ne sont pas gérées, on
   retombe sur des tailles en vw, calibrées pour la colonne à 75 %. */
@supports not (font-size: 1cqw) {
  @media (max-width: 900px) {
    .titre-accueil h1,
    .titre-accueil h2       { font-size: clamp(1.4rem, 7.6vw, 3rem); }
    .bloc__titre            { font-size: clamp(1.4rem, 7.2vw, 2.6rem); }
    .bloc--hero .sous-titre { font-size: clamp(1.05rem, 4.6vw, 1.6rem); }
  }
}

/* ============================================================
   PAGE SERVICES — navigation par ancres
   ============================================================ */

.ancres {
  position: sticky;
  top: var(--entete-h);
  z-index: 20;
  margin: 0 0 0;
  padding: 14px 6vw;
  background: rgba(242, 242, 242, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #e2e2e2;
}
.ancres ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  margin: 0 auto;
  padding: 0;
  max-width: 1180px;
  list-style: none;
}
.ancres a {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid #dcdcdc;
  background: #fff;
  font-size: 13px;
  font-variation-settings: "wght" 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ancres a:hover { background: var(--accent); color: var(--accent-fg, #fff); border-color: transparent; }

@media (max-width: 900px) {
  .ancres { padding: 10px 4vw; overflow-x: auto; }
  .ancres ul { flex-wrap: nowrap; }
}

/* ============================================================
   SOUS-RUBRIQUE avec slider carré (page Design)
   Texte à gauche (2 col dans les 2/3), slider carré à droite (1/3)
   ============================================================ */

.sousrub__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 48px;
  margin-top: 2.4rem;
}
.sousrub__grille .slider { align-self: start; }

.sousrub__liste {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.9;
  font-variation-settings: "wght" 500;
}
.sousrub__liste li { padding-left: 16px; position: relative; }
.sousrub__liste li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.bloc--accent .sousrub__liste li::before,
.bloc--noir .sousrub__liste li::before { background: currentColor; }

@media (max-width: 1024px) {
  .sousrub__grille { grid-template-columns: 1fr; gap: 28px; }
}
/* Slider carré : bridé à 420px sur la plage tablette seulement ;
   sous 900px il passe pleine largeur (voir bloc mobile). */
@media (min-width: 901px) and (max-width: 1024px) {
  .sousrub__grille .slider { max-width: 420px; }
}

/* ============================================================
   VIDÉOS DATA — 3 colonnes, lecture auto muette en boucle
   ============================================================ */

.videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 2.6rem 0 0;
}
.video {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.video figcaption {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  font-variation-settings: "wght" 600;
  color: #fff;
  background: #000;
}
.bloc--blanc .video figcaption { color: #fff; }

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

/* ============================================================
   SECTION LIMBUS WP — fond jaune
   ============================================================ */

.bloc--jaune { color: #000; }
.bloc--jaune::before { background: #ffcc00; }

.wp-saas { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 48px; }
.wp-saas__logo { width: 200px; max-width: 60%; height: auto; margin-bottom: 1.6rem; }
.wp-saas__illustration { width: 100%; max-width: 320px; height: auto; justify-self: center; }
.bloc--jaune .cta { background: #000; color: #ffcc00; }
.bloc--jaune .cta:hover { background: #000; }

@media (max-width: 900px) {
  .wp-saas { grid-template-columns: 1fr; gap: 28px; }
  .wp-saas__illustration { max-width: 220px; }
}


/* Badge Recommandé sur la colonne abonnement */
.creation__badge--abo {
  position: absolute;
  top: -50px;
  left: 34px;
  right: auto;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg, #fff);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variation-settings: "wght" 700;
}
.creation { overflow: visible; }
.colonne--abo { position: relative; }

/* Sections création et forfaits : contenu pleine largeur (100 %),
   fond gris clair, cartes blanches, le demi-cercle passe derrière. */
.theme-wordpress #creation .bloc__inner,
.theme-wordpress #forfaits .bloc__inner,
.theme-services #creation .bloc__inner,
.theme-services #maintenance .bloc__inner { max-width: 100%; }


/* Hero du studio : texte (1/3) + slider carré (1/3) côte à côte,
   comme la version v14. Le 1/3 droit reste libre pour le cercle. */
.hero__bas--studio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 48px;
  margin-top: 3.4rem;
}
.hero__bas--studio .slider { align-self: start; }

@media (max-width: 1024px) {
  .hero__bas--studio { grid-template-columns: 1fr; gap: 32px; }
}
@media (min-width: 901px) and (max-width: 1024px) {
  .hero__bas--studio .slider { max-width: 420px; }
}


/* Image des packs d'heures */
.packs__image {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 2.4rem auto 0;
  border-radius: 14px;
}

/* ============================================================
   SÉLECTEUR DE PACK D'HEURES (variations WooCommerce)
   ============================================================ */

.pack-selecteur {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 40px;
  margin: 2.6rem 0 0;
  padding: 32px 34px;
  border: 1px solid #e6e6e6;
  border-radius: 20px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 30px 0 rgba(255, 91, 48, .12);
}

.pack-selecteur__prix { min-width: 180px; }
.pack-selecteur__unite { font-size: .42em; margin-left: 4px; font-variation-settings: "wght" 600; }

.pack-selecteur__choix {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
}
.pack-selecteur__label {
  display: block;
  width: 100%;
  margin-bottom: -6px;
  font-size: 13px;
  font-variation-settings: "wght" 600;
  color: var(--gris-txt);
}
.pack-selecteur__select {
  flex: 1 1 160px;
  padding: 13px 16px;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  font-variation-settings: "wght" 600;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 44px;
}
.pack-selecteur__select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pack-selecteur__ajouter { flex: 0 0 auto; }

@media (max-width: 700px) {
  .pack-selecteur { grid-template-columns: 1fr; gap: 24px; text-align: left; }
  .pack-selecteur__choix { flex-direction: column; align-items: stretch; }
  .pack-selecteur__ajouter { text-align: center; }
}

/* Lien LinkedIn dans les profils de l'équipe */
.membre__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  color: var(--accent);
}
.membre__linkedin svg { flex: none; }