/* =====================================================================
   GRP, Growth Revenue Partners : feuille de style du site
   Source de vérité des couleurs, polices et motifs : projects/marque-grp/cahier/ (édition 1.1).
   Poppins seule, couleurs exactes du Canva d'Osvaldo, anneau gris à ombre canonique,
   pilules doubles vert profond / vert moyen, pastilles numérotées blanches.
   ===================================================================== */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/poppins-regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/poppins-medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/poppins-semibold.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/poppins-bold.woff2") format("woff2"); }

:root {
  /* Couleurs du cahier de normes */
  --marine: #24323E;
  --vp: #1F4D3A;          /* vert profond : grands aplats foncés, pilules, boutons */
  --vp-nuit: #173B2C;     /* vert profond assombri, pour la profondeur des aplats seulement */
  --vm: #5FAF7A;          /* vert moyen : accent, bandeaux */
  --menthe: #E9F3EE;
  --gris: #F8F8F8;        /* anneaux */
  --noir: #1F2020;
  --blanc: #FFFFFF;
  --texte-2: #4A5560;     /* texte secondaire, 7,4:1 sur blanc */
  --ligne: rgba(36, 50, 62, .12);
  --ombre: rgba(0, 0, 0, .31);

  --gut: clamp(20px, 5.6vw, 120px);
  --max: 1440px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --header-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  background: var(--blanc);
  color: var(--noir);
  font: 400 17px/1.65 "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--vm); color: var(--marine); }
:focus-visible { outline: 2px solid var(--vm); outline-offset: 3px; border-radius: 6px; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--vp); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 600; transition: top .2s; }
.saut:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.nb { white-space: nowrap; }

/* ---------- Typographie ---------- */
.surtitre {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 13px/1.3 "Poppins"; letter-spacing: .16em; text-transform: uppercase; color: var(--vp);
}
.surtitre::before { content: ""; width: 28px; height: 2px; background: var(--vm); border-radius: 2px; }
.surtitre--clair { color: var(--menthe); }
.surtitre--sans::before { display: none; }
.h-xxl { font: 700 clamp(40px, 7.4vw, 118px)/.98 "Poppins"; letter-spacing: -.012em; color: var(--marine); }
h1, h2, h3, .h-xl, .h-l { text-wrap: balance; }
.h-xl  { font: 700 clamp(36px, 5.4vw, 84px)/1.02 "Poppins"; letter-spacing: -.022em; color: var(--marine); }
.h-l   { font: 700 clamp(30px, 3.6vw, 56px)/1.08 "Poppins"; letter-spacing: -.02em; color: var(--marine); }
.h-m   { font: 600 clamp(22px, 2vw, 30px)/1.25 "Poppins"; letter-spacing: -.01em; color: var(--marine); }
.chapeau { font: 400 clamp(17px, 1.35vw, 21px)/1.6 "Poppins"; color: var(--texte-2); max-width: 46ch; }
.accent { color: var(--vm); }
.blanc { color: #fff; }

/* Révélation par lignes (le JS enveloppe les mots) */
.js [data-split] .mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js [data-split] .mot > span { display: inline-block; transform: translateY(105%); }
.js [data-reveal] { opacity: 0; transform: translateY(28px); }
.reduit [data-reveal], .reduit [data-split] .mot > span { opacity: 1 !important; transform: none !important; }

/* ---------- Boutons ---------- */
.btn {
  --bg: var(--vp); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  height: 58px; padding: 0 10px 0 28px; border-radius: 999px;
  background: var(--bg); color: var(--fg); overflow: hidden; isolation: isolate;
  font: 600 15px/1 "Poppins"; letter-spacing: .01em; white-space: nowrap;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow: 0 10px 30px -12px rgba(31, 77, 58, .55);
}
.btn::before {
  content: ""; position: absolute; z-index: -1; left: var(--mx, 50%); top: var(--my, 50%);
  width: 0; height: 0; border-radius: 50%; background: var(--marine);
  transform: translate(-50%, -50%); transition: width .6s var(--ease), height .6s var(--ease);
}
.btn:hover::before { width: 260%; height: 600%; }
.btn__txt { position: relative; display: block; overflow: hidden; height: 1.2em; line-height: 1.2em; }
.btn__txt > span { display: block; transition: transform .55s var(--ease); }
.btn__txt > span + span { position: absolute; left: 0; top: 100%; }
.btn:hover .btn__txt > span { transform: translateY(-100%); }
.btn__ico {
  width: 40px; height: 40px; border-radius: 50%; background: var(--vm); color: var(--marine);
  display: grid; place-items: center; flex: none; transition: transform .55s var(--ease);
}
.btn__ico svg { width: 16px; height: 16px; }
.btn:hover .btn__ico { transform: rotate(-45deg); }
.btn--clair { --bg: #fff; --fg: var(--vp); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .5); }
.btn--clair::before { background: var(--menthe); }
.btn--contour { --bg: transparent; --fg: var(--marine); box-shadow: inset 0 0 0 1.5px rgba(36, 50, 62, .22); }
.btn--contour::before { background: var(--menthe); }
.btn--contour .btn__ico { background: var(--menthe); }
.btn--petit { height: 46px; padding: 0 6px 0 20px; font-size: 14px; gap: 10px; }
.btn--petit .btn__ico { width: 34px; height: 34px; }

.lien-fleche { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--vp); }
.lien-fleche span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .5s var(--ease); padding-bottom: 2px; }
.lien-fleche:hover span { background-size: 100% 1.5px; }
.lien-fleche svg { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.lien-fleche:hover svg { transform: translateX(5px); }

/* Bouton rond à chevron du Canva */
.chevron-rond {
  width: 64px; height: 64px; border-radius: 50%; background: var(--vp); color: var(--vm);
  display: grid; place-items: center; position: relative;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .35);
  transition: transform .5s var(--ease);
}
.chevron-rond svg { width: 22px; height: 22px; }
.chevron-rond::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid var(--vm);
  opacity: 0; animation: onde 2.6s var(--ease) infinite;
}
.chevron-rond:hover { transform: translateY(4px); }
@keyframes onde { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.45); opacity: 0; } }

/* ---------- Motifs de la marque ---------- */
/* Anneau : disque gris, disque blanc concentrique (0,8465), ombre canonique portée sur la bande grise */
.anneau {
  --D: 600px;
  position: absolute; width: var(--D); height: var(--D); border-radius: 50%;
  background: var(--gris); pointer-events: none;
}
.anneau::after {
  content: ""; position: absolute; inset: 7.675%; border-radius: 50%; background: var(--fond-anneau, #fff);
  box-shadow: calc(var(--D) * .02582 * var(--ox, 1)) calc(var(--D) * .04004 * var(--oy, 1)) calc(var(--D) * .07619) calc(var(--D) * -.0491) var(--ombre);
}

/* Pastille numérotée blanche (88, 56 ou 44 px) */
.num {
  width: 56px; height: 56px; flex: none; border-radius: 50%; background: #fff; color: var(--marine);
  display: grid; place-items: center; font: 600 18px/1 "Poppins";
  box-shadow: 0 3px 8px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .12);
}
.num--44 { width: 44px; height: 44px; font-size: 15px; }
.num--88 { width: 88px; height: 88px; font-size: 26px; }

/* Pilule double : vert profond (titre) et vert moyen (réponse, texte marine) */
.duo { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr); align-items: stretch; padding-left: 28px; }
.duo .num { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 3; }
.duo__a {
  position: relative; z-index: 2; background: var(--vp); color: #fff; border-radius: 999px;
  padding: 18px 28px 18px 48px; display: flex; flex-direction: column; justify-content: center;
  font: 600 16px/1.35 "Poppins"; box-shadow: 6px 0 16px -6px rgba(0, 0, 0, .35);
}
.duo__a small { display: block; font: 400 13px/1.4 "Poppins"; color: rgba(255, 255, 255, .78); margin-top: 4px; }
.duo__b {
  background: var(--vm); color: var(--marine); border-radius: 0 999px 999px 0;
  margin-left: -52px; padding: 16px 32px 16px 76px; display: flex; flex-direction: column; justify-content: center;
  font: 500 14.5px/1.5 "Poppins";
}

/* ---------- En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--header-h);
  display: flex; align-items: center;
  transition: transform .6s var(--ease), background-color .4s, box-shadow .4s, height .4s var(--ease);
}
.entete.est-solide { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); box-shadow: 0 1px 0 var(--ligne); --header-h: 72px; }
.entete.est-cache { transform: translateY(-110%); }
.entete__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.entete__logo { display: flex; align-items: center; width: 92px; transition: opacity .4s, transform .5s var(--ease); }
.entete__logo svg { width: 100%; height: auto; }
.accueil .entete:not(.est-solide) .entete__logo { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.menu { display: flex; align-items: center; justify-content: center; }
.menu a {
  position: relative; padding: 6px 18px; font: 500 13px/1 "Poppins"; letter-spacing: .1em; text-transform: uppercase; color: var(--marine);
}
.menu a + a::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.5px; height: 14px; background: var(--marine); transform: translateY(-50%); opacity: .7; }
.menu a span { background: linear-gradient(var(--vm), var(--vm)) 0 100% / 0 2px no-repeat; padding-bottom: 4px; transition: background-size .45s var(--ease); }
.menu a:hover span, .menu a[aria-current="true"] span { background-size: 100% 2px; }
.entete__droite { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.langue { font: 600 13px/1 "Poppins"; letter-spacing: .08em; color: var(--marine); padding: 10px 12px; border-radius: 999px; transition: background .3s; }
.langue:hover { background: var(--menthe); }
.accueil .entete:not(.est-solide) .entete__droite .btn { opacity: 0; pointer-events: none; transform: translateY(-6px); }
.entete__droite .btn { transition: opacity .4s, transform .5s var(--ease), box-shadow .5s; }
.burger { display: none; width: 48px; height: 48px; border-radius: 50%; background: var(--vp); position: relative; }
.burger i { position: absolute; left: 15px; right: 15px; height: 2px; background: #fff; border-radius: 2px; transition: transform .5s var(--ease), top .5s var(--ease); }
.burger i:first-child { top: 19px; } .burger i:last-child { top: 27px; }
.menu-ouvert .burger i:first-child { top: 23px; transform: rotate(45deg); }
.menu-ouvert .burger i:last-child { top: 23px; transform: rotate(-45deg); }

/* Menu plein écran (téléphone) */
.panneau {
  position: fixed; inset: 0; z-index: 55; background: var(--vp); color: #fff;
  display: flex; flex-direction: column; justify-content: center; padding: 110px var(--gut) 40px;
  clip-path: circle(0% at calc(100% - 44px) 42px); visibility: hidden;
  transition: clip-path .8s var(--ease-io), visibility 0s .8s;
}
.menu-ouvert .panneau { clip-path: circle(150% at calc(100% - 44px) 42px); visibility: visible; transition: clip-path .8s var(--ease-io); }
.panneau nav a { display: block; font: 700 clamp(34px, 9vw, 56px)/1.15 "Poppins"; letter-spacing: -.02em; padding: 6px 0; }
.panneau nav a:hover { color: var(--vm); }
.panneau__bas { margin-top: 40px; display: grid; gap: 6px; color: rgba(255, 255, 255, .8); font-size: 15px; }
.panneau .anneau { --D: 120vw; right: -60vw; bottom: -70vw; opacity: .08; }

/* ---------- Héros ---------- */
.heros { position: relative; min-height: max(760px, 100svh); display: grid; place-items: center; overflow: hidden; background: #fff; }
.heros .anneau { --D: clamp(680px, min(132vh, 118vw), 1500px); left: 50%; top: 50%; margin: calc(var(--D) / -2) 0 0 calc(var(--D) / -2); will-change: transform; }
.heros__in { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; padding: 120px var(--gut) 140px; max-width: 1180px; }
.heros__logo { width: clamp(180px, 15vw, 236px); margin-bottom: clamp(24px, 3.4vh, 40px); }
.heros__logo svg { width: 100%; height: auto; overflow: visible; }
.heros__signature { font: 400 clamp(13px, 1.05vw, 16px)/1 "Poppins"; letter-spacing: .14em; color: var(--vp); margin-bottom: clamp(18px, 2.6vh, 28px); }
.heros__signature b { font-weight: 400; display: inline-block; }
.heros__signature i { font-style: normal; margin: 0 .55em; color: var(--vm); }
.heros h1 { text-transform: uppercase; max-width: 17ch; font-size: clamp(36px, 5.3vw, 92px); line-height: 1; }
.heros__sous { margin-top: clamp(18px, 2.6vh, 28px); font: 400 clamp(16px, 1.3vw, 20px)/1.55 "Poppins"; color: var(--vp); max-width: 34ch; }
.heros__actions { margin-top: clamp(26px, 4vh, 40px); display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.heros__bas { position: absolute; z-index: 3; left: 50%; bottom: clamp(20px, 4vh, 44px); transform: translateX(-50%); }
.heros__coin { position: absolute; z-index: 3; bottom: clamp(26px, 4.6vh, 50px); font: 500 12px/1.4 "Poppins"; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); }
.heros__coin--g { left: var(--gut); }
.heros__coin--d { right: var(--gut); text-align: right; }
.heros__coin b { color: var(--vp); font-weight: 600; }

/* ---------- Sections ---------- */
.section { position: relative; padding-block: clamp(96px, 12vw, 180px); }
.onglet {
  position: absolute; right: 0; top: clamp(40px, 6vw, 80px); z-index: 4;
  width: 58px; height: 48px; border-radius: 10px 0 0 10px; background: var(--vp);
  display: grid; place-items: center; font: 700 14px/1 "Poppins"; color: var(--vm); letter-spacing: .02em;
}
.onglet--clair { background: var(--menthe); color: var(--vp); }

/* Ce qu'on fait */
.quoi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.quoi__q { font: 600 clamp(18px, 1.5vw, 22px)/1.3 "Poppins"; color: var(--vm); margin: clamp(28px, 4vw, 48px) 0 14px; }
.quoi__p { font: 400 clamp(18px, 1.55vw, 23px)/1.6 "Poppins"; color: var(--noir); max-width: 30ch; }
.quoi__liste { margin-top: 36px; display: grid; gap: 14px; }
.quoi__liste li { display: flex; gap: 14px; align-items: baseline; color: var(--texte-2); }
.quoi__liste b { color: var(--marine); font-weight: 600; min-width: 7.2em; }

/* Le système animé */
.systeme { position: relative; background: var(--menthe); border-radius: 40px; padding: clamp(22px, 2.6vw, 40px); overflow: hidden; }
.systeme__titre { display: flex; justify-content: space-between; align-items: center; font: 500 12px/1 "Poppins"; letter-spacing: .14em; text-transform: uppercase; color: var(--vp); margin-bottom: 20px; }
.systeme__titre span:last-child { color: var(--texte-2); letter-spacing: .06em; text-transform: none; font-weight: 400; }
.etape-sys { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; padding: 16px 0; }
.etape-sys + .etape-sys { border-top: 1px dashed rgba(31, 77, 58, .25); }
.etape-sys__nom { display: flex; flex-direction: column; gap: 8px; }
.etape-sys__nom .num { width: 40px; height: 40px; font-size: 14px; }
.etape-sys__nom b { font: 600 15px/1.2 "Poppins"; color: var(--vp); }
.carte-sys { background: #fff; border-radius: 20px; padding: 16px 18px; box-shadow: 0 12px 30px -18px rgba(31, 77, 58, .45); min-height: 112px; position: relative; overflow: hidden; }
.pub { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; }
.pub__img { height: 76px; border-radius: 12px; background: linear-gradient(135deg, #3e4a52, #8e9a8f 60%, #c9c2b3); position: relative; overflow: hidden; }
.pub__img::after { content: ""; position: absolute; inset: 55% 0 0 0; background: linear-gradient(90deg, #9aa3a6, #b8b4ab); opacity: .9; }
.pub__l1 { font: 500 11px/1 "Poppins"; color: var(--texte-2); letter-spacing: .02em; }
.pub__l2 { font: 600 14px/1.3 "Poppins"; color: var(--marine); margin: 6px 0 8px; }
.pub__stats { display: flex; gap: 14px; font: 500 12px/1 "Poppins"; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.pub__stats b { color: var(--vp); font-weight: 600; }
.form-sys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.form-sys .champ { border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 10px; font: 400 12.5px/1.2 "Poppins"; color: var(--marine); min-height: 34px; white-space: nowrap; overflow: hidden; }
.form-sys .champ small { display: block; font-size: 10px; color: var(--texte-2); margin-bottom: 3px; }
.form-sys .champ .curseur { display: inline-block; width: 1px; height: 12px; background: var(--vp); vertical-align: -2px; margin-left: 1px; animation: clignote 1s steps(1) infinite; }
.form-sys .envoyer { grid-column: 1 / -1; height: 34px; border-radius: 999px; background: var(--vp); color: #fff; font: 600 12px/34px "Poppins"; text-align: center; position: relative; overflow: hidden; }
.form-sys .envoyer::after { content: "✓  Demande reçue"; position: absolute; inset: 0; background: var(--vm); color: var(--marine); transform: translateY(100%); transition: transform .5s var(--ease); }
.form-sys .envoyer.ok::after { transform: none; }
@keyframes clignote { 50% { opacity: 0; } }
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; position: relative; }
.kanban__col { background: var(--gris); border-radius: 10px; padding: 8px 6px; min-height: 84px; }
.kanban__col span { display: block; font: 500 10px/1.2 "Poppins"; letter-spacing: .04em; color: var(--texte-2); margin-bottom: 8px; text-transform: uppercase; }
.kanban__col i { display: block; height: 16px; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); margin-bottom: 5px; }
.jeton { position: absolute; top: 30px; left: 0; width: calc(25% - 6px); height: 34px; border-radius: 8px; background: var(--vp); color: #fff; font: 600 10.5px/1.15 "Poppins"; padding: 5px 7px; box-shadow: 0 8px 18px -8px rgba(31, 77, 58, .9); z-index: 2; }
.jeton small { display: block; font-weight: 400; opacity: .8; font-size: 9.5px; }
.texto { position: absolute; right: 12px; bottom: 10px; max-width: 64%; background: var(--vm); color: var(--marine); font: 500 11px/1.35 "Poppins"; padding: 8px 11px; border-radius: 14px 14px 4px 14px; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(8px) scale(.96); z-index: 3; }
.systeme__note { margin-top: 14px; font: 400 12px/1.4 "Poppins"; color: var(--texte-2); }
.trajet { position: absolute; left: calc(clamp(22px, 2.6vw, 40px) + 19px); top: 76px; bottom: 60px; width: 2px; background: repeating-linear-gradient(to bottom, rgba(31, 77, 58, .25) 0 4px, transparent 4px 9px); }
.trajet i { position: absolute; left: -4px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--vm); box-shadow: 0 0 0 4px rgba(95, 175, 122, .25); }

/* Solutions : bandeau vert moyen puis cartes */
.solutions { background: var(--gris); padding-bottom: clamp(90px, 10vw, 150px); }
.solutions__bandeau { background: var(--vm); padding: clamp(110px, 12vw, 170px) 0 clamp(150px, 14vw, 210px); text-align: center; position: relative; overflow: hidden; }
.solutions__bandeau h2 { color: #fff; font: 700 clamp(48px, 8vw, 132px)/1 "Poppins"; letter-spacing: -.02em; }
.solutions__bandeau p { font: 600 clamp(16px, 1.4vw, 22px)/1.4 "Poppins"; color: var(--marine); margin-top: 14px; }
.solutions__bandeau .anneau { --D: 900px; opacity: .14; --fond-anneau: var(--vm); left: -260px; top: -380px; }
.solutions__bandeau .anneau + .anneau { left: auto; right: -320px; top: 120px; --D: 700px; }
.solutions__cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); margin-top: clamp(-120px, -9vw, -80px); position: relative; z-index: 2; }
.solution { position: relative; background: var(--menthe); border-radius: 34px; padding: 0 0 34px; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.solution:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(31, 77, 58, .45); }
.solution__tete { position: relative; margin: -1px -1px 0; background: var(--vp); color: #fff; border-radius: 28px; padding: 26px 26px 26px 92px; min-height: 108px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .55); }
.solution__tete .num { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); }
.solution__tete h3 { font: 700 clamp(20px, 1.7vw, 25px)/1.15 "Poppins"; letter-spacing: -.01em; }
.solution__tete p { font: 400 13.5px/1.4 "Poppins"; color: rgba(255, 255, 255, .8); margin-top: 4px; }
.solution ul { padding: 30px 30px 0 34px; display: grid; gap: 14px; }
.solution li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.5; color: var(--noir); }
.solution li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--vp); }
.solution__pied { margin: 26px 30px 0 34px; padding-top: 20px; border-top: 1px solid rgba(31, 77, 58, .14); font: 500 13px/1.4 "Poppins"; color: var(--vp); }

/* Réalisations */
.realisations { background: var(--vp); color: #fff; position: relative; padding: 0 0 clamp(100px, 11vw, 170px); }
.realisations__bandeau { position: relative; background: var(--vm); padding: clamp(90px, 9vw, 130px) 0 clamp(70px, 7vw, 100px); text-align: center; }
.realisations__bandeau h2 { color: #fff; font: 700 clamp(48px, 8vw, 132px)/1 "Poppins"; letter-spacing: -.02em; }
.realisations__bandeau p { font: 600 clamp(16px, 1.4vw, 22px)/1.4 "Poppins"; color: var(--marine); margin-top: 14px; }
.cas-liste { display: grid; gap: clamp(90px, 10vw, 160px); padding-top: clamp(80px, 9vw, 140px); }
.cas { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 90px); align-items: center; }
.cas:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.cas:nth-child(even) .cas__media { order: 2; }
.cas__media { position: relative; display: block; padding: 0 clamp(30px, 4vw, 70px) clamp(40px, 5vw, 70px) 0; }
.cas:nth-child(even) .cas__media { padding: 0 0 clamp(40px, 5vw, 70px) clamp(30px, 4vw, 70px); }
.cas__texte .num { margin-bottom: 26px; }
.cas__secteur { font: 500 13px/1.4 "Poppins"; letter-spacing: .14em; text-transform: uppercase; color: var(--vm); }
.cas__texte h3 { font: 700 clamp(34px, 3.6vw, 56px)/1.05 "Poppins"; letter-spacing: -.02em; margin: 14px 0 18px; }
.cas__texte > p { color: rgba(255, 255, 255, .82); font-size: 17px; max-width: 44ch; }
.cas__services { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 30px; }
.cas__services li { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font: 500 13.5px/1 "Poppins"; }
.cas__services li i { width: 24px; height: 24px; border-radius: 50%; background: var(--vm); color: var(--marine); display: grid; place-items: center; font: 700 11px/1 "Poppins"; font-style: normal; }
.cas__faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 24px 0; border-block: 1px solid rgba(255, 255, 255, .14); margin-bottom: 30px; }
.cas__faits dt { font: 700 clamp(26px, 2.4vw, 36px)/1 "Poppins"; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cas__faits dd { font: 400 13px/1.4 "Poppins"; color: rgba(255, 255, 255, .7); margin-top: 8px; }
.cas .lien-fleche { color: var(--vm); }
.statut { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; vertical-align: middle; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(95, 175, 122, .16); color: var(--vm); font: 600 11px/1 "Poppins"; letter-spacing: .1em; text-transform: uppercase; }
.statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vm); animation: pouls 1.8s ease-in-out infinite; }
@keyframes pouls { 50% { opacity: .3; } }

/* Fenêtre de navigateur et téléphone */
.navigateur { position: relative; border-radius: 16px; background: #0f1a15; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); overflow: hidden; transform-origin: 50% 100%; }
.navigateur__barre { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #f1f4f2; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.navigateur__barre > i { width: 11px; height: 11px; border-radius: 50%; background: #d6dbd8; }
.navigateur__url { margin: 0 auto; transform: translateX(-24px); display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 14px; border-radius: 8px; background: #fff; font: 500 12px/1 "Poppins"; color: #5c6670; max-width: 60%; overflow: hidden; white-space: nowrap; }
.navigateur__url svg { width: 10px; height: 10px; flex: none; }
.ecran { position: relative; aspect-ratio: 16 / 10; background: #111; overflow: hidden; }
.ecran video, .ecran img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.telephone {
  position: absolute; right: 0; bottom: 0; width: clamp(130px, 25%, 250px); aspect-ratio: 390 / 844;
  border-radius: clamp(22px, 2.6vw, 38px); padding: clamp(5px, .55vw, 8px); background: #0c1310;
  box-shadow: 0 40px 70px -26px rgba(0, 0, 0, .8), inset 0 0 0 1.5px rgba(255, 255, 255, .14);
}
.cas:nth-child(even) .telephone { right: auto; left: 0; }
.telephone .ecran { aspect-ratio: auto; height: 100%; border-radius: clamp(17px, 2.1vw, 31px); }
.telephone::before { content: ""; position: absolute; z-index: 2; top: clamp(10px, 1vw, 15px); left: 50%; width: 30%; height: clamp(7px, .8vw, 12px); border-radius: 999px; background: #0c1310; transform: translateX(-50%); }

/* Méthode */
.methode { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 130px); }
.methode__colle { position: sticky; top: 120px; align-self: start; }
.methode__compteur { margin-top: clamp(36px, 5vw, 64px); display: flex; align-items: center; gap: 28px; }
.compteur-anneau { position: relative; width: clamp(150px, 15vw, 210px); aspect-ratio: 1; }
.compteur-anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.compteur-anneau circle { fill: none; stroke-width: 9; }
.compteur-anneau .fond { stroke: var(--gris); }
.compteur-anneau .plein { stroke: var(--vm); stroke-linecap: round; }
.compteur-anneau b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(40px, 4.4vw, 64px)/1 "Poppins"; color: var(--marine); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.methode__compteur p { font: 500 15px/1.5 "Poppins"; color: var(--texte-2); max-width: 18ch; }
.etapes { display: grid; }
.etape { position: relative; padding: clamp(36px, 4vw, 56px) 0 clamp(36px, 4vw, 56px) clamp(70px, 6vw, 96px); border-top: 1px solid var(--ligne); transition: opacity .5s; }
.etape:last-child { border-bottom: 1px solid var(--ligne); }
.js .etape { opacity: .32; }
.js .etape.est-active { opacity: 1; }
.etape .num { position: absolute; left: 0; top: clamp(36px, 4vw, 56px); }
.etape h3 { font: 700 clamp(24px, 2.3vw, 34px)/1.15 "Poppins"; letter-spacing: -.015em; color: var(--marine); }
.etape__duree { display: inline-block; margin: 10px 0 14px; font: 500 12px/1 "Poppins"; letter-spacing: .12em; text-transform: uppercase; color: var(--vp); background: var(--menthe); padding: 8px 12px; border-radius: 999px; }
.etape p { color: var(--texte-2); max-width: 52ch; }
.etape ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.etape li { font: 500 13px/1 "Poppins"; color: var(--marine); padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ligne); }

/* Pourquoi GRP */
.pourquoi { background: var(--menthe); overflow: hidden; }
.pourquoi__grille { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.pourquoi .anneau { --D: clamp(620px, 62vw, 1100px); left: calc(var(--D) * -0.42); top: 50%; margin-top: calc(var(--D) / -2); }
.pourquoi__titre { position: relative; z-index: 2; }
.pourquoi__titre h2 { font: 700 clamp(40px, 4.6vw, 72px)/1.08 "Poppins"; color: var(--vm); letter-spacing: -.02em; }
.pourquoi__titre p { margin-top: 22px; color: var(--texte-2); max-width: 26ch; }
.pourquoi__liste { position: relative; z-index: 2; display: grid; gap: 18px; }
.pourquoi__liste .duo__a { min-height: 92px; }
.pourquoi__pied { grid-column: 2; font-size: 15px; color: var(--marine); margin-top: 12px; text-align: center; }
.pourquoi__pied b { font-weight: 600; }

/* À propos */
.apropos { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.apropos__texte p { margin-top: 22px; color: var(--texte-2); max-width: 54ch; font-size: 18px; }
.apropos__texte p strong { color: var(--marine); font-weight: 600; }
.fondateur { position: relative; border-radius: 36px; background: var(--vp); color: #fff; padding: clamp(28px, 3vw, 44px); overflow: hidden; }
.fondateur .anneau { --D: 520px; right: -230px; top: -230px; opacity: .1; --fond-anneau: var(--vp); }
.fondateur__monogramme { width: 92px; height: 92px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
.fondateur__monogramme svg { width: 64px; height: auto; }
.fondateur h3 { font: 700 26px/1.2 "Poppins"; margin-top: 24px; }
.fondateur > p { color: rgba(255, 255, 255, .78); margin-top: 6px; font-size: 15px; }
.engagements { margin-top: 28px; display: grid; gap: 0; }
.engagements li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 15.5px; line-height: 1.5; }
.engagements li svg { width: 22px; height: 22px; color: var(--vm); margin-top: 1px; }
.engagements b { font-weight: 600; display: block; }
.engagements span { color: rgba(255, 255, 255, .74); }

/* Prix */
.prix__grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(30px, 5vw, 90px); align-items: center; position: relative; }
.prix .anneau { --D: clamp(620px, 58vw, 1040px); left: calc(var(--D) * -0.4); top: 50%; margin-top: calc(var(--D) / -2); }
.prix__titre { position: relative; z-index: 2; }
.prix__titre h2 { font: 700 clamp(44px, 5vw, 80px)/1.04 "Poppins"; color: var(--vp); letter-spacing: -.02em; }
.prix__titre p { margin-top: 18px; color: var(--texte-2); max-width: 28ch; font-size: 16px; }
.prix__liste { position: relative; z-index: 2; display: grid; gap: 18px; }
.prix__liste .duo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.prix__liste .duo__a { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; min-height: 104px; padding-left: 52px; }
.prix__liste .duo__b { text-align: center; align-items: center; }
.prix__liste .duo__b small { font: 400 14px/1.3 "Poppins"; color: var(--marine); }
.prix__liste .duo__b strong { font: 700 clamp(22px, 2vw, 30px)/1.2 "Poppins"; color: var(--marine); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.prix__liste .duo__b strong sup { font-size: .45em; font-weight: 500; vertical-align: .9em; margin-left: 4px; }
.prix__liste .duo__b em { font-style: normal; font: 500 12.5px/1.3 "Poppins"; color: var(--marine); margin-top: 2px; }
.prix__note { margin-top: 10px; background: var(--marine); color: #fff; border-radius: 999px; padding: 14px 26px; text-align: center; font: 500 14.5px/1.4 "Poppins"; }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 110px); }
.faq__liste details { border-top: 1px solid var(--ligne); }
.faq__liste details:last-child { border-bottom: 1px solid var(--ligne); }
.faq__liste summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font: 600 clamp(17px, 1.4vw, 20px)/1.4 "Poppins"; color: var(--marine); }
.faq__liste summary::-webkit-details-marker { display: none; }
.faq__plus { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--menthe); transition: background .4s, transform .5s var(--ease); }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--vp); border-radius: 2px; transform: translate(-50%, -50%); transition: transform .5s var(--ease); }
.faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] .faq__plus { background: var(--vm); transform: rotate(180deg); }
details[open] .faq__plus::after { transform: translate(-50%, -50%) rotate(0); }
.faq__rep { overflow: hidden; }
.faq__rep p { padding: 0 64px 28px 0; color: var(--texte-2); }

/* Prochaine étape */
.suite { position: relative; overflow: hidden; padding: clamp(120px, 12vw, 200px) 0 clamp(100px, 10vw, 160px); }
.suite .anneau { --D: clamp(760px, 92vw, 1500px); left: 50%; top: clamp(-40px, 2vw, 40px); margin-left: calc(var(--D) / -2); }
.suite__tete { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.suite__tete h2 { font: 700 clamp(56px, 10vw, 168px)/.95 "Poppins"; letter-spacing: -.035em; color: var(--marine); }
.suite__tete p { margin-top: 28px; font: 600 clamp(17px, 1.4vw, 21px)/1.5 "Poppins"; color: var(--marine); max-width: 40ch; }
.suite__corps { position: relative; z-index: 2; margin-top: clamp(50px, 6vw, 90px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.coord { background: var(--vp); color: #fff; border-radius: 36px; padding: clamp(28px, 3vw, 44px); position: relative; overflow: hidden; }
.coord h3 { font: 700 24px/1.25 "Poppins"; }
.coord > p { color: rgba(255, 255, 255, .78); margin-top: 10px; font-size: 15.5px; }
.coord ul { margin-top: 26px; display: grid; gap: 0; }
.coord li a, .coord li > span { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.coord li i { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: grid; place-items: center; color: var(--vm); }
.coord li i svg { width: 18px; height: 18px; }
.coord li small { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.coord li b { font-weight: 600; font-size: 16px; word-break: break-word; }
.coord li a:hover b { color: var(--vm); }
.formulaire { background: #fff; border-radius: 36px; padding: clamp(26px, 3vw, 46px); box-shadow: 0 40px 90px -50px rgba(36, 50, 62, .45), 0 0 0 1px var(--ligne); }
.formulaire__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulaire__grille .plein { grid-column: 1 / -1; }
.ch label, .ch legend { display: block; font: 500 13px/1.3 "Poppins"; color: var(--marine); margin-bottom: 8px; }
.ch label span, .ch legend span { color: var(--texte-2); font-weight: 400; }
.ch input, .ch textarea {
  width: 100%; border: 0; border-radius: 16px; background: var(--gris); box-shadow: inset 0 0 0 1px var(--ligne);
  padding: 15px 18px; font: 400 16px/1.4 "Poppins"; color: var(--noir); transition: box-shadow .3s, background .3s;
}
.ch textarea { min-height: 120px; resize: vertical; }
.ch input:focus, .ch textarea:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--vm); }
fieldset.ch { border: 0; min-width: 0; padding: 0; margin: 0; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puces label { margin: 0; cursor: pointer; }
.puces input { position: absolute; opacity: 0; pointer-events: none; }
.puces span { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ligne); font: 500 14px/1 "Poppins"; color: var(--marine); transition: background .3s, box-shadow .3s, color .3s; }
.puces input:checked + span { background: var(--vp); color: #fff; box-shadow: none; }
.puces input:focus-visible + span { outline: 2px solid var(--vm); outline-offset: 2px; }
.consentement { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 13.5px; line-height: 1.5; color: var(--texte-2); }
.consentement input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--vp); }
.consentement a { color: var(--vp); text-decoration: underline; text-underline-offset: 3px; }
.formulaire__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.formulaire__bas small { color: var(--texte-2); font-size: 13px; }
.formulaire .piege { position: absolute; left: -9999px; }
.retour { display: none; margin-top: 18px; padding: 16px 20px; border-radius: 18px; font-size: 15px; }
.retour.ok { display: block; background: var(--menthe); color: var(--vp); }
.retour.err { display: block; background: #FDF1EC; color: #8A3B1E; }

/* Pied de page */
.pied { background: var(--vp); color: #fff; padding-top: clamp(80px, 8vw, 120px); position: relative; overflow: hidden; }
.pied__haut { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.pied__logo { width: 200px; }
.pied__logo svg { width: 100%; height: auto; }
.pied__haut p { color: rgba(255, 255, 255, .72); margin-top: 22px; max-width: 32ch; font-size: 15px; }
.pied h4 { font: 500 12px/1 "Poppins"; letter-spacing: .16em; text-transform: uppercase; color: var(--vm); margin-bottom: 20px; }
.pied li { margin-bottom: 10px; font-size: 15px; }
.pied li a { color: rgba(255, 255, 255, .86); transition: color .3s; }
.pied li a:hover { color: var(--vm); }
.pied__geant { margin-top: clamp(60px, 7vw, 110px); font: 700 clamp(44px, 10.2vw, 186px)/.92 "Poppins"; letter-spacing: -.045em; color: var(--vm); user-select: none; }
.pied__geant span { display: inline-block; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 26px 0 30px; margin-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: rgba(255, 255, 255, .62); }
.pied__bas a:hover { color: #fff; }

/* Curseur anneau (pointeur fin seulement) */
.curseur-anneau { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid var(--vp); display: grid; place-items: center; transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background .45s, border-color .45s; opacity: 0; }
.curseur-anneau span { font: 600 12px/1 "Poppins"; letter-spacing: .06em; color: var(--marine); opacity: 0; transition: opacity .3s; text-transform: uppercase; }
.curseur-anneau.lien { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(95, 175, 122, .14); border-color: var(--vm); }
.curseur-anneau.voir { width: 108px; height: 108px; margin: -54px 0 0 -54px; background: var(--vm); border-color: var(--vm); }
.curseur-anneau.voir span { opacity: 1; }
.curseur-anneau.sombre { border-color: var(--vm); }
.curseur-point { position: fixed; left: 0; top: 0; z-index: 101; pointer-events: none; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--vp); opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .a-curseur .curseur-anneau, .a-curseur .curseur-point { opacity: 1; }
}

/* ---------- Pages d'étude de cas ---------- */
.cas-heros { position: relative; padding: calc(var(--header-h) + clamp(60px, 7vw, 110px)) 0 clamp(50px, 6vw, 90px); overflow: hidden; }
.cas-heros .anneau { --D: clamp(700px, 70vw, 1200px); right: calc(var(--D) * -0.38); top: calc(var(--D) * -0.36); }
.fil { display: flex; gap: 10px; align-items: center; font: 500 13px/1 "Poppins"; color: var(--texte-2); margin-bottom: 34px; position: relative; z-index: 2; }
.fil a:hover { color: var(--vp); }
.fil svg { width: 12px; height: 12px; opacity: .6; }
.cas-heros__grille { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: end; }
.cas-heros h1 { font: 700 clamp(46px, 7.4vw, 124px)/.96 "Poppins"; letter-spacing: -.035em; color: var(--marine); margin-top: 18px; }
.cas-heros__chapeau { font: 400 clamp(18px, 1.5vw, 22px)/1.6 "Poppins"; color: var(--texte-2); }
.fiche { position: relative; z-index: 2; margin-top: clamp(40px, 5vw, 70px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ligne); }
.fiche > div { padding: 22px 22px 0 0; }
.fiche dt { font: 500 12px/1 "Poppins"; letter-spacing: .14em; text-transform: uppercase; color: var(--vp); margin-bottom: 10px; }
.fiche dd { font: 500 15.5px/1.5 "Poppins"; color: var(--marine); }
.cas-media { position: relative; padding: 0 0 clamp(80px, 9vw, 140px); }
.cas-media .navigateur { max-width: 1240px; margin-inline: auto; }
.cas-media__fond { position: absolute; inset: 22% 0 0 0; background: var(--vp); z-index: -1; }
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.chiffre { background: var(--menthe); border-radius: 28px; padding: clamp(22px, 2.4vw, 34px); }
.chiffre b { display: block; font: 700 clamp(36px, 4vw, 64px)/1 "Poppins"; color: var(--vp); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.chiffre span { display: block; margin-top: 12px; font-size: 14.5px; color: var(--texte-2); line-height: 1.45; }
.recit { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(30px, 6vw, 110px); padding-block: clamp(60px, 7vw, 110px); border-top: 1px solid var(--ligne); }
.recit:first-of-type { border-top: 0; }
.recit h2 { font: 700 clamp(28px, 3vw, 44px)/1.1 "Poppins"; color: var(--marine); letter-spacing: -.02em; }
.recit__corps > p { font-size: 18px; color: var(--texte-2); }
.recit__corps > p + p { margin-top: 18px; }
.recit__corps > p strong { color: var(--marine); font-weight: 600; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.trio__c { background: var(--menthe); border-radius: 30px; overflow: hidden; }
.trio__c header { background: var(--vp); color: #fff; padding: 22px 24px 22px 84px; position: relative; border-radius: 26px; }
.trio__c header .num { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 16px; }
.trio__c header b { font: 700 20px/1.2 "Poppins"; display: block; }
.trio__c header > span:not(.num) { font-size: 13px; color: rgba(255, 255, 255, .78); }
.trio__c ul { padding: 24px 26px 28px; display: grid; gap: 12px; }
.trio__c li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; }
.trio__c li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--vp); }
.trio__c.vide { opacity: .55; }
.galerie { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.galerie figure { position: relative; border-radius: 24px; overflow: hidden; background: var(--gris); box-shadow: 0 0 0 1px var(--ligne); }
.galerie figure img, .galerie figure video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.galerie figcaption { position: absolute; left: 14px; bottom: 14px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--marine); font: 500 12.5px/1 "Poppins"; padding: 9px 13px; border-radius: 999px; }
.g-12 { grid-column: span 12; } .g-8 { grid-column: span 8; } .g-7 { grid-column: span 7; } .g-6 { grid-column: span 6; } .g-5 { grid-column: span 5; } .g-4 { grid-column: span 4; }
.r-tall { aspect-ratio: 9 / 16; } .r-wide { aspect-ratio: 16 / 10; } .r-sq { aspect-ratio: 1; }
.telephones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 50px); max-width: 980px; margin-inline: auto; }
.telephones .telephone { position: relative; width: 100%; right: auto; bottom: auto; aspect-ratio: 9 / 16.4; }
.telephone--libre { position: relative; right: auto; bottom: auto; left: auto; width: 100%; }
.telephones figure:nth-child(2) { transform: translateY(clamp(20px, 4vw, 60px)); }
.telephones figcaption { text-align: center; font: 500 13px/1.4 "Poppins"; color: var(--texte-2); margin-top: 18px; }
.suivant { display: block; position: relative; background: var(--menthe); border-radius: 40px; padding: clamp(36px, 5vw, 80px); overflow: hidden; transition: background .5s; }
.suivant:hover { background: #dfeee6; }
.suivant .anneau { --D: 560px; right: -160px; top: -200px; --fond-anneau: var(--menthe); opacity: .9; }
.suivant small { position: relative; font: 500 13px/1 "Poppins"; letter-spacing: .16em; text-transform: uppercase; color: var(--vp); }
.suivant b { position: relative; display: block; margin-top: 16px; font: 700 clamp(36px, 5.4vw, 88px)/1 "Poppins"; color: var(--marine); letter-spacing: -.03em; }
.suivant span { position: relative; display: inline-flex; margin-top: 18px; color: var(--texte-2); }
.bande-cta { background: var(--vp); color: #fff; border-radius: 40px; padding: clamp(40px, 5vw, 80px); display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; position: relative; overflow: hidden; }
.bande-cta .anneau { --D: 600px; left: -240px; bottom: -380px; opacity: .1; --fond-anneau: var(--vp); }
.bande-cta h2 { position: relative; font: 700 clamp(30px, 3.6vw, 54px)/1.08 "Poppins"; letter-spacing: -.02em; }
.bande-cta p { position: relative; color: rgba(255, 255, 255, .78); margin-top: 12px; }

/* Pages simples (confidentialité, 404) */
.page-simple { padding: calc(var(--header-h) + 80px) 0 40px; }
.page-simple .wrap { max-width: 900px; }
.page-simple h1 { font: 700 clamp(40px, 5vw, 72px)/1.05 "Poppins"; color: var(--marine); letter-spacing: -.025em; margin: 14px 0 30px; }
.page-simple h2 { font: 600 22px/1.3 "Poppins"; color: var(--marine); margin: 40px 0 12px; }
.page-simple p, .page-simple li { color: var(--texte-2); margin-bottom: 12px; }
.page-simple ul { padding-left: 20px; list-style: disc; }
.page-simple a { color: var(--vp); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .solutions__cartes { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; }
  .cas, .cas:nth-child(even) { grid-template-columns: 1fr; }
  .cas:nth-child(even) .cas__media { order: 0; }
  .cas__texte { max-width: 680px; }
  .pourquoi__grille, .prix__grille { grid-template-columns: 1fr; }
  .pourquoi .anneau, .prix .anneau { --D: 820px; left: -520px; top: -120px; margin-top: 0; }
  .pourquoi__pied { grid-column: 1; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  :root { --header-h: 72px; }
  .menu, .entete__droite .btn, .entete__droite .langue { display: none; }
  .burger { display: block; }
  .entete__in { grid-template-columns: 1fr auto; }
  .accueil .entete:not(.est-solide) .entete__logo { opacity: 1; transform: none; pointer-events: auto; }
  .accueil .entete:not(.est-solide) .entete__logo { visibility: hidden; }
  .quoi, .methode, .apropos, .faq, .suite__corps, .cas-heros__grille, .recit { grid-template-columns: 1fr; }
  .methode__colle { position: relative; top: 0; }
  .js .etape { opacity: 1; }
  .fiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__haut { grid-template-columns: 1fr 1fr; }
  .pied__haut > div:first-child { grid-column: 1 / -1; }
  .trio { grid-template-columns: 1fr; }
  .bande-cta { grid-template-columns: 1fr; }
  .g-8, .g-7, .g-6, .g-5 { grid-column: span 12; }
  .g-4 { grid-column: span 6; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .heros { min-height: 100svh; }
  .heros .anneau { --D: 175vw; }
  .heros__in { padding: 96px 20px 150px; }
  .heros__coin { display: none; }
  .heros__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .heros__actions .btn { justify-content: space-between; }
  .btn { height: 54px; }
  .duo { grid-template-columns: 1fr; padding-left: 0; }
  .duo .num { top: 0; left: 18px; transform: translateY(-40%); }
  .duo__a { padding: 30px 24px 18px; border-radius: 26px 26px 26px 26px; }
  .duo__b { margin: -26px 0 0; border-radius: 0 0 26px 26px; padding: 40px 24px 20px; }
  .prix__liste .duo { grid-template-columns: 1fr; }
  .prix__liste .duo__a { min-height: 0; padding-left: 24px; }
  .prix__liste .duo__b { padding-top: 38px; }
  .coord li b { font-size: clamp(13.5px, 3.7vw, 16px); }
  .etape-sys { grid-template-columns: 1fr; gap: 10px; }
  .etape-sys__nom { flex-direction: row; align-items: center; }
  .trajet { display: none; }
  .form-sys { grid-template-columns: 1fr; }
  .form-sys .champ:nth-child(n+3):not(.envoyer) { display: none; }
  .cas__faits { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .cas__faits dt { font-size: 24px; }
  .cas__media { padding: 0 34px 48px 0 !important; }
  .cas:nth-child(even) .telephone { left: auto; right: 0; }
  .cas__media .telephone { width: 30%; }
  .formulaire__grille { grid-template-columns: 1fr; }
  .faq__rep p { padding-right: 0; }
  .pied__haut { grid-template-columns: 1fr; }
  .fiche { grid-template-columns: 1fr; }
  .chiffres { grid-template-columns: 1fr 1fr; }
  .g-4 { grid-column: span 12; }
  .telephones { grid-template-columns: 1fr 1fr; }
  .telephones figure:nth-child(3) { display: none; }
  .onglet { display: none; }
  .navigateur__barre { height: 30px; }
  .navigateur__url { height: 20px; font-size: 10.5px; }
  .suite__tete h2 { font-size: clamp(52px, 15vw, 80px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}