/* AXTRACOM · page d'arrivée
   Direction : couleurs et étiquettes des créas (violet, menthe, ruban lilas),
   construction du site de référence (titres serrés, cartes pastel, bloc sombre, bloc menthe). */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/polices/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/polices/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Couleurs : toutes dérivées du violet des créas */
  --encre: #15131f;
  --encre-2: #4b4860;
  --encre-3: #6b6880;
  --fond: #fbfaff;
  --blanc: #fff;
  --violet: #5425ed;
  --violet-fonce: #4018cf;
  --lilas: #ece6ff;
  --lilas-clair: #f5f2ff;
  --lilas-ruban: #e6deff;
  --menthe: #4be8c9;
  --menthe-claire: #dcfaf3;
  --vert: #1d3b2e;
  --ciel: #e8edfc;
  --nuit: #17151f;
  --trait: #e7e3f3;

  --ombre: 0 1px 2px rgb(36 18 87 / .05), 0 10px 30px rgb(36 18 87 / .07);
  --ombre-forte: 0 2px 4px rgb(36 18 87 / .06), 0 24px 60px rgb(36 18 87 / .14);

  /* Rayons : petit pour les champs, moyen pour les boutons, grand pour les cartes, très grand pour les blocs */
  --r-1: 10px;
  --r-2: 14px;
  --r-3: 22px;
  --r-4: 32px;

  /* Échelle de corps, rapport 1,2 */
  --t-0: .833rem;
  --t-1: 1rem;
  --t-2: 1.2rem;
  --t-3: 1.44rem;
  --t-h2: clamp(1.728rem, 1.1rem + 2.6vw, 2.986rem);
  --t-h1: clamp(2.074rem, 1.05rem + 4.5vw, 4.3rem);

  /* Espacements, base 8 */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --section: clamp(64px, 9vw, 120px);

  --ressort: cubic-bezier(.34, 1.4, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 var(--t-1)/1.55 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
[hidden] { display: none !important; }
section[id], [id="formulaire"] { scroll-margin-top: 88px; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.curseur { width: 1em; height: 1em; flex: none; fill: currentColor; stroke: var(--blanc); stroke-width: 2; stroke-linejoin: round; }
.eclats { position: absolute; width: 22px; height: 22px; fill: none; stroke: var(--menthe); stroke-width: 3; stroke-linecap: round; }

.evitement { position: absolute; left: var(--e-4); top: -100px; z-index: 100; padding: var(--e-3) var(--e-4); background: var(--encre); color: var(--blanc); border-radius: var(--r-1); }
.evitement:focus { top: var(--e-4); }

.conteneur { width: min(100% - 2 * clamp(16px, 4vw, 32px), 1180px); margin-inline: auto; }
.conteneur--etroit { width: min(100% - 2 * clamp(16px, 4vw, 32px), 800px); }

/* ---------- Titres ---------- */
.titre {
  font-size: var(--t-h2);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.04em;
  text-wrap: balance;
}
h3 { font-size: var(--t-2); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; }
.titre__ligne { display: block; }
.titre .surligne { white-space: nowrap; }
.titre .surligne--long { white-space: normal; }
.chapeau { font-size: var(--t-2); line-height: 1.5; color: var(--encre-2); max-width: 44ch; text-wrap: pretty; }

/* Le surlignage au feutre des créas */
.surligne, .pastille {
  padding: 0 .26em;
  margin: 0 -.08em;
  color: var(--encre);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='%234be8c9' d='M5 9C40 3 92 7 150 5s108-3 143 3c5 7-3 14 3 22 3 9-5 16-2 24-55 4-115 1-174 3S32 58 7 53c-5-7 2-15-4-23C0 22 8 16 5 9Z'/%3E%3C/svg%3E") no-repeat center 62% / 100% 86%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.pastille {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M5 9C40 3 92 7 150 5s108-3 143 3c5 7-3 14 3 22 3 9-5 16-2 24-55 4-115 1-174 3S32 58 7 53c-5-7 2-15-4-23C0 22 8 16 5 9Z'/%3E%3C/svg%3E");
}

.surtitre {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: 6px 14px 6px 12px;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 999px;
  font-size: var(--t-0); font-weight: 600; color: var(--encre-2);
  box-shadow: var(--ombre);
}
.surtitre__point { width: 8px; height: 8px; border-radius: 50%; background: var(--menthe); box-shadow: 0 0 0 3px var(--menthe-claire); }
.surtitre--nuit { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .14); color: rgb(255 255 255 / .86); box-shadow: none; }
.surtitre--nuit .surtitre__point { box-shadow: 0 0 0 3px rgb(75 232 201 / .22); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: .8em 1.35em;
  border: 0; border-radius: var(--r-2);
  font-size: var(--t-1); font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: transform .28s var(--ressort), box-shadow .28s var(--ressort), background-color .28s var(--ressort);
}
.bouton--petit { min-height: 44px; padding: .6em 1.05em; font-size: var(--t-0); }
.bouton--violet { background: var(--violet); color: var(--blanc); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .22), 0 8px 20px rgb(84 37 237 / .28); }
.bouton--violet:hover { background: var(--violet-fonce); transform: translateY(-2px); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .22), 0 12px 26px rgb(84 37 237 / .34); }
.bouton--clair { background: var(--blanc); color: var(--encre); box-shadow: inset 0 0 0 1.5px rgb(21 19 31 / .16), inset 0 -3px 0 rgb(21 19 31 / .07); }
.bouton--clair:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgb(21 19 31 / .3), inset 0 -3px 0 rgb(21 19 31 / .07); }
.bouton--menthe { background: var(--menthe); color: var(--encre); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .16); }
.bouton--menthe:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(1px); }
.bouton .icone { transition: transform .28s var(--ressort); }
.bouton:hover .icone { transform: translateX(3px); }

/* ---------- Étiquettes (les « stickers » des créas) ---------- */
.etiquette {
  position: absolute; z-index: 2;
  display: none; align-items: center; gap: var(--e-2);
  padding: 9px 14px;
  background: var(--blanc); color: var(--vert);
  border-radius: var(--r-2);
  font-size: var(--t-0); font-weight: 700; white-space: nowrap;
  box-shadow: var(--ombre-forte);
}
.etiquette .curseur { position: absolute; top: -12px; left: -12px; width: 22px; height: 22px; color: var(--violet); }
.etiquette .eclats { top: -18px; right: -14px; }
.etiquette--fixe { display: inline-flex; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 20; background: rgb(251 250 255 / .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgb(231 227 243 / .7); }
.entete__ligne { display: flex; align-items: center; gap: var(--e-4); min-height: 64px; }
.entete__logo { margin-right: auto; }
.entete__logo img { height: 30px; width: auto; }
.entete__lieu { display: none; font-size: var(--t-0); font-weight: 500; color: var(--encre-2); }

/* ---------- 1. Premier écran ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(32px, 6vw, 72px); }
.ruban { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; fill: none; stroke: var(--lilas-ruban); stroke-width: 84; stroke-linecap: round; opacity: .75; }
.hero__centre { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e-5); }
.hero__titre { font-size: var(--t-h1); font-weight: 800; line-height: 1.1; letter-spacing: -.045em; max-width: 20ch; text-wrap: balance; }
.hero__texte { font-size: var(--t-2); line-height: 1.5; color: var(--encre-2); max-width: 46ch; text-wrap: pretty; }

.etapes-ligne { display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--t-0); font-weight: 700; }
.etapes-ligne li { display: flex; align-items: center; gap: var(--e-2); }
.etapes-ligne .icone { width: 30px; height: 30px; padding: 6px; background: var(--blanc); border-radius: 9px; color: var(--vert); box-shadow: var(--ombre); }

.hero__actions { display: flex; flex-direction: column; gap: var(--e-3); width: 100%; }

.equipe { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-0); font-weight: 600; line-height: 1.35; color: var(--encre-2); text-align: left; }
.equipe__visages { display: flex; }
.equipe__visages img { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--blanc); background: var(--lilas); box-shadow: var(--ombre); }
.equipe__visages img + img { margin-left: -12px; }
.equipe__visages img:nth-child(even) { background: var(--menthe-claire); }

/* La bande de sites, comme une étagère de réalisations sous le premier écran */
.vitrine { display: flex; gap: var(--e-4); margin-top: var(--e-7); padding: var(--e-4) clamp(16px, 4vw, 32px) var(--e-8); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vitrine::-webkit-scrollbar { display: none; }
.vitrine .fenetre { flex: 0 0 82%; scroll-snap-align: center; }

.fenetre { position: relative; background: var(--blanc); border-radius: var(--r-2); box-shadow: var(--ombre-forte); }
.fenetre > img:not(.fenetre__mobile) { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 0 0 var(--r-2) var(--r-2); }
.fenetre__barre { display: flex; align-items: center; gap: 6px; height: 28px; padding-inline: 12px; border-bottom: 1px solid var(--trait); }
.fenetre__barre i { width: 8px; height: 8px; border-radius: 50%; background: #d9d4ea; }
.fenetre__barre em { margin-left: auto; font-size: 11px; font-style: normal; font-weight: 700; color: var(--encre-3); }
.fenetre__mobile { display: none; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section--teinte { background: var(--lilas-clair); }
.section__tete { display: flex; flex-direction: column; align-items: center; gap: var(--e-4); margin-bottom: var(--e-7); text-align: center; }
.section__tete .titre { max-width: 21ch; }

/* ---------- 2. Les reproches ---------- */
.reproches { display: grid; gap: var(--e-4); }
.reproche { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4); background: var(--blanc); border-radius: var(--r-3); box-shadow: var(--ombre); }
.reproche__dessin { position: relative; display: grid; place-items: center; height: 184px; margin-bottom: var(--e-2); background: var(--lilas-clair); border-radius: var(--r-1); overflow: hidden; }
.reproche__avant { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); padding-inline: var(--e-2); }
.reproche h3 { padding-inline: var(--e-2); }
.reproche__apres { display: flex; gap: var(--e-2); margin-top: auto; padding: var(--e-3); background: var(--menthe-claire); border-radius: var(--r-1); font-size: var(--t-0); line-height: 1.5; color: var(--vert); font-weight: 500; }
.reproche__apres .icone { margin-top: 2px; stroke-width: 3; }

.mini-fenetre { background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; box-shadow: var(--ombre); overflow: hidden; }
.mini-fenetre .fenetre__barre { height: 20px; padding-inline: 8px; gap: 4px; }
.mini-fenetre .fenetre__barre i { width: 6px; height: 6px; }

.dessin-editeur .mini-fenetre { width: 78%; }
.dessin-editeur__zone { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.dessin-editeur__zone span { display: grid; place-items: center; min-height: 40px; border: 1.5px dashed #c9c2e2; border-radius: 8px; font-size: 11px; font-weight: 600; color: var(--encre-3); }
.dessin-editeur__zone span:first-child { grid-column: 1 / -1; }
.dessin-editeur__curseur { position: absolute; right: 13%; bottom: 9%; width: 26px; height: 26px; color: var(--encre); }

.dessin-messages { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; padding: var(--e-4) var(--e-5); }
.dessin-messages__contact { align-self: flex-start; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--encre-2); }
.dessin-messages span { padding: 7px 12px; background: var(--violet); color: var(--blanc); border-radius: 14px 14px 4px 14px; font-size: 12px; font-weight: 600; }
.dessin-messages em { font-size: 11px; font-style: normal; color: var(--encre-3); }

.dessin-copies { grid-auto-flow: column; }
.dessin-copies .mini-fenetre { width: 96px; padding-bottom: 8px; }
.dessin-copies .mini-fenetre:nth-child(1) { transform: rotate(-7deg) translate(18px, 6px); }
.dessin-copies .mini-fenetre:nth-child(2) { position: relative; z-index: 1; transform: translateY(-4px); }
.dessin-copies .mini-fenetre:nth-child(3) { transform: rotate(7deg) translate(-18px, 6px); }
.dessin-copies b { display: block; margin: 7px 8px 5px; font-size: 9px; font-weight: 700; color: var(--encre-2); }
.dessin-copies u { display: block; height: 34px; margin: 0 8px 6px; background: #dedaea; border-radius: 4px; }
.dessin-copies s { display: block; height: 5px; margin: 0 8px 4px; background: #e9e6f2; border-radius: 3px; }
.dessin-copies s:last-child { width: 50%; }

.dessin-paye .mini-fenetre { width: 70%; }
.dessin-paye__page { display: grid; justify-items: center; gap: 8px; padding: 12px; }
.dessin-paye__page u { width: 100%; height: 30px; background: #e4e0ef; border-radius: 6px; }
.dessin-paye__page p { font-size: 11px; font-weight: 600; color: var(--encre-3); }
.dessin-paye__page s { width: 46%; height: 5px; background: #e9e6f2; border-radius: 3px; }
.tampon { position: absolute; right: 12%; top: 26%; padding: 4px 12px; border: 3px solid var(--violet); border-radius: 8px; color: var(--violet); font-size: 20px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-12deg); background: rgb(255 255 255 / .82); }

/* ---------- 3. L'offre ---------- */
.piliers { display: grid; gap: var(--e-4); }
.pilier { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4) var(--e-4) var(--e-5); border-radius: var(--r-3); }
.pilier--lilas { background: var(--lilas); }
.pilier--menthe { background: var(--menthe-claire); }
.pilier--ciel { background: var(--ciel); }
.pilier h3, .pilier > p { padding-inline: var(--e-2); }
.pilier > p { color: var(--encre-2); }
.pilier__dessin { position: relative; height: 232px; margin-bottom: var(--e-2); }

.dessin-identite { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; padding: 12px; }
.tuile { display: grid; place-items: center; background: var(--blanc); border-radius: var(--r-2); box-shadow: var(--ombre); }
.tuile--logo { grid-row: 1 / -1; }
.tuile--logo b { display: grid; place-items: center; width: 84px; height: 84px; background: var(--violet); color: var(--blanc); border-radius: 24px; font-size: 48px; font-weight: 800; letter-spacing: -.06em; }
.tuile--couleurs { grid-auto-flow: column; gap: 0; justify-content: center; }
.tuile--couleurs i { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--blanc); background: var(--violet); }
.tuile--couleurs i:nth-child(2) { margin-left: -10px; background: var(--menthe); }
.tuile--couleurs i:nth-child(3) { margin-left: -10px; background: var(--encre); }
.tuile--carte { justify-items: start; align-content: center; gap: 6px; padding-inline: 18px; }
.tuile--carte b { display: grid; place-items: center; width: 24px; height: 24px; background: var(--violet); color: var(--blanc); border-radius: 7px; font-size: 13px; font-weight: 800; }
.tuile--carte span { width: 70%; height: 5px; background: #e4e0ef; border-radius: 3px; }
.tuile--carte span:last-child { width: 44%; }
.dessin-identite .etiquette { left: 14%; bottom: 0; transform: rotate(-3deg); }

.dessin-maquette { display: grid; place-items: center; }
.dessin-maquette .mini-fenetre { width: 76%; }
.dessin-maquette .fenetre__barre em { padding: 1px 7px; background: var(--menthe); border-radius: 999px; color: var(--vert); font-size: 10px; }
.dessin-maquette__page { display: grid; gap: 7px; padding: 10px; }
.dessin-maquette__page b { height: 62px; border-radius: 6px; background: linear-gradient(135deg, #b9a7ff, var(--violet)); }
.dessin-maquette__page u { height: 6px; background: #e4e0ef; border-radius: 3px; }
.dessin-maquette__page u + u { width: 62%; }
.dessin-maquette__page span { width: 64px; height: 18px; background: var(--encre); border-radius: 6px; }
.etiquette--n1 { left: 0; top: 16%; transform: rotate(-4deg); }
.etiquette--n2 { right: 0; top: 46%; transform: rotate(3deg); }
.etiquette--n3 { left: 14%; bottom: 2%; }
.etiquette--n1 .icone, .etiquette--n2 .icone { padding: 2px; background: var(--menthe); border-radius: 50%; stroke-width: 3; }

.dessin-code { display: grid; align-items: center; }
.editeur { width: 86%; background: var(--nuit); border-radius: var(--r-2); box-shadow: var(--ombre-forte); overflow: hidden; }
.editeur .fenetre__barre { border-color: rgb(255 255 255 / .1); }
.editeur .fenetre__barre i { background: rgb(255 255 255 / .22); }
.editeur .fenetre__barre em { color: rgb(255 255 255 / .55); }
.editeur pre { margin: 0; padding: 14px 16px 18px; font: 500 11.5px/1.75 ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: 0; color: #cfc9e6; white-space: pre; overflow: hidden; }
.c1 { color: #b9a7ff; } .c2 { color: var(--menthe); } .c3 { color: #ffd479; } .c4 { color: #8fd6ff; } .c5 { color: #a8f0c8; }
.telephone { position: absolute; right: 0; bottom: -6px; width: 30%; padding: 4px; background: var(--encre); border-radius: 18px; box-shadow: var(--ombre-forte); transform: rotate(4deg); }
.telephone img { width: 100%; aspect-ratio: 9 / 17; object-fit: cover; object-position: top; border-radius: 14px; }

.inclus { display: grid; gap: var(--e-4); margin-top: var(--e-4); }
.inclus li { display: flex; gap: var(--e-3); padding: var(--e-4); background: var(--blanc); border-radius: var(--r-3); box-shadow: var(--ombre); }
.inclus .icone { width: 36px; height: 36px; padding: 8px; background: var(--menthe-claire); color: var(--vert); border-radius: var(--r-1); }
.inclus h3 { font-size: var(--t-1); margin-bottom: 2px; }
.inclus p { font-size: var(--t-0); line-height: 1.5; color: var(--encre-2); }

/* ---------- 4. L'engagement ---------- */
.nuit { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--e-7); padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 72px); background: var(--nuit); color: var(--blanc); border-radius: var(--r-4); }
.ruban--nuit { stroke: var(--violet); opacity: .38; stroke-width: 70; }
.nuit__texte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-5); }
.nuit__texte > p:not(.surtitre) { font-size: var(--t-2); line-height: 1.55; color: rgb(255 255 255 / .76); max-width: 42ch; }
.proces { position: relative; align-self: center; padding: var(--e-5); background: var(--blanc); color: var(--encre); border-radius: var(--r-3); box-shadow: 0 30px 70px rgb(0 0 0 / .35); }
.proces__titre { padding-bottom: var(--e-3); margin-bottom: var(--e-3); border-bottom: 1px dashed var(--trait); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.proces ul { display: grid; gap: var(--e-3); }
.proces li { display: flex; align-items: flex-start; gap: var(--e-3); font-weight: 600; line-height: 1.35; }
.proces li .icone { width: 22px; height: 22px; padding: 4px; background: var(--menthe); color: var(--vert); border-radius: 50%; stroke-width: 3.5; }
.proces__signature { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4); margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px dashed var(--trait); font-size: var(--t-0); color: var(--encre-2); }
.proces__signature i { flex: 0 0 34%; height: 30px; border-bottom: 2px solid var(--encre); }
.etiquette--proces { right: 6%; bottom: -14px; background: var(--violet); color: var(--blanc); }
.etiquette--proces .curseur { color: var(--menthe); stroke: var(--nuit); }

/* ---------- 5. La méthode ---------- */
.methode { display: grid; gap: var(--e-4); counter-reset: etape; }
.methode li { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); background: var(--blanc); border-radius: var(--r-3); box-shadow: var(--ombre); }
.methode__numero { align-self: flex-start; padding: 4px 12px; background: var(--lilas); color: var(--violet-fonce); border-radius: 999px; font-size: var(--t-0); font-weight: 700; }
.methode li p:last-child { color: var(--encre-2); }

/* ---------- 6. Les réalisations ---------- */
.realisations { display: grid; gap: var(--e-6) var(--e-5); }
.realisation { display: grid; gap: var(--e-4); }
.realisation .fenetre { transition: transform .4s var(--ressort); }
.realisation:hover .fenetre { transform: translateY(-6px) rotate(-.6deg); }
.realisation figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--e-3); padding-inline: var(--e-2); }
.realisation b { font-size: var(--t-2); font-weight: 700; letter-spacing: -.025em; }
.realisation span { font-size: var(--t-0); color: var(--encre-2); }

/* ---------- 7. Pour qui ---------- */
.pour-qui { display: grid; gap: var(--e-4); }
.pour-qui__colonne { padding: var(--e-5); border-radius: var(--r-3); }
.pour-qui__colonne--oui { background: var(--menthe-claire); }
.pour-qui__colonne--non { background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--trait); }
.pour-qui h3 { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.pour-qui h3 .icone { width: 30px; height: 30px; padding: 6px; border-radius: 50%; stroke-width: 3; }
.pour-qui__colonne--oui h3 .icone { background: var(--menthe); color: var(--vert); }
.pour-qui__colonne--non h3 .icone { background: var(--lilas); color: var(--violet-fonce); }
.pour-qui ul { display: grid; gap: var(--e-3); }
.pour-qui li { position: relative; padding-left: 22px; line-height: 1.5; }
.pour-qui li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); }
.pour-qui__colonne--non li::before { background: #c5bde0; }

/* ---------- 8. Questions ---------- */
.questions { border-top: 1px solid var(--trait); }
.questions details { border-bottom: 1px solid var(--trait); }
.questions summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); padding: var(--e-5) var(--e-1); font-size: var(--t-2); font-weight: 700; letter-spacing: -.025em; line-height: 1.3; cursor: pointer; list-style: none; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary .icone { width: 32px; height: 32px; padding: 7px; background: var(--lilas); color: var(--violet-fonce); border-radius: 50%; transition: transform .3s var(--ressort), background-color .3s var(--ressort); }
.questions details[open] summary .icone { transform: rotate(45deg); background: var(--menthe); color: var(--vert); }
.questions details p { padding: 0 var(--e-7) var(--e-5) var(--e-1); color: var(--encre-2); max-width: 68ch; }

/* ---------- 9. Le formulaire ---------- */
.devis { display: grid; gap: var(--e-7); }
.devis__texte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-6); }
.devis__suite { display: grid; gap: var(--e-4); }
.devis__suite li { display: flex; gap: var(--e-3); font-size: var(--t-2); line-height: 1.45; color: var(--encre-2); max-width: 36ch; }
.devis__suite span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; background: var(--menthe); color: var(--vert); border-radius: 50%; font-size: var(--t-0); font-weight: 800; }

.formulaire { position: relative; display: flex; flex-direction: column; gap: var(--e-4); padding: clamp(20px, 4vw, 40px); background: var(--blanc); border-radius: var(--r-3); box-shadow: var(--ombre-forte); }
.formulaire__avance { height: 6px; background: var(--lilas); border-radius: 999px; overflow: hidden; }
.formulaire__avance i { display: block; width: 20%; height: 100%; background: var(--violet); border-radius: inherit; transition: width .4s var(--ressort); }
.formulaire__compte { font-size: var(--t-0); font-weight: 700; color: var(--encre-3); }
.etape { display: grid; gap: var(--e-3); }
.js .etape:not(.est-active) { display: none; }
.etape legend { padding: 0; margin-bottom: var(--e-4); font-size: var(--t-3); font-weight: 800; line-height: 1.2; letter-spacing: -.035em; text-wrap: balance; }
.choix { position: relative; display: flex; align-items: center; gap: var(--e-3); min-height: 56px; padding: var(--e-3) var(--e-4); border-radius: var(--r-2); box-shadow: inset 0 0 0 1.5px var(--trait); font-weight: 600; cursor: pointer; transition: box-shadow .2s var(--ressort), background-color .2s var(--ressort); }
.choix input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid #c5bde0; border-radius: 50%; background: var(--blanc); transition: border-color .2s var(--ressort), border-width .2s var(--ressort); }
.choix:hover { box-shadow: inset 0 0 0 1.5px #b7abe6; }
.choix:has(:checked) { background: var(--lilas-clair); box-shadow: inset 0 0 0 2px var(--violet); }
.choix input:checked { border: 7px solid var(--violet); }
.choix:has(:focus-visible) { outline: 3px solid var(--violet); outline-offset: 3px; }
.choix input:focus-visible { outline: none; }

.etape--coordonnees { gap: var(--e-4); }
.champ { display: grid; gap: 6px; }
.champ label { font-size: var(--t-0); font-weight: 700; }
.champ label span { font-weight: 500; color: var(--encre-3); }
.champ input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--trait); border-radius: var(--r-1); background: var(--blanc); font-size: var(--t-1); transition: border-color .2s var(--ressort); }
.champ input::placeholder { color: #76728c; }
.champ input:hover { border-color: #b7abe6; }
.champ input:focus-visible { outline: 3px solid rgb(84 37 237 / .25); outline-offset: 0; border-color: var(--violet); }
.champ input.est-fautif { border-color: #c2255c; }
.champ--piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__mention { font-size: var(--t-0); color: var(--encre-3); }
.formulaire__erreur { padding: var(--e-3) var(--e-4); background: #fde8ef; color: #8f1740; border-radius: var(--r-1); font-size: var(--t-0); font-weight: 600; }
.formulaire__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-2); }
.formulaire__actions .bouton--violet { margin-left: auto; }
.formulaire__merci { display: grid; justify-items: start; gap: var(--e-3); padding-block: var(--e-4); }
.formulaire__merci:focus { outline: none; }
.formulaire__merci-icone { display: grid; place-items: center; width: 56px; height: 56px; background: var(--menthe); color: var(--vert); border-radius: 50%; font-size: 24px; }
.formulaire__merci-icone .icone { stroke-width: 3; }
.formulaire__merci h3 { font-size: var(--t-3); font-weight: 800; letter-spacing: -.035em; }
.formulaire__merci p { color: var(--encre-2); }
.formulaire__essai { padding: var(--e-3) var(--e-4); background: var(--lilas-clair); border-radius: var(--r-1); font-size: var(--t-0); font-weight: 600; color: var(--violet-fonce) !important; }

/* ---------- 10. Dernier appel ---------- */
.section--fin { padding-top: 0; }
.final { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--e-6); padding: clamp(48px, 8vw, 104px) clamp(20px, 5vw, 72px); background: var(--menthe); border-radius: var(--r-4); text-align: center; }
.final__titre { font-size: var(--t-h2); font-weight: 800; line-height: 1.16; letter-spacing: -.04em; max-width: 20ch; text-wrap: balance; }
.etapes-ligne--final .icone { box-shadow: none; }
.etiquette--final-a { left: 5%; top: 14%; transform: rotate(-5deg); display: none; }
.etiquette--final-b { right: 6%; bottom: 20%; transform: rotate(4deg); display: none; }

/* ---------- Pied de page ---------- */
.pied { padding-block: var(--e-7) var(--e-8); border-top: 1px solid var(--trait); font-size: var(--t-0); color: var(--encre-2); }
.pied__ligne { display: grid; gap: var(--e-5); }
.pied__marque { display: grid; gap: var(--e-3); max-width: 34ch; }
.pied__marque img { height: 34px; width: auto; }
.pied__contact { display: grid; gap: var(--e-2); align-content: start; }
.pied__contact li { display: flex; align-items: center; gap: var(--e-2); }
.pied__contact .icone { width: 28px; height: 28px; padding: 6px; background: var(--menthe-claire); color: var(--vert); border-radius: 8px; }
.pied__legal { display: grid; gap: var(--e-2); margin-top: var(--e-6); padding-top: var(--e-5); border-top: 1px solid var(--trait); color: var(--encre-3); }
.pied a { text-underline-offset: 3px; }
.pied a:hover { color: var(--violet); }

/* ---------- Barre fixe sur téléphone ---------- */
.barre-mobile { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 54px; background: var(--violet); color: var(--blanc); border-radius: var(--r-2); font-weight: 700; text-decoration: none; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .22), 0 12px 30px rgb(84 37 237 / .4); transform: translateY(140%); transition: transform .4s var(--ressort); }
.barre-mobile.est-visible { transform: none; }

/* ---------- Apparitions ---------- */
.js .apparait { opacity: 0; transform: translateY(18px); }
.js .apparait.est-vu { opacity: 1; transform: none; transition: opacity .6s var(--ressort), transform .6s var(--ressort); }

/* Pages de texte (mentions, confidentialité) */
.texte { padding-block: var(--e-8); }
.texte h1 { font-size: var(--t-h2); font-weight: 800; letter-spacing: -.04em; line-height: 1.12; margin-bottom: var(--e-6); }
.texte h2 { font-size: var(--t-3); font-weight: 800; letter-spacing: -.03em; margin: var(--e-6) 0 var(--e-3); }
.texte p, .texte li { color: var(--encre-2); max-width: 68ch; }
.texte p + p { margin-top: var(--e-3); }
.texte ul { display: grid; gap: var(--e-2); padding-left: 20px; list-style: disc; }
.texte a { color: var(--violet); }

/* ---------- À partir de 40em : deux colonnes ---------- */
@media (min-width: 40em) {
  .entete__lieu { display: block; }
  .hero__actions { flex-direction: row; justify-content: center; width: auto; }
  .etapes-ligne { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--e-3) var(--e-6); }
  .reproches, .inclus, .methode, .realisations, .pour-qui { grid-template-columns: repeat(2, 1fr); }
  .etape--coordonnees { grid-template-columns: 1fr 1fr; }
  .etape--coordonnees legend, .champ--large, .formulaire__mention { grid-column: 1 / -1; }
  .vitrine .fenetre { flex-basis: 46%; }
  .pied__ligne { grid-template-columns: 1fr auto; }
  .pied__legal { grid-template-columns: 1fr auto; }
  .barre-mobile { display: none; }
}

/* ---------- À partir de 64em : mise en page complète ---------- */
@media (min-width: 64em) {
  .entete__ligne { min-height: 72px; }
  .entete__logo img { height: 36px; }
  .hero__centre { gap: var(--e-6); }
  .hero .etiquette { display: inline-flex; animation: flotte 6s ease-in-out infinite; }
  .etiquette--a { left: 2%; top: 55%; --pente: -5deg; }
  .etiquette--b { right: 9%; top: -10px; --pente: 4deg; animation-delay: -2s !important; background: var(--violet); color: var(--blanc); }
  .etiquette--b .curseur { color: var(--menthe); stroke: var(--blanc); }
  .etiquette--c { right: 3%; top: 76%; --pente: -3deg; animation-delay: -4s !important; }
  .etiquette--c .eclats { stroke: var(--violet); }

  .vitrine { display: grid; grid-template-columns: 1fr 1.18fr 1.18fr 1fr; align-items: end; gap: var(--e-5); width: 116%; margin-inline: -8%; padding-inline: 0; overflow: visible; }
  .fenetre--cote { opacity: .96; }
  .fenetre--centre { margin-bottom: var(--e-5); }
  .fenetre__mobile { display: block; position: absolute; right: -16px; bottom: -22px; width: 23%; padding: 3px; background: var(--encre); border-radius: 16px; box-shadow: var(--ombre-forte); aspect-ratio: 9 / 17; object-fit: cover; object-position: top; }

  .reproches { grid-template-columns: repeat(4, 1fr); }
  .piliers { grid-template-columns: repeat(3, 1fr); }
  .inclus { grid-template-columns: repeat(4, 1fr); }
  .inclus li { flex-direction: column; }
  .methode { grid-template-columns: repeat(4, 1fr); }
  .nuit { grid-template-columns: 1.15fr .85fr; align-items: center; }
  .proces { transform: rotate(2deg); }
  .devis { grid-template-columns: .9fr 1.1fr; align-items: start; }
  .devis__texte { position: sticky; top: 104px; }
  .etiquette--final-a, .etiquette--final-b { display: inline-flex; }
}

/* Entre 64em et 75em, le titre prend presque toute la largeur : les étiquettes du premier écran le toucheraient */
@media (min-width: 64em) and (max-width: 74.99em) {
  .hero .etiquette { display: none; }
}

@keyframes flotte {
  0%, 100% { transform: translateY(0) rotate(var(--pente, 0deg)); }
  50% { transform: translateY(-10px) rotate(var(--pente, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .apparait { opacity: 1; transform: none; }
}

/* ---------- Le bloc propre à chaque pub (inséré sous le premier écran par _source/construire.py) ---------- */
.angle__grille { display: grid; gap: var(--e-7); align-items: center; }
.angle__texte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-5); }
.angle__points { display: grid; gap: var(--e-3); }
.angle__points li { display: flex; align-items: flex-start; gap: var(--e-3); max-width: 46ch; font-weight: 600; line-height: 1.45; }
.angle__points .icone { width: 24px; height: 24px; padding: 5px; margin-top: 1px; background: var(--menthe); color: var(--vert); border-radius: 50%; stroke-width: 3.5; }
.angle__dessin { position: relative; display: grid; place-items: center; min-height: 320px; padding: var(--e-6) var(--e-4); background: var(--lilas); border-radius: var(--r-4); overflow: hidden; }
.angle__dessin--reponse, .angle__dessin--recherche { background: var(--menthe-claire); }
.angle__dessin--partage, .angle__dessin--evolution { background: var(--ciel); }
.angle__zoom { position: relative; display: grid; place-items: center; width: 300px; height: 232px; }
.angle__zoom.dessin-copies { grid-auto-flow: column; }
.angle__zoom.dessin-identite { place-items: stretch; }
.angle__etiquette { right: 8%; top: 10%; transform: rotate(4deg); }

.partage { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--e-3); width: min(100%, 440px); }
.partage > div { padding: var(--e-4); background: var(--blanc); border-radius: var(--r-3); box-shadow: var(--ombre-forte); }
.partage p { margin-bottom: var(--e-3); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.partage ul { display: grid; gap: var(--e-2); font-size: var(--t-0); font-weight: 700; }
.partage li { display: flex; align-items: center; gap: var(--e-2); }
.partage li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #c5bde0; }
.partage__vous { align-self: start; transform: rotate(-2deg); }
.partage > .partage__nous { background: var(--violet); color: var(--blanc); transform: rotate(1.5deg); }
.partage__nous p { color: rgb(255 255 255 / .72); }
.partage__nous li::before { background: var(--menthe); }

.dessin-reponse { display: flex; flex-direction: column; gap: var(--e-2); width: min(100%, 380px); padding: var(--e-4); background: var(--blanc); border-radius: var(--r-3); box-shadow: var(--ombre-forte); }
.dessin-reponse__contact { padding-bottom: var(--e-2); margin-bottom: var(--e-1); border-bottom: 1px solid var(--trait); font-size: var(--t-0); font-weight: 700; }
.dessin-reponse span { max-width: 86%; padding: 9px 14px; font-size: var(--t-0); font-weight: 600; line-height: 1.35; }
.dessin-reponse__vous { align-self: flex-end; background: var(--violet); color: var(--blanc); border-radius: 16px 16px 4px 16px; }
.dessin-reponse__nous { align-self: flex-start; background: var(--menthe-claire); color: var(--vert); border-radius: 16px 16px 16px 4px; }

.dessin-recherche { display: grid; gap: var(--e-3); width: min(100%, 380px); }
.dessin-recherche__barre { display: flex; align-items: center; gap: var(--e-3); padding: 12px 18px; background: var(--blanc); border-radius: 999px; box-shadow: var(--ombre-forte); font-weight: 700; }
.dessin-recherche__barre .icone { color: var(--encre-3); }
.dessin-recherche__carte { display: grid; gap: var(--e-2); padding: var(--e-3) var(--e-3) var(--e-4); background: var(--blanc); border-radius: var(--r-3); box-shadow: var(--ombre-forte); }
.dessin-recherche__carte img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: top; margin-bottom: var(--e-1); border-radius: var(--r-1); }
.dessin-recherche__carte b { padding-inline: var(--e-2); font-size: var(--t-2); letter-spacing: -.025em; }
.dessin-recherche__carte span { display: flex; align-items: center; gap: var(--e-2); padding-inline: var(--e-2); font-size: var(--t-0); font-weight: 600; color: var(--encre-2); }
.dessin-recherche__carte .icone { width: 18px; height: 18px; padding: 3px; background: var(--menthe); color: var(--vert); border-radius: 50%; stroke-width: 3.5; }

.dessin-evolution { position: relative; display: grid; grid-template-columns: .62fr auto 1.38fr; align-items: center; gap: var(--e-3); width: 100%; padding-top: var(--e-5); }
.dessin-evolution__avant { transform: rotate(-4deg); }
.vieux-site { display: grid; gap: 6px; padding: 10px; background: #efeef2; }
.vieux-site b { font: 700 10px/1.2 "Times New Roman", Times, serif; letter-spacing: 0; color: #55526a; }
.vieux-site u { height: 34px; background: #d6d3e0; }
.vieux-site s { height: 4px; background: #d6d3e0; }
.vieux-site s:last-child { width: 55%; }
.dessin-evolution__fleche { width: 28px; height: 28px; color: var(--violet); stroke-width: 2.5; }
.dessin-evolution__apres { margin: 0; }
.dessin-evolution__e1 { left: 2%; top: 0; transform: rotate(-5deg); }
.dessin-evolution__e2 { right: 4%; top: 0; transform: rotate(3deg); background: var(--violet); color: var(--blanc); }

@media (min-width: 64em) {
  .angle__grille { grid-template-columns: 1fr 1fr; gap: var(--e-8); }
  .angle__dessin { min-height: 440px; padding: var(--e-7); }
  .angle__zoom { transform: scale(1.45); }
  .reproches--trois { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Formulaire : case à cocher et note ---------- */
.coche { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-0); font-weight: 600; cursor: pointer; }
.coche input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid #c5bde0; border-radius: 6px; background: var(--blanc) center / 14px no-repeat; }
.coche input:checked { border-color: var(--violet); background-color: var(--violet); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.devis__note { max-width: 46ch; font-size: var(--t-0); line-height: 1.5; color: var(--encre-3); }

/* =====================================================================
   Couche du kit AXTRACOM (10/11) : charte officielle, Sora pour les titres,
   illustrations et montages du kit, emplacements « À fournir ».
   ===================================================================== */
@font-face {
  font-family: "Sora";
  src: url("../assets/polices/sora.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --encre: #14261f;
  --encre-2: #4a526b;
  --encre-3: #646c80;
  --fond: #fdfdfd;
  --violet: #4a26f7;
  --violet-fonce: #3a1ad6;
  --lilas: #f0e4fd;
  --lilas-clair: #f8f3fe;
  --menthe: #63fbe0;
  --menthe-claire: #e0fdf8;
  --vert: #183d2d;
  --ciel: #eef1fb;
  --nuit: #12211b;
  --trait: #e5e4ed;
  --ombre: 0 16px 32px -20px rgb(20 38 31 / .3), 0 3px 6px rgb(20 38 31 / .05);
  --ombre-forte: 0 30px 60px -26px rgb(20 38 31 / .42), 0 4px 10px rgb(20 38 31 / .06);
  --r-1: 8px;
  --r-2: 10px;
  --r-3: 16px;
  --r-4: 28px;
  --t-h1: clamp(2rem, 1rem + 4.3vw, 4.15rem);
  --titres: "Sora", "Plus Jakarta Sans", system-ui, sans-serif;
}

.hero__titre, .titre, .final__titre, h3, .etape legend, .questions summary, .realisation b, .formulaire__merci h3 { font-family: var(--titres); }
.hero__titre { font-weight: 600; letter-spacing: -.058em; line-height: 1.13; max-width: 19ch; }
.titre, .final__titre { font-weight: 600; letter-spacing: -.055em; line-height: 1.15; }
h3 { font-weight: 600; letter-spacing: -.04em; }
.etape legend, .formulaire__merci h3 { font-weight: 600; letter-spacing: -.045em; }
.questions summary { font-weight: 600; letter-spacing: -.035em; }
.realisation b { font-weight: 600; letter-spacing: -.04em; }
.bouton { border-radius: 8px; }
.surligne { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill='%2363fbe0' d='M5 9C40 3 92 7 150 5s108-3 143 3c5 7-3 14 3 22 3 9-5 16-2 24-55 4-115 1-174 3S32 58 7 53c-5-7 2-15-4-23C0 22 8 16 5 9Z'/%3E%3C/svg%3E"); }

/* ---------- En-tête ---------- */
.entete { background: rgb(253 253 253 / .88); }
.entete__logo img { height: 30px; }
.entete__nav { display: none; }
.entete__nav ul { display: flex; gap: var(--e-6); }
.entete__nav a { font-size: var(--t-0); font-weight: 600; color: var(--encre-2); text-decoration: none; transition: color .2s var(--ressort); }
.entete__nav a:hover { color: var(--encre); }

/* ---------- Premier écran ---------- */
.hero__ruban { position: absolute; z-index: -1; top: -70px; left: 50%; width: max(1500px, 112vw); max-width: none; height: auto; transform: translateX(-50%); opacity: .8; pointer-events: none; }
.confiance { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-3) var(--e-4); font-size: var(--t-0); line-height: 1.35; color: var(--encre-2); text-align: left; }
.confiance strong { display: block; font-size: 15px; color: var(--encre); }
.equipe__visages img { width: 44px; height: 44px; background: var(--lilas); }

.badge-avatar { position: absolute; z-index: 2; display: none; align-items: center; gap: var(--e-3); padding: 8px 18px 8px 8px; background: var(--menthe); color: var(--encre); border: 3px solid var(--blanc); border-radius: var(--r-2); box-shadow: var(--ombre-forte); font: 600 15px/1.2 var(--titres); letter-spacing: -.03em; white-space: nowrap; }
.badge-avatar img { width: 42px; height: 42px; object-fit: contain; }
.badge-avatar--lavande { background: var(--lilas); }
.badge-avatar .curseur { position: absolute; top: -22px; right: -16px; width: 28px; height: 28px; color: var(--menthe); stroke: var(--blanc); stroke-width: 2.5; transform: scaleX(-1); filter: drop-shadow(0 2px 1px rgb(20 38 31 / .14)); }
.badge-avatar--lavande .curseur { color: var(--violet); }
.etiquette--violet { background: var(--violet); color: var(--blanc); }
.etiquette .eclats { position: absolute; top: -22px; right: -18px; width: 28px; height: 28px; }
.etiquette--proces { right: 6%; bottom: -14px; }
.etiquette--proces .curseur { color: var(--menthe); stroke: var(--nuit); }

.vitrine { gap: var(--e-4); padding-bottom: var(--e-6); align-items: center; }
.vitrine__carte { flex: 0 0 80%; margin: 0; overflow: hidden; background: var(--blanc); border-radius: var(--r-3); box-shadow: var(--ombre-forte); scroll-snap-align: center; }
.vitrine__carte img { width: 100%; }

.clients { display: grid; justify-items: center; gap: var(--e-4); padding-block: var(--e-2) var(--e-8); }
.clients > p { font-size: var(--t-0); font-weight: 600; color: var(--encre-2); }
.clients ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-3) var(--e-4); }
.clients li img { width: auto; height: 34px; border-radius: 6px; box-shadow: var(--ombre); }

/* ---------- Emplacements « À fournir » : retirés des pages publiées par --sans-notes ---------- */
.a-fournir { display: grid; align-content: center; justify-items: start; gap: 6px; padding: var(--e-4); background: #f6f1ff; border: 2px dashed #a996f5; border-radius: var(--r-3); box-shadow: none; color: var(--violet-fonce); font-size: var(--t-0); line-height: 1.45; text-align: left; }
.a-fournir b { font: 600 14px/1.3 var(--titres); letter-spacing: -.02em; }
.a-fournir p { color: #4d4296; }
.a-fournir > .icone { width: 26px; height: 26px; }
.a-fournir--puce, .a-fournir--ligne { display: inline-flex; align-items: center; gap: var(--e-2); padding: 6px 12px 6px 6px; border-width: 1.5px; border-radius: var(--r-2); font-weight: 600; }
.a-fournir--puce b, .a-fournir--ligne b { padding: 3px 8px; background: var(--violet); color: var(--blanc); border-radius: 6px; font-size: 11px; letter-spacing: 0; white-space: nowrap; }
.a-fournir--video { justify-items: center; gap: var(--e-3); padding: var(--e-5); text-align: center; }
.vitrine .a-fournir--video { aspect-ratio: 4 / 5; }
.a-fournir__lecture { display: grid; place-items: center; width: 64px; height: 64px; background: var(--violet); color: var(--blanc); border-radius: 50%; box-shadow: 0 12px 24px -8px rgb(74 38 247 / .5); }
.a-fournir__lecture .icone { width: 28px; height: 28px; }
.a-fournir--sombre { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .32); color: var(--blanc); }
.a-fournir--sombre p { color: rgb(255 255 255 / .72); }
.a-fournir--sombre > .icone { color: var(--menthe); }
.a-fournir--sombre .a-fournir__lecture { background: var(--menthe); color: var(--encre); box-shadow: none; }

/* ---------- L'offre et la méthode, avec les illustrations du kit ---------- */
.pilier--lavande { background: var(--lilas); }
.pilier { padding: var(--e-3) var(--e-3) var(--e-5); }
.pilier__image { width: 100%; aspect-ratio: 1100 / 730; object-fit: cover; margin-bottom: var(--e-2); border-radius: var(--r-2); }
.methode li { padding: var(--e-3) var(--e-3) var(--e-5); }
/* Retouches du 10/11 : sur téléphone, les étapes se lisent sans leur image pour raccourcir la page */
.methode li img { display: none; width: 100%; aspect-ratio: 1100 / 730; object-fit: cover; margin-bottom: var(--e-1); border-radius: var(--r-2); }
.methode li > p, .methode li > h3 { margin-inline: var(--e-2); }
.methode__numero { background: var(--lilas); }

/* ---------- Bloc sombre ---------- */
.nuit__ruban { position: absolute; z-index: -1; top: -30%; left: -12%; width: 124%; max-width: none; height: auto; opacity: .55; pointer-events: none; }

/* ---------- Les preuves (section entière à remplir) ---------- */
.preuves { padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 72px); background: var(--nuit); color: var(--blanc); border-radius: var(--r-4); }
.preuves__grille { display: grid; gap: var(--e-4); }
.preuves__avis { display: grid; gap: var(--e-4); }
.preuves .a-fournir--video { min-height: 300px; }

/* ---------- Réalisations ---------- */
.realisation img { width: 100%; border-radius: var(--r-3); box-shadow: var(--ombre); transition: transform .4s var(--ressort); }
.realisation:hover img { transform: translateY(-6px); }
.realisation--large { justify-items: center; text-align: center; }
.realisation--large img { aspect-ratio: 2 / 1; object-fit: cover; object-position: top; }
.realisation--large figcaption { justify-content: center; }

/* ---------- L'équipe ---------- */
.equipe-cartes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-4); }
.equipe-cartes li { display: grid; justify-items: center; align-content: end; gap: var(--e-3); padding: var(--e-4) var(--e-3); background: var(--lilas-clair); border-radius: var(--r-3); }
.equipe-cartes li:nth-child(even) { background: var(--menthe-claire); }
.equipe-cartes img { width: 100%; max-width: 190px; aspect-ratio: 1; object-fit: contain; }

/* ---------- Questions : la carte « encore une question » ---------- */
.encore { position: relative; display: grid; align-items: center; gap: var(--e-5); margin-top: var(--e-6); padding: var(--e-6); overflow: hidden; background: var(--nuit); color: var(--blanc); border-radius: var(--r-3); }
.encore h3 { font-size: var(--t-3); margin-bottom: var(--e-2); }
.encore p { color: rgb(255 255 255 / .74); }
.encore .bouton { justify-self: start; }
.encore img { display: none; }

/* ---------- Formulaire et dernier bloc ---------- */
.final { isolation: isolate; overflow: hidden; }
.final__ruban { position: absolute; z-index: -1; top: -34%; left: -10%; width: 120%; max-width: none; height: auto; opacity: .5; pointer-events: none; }
.final__pose { display: none; }
.pied__marque img { height: 32px; }

@media (min-width: 40em) {
  .vitrine__carte { flex-basis: 44%; }
  .equipe-cartes { grid-template-columns: repeat(3, 1fr); }
  .methode li img { display: block; }
  .preuves__avis { grid-template-columns: 1fr 1fr; }
  .preuves__avis > :last-child { grid-column: 1 / -1; }
  .encore { grid-template-columns: 1fr auto; padding-right: 190px; }
  .encore img { display: block; position: absolute; right: 12px; bottom: -40px; width: 160px; height: auto; }
}

@media (min-width: 64em) {
  .entete__nav { display: block; margin-right: var(--e-5); }
  .vitrine { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; width: 122%; margin-inline: -11%; padding-inline: 0; }
  .vitrine__carte:nth-child(odd) { margin-top: var(--e-6); }
  .equipe-cartes { grid-template-columns: repeat(5, 1fr); }
  .preuves__grille { grid-template-columns: .8fr 1.2fr; }
  .realisations { grid-template-columns: repeat(2, 1fr); }
  .realisation--large { grid-column: 1 / -1; }
  .realisation--large img { max-width: 860px; }
}

@media (min-width: 75em) {
  .hero .badge-avatar, .hero .etiquette { display: inline-flex; animation: flotte 6s ease-in-out infinite; }
  .flotte--a { left: 0; top: -6%; --pente: -6deg; }
  .flotte--b { right: 0; top: 30%; --pente: 5deg; animation-delay: -2s !important; }
  .flotte--c { left: 2%; top: 57%; --pente: -4deg; animation-delay: -4s !important; }
  .flotte--d { right: 2%; top: 82%; --pente: 3deg; animation-delay: -1s !important; }
  .final__pose { display: block; position: absolute; bottom: 0; width: 210px; height: auto; }
  .final__pose--gauche { left: 2%; }
  .final__pose--droite { right: 2%; }
}

@media (min-width: 64em) and (max-width: 74.99em) {
  .hero .badge-avatar, .hero .etiquette { display: none; }
}

/* ---------- Visibilité et formules (10/11) ---------- */
.promesses li { padding: 6px 14px 6px 6px; background: var(--blanc); border-radius: var(--r-2); box-shadow: var(--ombre); }
.promesses .icone { box-shadow: none; background: var(--menthe-claire); }
.visibilite { display: grid; gap: var(--e-4); }
.visibilite li { display: flex; gap: var(--e-3); }
.visibilite .icone { width: 38px; height: 38px; padding: 9px; background: var(--menthe-claire); color: var(--vert); border-radius: var(--r-2); }
.visibilite h3 { font-size: var(--t-1); margin-bottom: 2px; }
.visibilite p { font-size: var(--t-0); line-height: 1.5; color: var(--encre-2); max-width: 46ch; }
.angle__dessin--fiche { background: var(--menthe-claire); }
.dessin-fiche { position: relative; display: grid; gap: var(--e-3); width: min(100%, 380px); }
.dessin-fiche__carte { display: grid; gap: var(--e-3); padding: var(--e-4); background: var(--blanc); border-radius: var(--r-3); box-shadow: var(--ombre-forte); }
.dessin-fiche__tete { display: flex; align-items: center; gap: var(--e-3); padding-bottom: var(--e-3); border-bottom: 1px solid var(--trait); }
.dessin-fiche__tete span { display: grid; place-items: center; width: 44px; height: 44px; background: var(--violet); color: var(--blanc); border-radius: var(--r-2); font: 700 22px var(--titres); }
.dessin-fiche__tete b { display: block; font: 600 var(--t-2)/1.2 var(--titres); letter-spacing: -.04em; }
.dessin-fiche__tete em { font-size: 12px; font-style: normal; font-weight: 600; color: var(--encre-3); }
.dessin-fiche ul { display: grid; gap: var(--e-2); }
.dessin-fiche li { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-0); font-weight: 600; }
.dessin-fiche li .icone { width: 20px; height: 20px; padding: 4px; background: var(--menthe); color: var(--vert); border-radius: 50%; stroke-width: 3.5; }
.dessin-fiche__e1 { left: -6%; bottom: -18px; transform: rotate(-4deg); }
.dessin-fiche__e2 { right: -6%; top: 54px; transform: rotate(4deg); }

.formules { display: grid; gap: var(--e-4); }
.formule { display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-6); background: var(--blanc); border-radius: var(--r-4); box-shadow: inset 0 0 0 1.5px var(--trait), var(--ombre); }
.formule h3 { font-size: var(--t-3); }
.formule__pour { color: var(--encre-2); margin-top: calc(-1 * var(--e-2)); }
.formule ul { display: grid; gap: var(--e-3); padding-block: var(--e-4); border-top: 1px solid var(--trait); }
.formule li { display: flex; align-items: flex-start; gap: var(--e-3); font-weight: 600; line-height: 1.4; }
.formule li .icone { width: 22px; height: 22px; padding: 4px; margin-top: 1px; background: var(--menthe); color: var(--vert); border-radius: 50%; stroke-width: 3.5; }
.formule .bouton { margin-top: auto; }
.formule--sombre { background: var(--nuit); color: var(--blanc); box-shadow: var(--ombre-forte); }
.formule--sombre .formule__pour { color: rgb(255 255 255 / .74); }
.formule--sombre ul { border-color: rgb(255 255 255 / .16); }
.paiement { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3); margin-top: var(--e-6); }
.paiement li { display: flex; align-items: center; gap: var(--e-2); padding: 8px 14px 8px 8px; background: var(--lilas-clair); border-radius: var(--r-2); font-size: var(--t-0); font-weight: 600; }
.paiement .icone { width: 30px; height: 30px; padding: 6px; background: var(--blanc); color: var(--violet); border-radius: 8px; }
.final .surtitre { box-shadow: none; }
@media (min-width: 64em) {
  .formules { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .entete__nav ul { gap: var(--e-5); }
}

/* ---------- Le plus : l'accompagnement (10/11) ---------- */
.angle__dessin--suivi { align-content: center; gap: var(--e-6); background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--trait); }
.dessin-suivi { position: relative; display: grid; gap: var(--e-4); width: min(100%, 380px); padding: var(--e-5); background: var(--blanc); border-radius: var(--r-3); box-shadow: var(--ombre-forte); }
.dessin-suivi__tete { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--e-3); border-bottom: 1px solid var(--trait); }
.dessin-suivi__tete b { font: 600 var(--t-2)/1.2 var(--titres); letter-spacing: -.04em; }
.dessin-suivi__tete em { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--menthe-claire); color: var(--vert); border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 700; }
.dessin-suivi__tete em i { width: 8px; height: 8px; background: #12b886; border-radius: 50%; animation: pouls 1.6s ease-in-out infinite; }
.dessin-suivi ul { display: grid; gap: var(--e-3); }
.dessin-suivi li { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-0); font-weight: 600; }
.dessin-suivi li span { margin-left: auto; padding: 3px 10px; background: var(--lilas-clair); color: var(--encre-2); border-radius: 999px; font-size: 12px; }
.dessin-suivi li .icone { width: 20px; height: 20px; padding: 4px; background: var(--menthe); color: var(--vert); border-radius: 50%; stroke-width: 3.5; }
.dessin-suivi li > i { width: 20px; height: 20px; border: 2px solid #c5bde0; border-radius: 50%; }
.dessin-suivi li.est-en-cours > i { border-color: var(--violet); border-top-color: transparent; animation: tourne 1s linear infinite; }
.dessin-suivi li.est-en-cours span { background: var(--violet); color: var(--blanc); }
.dessin-suivi li.est-fait span { background: var(--menthe-claire); color: var(--vert); }
.badge-avatar--fixe { display: inline-flex; }
.dessin-suivi__badge { left: -7%; bottom: -34px; transform: rotate(-3deg); }
.dessin-suivi__bulle { position: absolute; right: -5%; top: -20px; padding: 8px 14px; background: var(--violet); color: var(--blanc); border-radius: 14px 14px 4px 14px; box-shadow: var(--ombre-forte); font-size: 13px; font-weight: 700; transform: rotate(3deg); }
@keyframes pouls { 50% { opacity: .35; } }
@keyframes tourne { to { transform: rotate(360deg); } }

/* Dégagement sous les cartes dessinées, pour que les étiquettes ne couvrent pas la dernière ligne */
.dessin-suivi { padding-bottom: 52px; margin-bottom: var(--e-5); }
.dessin-suivi__badge { bottom: -26px; }
.dessin-fiche__carte { padding-bottom: 48px; }
.dessin-fiche__e1 { bottom: -14px; }

/* =====================================================================
   Finitions (10/11) : boutons, badges, icônes en stickers, preuves
   ===================================================================== */

/* ---------- Boutons façon touche : un contour, un socle, et la touche s'enfonce au survol ---------- */
.bouton { gap: .7em; border-radius: 12px; transition: transform .4s cubic-bezier(.625, .02, 0, 1.05), box-shadow .4s cubic-bezier(.625, .02, 0, 1.05); }
.bouton--petit { border-radius: 9px; }
.bouton--violet, .bouton--violet:hover { background: var(--violet); }
.bouton--violet { box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2), inset 0 1px 0 rgb(255 255 255 / .25), 0 0 0 1px var(--encre), 0 4px 0 0 var(--encre), 0 16px 24px -10px rgb(74 38 247 / .55); }
.bouton--violet:hover { transform: translateY(2px); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2), inset 0 1px 0 rgb(255 255 255 / .25), 0 0 0 1px var(--encre), 0 2px 0 0 var(--encre), 0 10px 16px -10px rgb(74 38 247 / .55); }
.bouton--clair { background: var(--blanc); box-shadow: 0 0 0 1px var(--encre), 0 4px 0 0 var(--encre), 0 14px 20px -12px rgb(99 251 224 / .9); }
.bouton--clair:hover { transform: translateY(2px); box-shadow: 0 0 0 1px var(--encre), 0 2px 0 0 var(--encre), 0 8px 14px -12px rgb(99 251 224 / .9); }
.bouton--menthe { background: var(--menthe); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .1), inset 0 1px 0 rgb(255 255 255 / .5), 0 4px 0 0 #1f9e88; }
.bouton--menthe:hover { transform: translateY(2px); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .1), inset 0 1px 0 rgb(255 255 255 / .5), 0 2px 0 0 #1f9e88; }
.bouton--petit.bouton--violet { box-shadow: inset 0 -2px 0 rgb(0 0 0 / .2), 0 0 0 1px var(--encre), 0 3px 0 0 var(--encre); }
.bouton--petit.bouton--violet:hover { transform: translateY(1px); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .2), 0 0 0 1px var(--encre), 0 2px 0 0 var(--encre); }
.bouton--petit.bouton--clair { box-shadow: 0 0 0 1px var(--encre), 0 3px 0 0 var(--encre); }
.bouton:active, .bouton--violet:active, .bouton--clair:active, .bouton--menthe:active { transform: translateY(4px); box-shadow: 0 0 0 1px var(--encre), 0 0 0 0 var(--encre); }
.bouton .icone { width: 1.55em; height: 1.55em; padding: .26em; border-radius: 7px; stroke-width: 2.4; }
.bouton--violet .icone { background: var(--blanc); color: var(--violet); }
.bouton--clair .icone { background: var(--menthe); color: var(--encre); }
.bouton--menthe .icone { background: var(--encre); color: var(--menthe); }
.barre-mobile { border-radius: 12px; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2), 0 0 0 1px var(--encre), 0 4px 0 0 var(--encre), 0 16px 26px -8px rgb(74 38 247 / .55); }
.barre-mobile .icone { width: 1.55em; height: 1.55em; padding: .26em; background: var(--blanc); color: var(--violet); border-radius: 7px; }

/* ---------- Badges et étiquettes : plus fins ---------- */
.badge-avatar { gap: 8px; padding: 4px 12px 4px 4px; border-width: 2px; border-radius: 9px; box-shadow: 0 12px 22px -12px rgb(20 38 31 / .45), 0 2px 4px rgb(20 38 31 / .06); font-size: 13.5px; }
.badge-avatar img { width: 26px; height: 26px; background: var(--blanc); border-radius: 50%; }
.badge-avatar .curseur { top: -15px; right: -12px; width: 18px; height: 18px; stroke-width: 3; }
.etiquette { gap: 6px; padding: 6px 12px 6px 9px; border-radius: 9px; box-shadow: 0 12px 22px -12px rgb(20 38 31 / .45), 0 2px 4px rgb(20 38 31 / .06); font-size: 13px; }
.etiquette .icone { width: 1.1em; height: 1.1em; }
.etiquette .eclats { top: -15px; right: -12px; width: 20px; height: 20px; }
.etiquette .curseur { top: -11px; left: -11px; width: 18px; height: 18px; }
.dessin-suivi__badge { bottom: -14px; }

/* ---------- Icônes en stickers (contour blanc et ombre portée) ---------- */
.sticker { flex: none; width: 46px; height: 46px; filter: drop-shadow(0 6px 7px rgb(20 38 31 / .2)); }
.etapes-ligne .sticker, .paiement .sticker { width: 32px; height: 32px; }
.promesses li { padding: 4px 14px 4px 5px; }
.inclus li { align-items: flex-start; }
.inclus .sticker { width: 50px; height: 50px; margin: -6px 0 0 -4px; }
.visibilite .sticker { margin: -4px 0 0 -4px; }
.paiement li { padding: 5px 14px 5px 6px; }

/* ---------- Logos clients ---------- */
.clients ul { gap: var(--e-4) var(--e-7); }
.clients li img { width: auto; height: 34px; max-width: 150px; object-fit: contain; border-radius: 0; box-shadow: none; filter: grayscale(1) opacity(.62); transition: filter .3s var(--ressort); }
.clients li img:hover { filter: none; }

/* ---------- La carte vidéo de la bande de sites ---------- */
.vitrine__video { position: relative; display: block; aspect-ratio: 4 / 5; color: var(--blanc); text-decoration: none; }
.vitrine__video img { width: 100%; height: 100%; object-fit: cover; }
.vitrine__video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(18 33 27 / .9), rgb(18 33 27 / 0) 58%); }
.vitrine__video .lecture, .temoin__lecture { display: grid; place-items: center; width: 62px; height: 62px; padding: 0; background: var(--menthe); color: var(--encre); border: 0; border-radius: 50%; box-shadow: 0 0 0 1px var(--encre), 0 4px 0 0 var(--encre); cursor: pointer; transition: transform .4s cubic-bezier(.625, .02, 0, 1.05), box-shadow .4s cubic-bezier(.625, .02, 0, 1.05); }
.vitrine__video .lecture { position: absolute; z-index: 1; left: 50%; top: 42%; margin: -31px 0 0 -31px; }
.vitrine__video .lecture .icone, .temoin__lecture .icone { width: 26px; height: 26px; margin-left: 3px; }
.vitrine__video:hover .lecture, .temoin__lecture:hover { transform: translateY(2px); box-shadow: 0 0 0 1px var(--encre), 0 2px 0 0 var(--encre); }
.vitrine__video b, .vitrine__video em { position: absolute; z-index: 1; left: var(--e-4); right: var(--e-4); }
.vitrine__video b { bottom: 40px; font: 600 var(--t-2)/1.2 var(--titres); letter-spacing: -.04em; }
.vitrine__video em { bottom: 16px; font-size: 13px; font-style: normal; opacity: .85; }

/* ---------- Les preuves : témoignages vidéo et avis ---------- */
.temoins { display: flex; gap: var(--e-3); margin-inline: calc(-1 * clamp(20px, 5vw, 72px)); padding-inline: clamp(20px, 5vw, 72px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.temoins::-webkit-scrollbar { display: none; }
.temoin { position: relative; flex: 0 0 68%; margin: 0; aspect-ratio: 9 / 16; overflow: hidden; background: #000; border-radius: var(--r-3); scroll-snap-align: center; }
.temoin video { display: block; width: 100%; height: 100%; object-fit: cover; }
.temoin__lecture { position: absolute; inset: 0; margin: auto; }
.temoin figcaption { position: absolute; inset: auto 0 0 0; display: grid; gap: 2px; padding: 48px var(--e-4) var(--e-4); background: linear-gradient(to top, rgb(0 0 0 / .8), rgb(0 0 0 / 0)); pointer-events: none; }
.temoin figcaption b { font: 600 var(--t-1)/1.2 var(--titres); letter-spacing: -.03em; }
.temoin figcaption span { font-size: 13px; opacity: .85; }
.temoin.est-lance .temoin__lecture, .temoin.est-lance figcaption { display: none; }
.citations { display: grid; gap: var(--e-3); margin-top: var(--e-4); }
.citation { display: grid; align-content: start; gap: var(--e-3); margin: 0; padding: var(--e-5); background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); border-radius: var(--r-3); }
.citation > .icone { width: 26px; height: 26px; color: var(--menthe); }
.citation blockquote { margin: 0; }
.citation p { line-height: 1.55; color: rgb(255 255 255 / .9); }
.citation figcaption { display: grid; gap: 2px; margin-top: auto; }
.citation figcaption b { font: 600 15px/1.2 var(--titres); letter-spacing: -.03em; }
.citation figcaption span { font-size: 13px; color: rgb(255 255 255 / .62); }
.citation--claire { background: var(--blanc); border-color: var(--trait); box-shadow: var(--ombre); }
.citation--claire > .icone { color: var(--violet); }
.citation--claire p { color: var(--encre-2); font-size: var(--t-0); }
.citation--claire figcaption span { color: var(--encre-3); }
.preuves .a-fournir--puce { margin-top: var(--e-4); }

@media (min-width: 40em) {
  .temoins { display: grid; grid-template-columns: repeat(3, 1fr); margin-inline: 0; padding-inline: 0; overflow: visible; }
  .temoin { flex: none; }
  .citations { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64em) {
  .temoins { max-width: 860px; margin-inline: auto; gap: var(--e-4); }
  .citations { grid-template-columns: repeat(4, 1fr); margin-top: var(--e-5); }
}
@media (min-width: 75em) {
  .flotte--a { left: 3%; top: -3%; }
  .flotte--b { right: 3%; top: 32%; }
}

/* Stickers posés de travers, comme collés à la main */
.sticker { filter: drop-shadow(0 2px 0 rgb(20 38 31 / .1)) drop-shadow(0 9px 10px rgb(20 38 31 / .2)); }
.inclus .sticker, .visibilite .sticker { width: 56px; height: 56px; transform: rotate(-7deg); }
.inclus li:nth-child(even) .sticker, .visibilite li:nth-child(even) .sticker { transform: rotate(6deg); }
.inclus li { gap: var(--e-2); }

/* =====================================================================
   En-tête flottant et témoignages par onglets (10/11)
   ===================================================================== */
.entete { top: 10px; padding-inline: 10px; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.entete__ligne { width: min(100%, 1180px); min-height: 60px; padding: 8px 8px 8px 18px; background: rgb(255 255 255 / .88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 16px; box-shadow: 0 0 0 1px rgb(20 38 31 / .08), 0 18px 34px -22px rgb(20 38 31 / .45); }
.entete__logo img { height: 28px; }
.entete__nav a { display: block; padding: 8px 12px; border-radius: 8px; transition: background-color .2s, color .2s; }
.entete__nav a:hover { background: var(--lilas-clair); color: var(--encre); }
.hero { margin-top: -70px; padding-top: calc(70px + clamp(32px, 6vw, 72px)); }

.preuves .section__tete { margin-bottom: var(--e-6); }
.preuves__visages { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-0); font-weight: 600; color: rgb(255 255 255 / .86); }
.preuves__visages span { display: flex; }
.preuves__visages img { width: 36px; height: 36px; object-fit: cover; object-position: 50% 26%; border: 2px solid var(--nuit); border-radius: 50%; }
.preuves__visages img + img { margin-left: -10px; }
.onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); margin-top: var(--e-2); }
.onglet { padding: 8px 14px; background: rgb(255 255 255 / .06); color: rgb(255 255 255 / .82); border: 1px solid rgb(255 255 255 / .16); border-radius: 10px; font: 600 var(--t-0)/1.2 "Plus Jakarta Sans", system-ui, sans-serif; cursor: pointer; transition: background-color .25s, color .25s, transform .4s cubic-bezier(.625, .02, 0, 1.05), box-shadow .4s cubic-bezier(.625, .02, 0, 1.05); }
.onglet:hover { background: rgb(255 255 255 / .12); color: var(--blanc); }
.onglet[aria-selected="true"] { background: var(--menthe); color: var(--encre); border-color: var(--menthe); box-shadow: 0 3px 0 0 #1f9e88; transform: translateY(-2px); }
.onglet:focus-visible { outline-color: var(--menthe); }

.temoignage { display: grid; gap: var(--e-6); align-items: center; }
.temoignage[hidden] { display: none; }
.avis-carte { position: relative; display: grid; gap: var(--e-4); margin: 0; padding: var(--e-6); border: 1.5px dashed var(--menthe); border-radius: 4px; }
.avis-carte__poignee { position: absolute; width: 10px; height: 10px; background: var(--blanc); border: 1.5px solid var(--menthe); }
.avis-carte__poignee:nth-child(1) { left: -6px; top: -6px; }
.avis-carte__poignee:nth-child(2) { right: -6px; top: -6px; }
.avis-carte__poignee:nth-child(3) { left: -6px; bottom: -6px; }
.avis-carte__poignee:nth-child(4) { right: -6px; bottom: -6px; }
.avis-carte__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }
.avis-carte__logo { width: auto; height: 40px; max-width: 170px; object-fit: contain; padding: 6px 10px; background: var(--blanc); border-radius: 8px; }
.avis-carte__nom { font: 600 var(--t-3)/1.1 var(--titres); letter-spacing: -.045em; }
.avis-carte__tete .icone { width: 30px; height: 30px; color: var(--menthe); }
.avis-carte blockquote { display: grid; gap: var(--e-3); margin: 0; }
.avis-carte p { font-size: var(--t-2); line-height: 1.5; color: rgb(255 255 255 / .92); text-wrap: pretty; }
.avis-carte figcaption { display: grid; gap: 2px; }
.avis-carte figcaption b { font: 600 var(--t-1)/1.2 var(--titres); letter-spacing: -.03em; }
.avis-carte figcaption span { font-size: var(--t-0); color: rgb(255 255 255 / .62); }
.avis-carte__badge { right: 8%; bottom: -18px; transform: rotate(-3deg); }
.temoignage__medias { display: grid; gap: var(--e-4); align-items: center; justify-items: center; }
.temoignage__medias .temoin { width: min(100%, 250px); flex: none; }
.temoignage__site { display: grid; gap: var(--e-2); margin: 0; width: 100%; }
.temoignage__site img { width: 100%; border-radius: var(--r-2); box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 24px 40px -20px rgb(0 0 0 / .6); }
.temoignage__site figcaption { font-size: 13px; color: rgb(255 255 255 / .62); text-align: center; }

@media (min-width: 40em) {
  .temoignage__medias { grid-template-columns: 220px 1fr; }
  .temoignage--sans-video .temoignage__medias { grid-template-columns: 1fr; }
  .temoignage__site img { transform: rotate(1.5deg); }
}
@media (min-width: 64em) {
  .entete__logo { margin-right: 0; }
  .entete__nav { margin-inline: auto; }
  .entete__nav ul { gap: var(--e-1); }
  .temoignage { grid-template-columns: .9fr 1.1fr; gap: var(--e-8); }
}

/* Note sous les témoignages : dégagée du badge de la carte */
.preuves > .a-fournir--puce { margin-top: var(--e-7); }

/* =====================================================================
   Témoignages : MacBook, logo et vidéo · sections retravaillées (10/11)
   ===================================================================== */
.temoignage__medias { position: relative; display: block; }
.macbook { margin: 0; padding-inline: 5%; }
.macbook__ecran { position: relative; padding: 11px 11px 13px; background: #17181c; border-radius: 16px 16px 4px 4px; box-shadow: inset 0 0 0 1.5px #3b3e46, 0 34px 60px -28px rgb(0 0 0 / .75); }
.macbook__ecran::before { content: ""; position: absolute; top: 4px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; background: #3b3e46; border-radius: 50%; }
.macbook__ecran img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 5px; }
.macbook__socle { position: relative; height: 13px; margin-inline: -5.6%; background: linear-gradient(#e3e5ea, #a4a8b1); border-radius: 2px 2px 14px 14px; box-shadow: 0 14px 22px -10px rgb(0 0 0 / .55); }
.macbook__socle::before { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 5px; margin-left: -7.5%; background: #8c9099; border-radius: 0 0 8px 8px; }
.macbook figcaption { margin-top: var(--e-4); font-size: 13px; color: rgb(255 255 255 / .62); text-align: center; }
.temoignage__logo { position: absolute; z-index: 2; right: 0; top: -18px; display: grid; place-items: center; padding: 8px 12px; background: var(--blanc); color: var(--encre); border-radius: var(--r-2); box-shadow: 0 16px 26px -14px rgb(0 0 0 / .6); font: 600 15px/1.2 var(--titres); letter-spacing: -.03em; transform: rotate(4deg); }
.temoignage__logo img { width: auto; height: 34px; max-width: 130px; object-fit: contain; }
.temoignage__medias .temoin { width: 46%; max-width: 190px; margin: var(--e-4) auto 0; border: 4px solid var(--blanc); box-shadow: 0 24px 40px -18px rgb(0 0 0 / .7); }

/* Les logos clients qui défilent */
.clients { overflow: hidden; }
.defile { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.defile__piste { display: flex; width: max-content; animation: defile 34s linear infinite; }
.defile:hover .defile__piste { animation-play-state: paused; }
.clients .defile ul { flex-wrap: nowrap; gap: 0; }
.clients .defile li { padding-inline: 34px; }
@keyframes defile { to { transform: translateX(-50%); } }

/* La méthode : quatre étapes reliées par une flèche */
.methode li { position: relative; }
.methode li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; left: 50%; bottom: -26px; width: 36px; height: 36px; margin-left: -18px; background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a26f7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat; border-radius: 50%; box-shadow: 0 0 0 1px var(--encre), 0 3px 0 0 var(--encre); }
.methode { gap: var(--e-5); }

/* Pour qui : des coches et des croix à la place des puces */
.pour-qui__colonne { padding: var(--e-6); }
.pour-qui ul { gap: var(--e-4); }
.pour-qui li { padding-left: 38px; font-weight: 500; }
.pour-qui li::before { left: 0; top: 0; width: 24px; height: 24px; background: var(--menthe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23183d2d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.pour-qui__colonne--non li::before { background: var(--lilas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a1ad6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pour-qui__colonne--oui { box-shadow: 0 0 0 1px var(--encre), 0 4px 0 0 var(--encre); }

/* Les reproches : « Ailleurs » barré, « Chez nous » coché */
.reproche__avant { display: flex; align-items: center; gap: 6px; }
.reproche__avant::before { content: ""; width: 18px; height: 18px; background: #ffe3ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4234f' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 10px no-repeat; border-radius: 50%; }
.reproche { transition: transform .4s cubic-bezier(.625, .02, 0, 1.05), box-shadow .4s cubic-bezier(.625, .02, 0, 1.05); }
.reproche:hover, .pilier:hover, .formule:hover { transform: translateY(-4px); }
.pilier, .formule { transition: transform .4s cubic-bezier(.625, .02, 0, 1.05); }

@media (min-width: 40em) {
  .temoignage__medias { padding: 0 0 54px 96px; }
  .temoignage--sans-video .temoignage__medias { padding: 0 0 var(--e-4); }
  .temoignage__medias .temoin { position: absolute; z-index: 1; left: 0; bottom: 0; width: 168px; max-width: none; margin: 0; transform: rotate(-3deg); }
  .macbook figcaption { padding-left: 80px; }
  .temoignage--sans-video .macbook figcaption { padding-left: 0; }
}
@media (min-width: 64em) {
  .methode li:not(:last-child)::after { left: auto; right: -30px; bottom: auto; top: 96px; margin-left: 0; transform: rotate(-90deg); }
  .temoignage__medias .temoin { width: 184px; }
}

/* =====================================================================
   Aperçus des sites dans les réalisations : la capture seule, sans cadre ni mouvement (10/11)
   ===================================================================== */
.apercus__titre { margin: var(--e-8) 0 var(--e-5); font-size: var(--t-3); text-align: center; }
.apercus { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-5) var(--e-4); }
.apercu { display: grid; gap: 0; margin: 0; }
.apercu__vue { aspect-ratio: 4 / 3.5; overflow: hidden; background: var(--blanc); border-radius: var(--r-3); box-shadow: 0 0 0 1px var(--trait), var(--ombre); }
.apercu__vue img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.apercu figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--e-2); padding: var(--e-3) var(--e-1) 0; }
.apercu b { font: 600 var(--t-1)/1.2 var(--titres); letter-spacing: -.03em; }
.apercu span { font-size: 13px; color: var(--encre-2); }
@media (min-width: 40em) { .apercus { grid-template-columns: repeat(3, 1fr); gap: var(--e-6) var(--e-5); } }

/* =====================================================================
   Premier écran : titre à pastille, trois étapes, repères, soutiens,
   rangée de cinq visuels dont le milieu s'élargit au défilement (10/11)
   ===================================================================== */
.hero { padding-top: calc(70px + clamp(34px, 7vw, 92px)); }
.hero__centre { gap: 0; }

/* Le titre : chaque phrase sur ses lignes, la fin sur une étiquette menthe */
.hero__titre { max-width: none; font-size: clamp(2.05rem, 1rem + 4.4vw, 4.125rem); line-height: 1.12; letter-spacing: -.06em; text-wrap: initial; }
.hero__titre > span { display: block; text-wrap: balance; }
.pastille { display: inline-block; max-width: 100%; margin-inline: .04em; padding: .03em .26em .09em; background: var(--menthe); color: var(--encre); border: .09em solid var(--blanc); border-radius: .38em; box-shadow: 0 .07em .15em rgb(20 38 31 / .07), 0 .27em .27em rgb(20 38 31 / .05), 0 .58em .36em rgb(20 38 31 / .03); transform: rotate(-2deg); }

/* Le texte, et les deux étiquettes de l'équipe qui flottent de part et d'autre */
.hero__accroche { position: relative; width: 100%; margin-top: clamp(20px, 2.4vw, 30px); }
.hero__texte { max-width: 54ch; margin-inline: auto; font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.45; font-weight: 500; color: var(--encre-2); }
.curseur-equipe { position: absolute; z-index: 2; display: none; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; background: var(--menthe); color: var(--encre); border-radius: 14px; box-shadow: 0 5px 10px rgb(20 38 31 / .06), 0 18px 18px rgb(20 38 31 / .05), 0 40px 25px rgb(20 38 31 / .03); font-weight: 600; white-space: nowrap; animation: flotte-doux 3.4s ease-in-out infinite alternate; }
.curseur-equipe img { width: 32px; height: 32px; border-radius: 50%; }
.curseur-equipe--b { background: var(--lilas); animation-delay: -1.7s; }
.curseur-equipe__fleche { position: absolute; top: -17px; right: -15px; width: 22px; height: 22px; fill: var(--menthe); stroke: var(--blanc); stroke-width: 2.5; stroke-linejoin: round; transform: scaleX(-1); filter: drop-shadow(0 3px 4px rgb(20 38 31 / .22)); }
.curseur-equipe--b .curseur-equipe__fleche { right: auto; left: -15px; fill: var(--violet); transform: none; }
@keyframes flotte-doux { to { translate: 0 -9px; } }

/* Les trois étapes, séparées par un filet */
.hero__etapes { display: grid; gap: 12px; width: fit-content; margin: clamp(28px, 3.4vw, 44px) auto 0; font-size: .9375rem; font-weight: 600; text-align: left; }
.hero__etapes li { display: flex; align-items: center; gap: 10px; }
.hero__etapes .sticker { width: 36px; height: 36px; }
.hero__etapes i { font-style: normal; font-weight: 500; color: var(--encre-2); }
.hero__actions { margin-top: clamp(28px, 3.4vw, 44px); }

/* Les repères sous les boutons */
.hero__reperes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; margin-top: clamp(26px, 3vw, 40px); font-size: .875rem; font-weight: 600; }
.hero__reperes li { display: flex; align-items: center; gap: 10px; text-align: left; }
.puce-icone { display: grid; place-items: center; flex: none; width: 22px; height: 22px; background: rgb(99 251 224 / .38); border-radius: 8px; color: #0b7f6a; }
.puce-icone .icone { width: 13px; height: 13px; stroke-width: 2.6; }

/* « Soutenu par » : les deux logos officiels, laissés dans leurs couleurs */
.soutiens { display: grid; justify-items: center; gap: 12px; margin-top: clamp(26px, 3vw, 40px); }
.soutiens__titre { font-size: .875rem; font-weight: 500; color: var(--encre-2); }
.soutiens ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.soutiens li { display: grid; place-items: center; min-width: 124px; height: 56px; padding-inline: 22px; background: var(--blanc); border: 1px solid rgb(20 38 31 / .14); border-radius: 12px; }
.soutiens img { display: block; width: auto; }
.soutiens__france-num { height: 34px; }
.soutiens__bpifrance { height: 21px; }

/* La rangée : petit, moyen, vidéo, moyen, petit, alignés par le bas. Les sites sont de simples captures fixes. */
.rangee { --h: 330px; --l: calc(var(--h) * .6154); --ecart: 12px; --joint: 6px; --l-max: var(--l); display: flex; align-items: flex-end; justify-content: center; gap: var(--ecart); height: var(--h); margin-top: clamp(44px, 5.5vw, 80px); }
.rangee__visuel { flex: none; width: var(--l); height: var(--h); margin: 0; overflow: hidden; background: var(--blanc); border-radius: 16px; box-shadow: 0 9px 19px rgb(20 38 31 / .1), 0 34px 34px rgb(20 38 31 / .09), 0 77px 46px rgb(20 38 31 / .05), 0 137px 55px rgb(20 38 31 / .01); }
.rangee__visuel--moyen { height: calc(var(--h) * .8615); }
.rangee__visuel--petit { display: none; height: calc(var(--h) * .7385); }
.rangee__visuel > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rangee__principal { position: relative; width: calc(var(--l) + (var(--l-max) - var(--l)) * var(--avance, 0)); background: var(--nuit); }
.rangee__piste { position: absolute; inset: 0 auto 0 50%; display: flex; gap: var(--joint); transform: translateX(-50%); }
.rangee__piste .temoin { flex: none; width: var(--l); height: 100%; aspect-ratio: auto; border-radius: 0; }
.rangee__piste .temoin figcaption { color: var(--blanc); text-align: left; }
.rangee__piste .temoin--bord { display: none; }
.rangee__piste .temoin:not(.temoin--bord) .temoin__lecture { width: 78px; height: 78px; }
.rangee__piste .temoin:not(.temoin--bord) .temoin__lecture .icone { width: 32px; height: 32px; }
.hero .clients { margin-top: 30px; }

/* Le cadre des vidéos, repris du tracé fourni (overlay-videos.svg) : filet blanc et lavande centré sur le bord,
   quatre coins colorés, étoile, petits traits, et l'autocollant de citation posé à part.
   Tout tient aux coins : le cadre garde ses épaisseurs quand le bloc s'élargit. --k réduit les décors sur petit écran. */
.rangee__principal { --k: .6; overflow: visible; background: none; border-radius: calc(18px * var(--k)); }
.rangee__ecran { position: absolute; inset: 0; overflow: hidden; background: var(--nuit); border-radius: inherit; }
.rangee__habillage { position: absolute; z-index: 3; inset: -3.5px; border: 7px solid var(--blanc); border-radius: calc(18px * var(--k) + 3.5px); box-shadow: 0 1px 0 1.5px rgb(20 38 31 / .06); pointer-events: none; }
.rangee__habillage::before { content: ""; position: absolute; inset: -4.5px; border: 2px solid #baacff; border-radius: calc(18px * var(--k) + 1px); }
.rangee__habillage::after { content: ""; position: absolute; inset: calc(-30px * var(--k) - 3.5px);
  background:
    url("../assets/img/sticker-citation.webp") calc(8px * var(--k)) calc(2px * var(--k)) / calc(102px * var(--k)) auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 120'%3E%3Cpath d='M30 114V48Q30 30 48 30H165' fill='none' stroke='%234A26F7' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") left top / calc(170px * var(--k)) calc(120px * var(--k)) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 120' fill='none' stroke='%2363FBE0' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M25 30h97q18 0 18 18v63'/%3E%3Cpath d='M96 24l-5-8m17 6 1-10m11 13 8-6'/%3E%3C/svg%3E") right top / calc(170px * var(--k)) calc(120px * var(--k)) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 140'%3E%3Cpath d='M140 12v80q0 18-18 18H13' fill='none' stroke='%234A26F7' stroke-width='4' stroke-linecap='round'/%3E%3Cg transform='translate(124 84) rotate(12)'%3E%3Cpath d='M0-18 5-5 18 0 5 5 0 18-5 5-18 0-5-5Z' transform='translate(0 2)' fill='%2314261F' stroke='%2314261F' stroke-width='7' opacity='.15'/%3E%3Cpath d='M0-18 5-5 18 0 5 5 0 18-5 5-18 0-5-5Z' fill='%2363FBE0' stroke='white' stroke-width='6' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") right bottom / calc(170px * var(--k)) calc(140px * var(--k)) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 140' fill='none' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M161 110H48q-18 0-18-18v-76' stroke='%2363FBE0'/%3E%3Cpath d='M18 78l-4-7m5 18-7 1' stroke='%234A26F7'/%3E%3C/svg%3E") left bottom / calc(170px * var(--k)) calc(140px * var(--k)) no-repeat; }
@media (min-width: 40em) { .rangee__principal { --k: .8; } }
@media (min-width: 64em) { .rangee__principal { --k: 1; } }

/* Le bouton de lecture : un triangle plein, posé au centre du rond, lui-même au centre de la vidéo */
.temoin__lecture { inset: 0; margin: auto; }
.temoin__lecture .icone, .rangee__piste .temoin__lecture .icone { display: block; margin: 0; }

@media (min-width: 40em) {
  .rangee { --h: 420px; --ecart: 16px; }
}
@media (min-width: 64em) {
  .rangee { --h: 480px; --l-max: calc(var(--l) * 3 + var(--joint) * 2); }
  .rangee__visuel--petit { display: block; }
  .rangee__piste .temoin--bord { display: block; visibility: hidden; }
  .rangee.est-animee .temoin--bord { visibility: visible; }
  /* Tant que la rangée n'est pas ouverte, seul le bouton du milieu se voit : pas de rond coupé sur les bords */
  .rangee.est-animee .temoin--bord .temoin__lecture, .rangee.est-animee .temoin--bord figcaption { opacity: calc((var(--avance, 0) - .78) * 5); }
  .hero__reperes li + li { padding-left: 23px; background: linear-gradient(rgb(20 38 31 / .16), rgb(20 38 31 / .16)) left center / 1px 12px no-repeat; }
}
@media (min-width: 75em) {
  .rangee { --h: 520px; }
  .curseur-equipe { display: inline-flex; }
  .curseur-equipe--a { left: 1.5%; top: 26px; }
  .curseur-equipe--b { right: 1.5%; top: 12px; }
  .hero__etapes { display: flex; justify-content: center; gap: 0; width: auto; }
  .hero__etapes li + li { margin-left: 18px; padding-left: 19px; background: linear-gradient(rgb(20 38 31 / .16), rgb(20 38 31 / .16)) left center / 1px 12px no-repeat; }
}
@media (prefers-reduced-motion: reduce) {
  .curseur-equipe { animation: none; }
}

/* =====================================================================
   Les reproches : trois grandes cartes colorées (visuel, reproche, réponse),
   puis quatre engagements en petites cartes (10/11)
   ===================================================================== */
.reproches { grid-template-columns: 1fr; gap: 20px; }
.reproche { gap: 8px; padding: 0 0 28px; overflow: hidden; background: var(--carte, var(--lilas-clair)); border-radius: 28px; box-shadow: none; }
.reproche:nth-child(3n + 1) { --carte: #f4ebfe; }
.reproche:nth-child(3n + 2) { --carte: #dcfaf4; }
.reproche:nth-child(3n) { --carte: #eceef6; }
.reproche__dessin { height: 236px; margin: 0 0 2px; background: none; border-radius: 0; }
/* Une image fournie occupe tout le haut de la carte, bord à bord. La carte prend le lavande de l'image,
   et le bas de l'image se fond dans la carte : aucune couture. */
.reproche__dessin--image { display: block; height: auto; aspect-ratio: 3 / 2; margin-bottom: 0; }
.reproche__dessin--image img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.reproche:has(.reproche__dessin--image) { --carte: #f5edfe; }
.reproche h3 { padding: 0 28px; font-family: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.reproche > p { padding: 0 28px; font-size: .9375rem; line-height: 1.45; font-weight: 500; color: var(--encre-2); }
.reproche > p b { font-weight: 700; color: var(--encre); }

/* Les petites cartes : blanches, coins ronds, ombre en couches fines, sans trait de contour */
.engagements { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
.engagement { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--blanc); border-radius: 20px; box-shadow: 0 0 0 1px rgb(20 38 31 / .04), 0 1px 1px -.5px rgb(20 38 31 / .04), 0 3px 3px -1.5px rgb(20 38 31 / .04), 0 6px 6px -3px rgb(20 38 31 / .04), 0 12px 12px -6px rgb(20 38 31 / .04), 0 24px 24px -12px rgb(20 38 31 / .04); }
.engagement h3 { display: flex; align-items: center; gap: 8px; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: -.007em; }
.engagement p { font-size: .875rem; line-height: 1.4; font-weight: 500; color: var(--encre-2); }
.engagement .puce-icone { --puce-fond: #d5fbf2; width: 24px; height: 24px; background: var(--puce-fond); border-radius: 8px; color: #0fae91; }
.engagement .puce-icone svg { display: block; width: 15px; height: 15px; }
.engagement__icone { flex: none; width: 34px; height: 34px; margin: -3px 0 -3px -3px; object-fit: contain; }

/* Sous la rangée du premier écran : le chiffre, puis les logos des clients */
.clients > p b { font-weight: 700; color: var(--encre); }

@media (min-width: 40em) {
  .engagements { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 56em) {
  .reproches { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64em) {
  .engagements { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================================
   L'offre : trois créations en colonnes, puis ce qui est compris.
   La visibilité : quatre cartes portées par un visuel (10/11)
   ===================================================================== */
.creations { display: grid; grid-template-columns: 1fr; gap: 40px 24px; }
.creation { display: flex; flex-direction: column; gap: 10px; }
.creation__rang { align-self: flex-start; padding: 3px 10px; background: var(--blanc); border-radius: 8px; box-shadow: 0 0 0 1px rgb(20 38 31 / .08); font-size: .75rem; font-weight: 600; color: var(--encre-2); }
.creation h3 { display: flex; align-items: center; gap: 8px; font-family: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.creation__texte { font-size: .9375rem; line-height: 1.45; font-weight: 500; color: var(--encre-2); }
.creation__visuel { margin-top: auto; padding-top: 12px; }
.creation__visuel img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--blanc); border-radius: 24px; box-shadow: 0 0 0 1px rgb(20 38 31 / .04), 0 3px 3px -1.5px rgb(20 38 31 / .04), 0 12px 12px -6px rgb(20 38 31 / .05), 0 28px 28px -14px rgb(20 38 31 / .07); }

/* Les pastilles d'icône, et l'image qui les remplace quand une icône est déposée */
.creation .puce-icone, .compris .puce-icone { --puce-fond: #d5fbf2; width: 24px; height: 24px; background: var(--puce-fond); border-radius: 8px; color: #0fae91; }
.creation .puce-icone svg, .compris .puce-icone svg { display: block; width: 15px; height: 15px; }
.puce-image { flex: none; width: 34px; height: 34px; margin: -3px 0 -3px -3px; object-fit: contain; }

/* Ce qui est compris : des pastilles, chacune avec sa précision */
.compris { display: grid; justify-items: center; gap: 14px; margin-top: clamp(36px, 5vw, 56px); }
.compris__titre { font-size: .875rem; font-weight: 500; color: var(--encre-2); }
.compris ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.compris li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px 8px 12px; background: var(--blanc); border-radius: 12px; box-shadow: 0 0 0 1px rgb(20 38 31 / .05), 0 8px 16px -10px rgb(20 38 31 / .22); font-size: .9375rem; font-weight: 600; }
.compris em { padding: 3px 8px; background: #f2f0f7; border-radius: 7px; font-size: .75rem; font-style: normal; font-weight: 500; color: var(--encre-2); white-space: nowrap; }

/* Le travail de chaque mois : une carte, un visuel, un titre, deux phrases.
   Tant qu'aucune image n'est déposée, le visuel est un grand chiffre. */
.mois { display: grid; grid-template-columns: 1fr; gap: 20px; }
.mois__carte { display: flex; flex-direction: column; gap: 8px; overflow: hidden; padding: 0 0 28px; background: var(--carte, #f4ebfe); border-radius: 28px; }
.mois__carte:nth-child(4n + 2) { --carte: #dcfaf4; }
.mois__carte:nth-child(4n + 3) { --carte: #eceef6; }
.mois__visuel { display: grid; place-content: center; justify-items: center; gap: 4px; min-height: 210px; padding: 28px 28px 12px; text-align: center; }
.mois__visuel b { font: 600 clamp(4.5rem, 3rem + 6vw, 7rem)/1 var(--titres); letter-spacing: -.07em; color: var(--violet); }
.mois__visuel span { font-size: .9375rem; font-weight: 600; color: var(--encre); }
.mois__visuel--image { display: block; min-height: 0; padding: 0; aspect-ratio: 3 / 2; }
.mois__visuel--image img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.mois__carte:has(.mois__visuel--image) { --carte: #f2e8fd; }
.mois__carte h3 { padding: 0 28px; font-family: inherit; font-size: 1.125rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.mois__carte p { padding: 0 28px; font-size: .9375rem; line-height: 1.5; font-weight: 500; color: var(--encre-2); }
.mois__carte p b { font-weight: 700; color: var(--encre); }
.mois__note { max-width: 62ch; margin: 28px auto 0; text-align: center; }

/* Le témoignage en image, dans « Vous voyez tout, en direct ». Sur téléphone, l'image serait trop petite pour être lue :
   on y garde le texte de la page. À partir de 40em, l'image prend la place du texte et ses bords se fondent dans la section. */
.citation__image { display: none; }
@media (min-width: 40em) {
  .citation--image { display: block; padding: 0; background: none; border: 0; box-shadow: none; }
  .citation--image > .icone, .citation--image > blockquote, .citation--image > figcaption { display: none; }
  .citation__image { display: block; width: calc(100% + 40px); max-width: none; height: auto; margin-inline: -20px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
    mask-composite: intersect; }
}

@media (min-width: 56em) {
  .creations { grid-template-columns: repeat(3, 1fr); }
  .mois { grid-template-columns: repeat(2, 1fr); }
}

/* « Pour qui », d'après les maquettes fournies : un bloc menthe de quatre cartes, un bloc lavande en liste, puis le bouton.
   Sur téléphone, les quatre cartes deviennent quatre lignes dans un même cadre blanc. */
.cible-section { position: relative; isolation: isolate; overflow: hidden; }
.cible__ruban { position: absolute; z-index: -1; top: 8%; left: 50%; width: max(1200px, 104vw); max-width: none; height: auto; transform: translateX(-50%); opacity: .5; pointer-events: none; }
.cible { display: grid; gap: 52px 20px; padding-top: 22px; }
.cible__bloc { position: relative; padding: 20px 14px 14px; border: 1.5px solid; border-radius: 28px; }
.cible__bloc--oui { background: #e9fdf8; border-color: #a6efe1; }
.cible__bloc--non { background: #f6f1fe; border-color: #dbcff8; }
.cible__sticker { position: absolute; top: -38px; left: 22px; width: 86px; height: auto; filter: drop-shadow(0 8px 10px rgb(20 38 31 / .18)); }
svg.cible__sticker { width: 82px; filter: drop-shadow(0 8px 10px rgb(74 38 247 / .28)); }
.cible__bloc h3 { min-height: 52px; display: flex; align-items: center; padding: 0 0 16px 104px; font-size: 1.5rem; line-height: 1.12; letter-spacing: -.045em; }
.cible__cartes { display: grid; background: var(--blanc); border-radius: 20px; }
.cible__cartes li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; font-size: 1.0625rem; line-height: 1.35; font-weight: 500; }
.cible__cartes li + li { border-top: 1px solid #c9f3ea; }
.cible__cartes img { flex: none; width: 52px; height: 46px; object-fit: contain; }
.cible__cartes span { text-wrap: balance; }
.cible__cartes b, .cible__liste b { font-weight: 700; }
.cible__liste { display: grid; padding: 0 8px 6px; }
.cible__liste li { position: relative; padding: 16px 0 16px 46px; font-size: 1.0625rem; line-height: 1.4; font-weight: 500; }
.cible__liste li + li { border-top: 1px solid #e0d6f8; }
.cible__liste li::before { content: ""; position: absolute; left: 8px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A26F7' stroke-width='4.2' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%3E%3C/svg%3E") center / contain no-repeat; }
.cible__liste b { background: linear-gradient(var(--menthe), var(--menthe)) left bottom / 100% 4px no-repeat; }
.cible__action { margin-top: clamp(28px, 4vw, 44px); display: grid; }
@media (min-width: 40em) {
  .cible__bloc { padding: 26px 18px 18px; }
  .cible__sticker { top: -46px; left: 34px; width: 112px; }
  svg.cible__sticker { width: 104px; }
  .cible__bloc h3 { min-height: 70px; padding: 0 0 22px 150px; font-size: 1.875rem; }
  .cible__cartes { grid-template-columns: 1fr 1fr; gap: 14px; background: none; border-radius: 0; }
  .cible__cartes li { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 22px 22px; background: var(--blanc); border: 1px solid #cdf3eb; border-radius: 20px; }
  .cible__cartes li + li { border-top: 1px solid #cdf3eb; }
  .cible__cartes img { width: auto; height: 50px; }
  .cible__liste { padding: 0 16px 8px; }
  .cible__action { justify-content: center; }
}
@media (min-width: 64em) {
  .cible { grid-template-columns: 1fr 1fr; padding-top: 30px; }
}

/* Les avis : seulement les avis écrits, en mur de cartes sur deux colonnes */
.avis-mur, .avis-mur__colonne { display: grid; align-content: start; gap: 36px; }
.avis-mur { padding-bottom: 10px; }
@media (min-width: 56em) { .avis-mur { grid-template-columns: 1fr 1fr; align-items: start; } }

/* « Notre méthode », d'après les maquettes fournies : quatre cartes numérotées reliées par un fil.
   Sur téléphone, le numéro se pose sur le coin de la carte, le titre à gauche et l'illustration à droite. */
.parcours-section { position: relative; isolation: isolate; overflow: hidden; }
.parcours__ruban { position: absolute; z-index: -1; top: 4%; left: 50%; width: max(1200px, 104vw); max-width: none; height: auto; transform: translateX(-50%); opacity: .55; pointer-events: none; }
.parcours { display: grid; gap: 34px; padding-left: 10px; }
.parcours__etape { position: relative; }
.parcours__numero { position: absolute; z-index: 1; top: -22px; left: -12px; display: grid; place-items: center; width: 52px; height: 52px; background: var(--violet); color: var(--blanc); border: 5px solid var(--blanc); border-radius: 50%; box-shadow: 0 0 0 1.5px #e3d8fa, 0 10px 18px -8px rgb(74 38 247 / .5); font: 600 1.125rem/1 var(--titres); letter-spacing: -.04em; }
.parcours__etape:nth-child(even) .parcours__numero { background: var(--menthe); color: var(--encre); box-shadow: 0 0 0 1.5px #c5f6ec, 0 10px 18px -8px rgb(23 199 166 / .55); }
.parcours__etape:not(:last-child)::after { content: ""; position: absolute; left: 13px; bottom: -34px; width: 2px; height: 34px; background: #cfc4fb; }
.parcours__carte { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 2px 8px; padding: 22px 18px 22px 22px; background: #fcfbfe; border: 1.5px solid #e6defa; border-radius: 24px; box-shadow: 0 18px 30px -22px rgb(74 38 247 / .3); }
.parcours__etape:first-child .parcours__carte { border-color: #8ff3e0; box-shadow: 0 0 0 1px #8ff3e0, 0 18px 30px -22px rgb(23 199 166 / .45); }
.parcours__carte img { grid-column: 2; grid-row: 1; display: block; width: 100%; height: auto; }
.parcours__carte h3 { grid-column: 1; grid-row: 1; font-size: 1.25rem; line-height: 1.14; letter-spacing: -.045em; }
.parcours__carte p { grid-column: 1 / -1; font-size: .9375rem; line-height: 1.5; font-weight: 500; color: var(--encre-2); }
@media (min-width: 56em) {
  .parcours { grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0; }
  .parcours__etape { display: flex; flex-direction: column; align-items: center; gap: 30px; }
  .parcours__numero { position: relative; top: auto; left: auto; width: 60px; height: 60px; font-size: 1.25rem; }
  .parcours__etape:not(:last-child)::after { left: calc(50% + 36px); bottom: auto; top: 29px; width: calc(100% - 72px + 12px); height: 2px; background: linear-gradient(90deg, #b9a8fb, #9cf3e3); }
  .parcours__etape:nth-child(even):not(:last-child)::after { background: linear-gradient(90deg, #9cf3e3, #b9a8fb); }
  .parcours__carte { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0 0 26px; overflow: hidden; }
  .parcours__carte img { border-radius: 22px 22px 0 0; }
  .parcours__carte h3 { padding: 6px 22px 0; font-size: 1.25rem; line-height: 1.2; }
  .parcours__carte p { padding: 0 22px; }
}

/* Les réalisations : un seul panneau sombre aux couleurs d'AXTRACOM, et une bande de captures qu'on fait défiler.
   Le site du milieu est mis en avant ; le bas des captures se fond dans le panneau. */
.sites-section { padding-inline: 0; }
.sites { --fond-sites: #0e211f; position: relative; isolation: isolate; overflow: hidden; width: min(100% - 24px, 1560px); margin-inline: auto; padding: clamp(40px, 6vw, 76px) 0 clamp(28px, 4vw, 44px); background: radial-gradient(60% 46% at 0% 0%, rgb(74 38 247 / .42), transparent 70%), radial-gradient(52% 40% at 100% 4%, rgb(99 251 224 / .2), transparent 70%), var(--fond-sites); color: var(--blanc); border-radius: 28px; }
.sites__ruban { position: absolute; z-index: -1; top: -34%; left: -10%; width: 120%; max-width: none; height: auto; opacity: .22; pointer-events: none; }
.sites__tete { display: grid; justify-items: center; gap: 16px; padding-inline: 20px; text-align: center; }
.sites__preuve { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 600; color: rgb(255 255 255 / .86); }
.sites__preuve svg { width: 20px; height: 20px; color: var(--menthe); --puce-fond: #0e211f; }
.sites .titre { color: var(--blanc); }
.sites .surligne { color: var(--encre); }
.sites__texte { max-width: 52ch; font-size: 1.0625rem; line-height: 1.5; color: rgb(255 255 255 / .76); }
.sites__tete .bouton { margin-top: 8px; }
.sites__piste { --carte-sites: min(78vw, 300px); display: flex; gap: 16px; margin-top: clamp(32px, 4.5vw, 56px); padding: 20px calc(50% - var(--carte-sites) / 2) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sites__piste::-webkit-scrollbar { display: none; }
.sites__piste:focus-visible { outline: 2px solid var(--menthe); outline-offset: -4px; }
.sites__carte { position: relative; flex: none; width: var(--carte-sites); aspect-ratio: 400 / 470; margin: 0; overflow: hidden; background: #16302c; border-radius: 14px; scroll-snap-align: center; opacity: .78; transition: transform .5s cubic-bezier(.625, .02, 0, 1.05), opacity .4s; }
.sites__carte.est-au-centre { opacity: 1; transform: translateY(-14px); }
.sites__carte img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sites__carte::after { content: ""; position: absolute; inset: 46% 0 0; background: linear-gradient(to bottom, transparent, var(--fond-sites) 92%); pointer-events: none; }
.sites__carte figcaption { position: absolute; z-index: 1; inset: auto 16px 14px; display: grid; gap: 2px; text-align: left; }
.sites__carte b { font: 600 1.0625rem/1.2 var(--titres); letter-spacing: -.03em; }
.sites__carte span { font-size: .8125rem; color: rgb(255 255 255 / .72); }
.sites__fleches { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.sites__fleches button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; background: rgb(255 255 255 / .1); color: var(--blanc); border: 1px solid rgb(255 255 255 / .22); border-radius: 50%; cursor: pointer; transition: background .25s, transform .25s; }
.sites__fleches button:hover, .sites__fleches button:focus-visible { background: var(--menthe); color: var(--encre); transform: translateY(-2px); }
.sites__fleches .icone { width: 20px; height: 20px; stroke-width: 2.2; }
@media (min-width: 40em) { .sites__piste { --carte-sites: 340px; gap: 24px; } }
@media (min-width: 64em) { .sites__piste { --carte-sites: 400px; gap: 34px; } }
@media (prefers-reduced-motion: reduce) { .sites__carte { transition: none; } }

/* « Vous voyez tout, en direct », d'après la maquette fournie : une grande carte pour l'espace client,
   deux cartes à droite (le conseiller, le délai de réponse), puis le témoignage et le bouton. */
.suivi-section { position: relative; isolation: isolate; overflow: hidden; }
.suivi__ruban { position: absolute; z-index: -1; top: 6%; left: 50%; width: max(1200px, 104vw); max-width: none; height: auto; transform: translateX(-50%); opacity: .7; pointer-events: none; }
.suivi { display: grid; grid-template-columns: 1fr; gap: 20px; }
.suivi__carte { position: relative; margin: 0; padding: 24px; background: #f9f6fd; border: 4px solid var(--blanc); border-radius: 28px; box-shadow: 0 0 0 1.5px #e3d8fa, 0 22px 34px -22px rgb(74 38 247 / .28); }
.suivi__carte h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -.04em; }
.suivi__sticker { position: absolute; filter: drop-shadow(0 6px 8px rgb(20 38 31 / .16)); }
.suivi__sticker--oeil { top: -40px; left: -14px; width: 68px; height: auto; }
.suivi__espace { margin-top: 14px; }
.suivi__tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 16px; border-bottom: 1.5px solid #e3d8fa; }
.suivi__direct { display: inline-flex; flex: none; align-items: center; gap: 7px; padding: 5px 12px; background: #d5fbf2; border-radius: 999px; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.suivi__direct i { width: 9px; height: 9px; background: #17c7a6; border-radius: 50%; }
.suivi__corps { display: grid; gap: 20px; padding-top: 18px; }
.suivi__etapes { display: grid; }
.suivi__etapes li { display: flex; align-items: center; gap: 14px; padding-block: 12px; font-size: 1rem; }
.suivi__etapes li + li { border-top: 1px solid #ece4fb; }
.suivi__etapes b { margin-right: auto; font-weight: 600; }
.suivi__etapes span { padding: 4px 12px; background: #efeafb; border-radius: 999px; font-size: .875rem; font-weight: 500; color: var(--encre-2); white-space: nowrap; }
.suivi__etapes i { flex: none; width: 24px; height: 24px; border: 2px solid #c9bdf0; border-radius: 50%; }
.suivi__etapes .est-fait i { border: 0; background: var(--menthe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23183d2d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.suivi__etapes .est-fait span { background: #d5fbf2; color: var(--vert); }
.suivi__etapes .est-en-cours i { border: 3px solid var(--violet); border-right-color: transparent; }
.suivi__etapes .est-en-cours span { background: var(--violet); color: var(--blanc); font-weight: 600; }
.suivi__fenetre { display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto; }
.suivi__conseiller, .suivi__reponse { display: flex; align-items: center; gap: 14px; }
.suivi__avatar { flex: none; width: 80px; height: 80px; border-radius: 50%; box-shadow: 0 0 0 5px var(--blanc), 0 10px 18px -8px rgb(20 38 31 / .3); }
.suivi__conseiller p, .suivi__reponse p { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 500; color: var(--encre-2); }
.suivi__canal { display: grid; flex: none; place-items: center; width: 30px; height: 30px; background: #d5fbf2; border-radius: 9px; color: var(--violet); }
.suivi__canal .icone { width: 16px; height: 16px; stroke-width: 2.4; }
.suivi__cotes { position: absolute; top: -18px; right: 22px; padding: 6px 14px; background: var(--menthe); border: 3px solid var(--blanc); border-radius: 12px; box-shadow: 0 10px 16px -10px rgb(20 38 31 / .4); font-size: .9375rem; font-weight: 700; transform: rotate(-3deg); }
.suivi__cotes svg { position: absolute; right: -16px; bottom: -18px; width: 24px; height: 24px; fill: var(--violet); stroke: var(--blanc); stroke-width: 2.4; stroke-linejoin: round; filter: drop-shadow(0 3px 4px rgb(20 38 31 / .22)); }
.suivi__sticker--horloge { position: static; flex: none; width: 72px; height: auto; margin: -6px 0 -6px -4px; }
.suivi__reponse > div { padding-left: 14px; border-left: 1.5px solid #e3d8fa; }
.suivi__bas { display: grid; gap: 24px; margin-top: 16px; }
.suivi__avis { display: grid; gap: 10px; padding: 28px 28px 24px 32px; }
.suivi__citation { position: absolute; top: -30px; left: -16px; width: 76px; height: auto; }
.suivi__avis blockquote { margin: 0; }
.suivi__avis blockquote p { font-size: 1.0625rem; line-height: 1.45; font-weight: 500; color: var(--encre); }
.suivi__avis figcaption { display: grid; justify-items: start; gap: 6px; }
.suivi__avis figcaption b { padding-bottom: 3px; background: linear-gradient(90deg, var(--menthe), rgb(99 251 224 / .3)) left bottom / 100% 5px no-repeat; font: 600 1.25rem/1.2 var(--titres); letter-spacing: -.04em; }
.suivi__avis figcaption span { font-size: .9375rem; color: var(--encre-2); }
.suivi__etoile { position: absolute; right: 18px; bottom: 14px; width: 34px; height: 34px; filter: drop-shadow(0 4px 5px rgb(20 38 31 / .15)); }
.suivi__bas .bouton { justify-self: stretch; }
@media (min-width: 40em) {
  .suivi__corps { grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; }
  .suivi__etapes { padding-right: 24px; border-right: 1.5px solid #e3d8fa; }
  .suivi__bas .bouton { justify-self: start; }
}
@media (min-width: 40em) {
  .suivi__carte h3 { font-size: 1.5rem; }
  .suivi__sticker--oeil { top: -46px; width: 84px; }
  .suivi__direct { padding: 6px 14px; font-size: .9375rem; }
  .suivi__conseiller, .suivi__reponse { gap: 20px; }
  .suivi__avatar { width: 96px; height: 96px; }
  .suivi__conseiller p, .suivi__reponse p { gap: 8px; font-size: .9375rem; }
  .suivi__canal { width: 34px; height: 34px; border-radius: 10px; }
  .suivi__canal .icone { width: 18px; height: 18px; }
  .suivi__sticker--horloge { width: 84px; }
  .suivi__reponse > div { padding-left: 18px; }
}
@media (min-width: 64em) {
  .suivi { grid-template-columns: 1.72fr 1fr; }
  .suivi__carte { padding: 28px 32px; }
  .suivi__espace { grid-row: span 2; }
  .suivi__bas { grid-column: 1 / -1; grid-template-columns: 1.72fr 1fr; align-items: center; gap: 20px; margin-top: 20px; }
  .suivi__bas .bouton { justify-self: center; }
}

/* « Notre engagement », d'après la maquette fournie : texte à gauche, illustration à droite, trois étapes dessous.
   Le fond du panneau reprend celui de la maquette, pour que l'illustration et les autocollants s'y fondent. */
.nuit--livraison { gap: clamp(24px, 4vw, 40px); padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 64px) clamp(24px, 3.4vw, 40px); background: #0e211f; border-radius: 28px; }
.nuit--livraison .nuit__ruban { opacity: .28; }
.nuit--livraison .nuit__texte > p:not(.surtitre) { max-width: 36ch; }
.nuit--livraison .titre { font-size: clamp(1.7rem, 1rem + 2.3vw, 2.75rem); }
.nuit__visuel { margin: 0 -12px; }
.nuit__visuel img { display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect; }
/* Sur téléphone, comme sur la maquette mobile : bouton sur toute la largeur, trois étapes l'une sous l'autre, séparées par un filet */
.nuit--livraison .nuit__texte .bouton { align-self: stretch; justify-content: space-between; }
.nuit__etapes { display: grid; border-top: 1px solid rgb(99 251 224 / .22); font: 600 1.1875rem/1.3 var(--titres); letter-spacing: -.03em; }
.nuit__etapes li { display: flex; align-items: center; gap: 18px; padding-block: 16px; }
.nuit__etapes li + li { border-top: 1px solid rgb(99 251 224 / .22); }
.nuit__etapes li:last-child { padding-bottom: 0; }
.nuit__etapes img { flex: none; width: 60px; height: 56px; object-fit: contain; }
@media (min-width: 40em) {
  .nuit--livraison .nuit__texte .bouton { align-self: flex-start; justify-content: center; }
}
@media (min-width: 64em) {
  .nuit--livraison { grid-template-columns: 1.08fr .92fr; }
  .nuit__visuel { margin: -18px -28px -18px 0; }
  .nuit__etapes { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: clamp(20px, 3vw, 30px); font-size: 1.0625rem; }
  .nuit__etapes li { padding-block: 0; gap: 14px; }
  .nuit__etapes li + li { border-top: 0; }
  .nuit__etapes img { width: auto; height: 52px; }
  .nuit__etapes li + li::before { content: ""; flex: none; width: clamp(28px, 6vw, 88px); height: 1px; margin-right: 12px; background: rgb(255 255 255 / .28); }
}
/* L'équipe : le prénom sous chaque portrait, sans rôle */
.equipe-cartes__nom { font: 600 1.0625rem/1.2 var(--titres); letter-spacing: -.03em; color: var(--encre); }

/* ---- Fin de page (11/11) ---- */
/* « Encore une question » : le texte et le bouton à gauche, un membre de l'équipe entouré de questions à droite */
.encore { isolation: isolate; grid-template-columns: 1fr; align-items: stretch; gap: 0; margin-top: var(--e-7); padding: 0; background: #0e211f; border-radius: 28px; }
.encore::before { content: ""; position: absolute; z-index: -1; right: -14%; bottom: -46%; width: 82%; aspect-ratio: 1; background: radial-gradient(closest-side, rgb(99 251 224 / .24), transparent); pointer-events: none; }
.encore__texte { display: grid; justify-items: start; align-content: center; gap: 14px; padding: 30px 22px 6px; }
.encore h3 { margin: 0; font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.125rem); font-weight: 600; line-height: 1.18; letter-spacing: -.045em; text-wrap: balance; }
.encore p { max-width: 34ch; font-size: 1.0625rem; line-height: 1.5; color: rgb(255 255 255 / .76); }
.encore .bouton { justify-self: stretch; justify-content: space-between; margin-top: 8px; }
.encore__scene { position: relative; height: 188px; }
.encore .encore__scene img { display: block; position: absolute; right: 2px; bottom: -58px; width: 196px; height: auto; }
.encore__bulle { position: absolute; z-index: 1; padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: var(--blanc); color: var(--encre); font-size: .875rem; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: 0 12px 22px -10px rgb(0 0 0 / .55); animation: flotte-doux 3.6s ease-in-out infinite alternate; }
.encore__bulle--a { left: 18px; top: 26px; rotate: -4deg; }
.encore__bulle--b { left: 40px; top: 80px; rotate: 3deg; background: var(--menthe); animation-delay: -1.2s; }
.encore__bulle--c { left: 14px; top: 134px; rotate: -2deg; background: var(--lilas); animation-delay: -2.4s; }
@media (min-width: 44em) {
  .encore { grid-template-columns: 1fr 336px; min-height: 290px; padding-right: 0; }
  .encore__texte { padding: 40px 16px 40px 44px; }
  .encore .bouton { justify-self: start; justify-content: center; }
  .encore__scene { height: auto; }
  .encore .encore__scene img { right: 0; bottom: -70px; width: 244px; }
  .encore__bulle { font-size: .9375rem; }
  .encore__bulle--a { left: 10px; top: 44px; }
  .encore__bulle--b { left: 38px; top: 112px; }
  .encore__bulle--c { left: 4px; top: 180px; }
}
@media (prefers-reduced-motion: reduce) { .encore__bulle { animation: none; } }

/* Le dernier écran : panneau violet, pastille menthe, trois étapes numérotées, bouton menthe */
.final { gap: clamp(22px, 3vw, 30px); padding: clamp(44px, 7vw, 84px) clamp(18px, 5vw, 72px) clamp(44px, 6vw, 72px); background: var(--violet) radial-gradient(110% 80% at 50% 0%, rgb(255 255 255 / .2), transparent 62%); color: var(--blanc); border-radius: 28px; }
.final__ruban { top: -30%; left: -12%; width: 124%; opacity: .14; }
.final .surtitre { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .26); color: var(--blanc); }
.final .surtitre__point { box-shadow: 0 0 0 3px rgb(99 251 224 / .28); }
.final__titre { max-width: none; color: var(--blanc); }
.final__titre .titre__ligne { max-width: 21ch; margin-inline: auto; text-wrap: balance; }
.final__titre .pastille { margin-top: .2em; }
.pastille__saut { display: none; }
.final__etapes { counter-reset: etape; display: grid; gap: 10px; width: 100%; max-width: 340px; margin: 2px 0 0; padding: 0; list-style: none; text-align: left; font-size: .9375rem; font-weight: 600; }
.final__etapes li { counter-increment: etape; display: flex; align-items: center; gap: 12px; padding: 9px 18px 9px 9px; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .2); border-radius: 14px; }
.final__etapes li::before { content: counter(etape); flex: none; display: grid; place-items: center; width: 30px; height: 30px; background: var(--menthe); color: var(--encre); border-radius: 50%; font: 600 .9375rem/1 var(--titres); }
.final .bouton { width: 100%; max-width: 340px; justify-content: space-between; margin-top: 4px; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .1), inset 0 1px 0 rgb(255 255 255 / .5), 0 4px 0 0 #14261f; }
.final .bouton:hover { box-shadow: inset 0 -3px 0 rgb(0 0 0 / .1), inset 0 1px 0 rgb(255 255 255 / .5), 0 2px 0 0 #14261f; }
/* Les deux portraits en autocollants : un liseré blanc les détache du violet */
.final__pose { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 10px 14px rgb(20 12 80 / .35)); }
@media (min-width: 52em) {
  .final__etapes { display: flex; flex-wrap: wrap; justify-content: center; width: auto; max-width: none; }
  .final .bouton { width: auto; justify-content: center; }
  .final__titre .pastille { white-space: nowrap; }
  .pastille__saut { display: inline; }
}
@media (min-width: 64em) {
  .final { padding-bottom: 104px; }
  .final__pose { width: 196px; }
}

/* Le pied de page : fond sombre, trois colonnes, mentions sur une ligne */
.pied { padding-block: clamp(40px, 6vw, 64px) 104px; background: #0e211f; border-top: 0; border-radius: 28px 28px 0 0; color: rgb(255 255 255 / .72); font-size: .9375rem; }
.pied__haut { display: grid; gap: 36px; }
.pied__marque { justify-items: start; gap: 16px; max-width: 36ch; }
.pied__marque img { height: 34px; filter: brightness(0) invert(1); }
.pied__marque .bouton { margin-top: 4px; }
.pied__titre { margin-bottom: 16px; font: 600 .8125rem/1 var(--titres); letter-spacing: .08em; text-transform: uppercase; color: var(--menthe); }
.pied__nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 36px; }
.pied a:not(.bouton) { color: var(--blanc); text-decoration: none; background: linear-gradient(var(--menthe), var(--menthe)) left bottom / 0 1.5px no-repeat; transition: background-size .3s cubic-bezier(.4, 0, .2, 1); }
.pied a:not(.bouton):hover, .pied a:not(.bouton):focus-visible { color: var(--blanc); background-size: 100% 1.5px; }
.pied__contact { gap: 12px; }
.pied__contact li { gap: 12px; }
.pied__contact .icone { flex: none; width: 34px; height: 34px; padding: 8px; background: rgb(99 251 224 / .14); color: var(--menthe); border-radius: 10px; }
.pied__legal { margin-top: clamp(32px, 5vw, 48px); padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .14); color: rgb(255 255 255 / .56); font-size: .875rem; }
.pied__legal a:not(.bouton) { color: rgb(255 255 255 / .8); }
@media (min-width: 48em) {
  .pied { padding-bottom: 36px; }
  .pied__haut { grid-template-columns: 1.35fr 1fr 1.15fr; gap: 48px; }
  .pied__legal { grid-template-columns: 1fr auto; }
}
@media (prefers-reduced-motion: reduce) { .pied a:not(.bouton) { transition: none; } }

/* Très petits téléphones (320 px) : une formule ne force plus la largeur de la page */
.formule { min-width: 0; }

/* ---- Prix, engagement et formulaire (11/11) ---- */
/* Sous les boutons du premier écran : ce que le visiteur risque, en une ligne */
.hero__rassure { margin: 14px auto 0; max-width: 44ch; font-size: .875rem; line-height: 1.4; font-weight: 500; color: var(--encre-2); text-wrap: balance; }
/* Le formulaire passe avant les explications sur téléphone, et à côté d'elles sur ordinateur */
.devis { grid-template-areas: "tete" "formulaire" "plus"; gap: 26px; }
.devis__tete { grid-area: tete; display: grid; gap: 14px; }
.devis > .formulaire { grid-area: formulaire; }
.devis__plus { grid-area: plus; display: grid; align-content: start; gap: 18px; }
.devis__plus h3 { font-size: 1.25rem; letter-spacing: -.035em; }
.etape__aide { margin-top: -6px; font-size: .9375rem; line-height: 1.45; color: var(--encre-2); }
@media (min-width: 64em) {
  .devis { grid-template-areas: "tete formulaire" "plus formulaire"; grid-template-rows: auto 1fr; gap: 28px var(--e-7); }
}

/* ---- Retouches du 11/11 : prix dans les formules, page plus courte sur téléphone, équipe ---- */
/* Le prix en grand dans chaque carte : petite ligne, montant, précision */
.formule__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-top: -2px; }
.formule__prix span { font-size: .9375rem; font-weight: 600; color: var(--encre-2); }
.formule__prix span:first-child { flex-basis: 100%; }
.formule__prix b { font: 600 clamp(2.375rem, 2rem + 1.6vw, 3rem)/1.1 var(--titres); letter-spacing: -.055em; color: var(--encre); }
.formule--sombre .formule__prix span { color: rgb(255 255 255 / .74); }
.formule--sombre .formule__prix b { color: var(--menthe); }
/* La carte sombre a moins de lignes : l'illustration de l'identité prend la place libre, quand les deux cartes sont côte à côte */
.formule__visuel { display: none; }
@media (min-width: 64em) {
  .formule__visuel { display: block; flex: 1 1 150px; width: 100%; min-height: 150px; object-fit: cover; object-position: center 34%; border-radius: 16px; }
}

/* L'équipe : trois portraits puis deux, centrés, tant que les cinq ne tiennent pas sur une ligne */
.equipe-cartes { grid-template-columns: repeat(6, 1fr); gap: 10px; }
.equipe-cartes li { grid-column: span 2; padding: 12px 6px 14px; gap: 8px; }
.equipe-cartes li:nth-child(4) { grid-column: 2 / span 2; }
.equipe-cartes li:nth-child(5) { grid-column: 4 / span 2; }
.equipe-cartes__nom { font-size: .9375rem; }
@media (min-width: 40em) {
  .equipe-cartes { gap: var(--e-4); }
  .equipe-cartes li { padding: var(--e-4) var(--e-3); gap: var(--e-3); }
  .equipe-cartes__nom { font-size: 1.0625rem; }
}
@media (min-width: 64em) {
  .equipe-cartes { grid-template-columns: repeat(5, 1fr); }
  .equipe-cartes li, .equipe-cartes li:nth-child(4), .equipe-cartes li:nth-child(5) { grid-column: auto; }
}

/* Sur téléphone, quatre piles de cartes deviennent des rangées à faire glisser : la carte suivante dépasse à droite */
@media (max-width: 39.99em) {
  .reproches, .creations, .mois, .avis-mur {
    --bord: clamp(16px, 4vw, 32px);
    display: flex; gap: 12px; margin-inline: calc(-1 * var(--bord)); padding: 6px var(--bord) 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bord); overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .reproches::-webkit-scrollbar, .creations::-webkit-scrollbar, .mois::-webkit-scrollbar, .avis-mur::-webkit-scrollbar { display: none; }
  .reproches > *, .creations > *, .mois > *, .avis-mur .avis-carte { flex: 0 0 86%; scroll-snap-align: start; }
  .js .reproches > .apparait, .js .creations > .apparait, .js .mois > .apparait { opacity: 1; transform: none; }
  /* Les avis glissent dans leur panneau sombre ; la place des poignées et de l'étiquette est gardée */
  .avis-mur { --bord: clamp(20px, 5vw, 72px); gap: 22px; padding-block: 10px 30px; }
  .avis-mur__colonne { display: contents; }
  .avis-mur .avis-carte { flex-basis: 88%; align-content: start; gap: 14px; padding: 22px 20px 34px; }
  .avis-mur .avis-carte p { font-size: 1rem; line-height: 1.45; }
}