/* Site vitrine — une seule feuille, aucun appel externe.
   Charte OBIS : vert forêt #0D5C44 (primaire), vert pousse #2AB34E
   (secondaire, logo et accents — jamais du texte sur fond clair : 2,7:1),
   Book Antiqua. Chaque paire texte/fond est mesurée (≥ 4,5:1 pour le texte,
   ≥ 3:1 pour les contours de champs), en clair comme en sombre.

   Book Antiqua n'existe que sur Windows (Palatino sur Mac et iPhone) : sur
   Android, la pile retombe sur « Pagella OBIS », même famille de dessin,
   livrée avec le site (assets/polices/, ~20 Ko par graisse). Le navigateur
   ne la télécharge que si aucune police installée de la pile n'existe. */

@font-face {
  font-family: "Pagella OBIS";
  src: url("polices/pagella-obis-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pagella OBIS";
  src: url("polices/pagella-obis-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --fond: #ffffff;
  --fond-alt: #f2f7f4;
  --surface: #ffffff;
  --encre: #15261f;
  --encre-douce: #4b5d55;
  --marque: #0d5c44;
  --marque-fonce: #083d2d;
  --marque-teinte: #e3f4e7;
  --sur-marque: #ffffff;
  --pousse: #2ab34e;
  --pousse-teinte: #e3f4e7;
  --sur-pousse: #06281d;
  --anneau: #0d5c44;
  --trait: #d3e2da;
  --trait-champ: #73887e;
  --ok-texte: #1b6b3a;
  --ok-fond: #dcf2e3;
  --attente-texte: #8a4b00;
  --attente-fond: #fcebd0;
  --alerte-texte: #9b1c1c;
  --alerte-fond: #fbe1e1;
  --neutre-texte: #3c4d45;
  --neutre-fond: #e6eee9;
  --wa-fond: #0b6e4f;
  --wa-encre: #ffffff;
  --ombre-ecran: 0 1px 2px rgba(8, 61, 45, .08), 0 18px 40px -18px rgba(8, 61, 45, .35);
  --bande-foret: #0d5c44;
  --bande-profonde: #083d2d;
  --bande-foret-encre: #f1f8f4;
  --bande-foret-douce: #c4e3d2;
  --bande-accent: #7cdb97;
  --rayon: .375rem;
  --rayon-ecran: .75rem;
  --antiqua: "Book Antiqua", "Palatino Linotype", Palatino, "Pagella OBIS", "URW Palladio L", P052, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: var(--antiqua);
  --largeur: 74rem;
  --gouttiere: 1.125rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0b1a15;
    --fond-alt: #0f231c;
    --surface: #12291f;
    --encre: #e4f0e9;
    --encre-douce: #a6bfb2;
    --marque: #6dd58c;
    --marque-fonce: #9be4b0;
    --marque-teinte: #173a2c;
    --sur-marque: #06281d;
    --pousse: #2ab34e;
    --pousse-teinte: #173a2c;
    --sur-pousse: #06281d;
    --anneau: #6dd58c;
    --trait: #23392f;
    --trait-champ: #6f8a7d;
    --ok-texte: #9ee0bc;
    --ok-fond: #173a2e;
    --attente-texte: #f7c98b;
    --attente-fond: #3d2a10;
    --alerte-texte: #f5b5b5;
    --alerte-fond: #45181c;
    --neutre-texte: #cfe0d6;
    --neutre-fond: #1d3329;
    --wa-fond: #25d366;
    --wa-encre: #06281d;
    --ombre-ecran: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 44px -18px rgba(0, 0, 0, .75);
    --bande-foret: #0a4434;
    --bande-profonde: #072e22;
    --bande-foret-encre: #f1f8f4;
    --bande-foret-douce: #c4e3d2;
    --bande-accent: #7cdb97;
  }
}

/* Écrans très larges : tout grandit d'un cran plutôt que de flotter au milieu. */
@media (min-width: 100rem) { html { font-size: 106.25%; } }
@media (min-width: 140rem) { html { font-size: 118.75%; } }

/* ---------------------------------------------------------------- base -- */

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
@media (min-width: 60rem) { html { scroll-padding-top: 5.5rem; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--antiqua);
  font-size: 1.0625rem;
  line-height: 1.65;
  /* Chiffres anciens dans le texte courant : ils se fondent dans la ligne. */
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }

/* Titres en romain (graisse normale) et grand corps : c'est ainsi que cette
   famille de caractères est la plus élégante ; le gras est réservé aux h3. */
h1, h2, h3, h4 {
  font-family: var(--antiqua);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 .55em;
  letter-spacing: -.012em;
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}
h1 { font-size: clamp(2.125rem, 1.45rem + 3vw, 3.75rem); line-height: 1.06; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem); color: var(--marque); }
h3 { font-size: 1.25rem; line-height: 1.28; font-weight: 700; letter-spacing: 0; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; }

p, ul, ol, dl { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; }
li + li { margin-top: .25rem; }
strong { font-weight: 700; }

a {
  color: var(--marque);
  text-decoration-color: color-mix(in srgb, var(--pousse) 70%, transparent);
  text-decoration-thickness: .07em;
  text-underline-offset: .2em;
}
a:hover { color: var(--marque-fonce); text-decoration-color: var(--pousse); text-decoration-thickness: .12em; }

:focus-visible { outline: 3px solid var(--anneau); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }

img, svg { max-width: 100%; }
figure { margin: 0; }

.icone {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -.25em;
}

.visuellement-masque {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.evitement {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--marque);
  color: var(--sur-marque);
  border-radius: var(--rayon);
}
.evitement:focus { top: 1rem; color: var(--sur-marque); }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

@media (min-width: 48rem) { :root { --gouttiere: 2rem; } }
@media (min-width: 80rem) { :root { --gouttiere: 2.5rem; } }

/* Le logo : l'oiseau de la charte, dessiné en SVG (590 octets). */
.oiseau { fill: var(--pousse); }

/* ------------------------------------------------------------- en-tête -- */

.entete {
  position: relative;
  z-index: 40;
  border-bottom: 1px solid var(--trait);
  background: var(--fond);
}
/* Sur grand écran l'en-tête suit la lecture ; au téléphone il resterait
   affiché sur un quart de l'écran, il défile donc avec la page. */
@media (min-width: 60rem) {
  .entete {
    position: sticky;
    top: 0;
    background: color-mix(in srgb, var(--fond) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
  }
}

.entete__barre {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "marque demo" "nav nav";
  align-items: center;
  column-gap: 1rem;
  padding-top: .6rem;
}

.marque {
  grid-area: marque;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  color: var(--marque);
  font-family: var(--antiqua);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: .06em;
  text-decoration: none;
}
.marque:hover { color: var(--marque); }
.marque__logo { width: 2.35rem; height: auto; aspect-ratio: 103 / 92; }

.entete__demo { grid-area: demo; }

.navigation { grid-area: nav; margin-inline: calc(var(--gouttiere) * -1); }
.navigation ul {
  display: flex;
  gap: .15rem;
  margin: 0;
  padding: .25rem var(--gouttiere) .45rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.navigation ul::-webkit-scrollbar { display: none; }
.navigation li { margin: 0; flex: none; }
.navigation a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .75rem;
  color: var(--encre);
  text-decoration: none;
  font-size: 1.0625rem;
}
.navigation a::after {
  content: "";
  position: absolute;
  left: .75rem; right: .75rem; bottom: .45rem;
  height: 2px;
  border-radius: 2px;
  background: var(--pousse);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.navigation a:hover { color: var(--marque); }
.navigation a:hover::after { transform: scaleX(1); }
.navigation a[aria-current="page"],
.navigation a.est-dans-section { color: var(--marque); }
.navigation a[aria-current="page"]::after,
.navigation a.est-dans-section::after { transform: scaleX(1); }

@media (min-width: 60rem) {
  .entete__barre {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "marque nav demo";
    padding-block: .55rem;
  }
  .navigation { margin: 0; }
  .navigation ul { justify-content: center; padding: 0; overflow: visible; gap: .5rem; }
}

/* ------------------------------------------------------------- boutons -- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .7rem 1.4rem;
  border: 1.5px solid var(--marque);
  border-radius: var(--rayon);
  background: var(--marque);
  color: var(--sur-marque);
  font: inherit;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.bouton:hover { background: var(--marque-fonce); border-color: var(--marque-fonce); color: var(--sur-marque); }
.bouton--secondaire { background: transparent; color: var(--marque); }
.bouton--secondaire:hover { background: var(--marque-teinte); color: var(--marque); border-color: var(--marque); }
.bouton--wa { background: var(--wa-fond); border-color: var(--wa-fond); color: var(--wa-encre); }
.bouton--wa:hover { background: var(--wa-fond); border-color: var(--encre); color: var(--wa-encre); }
.bouton--compact { min-height: 44px; padding: .5rem 1rem; font-size: 1rem; }
.bouton .icone { width: 1.3em; height: 1.3em; }

.boutons { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
@media (max-width: 26rem) { .boutons .bouton { flex: 1 1 100%; } }

.court { display: none; }
@media (max-width: 26rem) {
  .court { display: inline; }
  .long { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Téléphone : les quatre rubriques en deux rangées, toutes visibles (une
   rangée défilante masquait « Tarifs » et « Sécurité » à 390 px). */
@media (max-width: 34rem) {
  .navigation ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; column-gap: .5rem; row-gap: 0; }
  .navigation a { display: flex; justify-content: center; padding: 0 .35rem; }
  .navigation a::after { left: 30%; right: 30%; }
}

/* Sur les bandes vert forêt : bouton plein en vert pousse, contour blanc. */
.heros .bouton,
.page-titre .bouton,
.sur-foret .bouton,
.bande--foret .bouton { background: var(--pousse); border-color: var(--pousse); color: var(--sur-pousse); }
.heros .bouton:hover,
.page-titre .bouton:hover,
.sur-foret .bouton:hover,
.bande--foret .bouton:hover { background: #4fc56d; border-color: #4fc56d; color: var(--sur-pousse); }
.heros .bouton--secondaire,
.page-titre .bouton--secondaire,
.sur-foret .bouton--secondaire,
.bande--foret .bouton--secondaire { background: transparent; border-color: rgba(241, 248, 244, .7); color: var(--bande-foret-encre); }
.heros .bouton--secondaire:hover,
.page-titre .bouton--secondaire:hover,
.sur-foret .bouton--secondaire:hover,
.bande--foret .bouton--secondaire:hover { background: rgba(241, 248, 244, .1); border-color: var(--bande-foret-encre); color: var(--bande-foret-encre); }
.heros :focus-visible,
.page-titre :focus-visible,
.sur-foret :focus-visible,
.bande--foret :focus-visible { outline-color: #ffffff; }

/* ------------------------------------------------------------- bandes -- */

.bande { padding-block: 3.75rem; }
.bande--alt { background: var(--fond-alt); }
.bande--serree { padding-block: 2.75rem; }
@media (min-width: 60rem) { .bande { padding-block: 5.5rem; } .bande--serree { padding-block: 3.5rem; } }

.bande--foret {
  background-color: var(--bande-profonde);
  color: var(--bande-foret-encre);
}
.bande--foret h2, .bande--foret h3 { color: var(--bande-foret-encre); }
.bande--foret a { color: var(--bande-foret-encre); text-decoration-color: var(--pousse); }
.bande--foret .intro, .bande--foret .liste-icones p { color: var(--bande-foret-douce); }
.bande--foret .liste-icones .icone { color: var(--bande-accent); }

.titre-section { max-width: 46rem; margin-bottom: 2.5rem; }
/* Le filet vert pousse ouvre chaque section : un trait de la charte, pas une étiquette. */
.titre-section::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 3px;
  border-radius: 3px;
  margin-bottom: 1.1rem;
  background: var(--pousse);
}
.titre-section p, .intro { color: var(--encre-douce); font-size: 1.1875rem; }
.titre-section > :last-child { margin-bottom: 0; }

.chapo { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); color: var(--encre-douce); max-width: 38rem; line-height: 1.6; }

.note { font-size: .9375rem; color: var(--encre-douce); }

.grille {
  display: grid;
  gap: 1.5rem;
}
/* Un élément de grille ne rétrécit pas sous son contenu (min-width: auto) :
   la maquette du kanban (trois colonnes de 9rem) élargissait la PAGE à
   498 px sur un écran de 320. Autorisé à rétrécir, elle défile dans son cadre. */
.grille > *, .heros__grille > * { min-width: 0; }
@media (min-width: 40rem) { .grille--2, .grille--3, .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) {
  .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grille--large-etroite { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: center; }
  .grille--etroite-large { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; align-items: center; }
}

/* ----------------------------------------------------- listes à icônes -- */

.liste-icones { list-style: none; padding: 0; display: grid; gap: 1.75rem; margin: 0; }
.liste-icones li { margin: 0; display: grid; grid-template-columns: 2.75rem 1fr; column-gap: 1rem; align-content: start; }
.liste-icones .icone {
  width: 2.75rem; height: 2.75rem;
  padding: .6rem;
  border-radius: 50%;
  background: var(--marque-teinte);
  color: var(--marque);
  grid-row: span 2;
}
.liste-icones h3 { margin: .3rem 0 .3rem; font-size: 1.15rem; }
.liste-icones p { margin: 0; color: var(--encre-douce); }
@media (min-width: 40rem) { .liste-icones--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.75rem; } }
@media (min-width: 40rem) and (max-width: 59.99rem) { .liste-icones--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
@media (min-width: 60rem) { .liste-icones--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3rem; row-gap: 2.25rem; } }
.bande--foret .liste-icones .icone { background: rgba(124, 219, 151, .12); }

.liste-coches { list-style: none; padding: 0; }
.liste-coches li { position: relative; padding-left: 1.75rem; }
.liste-coches li::before {
  content: "";
  position: absolute; left: 0; top: .5em;
  width: 1rem; height: .55rem;
  border-left: 2.5px solid var(--marque);
  border-bottom: 2.5px solid var(--marque);
  transform: rotate(-45deg);
}

.mention-nouveau {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .5rem;
  border-radius: 999px;
  background: var(--pousse-teinte);
  color: var(--marque);
  border: 1px solid color-mix(in srgb, var(--pousse) 60%, transparent);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .01em;
  vertical-align: .15em;
}
.bande--foret .mention-nouveau { background: transparent; color: var(--bande-accent); border-color: var(--bande-accent); }

/* ---------------------------------------------------------------- héros -- */
/* Bandeau vert forêt d'ouverture (accueil et toutes les pages) : l'oiseau de
   la charte, très agrandi, prend son envol derrière le contenu. C'est le seul
   effet appuyé du site. */

.heros,
.page-titre {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(42, 179, 78, .16), transparent 60%),
    var(--bande-foret);
  color: var(--bande-foret-encre);
}
.heros h1, .page-titre h1 { color: #ffffff; }
.heros .chapo, .page-titre .chapo { color: var(--bande-foret-douce); }
.heros a:not(.bouton), .page-titre a:not(.bouton) { color: var(--bande-foret-encre); text-decoration-color: var(--pousse); }
.heros :focus-visible, .page-titre :focus-visible { outline-color: #ffffff; }

/* L'oiseau en filigrane : assets/logo.svg (vert pousse), posé une fois ici
   plutôt que dans chaque page ; il déborde du bandeau, qui le rogne. */
.heros::after,
.page-titre::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  aspect-ratio: 103 / 92;
  background: url("logo.svg") no-repeat center / contain;
  opacity: .13;
}
/* Grand écran : la tête et l'aile sortent dans l'espace libre à droite de la
   discussion ; le corps passe derrière les maquettes. */
.heros::after { width: min(44rem, 58vw); right: 1.5%; top: 3%; }
.page-titre::after { width: 27rem; right: -4rem; bottom: -9.5rem; opacity: .11; }
@media (max-width: 47.99rem) {
  .heros::after { width: 22rem; right: -5.5rem; top: .5rem; opacity: .1; }
  .page-titre::after { width: 15rem; right: -3.5rem; bottom: -4.5rem; }
}

.heros { padding-block: 2.75rem 3.75rem; }
@media (min-width: 60rem) { .heros { padding-block: 4.5rem 5.5rem; } }
.heros h1 { max-width: 15em; font-size: clamp(2.125rem, 1.4rem + 2.9vw, 3.5rem); }
.heros .rassurance { font-size: .9375rem; color: var(--bande-foret-douce); margin: 0; }

.heros__grille { display: grid; gap: 2.75rem; }
@media (min-width: 60rem) {
  .heros__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 4rem; align-items: center; }
}

.legende { margin: .75rem 0 0; font-size: .875rem; color: var(--encre-douce); }
.heros .legende { color: var(--bande-foret-douce); }

/* Avant / après : la discussion de groupe devient l'application.
   Téléphone : l'une sous l'autre. Au-delà : l'écran occupe la largeur, la
   discussion le chevauche en bas à gauche. */
.avant-apres { display: grid; gap: 1rem; }
.avant-apres__etiquette {
  display: block;
  margin-bottom: .4rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--encre-douce);
}
.heros .avant-apres__etiquette { color: var(--bande-foret-douce); }
@media (min-width: 40rem) {
  /* L'application recouvre le bas de la discussion : elle la remplace. */
  .avant-apres__avant { width: 62%; position: relative; z-index: 1; }
  .avant-apres__apres { position: relative; z-index: 2; margin: -2.25rem 0 0 2.5rem; }
  .avant-apres__apres .avant-apres__etiquette { text-align: right; }
  .avant-apres .appli { grid-template-columns: minmax(0, 1fr); }
  .avant-apres .appli__menu { display: none; }
}

/* ------------------------------------------------------------ maquettes -- */
/* Interfaces dessinées en HTML/CSS : données fictives, suivent le thème. */

.ecran {
  border: 1px solid var(--trait);
  border-radius: var(--rayon-ecran);
  background: var(--surface);
  box-shadow: var(--ombre-ecran);
  overflow: hidden;
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--encre);
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: auto;
}
.ecran__barre {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--trait);
  background: var(--fond-alt);
}
.ecran__barre i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--trait-champ); opacity: .55; }
.ecran__barre b { margin-left: .5rem; font-weight: 700; color: var(--encre-douce); }

.appli { display: grid; }
@media (min-width: 40rem) { .appli { grid-template-columns: 8.5rem minmax(0, 1fr); } }
.appli__menu { display: none; }
@media (min-width: 40rem) {
  .appli__menu {
    display: block;
    margin: 0; padding: .75rem .5rem;
    list-style: none;
    border-right: 1px solid var(--trait);
    background: var(--fond-alt);
  }
  .appli__menu li { margin: 0; padding: .35rem .55rem; border-radius: .35rem; color: var(--encre-douce); }
  .appli__menu li.actif { background: var(--marque-teinte); color: var(--marque); font-weight: 700; }
}
.appli__corps { padding: .85rem; min-width: 0; }
.appli__titre { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .65rem; }
.appli__titre strong { font-size: .9375rem; }
.appli__titre span { color: var(--encre-douce); }

.chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.chiffre {
  padding: .55rem .65rem;
  border: 1px solid var(--trait);
  border-radius: .45rem;
}
.chiffre span { display: block; color: var(--encre-douce); }
.chiffre strong { display: block; font-size: clamp(.8125rem, 3.4vw, .9375rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chiffres--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tableau-maquette { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tableau-maquette th, .tableau-maquette td { padding: .45rem .4rem; text-align: left; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.tableau-maquette th { color: var(--encre-douce); font-weight: 700; }
.tableau-maquette .nombre { text-align: right; }
.tableau-maquette .tronque { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; }
.tableau-maquette tr:last-child td { border-bottom: 0; }
@media (max-width: 39.99rem) { .tableau-maquette .facultatif { display: none; } }

.pastille {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}
.pastille--ok { background: var(--ok-fond); color: var(--ok-texte); }
.pastille--attente { background: var(--attente-fond); color: var(--attente-texte); }
.pastille--alerte { background: var(--alerte-fond); color: var(--alerte-texte); }
.pastille--neutre { background: var(--neutre-fond); color: var(--neutre-texte); }

/* Discussion de groupe (l'« avant »). */
.discussion {
  border: 1px solid var(--trait);
  border-radius: var(--rayon-ecran);
  background: var(--fond-alt);
  box-shadow: var(--ombre-ecran);
  padding: .75rem;
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.4;
  font-variant-numeric: lining-nums tabular-nums;
  display: grid;
  gap: .45rem;
}
.discussion, .telephone { color: var(--encre); }
.discussion__entete { font-weight: 700; padding-bottom: .4rem; border-bottom: 1px solid var(--trait); }
.discussion__entete span { display: block; font-weight: 400; color: var(--encre-douce); }
.bulle {
  margin: 0;
  max-width: 88%;
  padding: .45rem .6rem;
  border-radius: .6rem .6rem .6rem .15rem;
  background: var(--surface);
  border: 1px solid var(--trait);
}
.bulle b { display: block; font-size: .75rem; color: var(--marque); }
.bulle--moi { justify-self: end; border-radius: .6rem .6rem .15rem .6rem; background: var(--marque-teinte); }
.bulle--fichier { display: flex; gap: .5rem; align-items: center; }
.bulle--fichier .icone { color: var(--ok-texte); width: 1.6rem; height: 1.6rem; }
.bulle small { display: block; color: var(--encre-douce); }

/* Kanban. */
.kanban-maquette { display: grid; grid-template-columns: repeat(3, minmax(9rem, 1fr)); gap: .6rem; overflow-x: auto; padding: .85rem; }
.kanban-maquette__colonne { background: var(--fond-alt); border-radius: .5rem; padding: .5rem; display: grid; gap: .45rem; align-content: start; }
.kanban-maquette__colonne > strong { display: flex; justify-content: space-between; font-size: .8125rem; }
.kanban-maquette__colonne > strong span { color: var(--encre-douce); font-weight: 500; }
.carte-maquette { background: var(--surface); border: 1px solid var(--trait); border-radius: .4rem; padding: .45rem .5rem; display: grid; gap: .3rem; }
.carte-maquette__bas { display: flex; justify-content: space-between; align-items: center; gap: .3rem; }
.avatar {
  display: inline-grid; place-items: center;
  width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: var(--marque); color: var(--sur-marque);
  font-size: .625rem; font-weight: 700;
}
.avatar--pousse { background: var(--pousse); color: var(--sur-pousse); }

/* Tableau de bord. */
.graphique-maquette { width: 100%; height: auto; display: block; }
.graphique-maquette .barre { fill: var(--marque); }
.graphique-maquette .barre--pousse { fill: var(--pousse); }
.graphique-maquette .axe { stroke: var(--trait); }
.graphique-maquette text { fill: var(--encre-douce); font-family: var(--sans); font-size: 11px; }

/* Assistant IA. */
.assistant { display: grid; gap: .55rem; padding: .85rem; }
.assistant .bulle { max-width: 92%; }
.assistant .bulle--moi { background: var(--marque); color: var(--sur-marque); border-color: var(--marque); }
.outils-utilises { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.outils-utilises span {
  padding: .05rem .45rem;
  border: 1px dashed var(--trait-champ);
  border-radius: 999px;
  color: var(--encre-douce);
  font-size: .75rem;
}

/* Téléphone (application installable). */
.telephone {
  width: min(17rem, 100%);
  margin-inline: auto;
  border: 8px solid var(--encre);
  border-radius: 1.8rem;
  background: var(--surface);
  box-shadow: var(--ombre-ecran);
  overflow: hidden;
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.4;
  font-variant-numeric: lining-nums tabular-nums;
}
.telephone__bandeau { margin: .5rem; padding: .55rem .65rem; border-radius: .6rem; background: var(--marque-teinte); color: var(--encre); font-weight: 700; display: flex; gap: .45rem; align-items: center; }
.telephone__liste { list-style: none; margin: 0; padding: .5rem .75rem .9rem; }
.telephone__liste li { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem 0; border-bottom: 1px solid var(--trait); margin: 0; }
.telephone__liste li:last-child { border-bottom: 0; }
.case { flex: none; width: 1rem; height: 1rem; margin-top: .1rem; border: 2px solid var(--trait-champ); border-radius: .25rem; }
.case--cochee { background: var(--ok-texte); border-color: var(--ok-texte); }
.telephone__liste small { display: block; color: var(--encre-douce); }

/* ------------------------------------------------------------ étapes -- */

.etapes { list-style: none; padding: 0; margin: 0; display: grid; gap: 2rem; counter-reset: etape; }
@media (min-width: 48rem) and (max-width: 59.99rem) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; } }
@media (min-width: 60rem) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } }
.etapes li { margin: 0; counter-increment: etape; padding-top: 1.1rem; border-top: 1px solid var(--trait); position: relative; }
/* Un vrai déroulé en trois temps : le numéro est l'information. */
.etapes li::before {
  content: counter(etape);
  display: block;
  font-size: 3.5rem;
  font-weight: 400;
  line-height: .9;
  color: var(--marque);
  margin-bottom: .75rem;
  font-variant-numeric: lining-nums;
}
.etapes li::after {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 2.75rem; height: 3px;
  border-radius: 3px;
  background: var(--pousse);
}
.etapes h3 { margin-bottom: .4rem; }
.etapes p { color: var(--encre-douce); margin: 0; }

/* ------------------------------------------------- problème → solution -- */

.constats { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.constats li { margin: 0; padding: 1.15rem 0; border-bottom: 1px solid var(--trait); }
.constats li:first-child { border-top: 1px solid var(--trait); }
.constats strong { display: block; font-size: 1.1875rem; font-weight: 400; color: var(--marque); margin-bottom: .2rem; line-height: 1.3; }
.constats span { color: var(--encre-douce); }
@media (min-width: 40rem) { .constats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } .constats li:nth-child(2) { border-top: 1px solid var(--trait); } }

/* ------------------------------------------------------------- modules -- */

.modules { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--rayon-ecran); overflow: hidden; }
@media (min-width: 40rem) { .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .modules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.modules li { margin: 0; padding: 1.5rem 1.4rem 1.6rem; background: var(--surface); transition: background-color .2s ease; }
.modules li:hover { background: color-mix(in srgb, var(--pousse-teinte) 55%, var(--surface)); }
.modules h3 { display: flex; align-items: center; gap: .65rem; margin-bottom: .45rem; font-size: 1.1875rem; }
.modules h3 .icone { color: var(--marque); width: 1.6rem; height: 1.6rem; }
.modules p { margin: 0; color: var(--encre-douce); }
.modules .modules__vous { background: var(--pousse-teinte); }

/* ---------------------------------------------------------- fondateurs -- */

.fondateurs {
  position: relative;
  display: grid;
  gap: 1.75rem;
  padding: 2.25rem 1.35rem;
  border: 1px solid color-mix(in srgb, var(--pousse) 35%, transparent);
  border-radius: var(--rayon-ecran);
  background: var(--pousse-teinte);
  color: var(--encre);
  overflow: hidden;
}
.fondateurs::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--pousse);
}
@media (min-width: 60rem) { .fondateurs { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); padding: 3rem; gap: 3.5rem; align-items: center; } }
.fondateurs h2 { margin-bottom: .6rem; }
.fondateurs p { margin-bottom: .85rem; color: var(--encre-douce); }
.fondateurs dl { display: grid; gap: .75rem; margin: 0; }
.fondateurs dl div { padding: .85rem 1.1rem; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--trait); }
.fondateurs dt { font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--marque); font-variant-numeric: lining-nums; }
.fondateurs dd { margin: .15rem 0 0; color: var(--encre-douce); }
.fondateurs a:not(.bouton) { color: var(--marque); }

/* -------------------------------------------------------------- tarifs -- */

.formules { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .formules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .formules { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.formule {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.4rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-ecran);
  background: var(--surface);
}
.formule--phare { border: 1px solid var(--marque); box-shadow: inset 0 4px 0 var(--pousse), var(--ombre-ecran); }
.formule__repere { align-self: flex-start; white-space: nowrap; margin: -2.65rem 0 .9rem; padding: .2rem .7rem; border-radius: 999px; background: var(--marque); color: var(--sur-marque); font-size: .875rem; font-weight: 700; }
.formule h3 { font-size: 1.5rem; font-weight: 400; color: var(--marque); margin-bottom: .25rem; }
.formule__pour { color: var(--encre-douce); min-height: 3em; margin-bottom: .75rem; }
.prix { margin: 0 0 .25rem; font-size: 2rem; font-weight: 400; line-height: 1.15; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.prix small { display: block; font-size: .9375rem; color: var(--encre-douce); }
.prix__detail { color: var(--encre-douce); font-size: .9375rem; margin-bottom: 1rem; }
.formule ul { margin-bottom: 1.25rem; }
.formule .bouton { margin-top: auto; width: 100%; padding-inline: .75rem; font-size: 1rem; }
.formules + .note { margin-top: 1rem; }
.utilisateurs { font-weight: 700; margin-bottom: .75rem; }

.encart {
  padding: 1.25rem;
  border-left: 4px solid var(--marque);
  background: var(--marque-teinte);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.encart > :last-child { margin-bottom: 0; }

.defilement-x { overflow-x: auto; position: relative; }
.tableau-comparatif { width: 100%; border-collapse: collapse; min-width: 36rem; font-variant-numeric: tabular-nums; }
.tableau-comparatif caption { text-align: left; font-weight: 700; padding-bottom: .5rem; }
.tableau-comparatif th, .tableau-comparatif td { padding: .75rem .6rem; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.tableau-comparatif thead th { border-bottom: 2px solid var(--encre); }
.tableau-comparatif td.nombre, .tableau-comparatif th.nombre { text-align: right; white-space: nowrap; }
.tableau-comparatif .notre-ligne { background: var(--marque-teinte); }

.sources { font-size: .875rem; color: var(--encre-douce); }
.sources a { word-break: break-all; }

/* ------------------------------------------------------------------ FAQ -- */

.faq { border-top: 1px solid var(--trait); max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  min-height: 44px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.4rem; line-height: 1; color: var(--marque); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding-bottom: 1rem; color: var(--encre-douce); }
.faq details > div > :last-child { margin-bottom: 0; }

/* ----------------------------------------------------- appel à l'action -- */

.appel { text-align: left; }
.bande:not(.bande--alt):not(.bande--foret) + .appel { padding-top: 0; }
.appel__boite {
  position: relative;
  display: grid;
  gap: 1.75rem;
  padding: 2.25rem 1.35rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-ecran);
  background: var(--surface);
  box-shadow: var(--ombre-ecran);
  overflow: hidden;
}
.appel__boite::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--marque) 0 60%, var(--pousse) 60%);
}
@media (min-width: 60rem) { .appel__boite { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; padding: 3rem; gap: 3rem; } }
.appel__boite h2 { margin-bottom: .55rem; }
.appel__boite p { color: var(--encre-douce); margin-bottom: 0; }
.appel .boutons { margin: 0; }
@media (min-width: 60rem) { .appel .boutons { justify-content: flex-end; } }

/* -------------------------------------------------------------- démo -- */

.canaux { display: grid; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 40rem) { .canaux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.canal {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: .25rem .9rem;
  align-items: start;
  align-content: start;
  padding: 1.1rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-ecran);
  background: var(--surface);
}
.canal .icone { width: 2.5rem; height: 2.5rem; padding: .55rem; border-radius: 50%; background: var(--marque-teinte); color: var(--marque); grid-row: span 3; }
.canal h2, .canal h3 { margin: .15rem 0 0; font-size: 1.1875rem; line-height: 1.3; font-weight: 700; color: var(--encre); }
.canal p { margin: 0; color: var(--encre-douce); }
.canal a { font-weight: 700; }
.canal--principal { border: 1px solid var(--marque); box-shadow: inset 0 3px 0 var(--pousse); }

.formulaire { display: grid; gap: 1.1rem; max-width: 40rem; }
/* Deux champs côte à côte ; empilés au téléphone, avec le même écart que les autres. */
.formulaire__ligne { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .formulaire__ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.champ { display: grid; gap: .35rem; }
.champ label, .champ legend { font-weight: 700; }
.champ .aide { font-size: .9375rem; color: var(--encre-douce); margin: 0; }
.champ input, .champ select, .champ textarea {
  width: 100%;
  min-height: 48px;
  padding: .65rem .75rem;
  border: 1.5px solid var(--trait-champ);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--encre);
  font: inherit;
}
.champ textarea { min-height: 7rem; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--anneau); outline-offset: 2px; border-color: var(--marque); }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--marque); }
.champ [aria-invalid="true"] { border-color: var(--alerte-texte); border-width: 2px; }
.champ .erreur { color: var(--alerte-texte); font-weight: 700; font-size: .9375rem; margin: 0; }
.obligatoire { color: var(--alerte-texte); }
.formulaire__envoi { display: flex; flex-wrap: wrap; gap: .75rem; }
.formulaire__resume {
  padding: 1rem;
  border: 2px solid var(--alerte-texte);
  border-radius: var(--rayon);
  background: var(--alerte-fond);
  color: var(--alerte-texte);
}
.formulaire__resume:empty { display: none; }
.formulaire__resume ul { margin: .25rem 0 0; }
.formulaire__resume a { color: var(--alerte-texte); }
.formulaire__succes {
  padding: 1rem;
  border-radius: var(--rayon);
  background: var(--ok-fond);
  color: var(--ok-texte);
  font-weight: 700;
}
.formulaire__succes:empty { display: none; }
.formulaire__envoi .bouton[hidden] { display: none; }

/* ------------------------------------------- demande de démonstration -- */
/* Le formulaire fait partie de la page : une carte au style du site, à côté
   de ce qui se passe après l'envoi. Il poste sur le domaine du site. */

.demande { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .demande { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4rem; align-items: start; } }
.demande__principal { min-width: 0; }

.demande__formulaire,
.demande__merci {
  position: relative;
  max-width: none;
  padding: 1.75rem 1.25rem 1.5rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-ecran);
  background: var(--surface);
  box-shadow: var(--ombre-ecran);
  overflow: hidden;
}
.demande__formulaire::before,
.demande__merci::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--marque) 0 60%, var(--pousse) 60%);
}
@media (min-width: 48rem) { .demande__formulaire, .demande__merci { padding: 2.5rem 2.5rem 2rem; } }
.demande__formulaire h2, .demande__merci h2 { margin-bottom: .35rem; }
.demande__consigne { color: var(--encre-douce); margin: 0; }
.demande__confidentialite { margin: 0; font-size: .9375rem; color: var(--encre-douce); }
.demande__formulaire .formulaire__envoi .bouton { min-width: 14rem; }
@media (max-width: 26rem) { .demande__formulaire .formulaire__envoi .bouton { flex: 1 1 100%; min-width: 0; } }
.bouton[aria-busy="true"] { cursor: progress; opacity: .8; }

/* Piège à robots : invisible et hors du parcours clavier ; un humain ne le
   remplit jamais, un robot qui remplit tout le remplit. */
.pot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Retour d'un envoi SANS JavaScript refusé par l'application : le serveur
   renvoie sur demo.html#demande-erreur, ce message s'affiche alors seul. */
.formulaire__resume--retour { display: none; }
.formulaire__resume--retour:target { display: block; }

.demande__merci { text-align: left; }
.demande__merci:focus { outline: none; }
.demande__coche { width: 3rem; height: 3rem; margin-bottom: 1rem; fill: var(--pousse-teinte); stroke: var(--marque); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.demande__coche path { fill: none; stroke-width: 2.2; }
.demande__merci p { color: var(--encre-douce); }
.demande__merci p:last-child { margin-bottom: 0; }

.demande__aparte h2 { font-size: 1.5rem; margin-bottom: 1.25rem; }
/* Un vrai déroulé (après l'envoi, dans cet ordre) : les numéros informent. */
.deroule { list-style: none; padding: 0; margin: 0 0 2rem; counter-reset: deroule; }
.deroule li {
  position: relative;
  counter-increment: deroule;
  margin: 0;
  padding: 0 0 1.4rem 3.1rem;
}
.deroule li::before {
  content: counter(deroule);
  position: absolute;
  left: 0; top: -.15rem;
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  border: 1.5px solid var(--marque);
  color: var(--marque);
  font-size: 1.05rem;
  font-variant-numeric: lining-nums;
  background: var(--surface);
}
.deroule li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.05rem; top: 2.1rem; bottom: .15rem;
  width: 1.5px;
  background: var(--trait);
}
.deroule strong { display: block; font-weight: 700; line-height: 1.35; }
.deroule span { display: block; color: var(--encre-douce); }
.demande__canaux { padding-top: 1.5rem; border-top: 1px solid var(--trait); }
.demande__canaux-titre { font-weight: 700; margin-bottom: .5rem; }
.demande__canaux ul { list-style: none; padding: 0; margin: 0; }
.demande__canaux li { display: flex; align-items: center; gap: .55rem; min-height: 44px; margin: 0; }
.demande__canaux .icone { color: var(--marque); }

/* --------------------------------------------------- pages de contenu -- */

.page-titre { padding-block: 2.75rem 3rem; }
@media (min-width: 60rem) { .page-titre { padding-block: 4rem 4.25rem; } }
.page-titre h1 { max-width: 20em; }
.page-titre .chapo { margin-bottom: 0; max-width: 42rem; }
.page-titre + .bande, .page-titre + .bande--serree { padding-top: 3.25rem; }
@media (min-width: 60rem) { .page-titre + .bande, .page-titre + .bande--serree { padding-top: 4.5rem; } }
.page-titre .sommaire a { background: rgba(255, 255, 255, .06); border-color: rgba(241, 248, 244, .35); color: var(--bande-foret-encre); }
.page-titre .sommaire a:hover { background: rgba(255, 255, 255, .12); border-color: var(--pousse); color: #ffffff; }

.prose { max-width: 46rem; }
.prose h2 { margin-top: 2.5rem; font-size: 1.75rem; }
.prose h2:first-child { margin-top: 0; }
.prose dl { display: grid; gap: .25rem 1.5rem; }
@media (min-width: 40rem) { .prose dl { grid-template-columns: max-content 1fr; } }
.prose dt { font-weight: 700; }
.prose dd { margin: 0 0 .5rem; }

.sommaire { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.sommaire li { margin: 0; }
.sommaire a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .3rem .85rem; border: 1px solid var(--trait); border-radius: 999px;
  text-decoration: none; color: var(--encre); background: var(--surface);
}
.sommaire a:hover { border-color: var(--marque); color: var(--marque); }

.fonction { scroll-margin-top: 1rem; }
.fonction + .fonction { margin-top: 0; }
.fonction h2 .icone { display: block; width: 2.25rem; height: 2.25rem; margin-bottom: .6rem; color: var(--marque); }

.solutions-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .solutions-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.solutions-liste li { margin: 0; }
.solutions-liste a {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: .2rem .9rem;
  height: 100%;
  padding: 1.25rem; border: 1px solid var(--trait); border-radius: var(--rayon-ecran);
  background: var(--surface); color: var(--encre); text-decoration: none;
}
.solutions-liste a { transition: border-color .15s ease, box-shadow .15s ease; }
.solutions-liste a:hover { border-color: var(--marque); box-shadow: var(--ombre-ecran); }
.solutions-liste .icone { width: 2.5rem; height: 2.5rem; padding: .55rem; border-radius: 50%; background: var(--marque-teinte); color: var(--marque); grid-row: span 2; }
.solutions-liste strong { font-size: 1.375rem; font-weight: 400; color: var(--marque); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--pousse) 70%, transparent); text-decoration-thickness: .06em; text-underline-offset: .22em; }
.solutions-liste span { color: var(--encre-douce); }

.limite {
  padding: 1rem 1.25rem;
  border: 1px dashed var(--trait-champ);
  border-radius: var(--rayon);
}
.limite > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- pied -- */

.pied {
  margin-top: 0;
  padding-block: 3.5rem 6rem;
  background: var(--bande-profonde);
  color: var(--bande-foret-douce);
  font-size: 1rem;
}
.pied a { color: var(--bande-foret-encre); text-decoration-color: rgba(124, 219, 151, .55); }
.pied a:hover { color: #ffffff; text-decoration-color: var(--pousse); }
.pied :focus-visible { outline-color: #ffffff; }
.pied__grille { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pied__marque, .pied__grille > div:last-child { grid-column: 1 / -1; }
@media (min-width: 60rem) { .pied__marque, .pied__grille > div:last-child { grid-column: auto; } }
@media (min-width: 60rem) { .pied__grille { grid-template-columns: 2fr 1fr 1.3fr 1.6fr; gap: 2rem 2.5rem; } }
.pied__nom { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.5rem; letter-spacing: .06em; color: #ffffff; margin-bottom: .5rem; }
.pied__nom svg { width: 2.4rem; height: auto; aspect-ratio: 103 / 92; }
.pied__marque p { max-width: 24rem; }
.pied__titre { font-size: 1.0625rem; font-weight: 700; color: #ffffff; margin-bottom: .5rem; letter-spacing: 0; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin: 0; }
.pied li a { display: inline-flex; align-items: center; min-height: 44px; }
.pied__contact li { display: flex; gap: .5rem; align-items: center; min-height: 44px; }
.pied__contact .icone { color: var(--bande-accent); }
/* Filet limité à la colonne de texte (le conteneur porte la gouttière). */
.pied__bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  margin-top: 2.5rem; padding-top: 1.25rem; font-size: .9375rem;
  background: linear-gradient(rgba(196, 227, 210, .18), rgba(196, 227, 210, .18)) no-repeat top center / calc(100% - 2 * var(--gouttiere)) 1px;
}
.pied__bas p { margin: 0; align-self: center; }
.pied__bas ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }

/* ------------------------------------------------ WhatsApp flottant -- */

.wa-flottant {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 50;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--wa-fond);
  color: var(--wa-encre);
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .45);
}
.wa-flottant svg { width: 1.9rem; height: 1.9rem; }
.wa-flottant:hover { color: var(--wa-encre); transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .wa-flottant:hover { transform: none; }
}

@media print {
  .entete .navigation, .entete__demo, .wa-flottant, .pied { display: none; }
  .heros::after, .page-titre::after { display: none; }
  .heros, .page-titre { background: none; color: #000; }
  .heros h1, .page-titre h1, .heros .chapo, .page-titre .chapo { color: #000; }
  body { font-size: 11pt; }
}