.oep-enveloppe[data-astro-cid-d5ikpaw6] {
  position: relative;
  display: inline-flex;
}

.oep-lien[data-astro-cid-d5ikpaw6] {
  position: absolute;
  inset: 0;
}

.oep-bouton[data-astro-cid-d5ikpaw6] {
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-hand);
  font-size: var(--hand-bouton-size);
  line-height: var(--hand-bouton-lh);
  letter-spacing: 0;
  background: var(--terre);
  color: var(--papier);
  padding: 12px 24px;
  border-radius: var(--radius-bouton);
  border: var(--bordure-cta);
  text-decoration: none;
  transition: background-color var(--duree-survol) ease;
}

.oep-bouton[data-astro-cid-d5ikpaw6]:hover {
  background: var(--terre-fonce);
}
.annonce[data-astro-cid-wpvy4v7s] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-3);
  background: var(--encre);
  color: var(--papier);
  padding: var(--s-2) var(--s-6);
  font-size: var(--petit-size);
  text-decoration: none;
}

.annonce-cta[data-astro-cid-wpvy4v7s] {
  font-family: var(--font-script);
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: var(--script-lh);
  color: var(--papier);
}

.annonce-cta-mot[data-astro-cid-wpvy4v7s] {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

.annonce-texte[data-astro-cid-wpvy4v7s] {
  font-size: var(--petit-size);
  font-weight: 500;
  line-height: var(--petit-lh);
}

.annonce-fleche[data-astro-cid-wpvy4v7s] {
  transition: transform var(--duree-survol) ease;
}

.annonce[data-astro-cid-wpvy4v7s]:hover .annonce-texte[data-astro-cid-wpvy4v7s] {
  text-decoration: underline;
}

.nav-barre[data-astro-cid-wpvy4v7s] {
  padding: var(--s-4) calc(var(--grille-inset) + var(--s-8)) 0;
}

.nav-flottante[data-astro-cid-wpvy4v7s] {
  max-width: var(--contenu-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  background: var(--papier-clair);
  box-shadow: var(--ombre-nav);
  border-radius: var(--radius-nav);
  padding: var(--s-3) var(--s-5);
}

.nav-logo[data-astro-cid-wpvy4v7s] {
  flex: none;
}

.nav-flottante[data-astro-cid-wpvy4v7s] .oep {
  flex: none;
}

.nav-flottante[data-astro-cid-wpvy4v7s] .oep-bouton {
  white-space: nowrap;
}

.nav-logo[data-astro-cid-wpvy4v7s] img[data-astro-cid-wpvy4v7s] {
  height: 46px;
  width: auto;
  mix-blend-mode: multiply;
}

.nav-liens[data-astro-cid-wpvy4v7s] {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.nav-lien[data-astro-cid-wpvy4v7s] {
  display: inline-block;
  padding: var(--s-2) var(--s-3);
  white-space: nowrap;
  border-radius: var(--radius-nav);
  text-decoration: none;
  transition: background-color var(--duree-survol) ease;
}

.nav-lien[data-astro-cid-wpvy4v7s]:hover {
  background: var(--papier);
}

@media (width >= 1024px) and (width <= 1320px) {
  .nav-barre[data-astro-cid-wpvy4v7s] {
    padding-inline: calc(var(--grille-inset) + var(--s-3));
  }

  .nav-flottante[data-astro-cid-wpvy4v7s] {
    gap: var(--s-3);
    padding: var(--s-2) var(--s-4);
  }

  .nav-logo[data-astro-cid-wpvy4v7s] {
    flex: none;
  }

  .nav-logo[data-astro-cid-wpvy4v7s] img[data-astro-cid-wpvy4v7s] {
    height: 40px;
  }

  .nav-liens[data-astro-cid-wpvy4v7s] {
    gap: 0;
    flex-wrap: nowrap;
  }

  .nav-lien[data-astro-cid-wpvy4v7s] {
    padding: var(--s-2) var(--s-2);
    font-size: var(--petit-size);
    white-space: nowrap;
  }

  .nav-flottante[data-astro-cid-wpvy4v7s] .oep {
    flex: none;
  }

  .nav-flottante[data-astro-cid-wpvy4v7s] .oep-bouton {
    white-space: nowrap;
  }
}

.nav-case[data-astro-cid-wpvy4v7s] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-burger[data-astro-cid-wpvy4v7s] {
  display: none;
}

@media (width <= 1023px) {
  .nav-barre[data-astro-cid-wpvy4v7s] {
    position: sticky;
    top: 0;
    z-index: 40;
  }

  .nav-flottante[data-astro-cid-wpvy4v7s] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-4);
  }

  .nav-logo[data-astro-cid-wpvy4v7s] {
    flex: none;
    grid-row: 1;
    grid-column: 1;
  }

  .nav-logo[data-astro-cid-wpvy4v7s] img[data-astro-cid-wpvy4v7s] {
    height: 40px;
    max-width: none;
  }

  .nav-burger[data-astro-cid-wpvy4v7s] {
    display: flex;
    grid-row: 1;
    grid-column: 3;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    margin: 0;
    cursor: pointer;
  }

  .nav-burger[data-astro-cid-wpvy4v7s] span[data-astro-cid-wpvy4v7s] {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--encre);
    border-radius: 2px;
    transition: transform var(--duree-survol) ease;
  }

  .nav-liens[data-astro-cid-wpvy4v7s] {
    display: none;
    position: absolute;
    top: calc(100% + var(--s-2));
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-3);
    background: var(--papier-clair);
    border-radius: var(--radius-nav);
    box-shadow: var(--ombre-nav);
    z-index: 20;
  }

  .nav-flottante[data-astro-cid-wpvy4v7s]:has(.nav-case:checked) .nav-liens[data-astro-cid-wpvy4v7s] {
    display: flex;
  }

  .nav-flottante[data-astro-cid-wpvy4v7s]:has(.nav-case:checked) .nav-burger[data-astro-cid-wpvy4v7s] span[data-astro-cid-wpvy4v7s]:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }

  .nav-flottante[data-astro-cid-wpvy4v7s]:has(.nav-case:checked) .nav-burger[data-astro-cid-wpvy4v7s] span[data-astro-cid-wpvy4v7s]:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  .nav-lien[data-astro-cid-wpvy4v7s] {
    padding: var(--s-3) var(--s-4);
  }

  .nav-flottante[data-astro-cid-wpvy4v7s] .oep {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
  }

  .nav-flottante[data-astro-cid-wpvy4v7s] .oep-bouton {
    white-space: nowrap;
  }
}

@media (width <= 640px) {
  .annonce[data-astro-cid-wpvy4v7s] {
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    text-align: center;
  }

  .annonce-cta[data-astro-cid-wpvy4v7s] {
    flex-basis: 100%;
    white-space: nowrap;
    font-size: 17px;
  }
}

.tete-bandeau[data-astro-cid-wpvy4v7s] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  background: var(--encre);
  color: var(--papier);
  font-size: var(--petit-size);
  font-weight: 500;
  line-height: var(--petit-lh);
  text-decoration: none;
  text-align: center;
}

.tete-bandeau-tag[data-astro-cid-wpvy4v7s] {
  flex: none;
  padding: 0 var(--s-2);
  border: var(--filet-epaisseur) solid color-mix(in srgb, var(--papier) 40%, transparent);
  border-radius: var(--radius-surlignage);
}

.tete-bandeau-texte[data-astro-cid-wpvy4v7s] {
  text-wrap: balance;
}

.tete-bandeau-fleche[data-astro-cid-wpvy4v7s] {
  flex: none;
  transition: transform var(--duree-survol) ease;
}

.tete-bandeau[data-astro-cid-wpvy4v7s]:hover .tete-bandeau-texte[data-astro-cid-wpvy4v7s] {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.tete-bandeau[data-astro-cid-wpvy4v7s]:hover .tete-bandeau-fleche[data-astro-cid-wpvy4v7s] {
  transform: translateX(var(--s-1));
}

.tete[data-astro-cid-wpvy4v7s] {
  position: relative;
  z-index: 40;
  background: var(--papier);
  border-bottom: var(--filet-epaisseur) solid var(--filet-net);
}

@media (width >= 768px) {
  .tete[data-astro-cid-wpvy4v7s] {
    position: sticky;
    top: 0;
  }
}

.tete-grille[data-astro-cid-wpvy4v7s] {
  display: flex;
  align-items: stretch;
  min-height: var(--tete-hauteur);
}

.tete-cellules[data-astro-cid-wpvy4v7s] {
  display: flex;
}

.tete-cellule[data-astro-cid-wpvy4v7s] {
  display: flex;
  align-items: center;
  padding: 0 var(--s-6);
  border-right: var(--filet-epaisseur) solid var(--filet-net);
  color: var(--encre);
  font-size: var(--petit-size);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--duree-survol) ease;
}

.tete-cellules[data-astro-cid-wpvy4v7s] .tete-cellule[data-astro-cid-wpvy4v7s]:hover {
  background: var(--papier-fonce);
}

.tete-cellule--logo[data-astro-cid-wpvy4v7s] img[data-astro-cid-wpvy4v7s] {
  display: block;
  height: var(--tete-logo);
  width: auto;
  mix-blend-mode: multiply;
}

.tete-cta-bloc[data-astro-cid-wpvy4v7s] {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding: 0 var(--s-8);
  background: var(--encre);
  color: var(--papier);
  font-size: var(--petit-size);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--duree-survol) ease;
}

.tete-cta-bloc[data-astro-cid-wpvy4v7s]:hover {
  background: var(--terre);
}

.tete-mobile[data-astro-cid-wpvy4v7s] {
  display: none;
}

@media (width <= 767px) {
  .tete-cellules[data-astro-cid-wpvy4v7s] {
    display: none;
  }

  .tete-mobile[data-astro-cid-wpvy4v7s] {
    display: flex;
    margin-left: auto;
    border-left: var(--filet-epaisseur) solid var(--filet-net);
  }

  .tete-mobile[data-astro-cid-wpvy4v7s] + .tete-cta-bloc[data-astro-cid-wpvy4v7s] {
    margin-left: 0;
  }

  .tete-cta-bloc[data-astro-cid-wpvy4v7s] {
    padding: 0 var(--s-5);
  }

  .tete-mobile-bouton[data-astro-cid-wpvy4v7s] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: var(--tete-hauteur);
    cursor: pointer;
    list-style: none;
  }

  .tete-mobile-bouton[data-astro-cid-wpvy4v7s]::-webkit-details-marker {
    display: none;
  }

  .tete-mobile-bouton[data-astro-cid-wpvy4v7s] span[data-astro-cid-wpvy4v7s] {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--encre);
    transition: transform var(--duree-survol) ease;
  }

  .tete-mobile[data-astro-cid-wpvy4v7s][open] .tete-mobile-bouton[data-astro-cid-wpvy4v7s] {
    background: var(--papier-fonce);
  }

  .tete-mobile[data-astro-cid-wpvy4v7s][open] .tete-mobile-bouton[data-astro-cid-wpvy4v7s] span[data-astro-cid-wpvy4v7s]:first-child {
    transform: translateY(3.75px) rotate(45deg);
  }

  .tete-mobile[data-astro-cid-wpvy4v7s][open] .tete-mobile-bouton[data-astro-cid-wpvy4v7s] span[data-astro-cid-wpvy4v7s]:last-child {
    transform: translateY(-3.75px) rotate(-45deg);
  }

  .tete-mobile-panneau[data-astro-cid-wpvy4v7s] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    background: var(--papier);
    border-top: var(--filet-epaisseur) solid var(--filet-net);
    border-bottom: var(--filet-epaisseur) solid var(--filet-net);
  }

  .tete-mobile-panneau[data-astro-cid-wpvy4v7s] a[data-astro-cid-wpvy4v7s] {
    padding: var(--s-4) var(--s-6);
    color: var(--encre);
    font-size: var(--corps-size);
    font-weight: 500;
    text-decoration: none;
  }

  .tete-mobile-panneau[data-astro-cid-wpvy4v7s] a[data-astro-cid-wpvy4v7s] + a[data-astro-cid-wpvy4v7s] {
    border-top: var(--filet-epaisseur) solid var(--filet-net);
  }

  .tete-mobile-panneau[data-astro-cid-wpvy4v7s] a[data-astro-cid-wpvy4v7s]:hover {
    background: var(--papier-fonce);
  }

  .tete-bandeau[data-astro-cid-wpvy4v7s] {
    gap: var(--s-2);
    padding: 6px var(--s-4);
    font-size: 12px;
  }

  .tete-bandeau-tag[data-astro-cid-wpvy4v7s] {
    padding: 0 6px;
  }
}
.pied[data-astro-cid-jo6i4kqk] {
  position: relative;
  margin-top: var(--section-gap);
  background: var(--encre);
  color: var(--papier);
  padding-block: var(--s-16) 0;
  clip-path: polygon(0 0, calc(100% - var(--encoche)) 0, 100% var(--encoche), 100% 100%, 0 100%);
}

.pied-grille[data-astro-cid-jo6i4kqk] {
  position: absolute;
  inset: 0 var(--grille-inset);
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--papier) 55%, transparent) 0 9px, transparent 9px 19px) left top / .72px 100% no-repeat,
      repeating-linear-gradient(to bottom, color-mix(in srgb, var(--papier) 55%, transparent) 0 9px, transparent 9px 19px) right top / .72px 100% no-repeat;
  pointer-events: none;
}

.pied-int[data-astro-cid-jo6i4kqk] {
  margin-inline: var(--grille-inset);
}

.pied-tableau[data-astro-cid-jo6i4kqk] {
  background-image: var(--tirets-h-clair), var(--tirets-h-clair);
  background-size: 100% .72px, 100% .72px;
  background-repeat: no-repeat;
  background-position: top, bottom;
}

.pied-rangee[data-astro-cid-jo6i4kqk] {
  display: grid;
}

.pied-rangee[data-astro-cid-jo6i4kqk] + .pied-rangee[data-astro-cid-jo6i4kqk] {
  background-image: var(--tirets-h-clair);
  background-size: 100% .72px;
  background-repeat: no-repeat;
  background-position: top;
}

.pied-contacts[data-astro-cid-jo6i4kqk] {
  grid-template-columns: 1fr 1fr 1fr;
}

.pied-basline[data-astro-cid-jo6i4kqk] {
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.pied-cellule[data-astro-cid-jo6i4kqk] {
  padding: var(--s-8);
}

.pied-cellule[data-astro-cid-jo6i4kqk] + .pied-cellule[data-astro-cid-jo6i4kqk] {
  background-image: var(--tirets-v-clair);
  background-size: .72px 100%;
  background-repeat: no-repeat;
  background-position: 0;
}

.pied-cellule-menu[data-astro-cid-jo6i4kqk] {
  display: flex;
  justify-content: flex-end;
}

.pied-titre[data-astro-cid-jo6i4kqk] {
  font-family: var(--font-main);
  font-size: var(--corps-size);
  font-weight: 700;
  line-height: var(--corps-lh);
  letter-spacing: var(--corps-ls);
  color: color-mix(in srgb, var(--papier) 60%, transparent);
  margin-bottom: var(--s-3);
}

.pied-profil[data-astro-cid-jo6i4kqk] {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  white-space: nowrap;
}

.pied-avatar[data-astro-cid-jo6i4kqk] {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.pied-profil-texte[data-astro-cid-jo6i4kqk] {
  display: flex;
  flex-direction: column;
}

.pied-profil-nom[data-astro-cid-jo6i4kqk] {
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

.pied-verif[data-astro-cid-jo6i4kqk] {
  width: 16px;
  height: 16px;
  flex: none;
}

.pied-profil-role[data-astro-cid-jo6i4kqk] {
  font-size: var(--petit-size);
  color: color-mix(in srgb, var(--papier) 60%, transparent);
}

.pied-copyright[data-astro-cid-jo6i4kqk] {
  color: color-mix(in srgb, var(--papier) 60%, transparent);
}

.pied-menu[data-astro-cid-jo6i4kqk] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}

.pied-lien[data-astro-cid-jo6i4kqk] {
  text-decoration: none;
  transition: color var(--duree-survol) ease;
}

.pied-lien[data-astro-cid-jo6i4kqk]:hover {
  color: color-mix(in srgb, var(--papier) 70%, transparent);
}

@media (width <= 767px) {
  .pied-contacts[data-astro-cid-jo6i4kqk], .pied-basline[data-astro-cid-jo6i4kqk] {
    grid-template-columns: 1fr;
  }

  .pied-cellule[data-astro-cid-jo6i4kqk] + .pied-cellule[data-astro-cid-jo6i4kqk] {
    background-image: var(--tirets-h-clair);
    background-size: 100% .72px;
    background-position: top;
  }

  .pied-cellule-menu[data-astro-cid-jo6i4kqk] {
    justify-content: flex-start;
  }
}

.pied[data-astro-cid-jo6i4kqk][data-premium] .pied-titre[data-astro-cid-jo6i4kqk] {
  font-size: var(--petit-size);
  font-weight: 500;
  line-height: var(--petit-lh);
  letter-spacing: 0;
  margin-bottom: var(--s-4);
}

.pied[data-astro-cid-jo6i4kqk][data-premium] .pied-contacts[data-astro-cid-jo6i4kqk] .pied-lien[data-astro-cid-jo6i4kqk] {
  font-size: var(--petit-size);
  line-height: var(--petit-lh);
}

.pied[data-astro-cid-jo6i4kqk][data-premium] .pied-profil-nom[data-astro-cid-jo6i4kqk] {
  font-size: var(--petit-size);
  font-weight: 500;
}

.pied[data-astro-cid-jo6i4kqk][data-premium] .pied-profil-role[data-astro-cid-jo6i4kqk], .pied[data-astro-cid-jo6i4kqk][data-premium] .pied-copyright[data-astro-cid-jo6i4kqk], .pied[data-astro-cid-jo6i4kqk][data-premium] .pied-menu[data-astro-cid-jo6i4kqk] .pied-lien[data-astro-cid-jo6i4kqk] {
  font-size: var(--petit-size);
  line-height: var(--petit-lh);
}
.flottant[data-astro-cid-tilgseai] {
  position: fixed;
  right: var(--s-6);
  bottom: var(--s-6);
  z-index: 50;
}

@media (width <= 767px) {
  .flottant[data-astro-cid-tilgseai] {
    display: none;
  }
}
/* Polices auto-hébergées — woff2, font-display: swap (contrainte BRIEF §2). */

/* Satoshi — la voix principale (Fontshare, licence FFL : public/fonts/FFL.txt) */

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Italique : réservée aux blocs de surlignage */

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Pangolin — la main (Google Fonts, OFL). Poids unique : 400. */

@font-face {
  font-family: 'Pangolin';
  src: url('/fonts/pangolin-latin.woff2') format('woff2');
  font-weight: 400;
  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: 'Pangolin';
  src: url('/fonts/pangolin-latin-ext.woff2') format('woff2');
  font-weight: 400;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Nanum Pen Script — la manuscrite façon 7shifts, adoptée le 04/09 (décision 156).
   Sous-ensemble latin de Google Fonts, auto-hébergé. Sans lettres accentuées : les textes en --font-script s'écrivent sans accent. */
@font-face {
  font-family: 'Nanum Pen Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/nanum-pen-script-latin.woff2') format('woff2');
  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;
}
/* TOKENS — source unique : docs/DESIGN.md. Jamais de valeur codée en dur dans les composants. */

:root {
  /* Couleurs */
  --papier:       #F8F2E8;
  --papier-clair: #FDFAF5;
  --papier-fonce: #ECE3D4; /* 29/09 : fond des pastilles ton sur ton (étiquettes de la page agence) */
  /* Nouveau branding, adopté le 02/10 (Thomas : « assombrir un peu le fond, sans être complètement comme Cult ») :
     à mi-chemin entre notre papier #F8F2E8 et celui de Cult #EDE8DC ; le papier foncé descend d'autant */
  --papier-premium: #F3EDE2;
  --papier-fonce-premium: #E7DECE;
  --blanc:        #FFFFFF;
  --encre:        #1C1A18; /* 30/09 (Thomas) : noir chaud sur tout le site, au lieu de #111111 */
  --pierre:       #5A564C;
  --filet:        #6E6A5E;
  --terre:        #AB3B16;
  --terre-fonce:  #8E3012;
  --terre-claire: #F0E2D6;
  --filet-sombre: #1F1F1F; /* séparations sur fond encre (footer) */

  /* Typographie — familles */
  --font-main: 'Satoshi', 'Inter', 'Manrope', 'DM Sans', system-ui, sans-serif;
  --font-hand: 'Nanum Pen Script', var(--font-main); /* 07/09 : Nanum remplace Pangolin partout ; sans lettres accentuées, les textes manuscrits s'écrivent sans accent */
  --font-script: 'Nanum Pen Script', var(--font-hand);
  /* TEST page agence (29/09, référence buildyourcult.co) : serif condensée pour les titres, Geist pour le texte.
     Hors charte (DESIGN.md : deux familles) tant que Thomas n'a pas tranché. */
  --font-serif-test: 'Libre Caslon Condensed', Georgia, serif; /* la police de Cult (OFL) */
  --font-geist-test: 'Geist', system-ui, sans-serif; /* adoptée le 04/09 : pas d'accents dans cette police, on écrit sans (« Methode », « decode ») */
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; /* 02/10 : le terminal de l'agent IA (Roadmap de l'accompagnement), police système, rien à charger */
  /* 02/10 (Thomas : « encore plus code, comme l'ancien design, avec les couleurs ») : les couleurs du terminal de
     l'agent IA (Roadmap de l'accompagnement), reprises de l'ancienne animation « AI Operating System » —
     reproduction d'une interface de code, comme les couleurs WhatsApp des témoignages */
  --code-fond: #1C1B18;
  --code-filet: #2E2D29;
  --code-texte: #D6D3CC;
  --code-discret: #7C7A73;
  --code-vert: #4ADE80;
  --code-ambre: #F5A524;
  --code-feu-rouge: #FF5F57;
  --code-feu-orange: #FEBC2E;
  --code-feu-vert: #28C840;

  /* Typographie — échelle */
  /* Échelle 7shifts (04/09) : Medium 500 partout, interlignage serré, tracking négatif dégressif */
  --display-size: 64px;    --display-lh: 0.95; --display-ls: -0.05em;
  --hero-titre-size: clamp(52px, 5vw, 64px); --hero-titre-lh: var(--display-lh); --hero-titre-ls: var(--display-ls); /* grosse typo comme le titre du blog, trois lignes dès 1025 px (10/09) */
  --titre-compact-size: 36px; --titre-compact-lh: 1.10; /* titre de section resserré (Preuve, 10/09) */
  --titre-size: 48px;      --titre-lh: 1.00;   --titre-ls: -0.03em;
  --titre-sm-size: 24px;   --titre-sm-lh: 1.33; --titre-sm-ls: -0.02em;
  --titre-md-size: 28px;   --titre-md-lh: 1.15; --titre-md-ls: -0.02em; /* 08/09 : 32 -> 28, Thomas trouvait les titres de cartes trop grands */ /* titre de la colonne des onglets (Roadmap 7shifts, 07/09) */
  --corps-lg-size: 18px;   --corps-lg-lh: 1.50; --corps-lg-ls: -0.01em;
  --corps-size: 16px;      --corps-lh: 1.50;   --corps-ls: -0.01em;
  --petit-size: 14px;      --petit-lh: 1.40;
  --label-size: 11px;      --label-lh: 1.20;   --label-ls: 0.06em;

  /* Pangolin — toujours 2px au-dessus de l'équivalent Satoshi */
  --hand-sous-titre-size: 30px; --hand-sous-titre-lh: 1.40;
  --hand-bouton-size: 20px;     --hand-bouton-lh: 1.20;
  --hand-trait-size: 30px;      --hand-trait-lh: 1.00;
  --script-size: 28px;          --script-lh: 1.00;   /* manuscrite, comme 7shifts */
  --surtitre-size: 25px;        /* les sur-titres à coins terre, une seule taille (10/09 : 28 trop gros, 22 trop petit) */
  --script-size-sm: 22px;       /* la manuscrite en ligne avec du texte courant (barre du haut, façon « New: » 7shifts) */
  /* lecture « article » des pages ressources (03/10, Thomas : « type blog, comme Medium, en reprenant notre DA ») :
     le texte courant en Geist 300 ; 20 px jugé « beaucoup trop gros » (Thomas, 03/10) : 16 px sur ordinateur, 14 px
     sur mobile. La colonne passe de 680 à 620 px pour garder ~75 caractères par ligne à 16 px */
  --lecture-size: 16px;         --lecture-lh: 1.65;
  --lecture-mesure: 620px;

  /* Espacement — base 4px */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px;  --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-25: 100px;

  --contenu-max: 1200px;
  --tete-logo: 40px; /* logo de l'en-tête des pages agence (01/10) */
  --tete-hauteur: calc(var(--tete-logo) + 2 * var(--s-4)); /* hauteur de cet en-tête, collé en haut au défilement */
  /* Filets pleins du nouveau branding (02/10, référence pravah.com) */
  --filet-epaisseur: 0.9px; /* 04/10 (Thomas) : toutes les bordures du site, boutons compris */
  --filet-net: color-mix(in srgb, var(--encre) 14%, transparent);
  --filet-net-fort: var(--filet-net); /* 04/10 (Thomas) : un seul filet, le plus fin et le plus effacé ; les cartes ne ressortent plus davantage */
  --filet-net-clair: color-mix(in srgb, var(--papier) 25%, transparent);
  --section-gap: var(--s-20);       /* 80px desktop */
  --carte-pad: var(--s-6);          /* 24px */
  --grille-inset: 72px;             /* verticales pointillées (48px + 50%, décision 30/08) */
  --encoche: var(--grille-inset);   /* l'encoche part exactement de la verticale pointillée */

  /* Rayons — 04/09 (Thomas) : arrondis façon 7shifts / Gemeos, fin du « carré partout » du 30/08 */
  --radius-carte:      20px;
  --radius-panneau:    20px;
  --radius-plaque:     40px;
  --radius-bouton:     9999px;
  --radius-bouton-studio: 10px; /* TEST page agence (30/09) : bouton rectangulaire à coins doux */
  --radius-etiquette:  9999px;
  --radius-champ:      12px;
  --radius-nav:        28px;
  --radius-surlignage: 6px;

  /* Filets — pointillés fins et discrets (décision du 30/08) */
  --filet-doux:   color-mix(in srgb, var(--filet) 45%, transparent);
  --filet-grille: color-mix(in srgb, var(--filet) 22%, transparent);

  /* Tirets — le même motif que les bords du site (décision 157) : 9 px, espacés de 10 px.
     À poser en background-image ; l'épaisseur se donne en background-size (0.72px). */
  --tirets-h: repeating-linear-gradient(to right, var(--filet-doux) 0 9px, transparent 9px 19px);
  --tirets-v: repeating-linear-gradient(to bottom, var(--filet-doux) 0 9px, transparent 9px 19px);
  --tirets-h-clair: repeating-linear-gradient(to right, color-mix(in srgb, var(--papier) 55%, transparent) 0 9px, transparent 9px 19px);
  --tirets-v-clair: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--papier) 55%, transparent) 0 9px, transparent 9px 19px);

  /* Ombre de la barre de navigation (exception validée, façon 7shifts) */
  --ombre-nav: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 20px rgba(0, 0, 0, 0.07);

  /* CTA façon Gemeos (décision du 30/08) : grosse bordure + ombre dure, effet pressé au survol.
     Ombres réduites de 50% le 30/08 (retour Thomas). */
  --bordure-cta: var(--filet-epaisseur) solid var(--encre);
  --ombre-dure: 2px 2px 0 var(--encre);
  --ombre-dure-basse: 1px 1px 0 var(--encre);
  /* Ombre grise des boutons (07/09, façon Gemeos) : même décalage, en gris */
  --ombre-grise: 3px 3px 0 color-mix(in srgb, var(--encre) 22%, transparent);
  --ombre-grise-basse: 1px 1px 0 color-mix(in srgb, var(--encre) 22%, transparent);
  --ombre-douce: 0 1px 2px rgba(0, 0, 0, 0.01), 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.06); /* la carte produit (décision 215), en token pour la ressource 50 templates */

  /* La case Clients du Flywheel s'allume en vert (décision 31/08) */
  --vert-boucle: #2E9E5B;

  /* La terre vive (08/09) : la terre éclaircie pour rester lisible sur fond encre. Uniquement sur bande sombre. */
  --terre-vive: #D8663D;
  /* Le surligneur citron (04/09) : abandonné le 08/09, gardé pour mémoire */
  --surligneur: #C6FF94;

  /* Marques tierces */
  --vert-whatsapp: #25D366;
  --bleu-verifie: #2E89F0;
  --bleu-linkedin: #0A66C2;

  /* Motion */
  --duree-apparition: 400ms;
  --duree-survol: 200ms;
  --duree-onglet: 250ms;
  --duree-trait: 500ms;
  --courbe: cubic-bezier(0.16, 1, 0.3, 1);
  --decalage-groupe: 60ms;
}

/* Tablette (769-1024 px) : le display à 64 px coupait le titre du hero en quatre lignes */
@media (max-width: 1024px) {
  :root {
    --display-size: 52px;
    --hero-titre-size: 48px;
    --titre-compact-size: 32px;
  }
}

@media (max-width: 767px) {
  :root {
    --display-size: 40px;
    --titre-size: 36px;      --titre-lh: 1.05; /* 07/09 : les h2 à 48 px débordaient en mobile */
    --hero-titre-size: 36px;
    --surtitre-size: 22px;
    --titre-compact-size: 28px;
    --titre-md-size: 28px;
    --hand-sous-titre-size: 22px;
    --lecture-size: 14px;
    --section-gap: 56px;
    --grille-inset: 20px;
  }
}

/* ==== Base ==== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative; /* ancre la grille pointillée de fond */
  background: var(--papier); /* jamais de blanc pur en fond de page */
  color: var(--encre);
  font-family: var(--font-main);
  font-size: var(--corps-size);
  line-height: var(--corps-lh);
  letter-spacing: var(--corps-ls);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; }

button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--terre);
  outline-offset: 2px;
}

/* ==== Rôles typographiques ==== */

.display {
  font-size: var(--display-size);
  font-weight: 500;
  line-height: var(--display-lh);
  letter-spacing: var(--display-ls);
}

.titre {
  font-size: var(--titre-size);
  font-weight: 500;
  line-height: var(--titre-lh);
  letter-spacing: var(--titre-ls);
}

.titre-sm {
  font-size: var(--titre-sm-size);
  font-weight: 500;
  line-height: var(--titre-sm-lh);
  letter-spacing: var(--titre-sm-ls);
}

.corps-lg {
  font-size: var(--corps-lg-size);
  line-height: var(--corps-lg-lh);
  letter-spacing: var(--corps-lg-ls);
}

.petit {
  font-size: var(--petit-size);
  line-height: var(--petit-lh);
  letter-spacing: 0;
}

.label {
  font-size: var(--label-size);
  font-weight: 700;
  line-height: var(--label-lh);
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
  color: var(--pierre);
}

.sous-titre {
  font-family: var(--font-hand);
  font-size: var(--hand-sous-titre-size);
  font-weight: 400;
  line-height: var(--hand-sous-titre-lh);
  letter-spacing: 0; /* jamais de tracking négatif sur Pangolin */
}

.texte-secondaire { color: var(--pierre); }

/* ==== Boutons — Pangolin 17px, en pilule (04/09), grosse bordure ; plus d'ombre (Thomas, 29/09 : plus premium) ==== */

.bouton-principal,
.bouton-sombre,
.bouton-fantome {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: var(--hand-bouton-size);
  line-height: var(--hand-bouton-lh);
  letter-spacing: 0;
  border-radius: var(--radius-bouton);
  border: var(--bordure-cta);
  text-decoration: none;
  transition:
    background-color var(--duree-survol) ease,
    border-color var(--duree-survol) ease,
    color var(--duree-survol) ease;
}

.bouton-principal {
  background: var(--terre);
  color: var(--papier);
  padding: 12px 24px;
}
.bouton-principal:hover { background: var(--terre-fonce); }

.bouton-sombre {
  background: var(--encre);
  color: var(--papier);
  padding: 10px 20px;
}

.bouton-fantome {
  background: var(--papier-clair);
  color: var(--encre);
  padding: 10px 20px;
}
.sur-sombre .bouton-fantome {
  background: transparent;
  color: var(--papier);
}

/* Sur fond sombre, la bordure passe en papier (l'encre y est invisible) — 29/09 */
.sur-sombre .bouton-principal,
.sur-sombre .bouton-fantome {
  border-color: var(--papier);
}

/* ==== Structure de page ==== */

.contenu {
  max-width: var(--contenu-max);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

/* 07/09 : entre 769 px et 1344 px, le contenu débordait des verticales pointillées (72 px) ;
   le retrait du conteneur suit désormais la grille, plus 24 px. Au-delà, rien ne change. */
@media (min-width: 768px) {
  .contenu { padding-inline: calc(var(--grille-inset) + var(--s-6)); }
}

/* Mobile (jusqu'à 767 px) : les verticales sont à 20 px, le contenu à 32 px, 12 px d'air entre les deux
   (08/09 : cartes et plaques touchaient presque les traits entre 641 et 767 px). */
@media (max-width: 767px) {
  .contenu { padding-inline: calc(var(--grille-inset) + var(--s-3)); }
}

/* La grille pointillée de fond — signature structurelle.
   Décision du 30/08 : uniquement les deux verticales latérales, fines et discrètes. */
.grille-fond {
  position: absolute;
  inset: 0 var(--grille-inset);
  /* 04/09 (Thomas) : traits latéraux plus larges — tirets de 9 px espacés de 10 px, 0,72 px d'épaisseur (fins, comme Gemeos) */
  background:
    repeating-linear-gradient(to bottom, var(--filet-doux) 0 9px, transparent 9px 19px) left top / 0.72px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--filet-doux) 0 9px, transparent 9px 19px) right top / 0.72px 100% no-repeat;
  pointer-events: none;
  z-index: 0;
}

.page-corps {
  position: relative;
  z-index: 1;
}

/* ==== Cartes ==== */

.carte {
  background: var(--papier-clair);
  border: var(--filet-epaisseur) dotted var(--filet-doux);
  border-radius: var(--radius-carte);
  padding: var(--carte-pad);
  transition: border-color var(--duree-survol) ease;
}
.carte:hover { border-color: var(--encre); } /* survol : la bordure seule change */

.carte-titre {
  font-size: var(--corps-lg-size);
  font-weight: 500;
  line-height: var(--corps-lg-lh);
  letter-spacing: var(--corps-lg-ls);
  color: var(--encre);
  margin-bottom: var(--s-3);
}

.carte-texte { color: var(--pierre); }

.carte-sombre {
  background: var(--encre);
  border: none;
  border-radius: var(--radius-carte);
  padding: var(--carte-pad);
  color: var(--papier);
}
.carte-sombre .carte-titre { color: var(--papier); }
.carte-sombre .carte-texte { color: color-mix(in srgb, var(--papier) 60%, transparent); }

/* Carte produit — le seul endroit du site où une ombre est autorisée. */
.carte-produit {
  background: var(--blanc);
  border-radius: var(--radius-carte);
  padding: var(--carte-pad);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.01),
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.06);
}

/* ==== Paire d'opposition — claire (ce qui ne marche pas) / sombre (ce qu'on construit) ==== */

.paire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: stretch;
}

@media (max-width: 767px) {
  .paire { grid-template-columns: 1fr; } /* les paires s'empilent */
}

.paire-liste {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.paire-item {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  color: var(--pierre);
}
.carte-sombre .paire-item { color: color-mix(in srgb, var(--papier) 60%, transparent); }

.paire-rond {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-bouton);
  background: var(--encre);
  color: var(--papier);
  font-size: 10px;
  line-height: 1;
  transform: translateY(3px);
}
.carte-sombre .paire-rond {
  background: var(--papier);
  color: var(--encre);
}

/* ==== Bloc de surlignage — italique autorisée ici et nulle part ailleurs ==== */

.surlignage {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-surlignage);
  font-style: italic;
  color: var(--papier);
}
.surlignage--encre { background: var(--encre); }
.surlignage--terre { background: var(--terre); }

/* ==== Étiquette — pilule fantôme des étapes de processus ==== */

.etiquette {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  border: var(--filet-epaisseur) dotted var(--filet-doux);
  border-radius: var(--radius-etiquette);
  font-size: 12px;
  line-height: var(--petit-lh);
  color: var(--pierre);
}

/* La fin des titres en question, en terre (10/09) */
.mot-terre { color: var(--terre); }

/* ==== Encadré viseur — deux coins terre, haut-gauche et bas-droite
   (décision 01/09, remplace les quatre coins du 31/08) ==== */

.encadre-viseur {
  display: inline-block;
  padding: 8px 16px;
  background:
    linear-gradient(var(--terre), var(--terre)) top left / 10px 1.5px,
    linear-gradient(var(--terre), var(--terre)) top left / 1.5px 10px,
    linear-gradient(var(--terre), var(--terre)) bottom right / 10px 1.5px,
    linear-gradient(var(--terre), var(--terre)) bottom right / 1.5px 10px;
  background-repeat: no-repeat;
}

/* ==== Champ ==== */

.champ {
  padding: 10px 16px;
  background: var(--papier-clair);
  border: var(--filet-epaisseur) dotted var(--filet-doux);
  border-radius: var(--radius-champ);
  color: var(--encre);
  font: inherit;
}
.champ::placeholder { color: var(--pierre); font-size: 13px; }

/* ==== Bande sombre — séparateur fort, rayon sur le bord qui entre dans la suite ==== */

.bande-sombre {
  background: var(--encre);
  color: var(--papier);
  border-radius: 0 0 var(--radius-plaque) var(--radius-plaque);
  padding-block: var(--s-16);
}
.bande-sombre--haut { border-radius: var(--radius-plaque) var(--radius-plaque) 0 0; }

/* ==== Accordéon FAQ ==== */

.faq-categorie { margin-bottom: var(--s-8); }
.faq-categorie > .label { margin-bottom: var(--s-4); }

.faq-item {
  background-image: var(--tirets-h);
  background-size: 100% 0.72px;
  background-repeat: no-repeat;
  background-position: bottom;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--corps-lg-size);
  font-weight: 500;
  letter-spacing: var(--corps-lg-ls);
}
.faq-question::-webkit-details-marker { display: none; }

.faq-chevron {
  flex: none;
  transition: transform var(--duree-survol) ease;
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-reponse {
  color: var(--pierre);
  padding-bottom: var(--s-5);
  max-width: 70ch;
}

/* ==== Motion ==== */

/* Flywheel : animation native du schéma (décision 31/08, remplace la vidéo Higgsfield).
   Un point terre parcourt les lignes (animateMotion 15s, vitesse constante) ; chaque
   carte s'allume en terre plat quand il la traverse puis s'éteint — Clients en vert.
   Les délais ci-dessous suivent la position du point sur le tracé (2773 unités / 15s).
   Keyframes ici : scopés dans le composant Astro, ils ne s'appliquent pas. */

.roue-carte rect,
.roue-carte text,
.roue-carte .roue-icone {
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-delay: var(--roue-delai, 0s);
}
.roue-carte rect { animation-name: roue-fond; }
.roue-carte text { animation-name: roue-texte; }
.roue-carte .roue-icone { animation-name: roue-icone; }
.roue-carte--7 rect { animation-name: roue-fond-vert; }

.roue-carte--1 { --roue-delai: -0.4s; }
.roue-carte--2 { --roue-delai: 1.6s; }
.roue-carte--3 { --roue-delai: 2.5s; }
.roue-carte--4 { --roue-delai: 3.7s; }
.roue-carte--5 { --roue-delai: 7.2s; }
.roue-carte--6 { --roue-delai: 8.15s; }
.roue-carte--7 { --roue-delai: 9.3s; }

@keyframes roue-fond {
  0%, 100%  { fill: var(--papier-clair); stroke: var(--filet-doux); }
  1.5%, 13% { fill: var(--terre);        stroke: var(--terre); }
  16%       { fill: var(--papier-clair); stroke: var(--filet-doux); }
}
@keyframes roue-fond-vert {
  0%, 100%  { fill: var(--papier-clair); stroke: var(--filet-doux); }
  1.5%, 13% { fill: var(--vert-boucle);  stroke: var(--vert-boucle); }
  16%       { fill: var(--papier-clair); stroke: var(--filet-doux); }
}
@keyframes roue-texte {
  0%, 100%  { fill: var(--encre); }
  1.5%, 13% { fill: var(--papier); }
  16%       { fill: var(--encre); }
}
@keyframes roue-icone {
  0%, 100%  { stroke: var(--terre); }
  1.5%, 13% { stroke: var(--papier); }
  16%       { stroke: var(--terre); }
}

/* Roadmap : la ligne de chaque phase se remplit à l'entrée dans le viewport
   (scroll-driven, Chrome/Edge/Safari récents) — statique là où c'est non supporté. */
@supports (animation-timeline: view()) {
  .rm-ligne-plein {
    animation: rm-remplir 1ms linear both;
    animation-timeline: view();
    animation-range: entry 30% entry 95%;
  }
}
@keyframes rm-remplir {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Roadmap : la barre de chargement de la phase active (7s avant l'onglet suivant). */
@keyframes rm-timer {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Le point : fond en opacité à la fin du tour (le retour se termine dans
   Personal Brand) et réapparaît sur les Fondations au tour suivant. */
.roue-point { animation: roue-point-fondu 12s linear infinite; }
@keyframes roue-point-fondu {
  0%        { opacity: 0; }
  2%, 94%   { opacity: 1; }
  97%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .roue-point { display: none; }
}

/* Témoignage : la forme d'onde du vocal se lève une fois à l'arrivée de la bulle, et la capture d'origine s'ouvre
   en fondu (keyframes globaux — scopés dans le composant, ils ne s'appliquent pas). */
@keyframes tm-onde {
  from { transform: scaleY(0.45); }
  to   { transform: scaleY(1); }
}
@keyframes tm-vraie-ouvre { from { opacity: 0; transform: translateY(var(--s-2)); } }
@keyframes tm-fondu { from { opacity: 0; } }

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

/* La pompe (La Différence) : les carburants s'envolent du bouton — keyframes globales, un @keyframes scoped ne s'applique pas */
@keyframes ld-carburant {
  0%   { opacity: 0; transform: translate(0, 0); }
  14%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(96px, -78px); }
}

/* La carte Founder-Led (La Différence) : les pointillés du retour circulent — la roue tourne en continu */
@keyframes ld-flux {
  to { stroke-dashoffset: -5.1; }
}

/* La carte Founder-Led (La Différence) : le cycle boucle — la ligne se remplit en accélérant
   (70 % du cycle), tient, repart de zéro ; les points et la note de Lead suivent */
@keyframes ld-boucle-cycle {
  0%    { transform: scaleY(0); animation-timing-function: linear(0, 0.2 40%, 0.4 60%, 0.6 75%, 0.8 88%, 1); }
  70%   { transform: scaleY(1); }
  90%   { transform: scaleY(1); }
  90.5% { transform: scaleY(0); }
  100%  { transform: scaleY(0); }
}
@keyframes ld-pt-1 { 0%, 90% { background: var(--vert-boucle); border-color: var(--vert-boucle); } 90.5%, 100% { background: var(--papier-clair); border-color: var(--pierre); } }
@keyframes ld-pt-2 { 0%, 23.3% { background: var(--papier-clair); border-color: var(--pierre); } 23.7%, 90% { background: var(--vert-boucle); border-color: var(--vert-boucle); } 90.5%, 100% { background: var(--papier-clair); border-color: var(--pierre); } }
@keyframes ld-pt-3 { 0%, 37.3% { background: var(--papier-clair); border-color: var(--pierre); } 37.699999999999996%, 90% { background: var(--vert-boucle); border-color: var(--vert-boucle); } 90.5%, 100% { background: var(--papier-clair); border-color: var(--pierre); } }
@keyframes ld-pt-4 { 0%, 47.25% { background: var(--papier-clair); border-color: var(--pierre); } 47.65%, 90% { background: var(--vert-boucle); border-color: var(--vert-boucle); } 90.5%, 100% { background: var(--papier-clair); border-color: var(--pierre); } }
@keyframes ld-pt-5 { 0%, 55.6% { background: var(--papier-clair); border-color: var(--pierre); } 56.0%, 90% { background: var(--vert-boucle); border-color: var(--vert-boucle); } 90.5%, 100% { background: var(--papier-clair); border-color: var(--pierre); } }
@keyframes ld-pt-6 { 0%, 63% { background: var(--papier-clair); border-color: var(--pierre); } 63.4%, 90% { background: var(--vert-boucle); border-color: var(--vert-boucle); } 90.5%, 100% { background: var(--papier-clair); border-color: var(--pierre); } }
@keyframes ld-pt-7 { 0%, 70% { background: var(--papier-clair); border-color: var(--pierre); } 70.4%, 90% { background: var(--vert-boucle); border-color: var(--vert-boucle); } 90.5%, 100% { background: var(--papier-clair); border-color: var(--pierre); } }

@keyframes ld-main-cycle {
  0%, 47%   { opacity: 0; }
  49%, 90%  { opacity: 1; }
  91%, 100% { opacity: 0; }
}

/* ==== Passe finale (décision 192) ==== */

/* Le lien « Aller au contenu » : invisible, sauf au clavier */
.saut-contenu {
  position: absolute;
  left: var(--s-4);
  top: calc(-1 * var(--s-20));
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--encre);
  color: var(--papier);
  border-radius: var(--radius-bouton);
  text-decoration: none;
  font-size: var(--petit-size);
}
.saut-contenu:focus-visible { top: var(--s-4); }

/* Réduire les animations : les vidéos en boucle laissent la place à leur affiche */
@media (prefers-reduced-motion: reduce) {
  video[autoplay] { display: none; }
  .affiche-fixe { display: block !important; }
}

/* ==== Pages de cadre : mentions légales, confidentialité (décision 195) ==== */
.legal { padding-block: var(--s-12) var(--s-16); }
.lg-int { max-width: 760px; }
.lg-manuscrit { font-family: var(--font-hand); font-size: var(--script-size-sm); line-height: 1.2; margin-bottom: var(--s-5); }
.lg-sous { margin-top: var(--s-5); max-width: 52ch; }
.lg-bloc { margin-top: var(--s-10); padding-top: var(--s-8); background: var(--tirets-h) left top / 100% 0.72px no-repeat; }
.lg-h2 { font-size: var(--titre-md-size); font-weight: 500; line-height: var(--titre-md-lh); letter-spacing: var(--titre-md-ls); margin-bottom: var(--s-4); }
.lg-h3 { font-size: var(--corps-lg-size); font-weight: 700; letter-spacing: var(--corps-lg-ls); margin: var(--s-6) 0 var(--s-2); }
.lg-bloc p { margin-bottom: var(--s-4); color: var(--pierre); }
.lg-bloc p:last-child { margin-bottom: 0; }
.lg-bloc a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Pages légales en nouvelle DA (02/10) : étiquette en pastille, titre serif à la taille des titres de section,
   intertitres en Libre Caslon, texte Geist 300 ; filets pleins (jetons du nouveau branding) */
.legal.ag-cult .lg-pastille { margin-bottom: var(--s-4); }
.legal.ag-cult .titre { font-size: calc(var(--titre-size) * 1.25); }
.legal.ag-cult .lg-h2 { font-family: var(--font-serif-test); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; }
.legal.ag-cult .lg-h3 { font-weight: 500; letter-spacing: 0; }
@media (max-width: 767px) { .legal.ag-cult .titre { font-size: var(--titre-size); } }
.lg-bloc ul { margin: 0 0 var(--s-4); padding-left: var(--s-6); color: var(--pierre); }
.lg-bloc li { margin-bottom: var(--s-2); }
.lg-date { margin-top: var(--s-10); font-family: var(--font-hand); font-size: 18px; color: var(--pierre); }
/* ce qui reste à compléter, visible tant que ce n'est pas fait */
.a-completer { background: var(--terre-claire); color: var(--terre); padding: 0 4px; border-radius: 4px; font-weight: 500; }


/* Page agence — le manifeste se révèle mot à mot au scroll (29/09, structure buildyourcult.co).
   CSS pur (view timeline) ; sans prise en charge ou en mouvement réduit, le texte reste plein. */
@keyframes ag-mot { from { opacity: 0.14; } to { opacity: 1; } }
@keyframes ag-clignote { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes ag-halo { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(3); opacity: 0; } }
@keyframes ag-fond {
  0%, 18% { background-color: var(--papier); color: var(--encre); }
  30%, 72% { background-color: var(--encre); color: var(--papier-clair); }
  86%, 100% { background-color: var(--papier); color: var(--encre); }
}

/* TEST page agence (29/09) — polices auto-hébergées (Libre Caslon Condensed : OFL, via Fontsource ; Geist : OFL, via Google Fonts), chargées seulement si la page les utilise */
@font-face { font-family: 'Libre Caslon Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/libre-caslon-condensed-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Libre Caslon Condensed'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/libre-caslon-condensed-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Libre Caslon Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/libre-caslon-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Libre Caslon Condensed'; font-style: italic; font-weight: 500; font-display: swap; src: url('/fonts/libre-caslon-condensed-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/geist-latin.woff2') format('woff2'); } /* fichier variable : toute la plage de graisses (02/10) */

/* TEST page agence (29/09) : sur la page qui porte main.ag-cult, la manuscrite (Nanum) cède la place à Geist
   partout — boutons, étiquettes, bouton de la nav et bouton flottant compris. */
html:has(main.ag-cult) {
  --papier: var(--papier-premium); /* 02/10 : fond un cran plus sombre sur les pages du nouveau branding (adopté) */
  --papier-fonce: var(--papier-fonce-premium);
  --font-main: var(--font-geist-test); /* nav, bandeau et pied de page en Geist aussi */
  --font-hand: var(--font-geist-test);
  --font-script: var(--font-geist-test);
  /* 02/10 (Thomas, référence pravah.com) : coins carrés partout où passent ces jetons — boutons, pastilles,
     étiquettes, panneaux, photo, cartes — et filets pleins au lieu des tirets */
  --radius-bouton-studio: 0px;
  --radius-surlignage: 0px;
  --tirets-h: linear-gradient(var(--filet-net), var(--filet-net));
  --tirets-v: linear-gradient(var(--filet-net), var(--filet-net));
  --tirets-h-clair: linear-gradient(var(--filet-net-clair), var(--filet-net-clair));
  --tirets-v-clair: linear-gradient(var(--filet-net-clair), var(--filet-net-clair));
}
/* Nouveau branding, style du 02/10 : pas de bordures latérales (ni la grille de la page, ni celle du pied de page) ;
   ce qui restait en pointillés passe en trait plein ; texte courant en Geist 300 (combinaison vue sur parloa.com) */
html:has(main.ag-cult) :is(.grille-fond, .pied-grille) { display: none; }
html:has(main.ag-cult) :is(.etiquette, .carte, .champ) { border-style: solid; }
main.ag-cult { font-weight: 300; }
/* 02/10 : coins carrés aussi pour les plaques, cartes, champs et barres héritées de l'ancien branding
   (sections de l'accompagnement, formulaires) */
html:has(main.ag-cult) { --radius-plaque: 0px; --radius-carte: 0px; --radius-champ: 0px; --radius-nav: 0px; }
/* La typographie du nouveau branding, commune à toutes les pages (02/10 : sortie de la page agence pour servir
   aussi l'accompagnement) — titres en Libre Caslon un cran plus grands, emphase en italique, étiquettes en Geist */
.ag-cult .hero-titre { font-family: var(--font-serif-test); font-weight: 500; font-size: calc(var(--hero-titre-size) * 1.2); }
.ag-cult .hero-int .hero-titre { letter-spacing: -0.01em; line-height: 1.1; }
.ag-cult .titre { font-size: calc(var(--titre-size) * 1.25); }
.ag-cult .titre-sm { font-size: calc(var(--titre-sm-size) * 1.2); line-height: 1.15; }
.ag-cult :is(.mot-terre, .ag-italique) { font-style: italic; }
.ag-cult :is(.hero-manuscrit, .ag-manuscrit) {
  font-size: var(--petit-size);
  line-height: var(--petit-lh);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
@media (max-width: 767px) {
  .ag-cult :is(.titre, .hero-int .hero-titre) { font-size: var(--titre-size); }
}
/* 02/10 (Thomas) : sur le nouveau branding, les textes d'introduction passent de 18 à 16 px (Geist 300) — home,
   réservation agence, relance de l'agence, pages légales */
main.ag-cult .corps-lg { font-size: var(--corps-size); line-height: var(--corps-lh); }
/* pied de page : les filets horizontaux vont d'un bord à l'autre, le texte garde son alignement */
html:has(main.ag-cult) .pied-int { margin-inline: 0; }
/* le retrait supplémentaire des cellules de bord ne vaut que quand elles sont côte à côte (en mobile elles s'empilent :
   toutes gardent le même retrait, Thomas 02/10) */
@media (min-width: 768px) {
  html:has(main.ag-cult) .pied-cellule:first-child { padding-left: calc(var(--grille-inset) + var(--s-8)); }
  html:has(main.ag-cult) .pied-cellule:last-child { padding-right: calc(var(--grille-inset) + var(--s-8)); }
}
/* la carte de Lucas : à plat, filet au lieu de l'ombre ; « Clients » en Geist 300, 16 px */
main.ag-cult .tz-carte { box-shadow: none; border: var(--filet-epaisseur) solid var(--filet-net-fort); border-radius: var(--radius-bouton-studio); }
main.ag-cult .tz-pastille { border-radius: var(--radius-surlignage); }
main.ag-cult .tz-pastille { box-shadow: none; border: var(--filet-epaisseur) solid var(--filet-net); }
main.ag-cult .tz-clients-mot { font-family: var(--font-geist-test); font-weight: 300; font-size: var(--corps-size); }
html:has(main.ag-cult) :is(.bouton-principal, .bouton-fantome, .bouton-sombre, .oep-bouton) {
  font-weight: 500;
  font-size: var(--corps-size);
}

/* TEST page agence (30/09) — bouton « studio » : rectangle à coins doux (10 px).
   01/10 (Thomas : « le blanc des boutons est trop agressif ») : fond encre, texte papier ; au survol, fond et contour
   terre cuite, texte papier, et la flèche glisse. */
.bouton-studio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3) var(--s-5);
  border: var(--filet-epaisseur) solid var(--encre);
  border-radius: var(--radius-bouton-studio);
  background: var(--encre);
  color: var(--papier);
  font-family: var(--font-hand);
  font-size: var(--petit-size);
  font-weight: 500;
  line-height: var(--hand-bouton-lh);
  text-decoration: none;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  transition: color var(--duree-survol) ease, border-color var(--duree-survol) ease, background-color var(--duree-survol) ease;
}
.bouton-studio::-webkit-details-marker { display: none; }
.bouton-studio-fleche {
  display: inline-block;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(calc(-1 * var(--s-2)));
  transition: width var(--duree-trait) var(--courbe), margin var(--duree-trait) var(--courbe), opacity var(--duree-survol) ease, transform var(--duree-trait) var(--courbe);
}
.bouton-studio:hover,
.bouton-studio:focus-visible { background: var(--terre); border-color: var(--terre); color: var(--papier); }
.bouton-studio:hover .bouton-studio-fleche,
.bouton-studio:focus-visible .bouton-studio-fleche { width: 1em; margin-left: var(--s-2); opacity: 1; transform: none; }
/* la bulle « On échange ? » (OnEnParle.astro) : le bouton est un span, le lien transparent le recouvre —
   survol et focus se lisent donc sur l'enveloppe */
.oep-enveloppe:is(:hover, :has(:focus-visible)) > .bouton-studio { background: var(--terre); border-color: var(--terre); color: var(--papier); }
.oep-enveloppe:is(:hover, :has(:focus-visible)) .bouton-studio-fleche { width: 1em; margin-left: var(--s-2); opacity: 1; transform: none; }
.oep-enveloppe:has(:focus-visible) > .bouton-studio { outline: 2px solid var(--terre); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bouton-studio-fleche { transition: none; } }

/* Le trait manuscrit se dessine de gauche à droite (TraitManuscrit.astro, 30/09) */
@keyframes trait-trace { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ==== Nouveau branding (30/09) — base commune des pages en main.ag-cult
   (agence, réservation agence, home) : titres en Libre Caslon Condensed 500, étiquettes
   en pastille à point terre, bouton « studio » en version fond sombre. ==== */
.ag-cult :is(.display, .titre, .titre-sm) {
  font-family: var(--font-serif-test);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.ag-cult :is(.display, .titre) { line-height: 1.1; }

/* étiquettes en pastille ton sur ton + point terre (variante D, Thomas 29/09) — remplacent l'encadré viseur */
.ag-pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-surlignage); /* 30/09 : coins réduits comme le menu et les boutons (6 px à cette taille) */
  background: var(--papier-fonce);
  color: var(--encre);
}
.ag-point {
  flex: none;
  width: calc(var(--s-1) * 1.5);
  height: calc(var(--s-1) * 1.5);
  border-radius: var(--radius-etiquette);
  background: var(--terre);
}
.ag-pastille-precision { color: var(--pierre); font-weight: 400; }
/* les points des étiquettes clignotent, façon indicateur « en ligne » (Thomas, 29/09) */
.ag-point--vivant { position: relative; }
.ag-point--vivant::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--terre);
}
@media (prefers-reduced-motion: no-preference) {
  .ag-point--vivant { animation: ag-clignote 1.6s ease-in-out infinite; }
  .ag-point--vivant::after { animation: ag-halo 1.6s ease-out infinite; }
}
.ag-pastille { font-size: var(--petit-size); line-height: var(--petit-lh); font-weight: 500; }

/* bouton studio sur fond sombre : contour et texte papier ; au survol, rempli de terre comme ailleurs (01/10) */
.sur-sombre .bouton-studio { background: transparent; border-color: var(--papier); color: var(--papier); }
.sur-sombre .bouton-studio:hover,
.sur-sombre .bouton-studio:focus-visible { background: var(--terre); border-color: var(--terre); color: var(--papier); }

/* La bulle flottante « On échange ? » des pages agence (01/10, Thomas : « sur les fonds noirs, il doit passer beige »).
   Les zones sombres déclarent une timeline de défilement (manifeste, services, pied de page) ; tant que l'une d'elles
   passe sous la bulle (fixée à ~47 px du bas de l'écran), la bulle passe en papier, texte encre. Sans script : animations
   pilotées par le défilement. Sans prise en charge, la bulle reste noire. */
@property --sombre-manifeste { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --sombre-services { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --sombre-pied { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes bulle-allumee { from, to { --sombre-services: 1; } }
@keyframes bulle-pied { from, to { --sombre-pied: 1; } }
/* le fond du manifeste est sombre entre 30 et 72 % de son défilement (keyframes ag-fond) : bascule au milieu du
   fondu d'entrée ; à la sortie (10/10), dès que le bas du manifeste passe sous la bulle — vers 74 % pour une section
   de 260vh, quelle que soit la hauteur d'écran. À 79 %, la bulle restait beige sur le fond clair de la section suivante. */
@keyframes bulle-manifeste { 0%, 23.9% { --sombre-manifeste: 0; } 24%, 73.9% { --sombre-manifeste: 1; } 74%, 100% { --sombre-manifeste: 0; } }
@supports (animation-timeline: view()) {
  html:has(main.ag-cult) { timeline-scope: --ag-manifeste, --ag-services, --pied; }
  html:has(main.ag-cult) .ag-section--sombre { view-timeline-name: --ag-services; }
  html:has(main.ag-cult) .pied { view-timeline-name: --pied; }
  html:has(main.ag-cult) .flottant {
    animation: bulle-manifeste linear both, bulle-allumee linear none, bulle-pied linear none;
    animation-timeline: --ag-manifeste, --ag-services, --pied;
    /* services et pied : de « leur haut passe sous la bulle » à « leur bas passe sous la bulle » (la bulle est à ~48 px
       du bas de l'écran ; cover 100 % = bas de la zone en haut de l'écran) */
    animation-range: cover 0% cover 100%, cover var(--s-12) cover calc(100% - 100vh + var(--s-12)), cover var(--s-12) cover calc(100% - 100vh + var(--s-12));
  }
  html:has(main.ag-cult) .flottant .oep-enveloppe:not(:hover, :has(:focus-visible)) > .oep-studio {
    --sombre: max(var(--sombre-manifeste), var(--sombre-services), var(--sombre-pied));
    background: color-mix(in srgb, var(--papier) calc(var(--sombre) * 100%), var(--encre));
    border-color: color-mix(in srgb, var(--papier) calc(var(--sombre) * 100%), var(--encre));
    color: color-mix(in srgb, var(--encre) calc(var(--sombre) * 100%), var(--papier));
    /* 10/10 (Thomas : « quand on descend vite, ça marche pas ») : pas de fondu dans le temps sur ces couleurs. Elles
       changent avec le défilement ; en défilant vite, les fondus de 200 ms s'inversaient en cours de route et celui du
       texte restait bloqué sur l'encre — bulle noire sans texte. Sans fondu, la couleur ne dépend que de la position.
       Le fondu du survol reste (il vient de .bouton-studio, à l'entrée du survol). */
    transition: none;
  }
}

/* La carte du fondateur (Thomas, 10/10 : « le seul truc que je trouve bien », vu sur shft.design — « avec notre DA /
   typo et en un peu plus petit »). Deux blocs encre côte à côte, coins carrés : le portrait dans son cadre, puis le
   prénom et le nom sur deux lignes en Libre Caslon, le rôle en tout petit, et le bouton papier à point terre (le point
   des pastilles). Toute la carte est un lien vers la page de réservation. Fixée en bas à droite du premier écran, à la
   place de la bulle « On échange ? » : pilotée par le défilement du hero, elle s'efface quand il sort de l'écran et la
   bulle apparaît (à partir de 768 px ; en dessous, il n'y a pas de bulle). Sans prise en charge (Firefox) : pas de
   carte, la bulle reste comme avant. Composant : CarteFondateur.astro.
   Deux tailles, réglées par les variables ci-dessous : la carte complète, et le petit cadre (portrait, nom sur une
   ligne, « On échange ? ») quand la place manque — mobile et tablette, et jusqu'à 1259 px sur l'accompagnement
   (.cf--tardive), dont les trois chiffres vont plus loin à droite que les deux de l'agence. */
.cf {
  --cf-hauteur: calc(var(--s-12) * 3);
  --cf-marge: var(--s-6);
  --cf-cadre: calc(var(--s-1) * 1.5);
  --cf-infos-l: calc(var(--s-10) * 4);
  --cf-infos-pad: var(--s-4);
  --cf-infos-calage: space-between;
  --cf-nom-size: calc(var(--corps-size) * 1.25);
  --cf-nom-ligne: block; /* prénom et nom sur deux lignes */
  --cf-role: block;
  --cf-bouton-pad: var(--s-2) var(--s-3);
  --cf-bouton-calage: space-between;
  --cf-bouton-fond: var(--papier);
  --cf-bouton-texte: var(--encre);
  --cf-survol-fond: var(--terre);
  --cf-survol-texte: var(--papier);
  --cf-survol-point: var(--papier);
  position: fixed;
  right: var(--cf-marge);
  bottom: var(--cf-marge);
  z-index: 50;
  display: none;
  gap: var(--s-1);
  height: var(--cf-hauteur);
  color: var(--papier-clair);
  text-decoration: none;
}
/* le petit cadre : les mêmes variables, déclarées une fois par seuil */
@media (max-width: 1023px) {
  .cf {
    --cf-hauteur: calc(var(--s-12) + var(--s-2));
    --cf-marge: var(--s-4);
    --cf-cadre: var(--s-1);
    --cf-infos-l: auto;
    --cf-infos-pad: var(--s-2) var(--s-3);
    --cf-infos-calage: center;
    --cf-nom-size: var(--corps-size);
    --cf-nom-ligne: inline;
    --cf-role: none;
    --cf-bouton-pad: 0;
    --cf-bouton-calage: flex-start;
    --cf-bouton-fond: transparent;
    --cf-bouton-texte: currentColor;
    --cf-survol-fond: transparent;
    --cf-survol-texte: currentColor;
    --cf-survol-point: var(--terre);
  }
}
@media (max-width: 1259px) {
  .cf--tardive {
    --cf-hauteur: calc(var(--s-12) + var(--s-2));
    --cf-marge: var(--s-4);
    --cf-cadre: var(--s-1);
    --cf-infos-l: auto;
    --cf-infos-pad: var(--s-2) var(--s-3);
    --cf-infos-calage: center;
    --cf-nom-size: var(--corps-size);
    --cf-nom-ligne: inline;
    --cf-role: none;
    --cf-bouton-pad: 0;
    --cf-bouton-calage: flex-start;
    --cf-bouton-fond: transparent;
    --cf-bouton-texte: currentColor;
    --cf-survol-fond: transparent;
    --cf-survol-texte: currentColor;
    --cf-survol-point: var(--terre);
  }
}
.cf-photo {
  flex: none;
  width: calc(var(--cf-hauteur) * 0.78);
  padding: var(--cf-cadre);
  background: var(--encre);
}
.cf-photo img { width: 100%; height: 100%; object-fit: cover; }
.cf-infos {
  display: flex;
  flex-direction: column;
  justify-content: var(--cf-infos-calage);
  width: var(--cf-infos-l);
  padding: var(--cf-infos-pad);
  background: var(--encre);
}
.cf-nom {
  display: block;
  font-family: var(--font-serif-test);
  font-size: var(--cf-nom-size);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.cf-nom span { display: var(--cf-nom-ligne); }
.cf-role {
  display: var(--cf-role);
  margin-top: var(--s-1);
  font-size: var(--label-size);
  line-height: var(--petit-lh);
  font-weight: 400;
  opacity: 0.6; /* pas de color-mix : la carte est un lien, et Safari gère mal ces couleurs sur un lien visité */
}
.cf-bouton {
  display: flex;
  align-items: center;
  justify-content: var(--cf-bouton-calage);
  gap: var(--s-2);
  padding: var(--cf-bouton-pad);
  background: var(--cf-bouton-fond);
  color: var(--cf-bouton-texte);
  font-size: var(--petit-size);
  line-height: var(--petit-lh);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--duree-survol) ease, background-color var(--duree-survol) ease;
}
/* toute la carte est cliquable : son bouton réagit au survol de la carte, comme les moitiés de la home */
.cf:is(:hover, :focus-visible) .cf-bouton { background: var(--cf-survol-fond); color: var(--cf-survol-texte); }
.cf:is(:hover, :focus-visible) .ag-point,
.cf:is(:hover, :focus-visible) .ag-point::after { background: var(--cf-survol-point); }
@keyframes cf-sort { to { opacity: 0; visibility: hidden; transform: translateY(var(--s-3)); } }
@keyframes bulle-apres-hero { from { opacity: 0; visibility: hidden; } }
@supports (animation-timeline: view()) {
  html:has(main.ag-cult):has(.cf) { timeline-scope: --ag-manifeste, --ag-services, --pied, --ag-hero; }
  html:has(.cf) .hero { view-timeline-name: --ag-hero; }
  .cf {
    display: flex;
    animation: cf-sort linear both;
    animation-timeline: --ag-hero;
    animation-range: exit 0% exit 30%;
  }
  /* la bulle : ses trois animations de couleur (ci-dessus), plus son entrée quand la carte s'efface */
  html:has(main.ag-cult):has(.cf) .flottant {
    animation: bulle-manifeste linear both, bulle-allumee linear none, bulle-pied linear none, bulle-apres-hero linear both;
    animation-timeline: --ag-manifeste, --ag-services, --pied, --ag-hero;
    animation-range: cover 0% cover 100%, cover var(--s-12) cover calc(100% - 100vh + var(--s-12)), cover var(--s-12) cover calc(100% - 100vh + var(--s-12)), exit 20% exit 45%;
  }
}

/* ==== Composants partagés par l'agence et l'accompagnement (02/10 : sortis de agence-linkedin.astro pour servir
   aussi /accompagnement-linkedin) — en-têtes de section, chiffres sous le hero, Roadmap en cartes animées ==== */
.ag-section { padding-block: var(--section-gap); }
.ag-tete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding-bottom: var(--s-8);
  margin-bottom: var(--s-10);
  background: var(--tirets-h) left bottom / 100% 0.72px no-repeat;
}
.ag-cult .ag-hero-valeur { font-size: calc(var(--titre-size) * 1.25); }
/* Section sombre (services de l'agence, 30/09 ; méthode Founder-Led de l'accompagnement, 02/10) : conventions des fonds
   encre du site — texte secondaire à 60 % du papier, filets clairs ; la bulle « On échange ? » y passe en papier */
.ag-section--sombre { background: var(--encre); color: var(--papier-clair); }
.ag-section--sombre .ag-tete { background-image: var(--tirets-h-clair); }
.ag-section--sombre .ag-pastille { background: color-mix(in srgb, var(--papier) 10%, transparent); color: var(--papier-clair); }
.ag-section--sombre .texte-secondaire { color: color-mix(in srgb, var(--papier) 60%, transparent); }
/* les chiffres en Libre Caslon 400, comme le « +1.4M » de Cult (30/09) */
.ag-cult .ag-hero-valeur { font-family: var(--font-serif-test); font-weight: 400; letter-spacing: -0.01em; }
/* les trois chiffres sous le bouton, façon « +1.4M » de Cult (29/09) */
.ag-hero-chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 560px);
  margin: var(--s-16) 0 0;
  /* encadré de nos pointillés : un filet en haut, un en bas (29/09) */
  background:
    var(--tirets-h) left top / 100% 0.72px no-repeat,
    var(--tirets-h) left bottom / 100% 0.72px no-repeat;
}
.ag-hero-chiffre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-10) var(--s-6);
}
/* et une verticale pointillée entre les chiffres */
.ag-hero-chiffre + .ag-hero-chiffre { background: var(--tirets-v) left top / 0.72px 100% no-repeat; }
.ag-note-appel { font-size: 0.45em; vertical-align: super; margin-left: 0.05em; }
.ag-hero-legende { margin: 0; font-size: var(--petit-size); line-height: var(--petit-lh); color: var(--pierre); }
.ag-hero-note-lien { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--duree-survol) ease; }
.ag-hero-note-lien:hover { color: var(--terre); }
.ag-note { margin-top: var(--s-6); font-size: var(--petit-size); line-height: var(--petit-lh); color: var(--pierre); }
@media (max-width: 640px) {
  .ag-hero-chiffre { padding: var(--s-6) var(--s-2); }
  .ag-cult .ag-hero-valeur { font-size: var(--titre-size); }
}
/* la Roadmap en cartes à visuel en dégradé (design repris du test Parloa, 02/10) */
main.ag-cult .pv-intro { margin: 0; font-size: var(--corps-size); line-height: var(--corps-lh); }
.pv-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.pv-visuel { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1.05; border-radius: var(--radius-bouton-studio); overflow: hidden; }
/* 02/10 (Thomas : « terra cotta, pas orange ») : plus de terre vive ni de terre claire, seulement la terre, la terre foncée
   et le papier foncé */
.pv-visuel--1 { background: radial-gradient(120% 90% at 80% 10%, var(--terre-fonce) 0%, var(--terre) 50%, color-mix(in srgb, var(--terre) 45%, var(--papier-fonce)) 100%); }
.pv-visuel--2 { background: radial-gradient(120% 90% at 20% 0%, var(--papier-fonce) 0%, var(--terre-claire) 50%, var(--pierre) 130%); }
.pv-visuel--3 { background: radial-gradient(110% 90% at 70% 100%, var(--terre) 0%, var(--pierre) 60%, var(--encre) 100%); }
.pv-visuel--4 { background: radial-gradient(100% 80% at 50% 60%, var(--pierre) 0%, var(--encre) 75%); }
/* 02/10 : deux variantes de plus pour les six cartes de l'accompagnement (sable et terre, orientés autrement) */
.pv-visuel--5 { background: radial-gradient(120% 90% at 80% 100%, var(--papier-fonce) 0%, var(--terre-claire) 50%, var(--pierre) 130%); }
.pv-visuel--6 { background: radial-gradient(120% 90% at 20% 90%, var(--terre-fonce) 0%, var(--terre) 50%, color-mix(in srgb, var(--terre) 45%, var(--papier-fonce)) 100%); }
.pv-puce { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 86%; padding: var(--s-2) var(--s-3); border-radius: var(--radius-surlignage); background: var(--papier-clair); color: var(--encre); font-size: 11px; font-weight: 400; box-shadow: var(--ombre-douce); }
.pv-puce-point { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--terre); }
.pv-carte-nom { margin: var(--s-5) 0 var(--s-3); font-size: var(--corps-size); font-weight: 500; }
.pv-carte-texte { margin: 0; font-size: var(--corps-size); line-height: var(--corps-lh); color: var(--pierre); }
/* sur fond encre (Roadmap de l'accompagnement, 02/10) : texte à 60 % du papier, un filet clair autour des visuels sombres */
.ag-section--sombre .pv-carte-texte { color: color-mix(in srgb, var(--papier) 60%, transparent); }
.ag-section--sombre .pv-visuel { outline: var(--filet-epaisseur) solid var(--filet-net-clair); outline-offset: -1px; }
/* l'agent d'onboarding (carte 01) : fenêtre papier, en-tête, champ où la question s'écrit, bouton d'envoi */
/* 02/10 (Thomas : « les designs à l'intérieur de la même taille ») : les quatre fenêtres ont le même format,
   84 % de la largeur de la carte et un rapport fixe ; leur contenu se répartit dans la hauteur */
.pv-agent { display: flex; flex-direction: column; width: 84%; aspect-ratio: 1 / 0.86; overflow: hidden; background: var(--papier-clair); border-radius: var(--radius-bouton-studio); box-shadow: var(--ombre-douce); color: var(--encre); text-align: left; }
.pv-agent > .pv-agent-tete, .pv-agent > .pv-post-tete { flex: none; }
.pv-agent-tete { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3); border-bottom: var(--filet-epaisseur) solid var(--filet-net); font-size: 11px; font-weight: 400; } /* 02/10 : 12 → 11 px, plus fin */
.pv-agent-icone { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--papier-fonce); color: var(--terre); border-radius: var(--radius-surlignage); }
.pv-agent-champ { position: relative; flex: 1; margin: var(--s-3); padding: var(--s-2) var(--s-3) var(--s-6); border: var(--filet-epaisseur) solid var(--filet-net); }
.pv-agent-texte { margin: 0; font-size: 11px; line-height: 1.45; font-weight: 300; }
.pv-agent-curseur { display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: var(--terre); animation: pv-curseur 1s steps(1) infinite; }
.pv-agent-envoi { position: absolute; right: var(--s-2); bottom: var(--s-2); display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--encre); color: var(--papier-clair); font-size: 10px; }
@keyframes pv-curseur { 50% { opacity: 0; } }
/* la fiche de stratégie (carte 02) */
.pv-strat-lignes { flex: 1; display: flex; flex-direction: column; margin: 0; padding: var(--s-1) 0; list-style: none; }
.pv-strat-ligne { flex: 1; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); font-size: 11px; font-weight: 300; }
.pv-strat-ligne + .pv-strat-ligne { border-top: var(--filet-epaisseur) solid var(--filet-net); }
.pv-coche { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: var(--filet-epaisseur) solid var(--filet-net-fort); color: var(--papier-clair); transition: background-color 300ms ease, border-color 300ms ease; }
.pv-coche svg { opacity: 0; transform: scale(0.5); transition: opacity 250ms ease, transform 300ms var(--courbe); }
.pv-strategie.pv-vu .pv-coche { background: var(--terre); border-color: var(--terre); }
.pv-strategie.pv-vu .pv-coche svg { opacity: 1; transform: none; }
.pv-strategie.pv-vu .pv-strat-ligne:nth-child(1) :is(.pv-coche, .pv-coche svg) { transition-delay: 400ms; }
.pv-strategie.pv-vu .pv-strat-ligne:nth-child(2) :is(.pv-coche, .pv-coche svg) { transition-delay: 1000ms; }
.pv-strategie.pv-vu .pv-strat-ligne:nth-child(3) :is(.pv-coche, .pv-coche svg) { transition-delay: 1600ms; }
@media (prefers-reduced-motion: reduce) {
  .pv-strategie .pv-coche { background: var(--terre); border-color: var(--terre); transition: none; }
  .pv-strategie .pv-coche svg { opacity: 1; transform: none; transition: none; }
}
/* le post qui se publie (carte 03) : les lignes s'écrivent, puis le statut, « Publié » et les réactions apparaissent */
.pv-post-tete { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-bottom: var(--filet-epaisseur) solid var(--filet-net); }
.pv-avatar { flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--terre-claire) 0%, var(--terre) 70%); }
.pv-post-qui { display: flex; flex-direction: column; line-height: 1.25; }
.pv-post-nom { font-size: 11px; font-weight: 400; }
.pv-post-statut { font-size: 10px; color: var(--pierre); opacity: 0; transition: opacity 300ms ease 1600ms; }
.pv-post-corps { flex: 1; display: grid; align-content: center; gap: var(--s-2); padding: var(--s-3); }
.pv-ligne { display: block; height: 6px; background: color-mix(in srgb, var(--encre) 12%, transparent); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--courbe); }
.pv-ligne:nth-child(2) { width: 90%; transition-delay: 450ms; }
.pv-ligne:nth-child(3) { width: 58%; transition-delay: 900ms; }
.pv-post-pied { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) var(--s-3); border-top: var(--filet-epaisseur) solid var(--filet-net); }
.pv-reactions { display: flex; }
.pv-reactions span { width: 12px; height: 12px; border: var(--filet-epaisseur) solid var(--papier-clair); border-radius: 50%; background: var(--terre); transform: scale(0); transition: transform 350ms var(--courbe); }
.pv-reactions span + span { margin-left: -4px; }
.pv-reactions span:nth-child(1) { transition-delay: 2000ms; }
.pv-reactions span:nth-child(2) { background: var(--terre-fonce); transition-delay: 2200ms; }
.pv-reactions span:nth-child(3) { background: var(--pierre); transition-delay: 2400ms; }
.pv-publie { font-size: 10px; font-weight: 400; color: var(--terre); opacity: 0; transition: opacity 300ms ease 1400ms; }
.pv-post.pv-vu :is(.pv-ligne, .pv-reactions span) { transform: none; }
.pv-post.pv-vu :is(.pv-post-statut, .pv-publie) { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pv-post :is(.pv-ligne, .pv-reactions span) { transform: none; transition: none; }
  .pv-post :is(.pv-post-statut, .pv-publie) { opacity: 1; transition: none; }
}
/* l'agenda qui se remplit (carte 04) : trois créneaux « Rendez-vous qualifié » arrivent l'un après l'autre */
.pv-creneaux { flex: 1; display: flex; flex-direction: column; margin: 0; padding: var(--s-1) 0; list-style: none; }
.pv-creneau { flex: 1; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-1) var(--s-3); }
.pv-creneau + .pv-creneau { border-top: var(--filet-epaisseur) solid var(--filet-net); }
.pv-heure { flex: none; width: 30px; font-size: 10px; font-weight: 300; color: var(--pierre); font-variant-numeric: tabular-nums; }
.pv-libre { flex: 1; height: 1px; }
.pv-rdv {
  flex: 1;
  padding: 3px var(--s-2);
  border-left: var(--filet-epaisseur) solid var(--terre);
  background: color-mix(in srgb, var(--terre) 12%, transparent);
  font-size: 10px;
  font-weight: 400;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 350ms ease, transform 450ms var(--courbe);
}
.pv-creneau:nth-child(2) .pv-rdv { transition-delay: 400ms; }
.pv-creneau:nth-child(3) .pv-rdv { transition-delay: 1100ms; }
.pv-creneau:nth-child(4) .pv-rdv { transition-delay: 1800ms; }
.pv-agenda.pv-vu .pv-rdv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pv-agenda .pv-rdv { opacity: 1; transform: none; transition: none; } }
@media (prefers-reduced-motion: reduce) { .pv-agent-curseur { animation: none; } }

@media (max-width: 1024px) { .pv-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 640px) { .pv-cartes { grid-template-columns: 1fr; } }

/* ==== Ressources au nouveau branding (02/10, Thomas : « même header & footer, même type de titre, même texte ») ====
   Le formulaire d'inscription des pages ressources (/7-jours, fiches, 50 templates) : champ et bouton studio côte à
   côte, coins carrés, filet plein ; en mobile, l'un sous l'autre. La preuve sociale en dessous, en petit. */
.ag-optin { display: flex; width: 100%; max-width: 560px; margin-top: var(--s-8); }
.ag-optin-champ {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-3) var(--s-4);
  border: var(--filet-epaisseur) solid var(--filet-net-fort);
  border-right: 0;
  border-radius: 0;
  background: var(--papier-clair);
  color: var(--encre);
  font: inherit;
  font-size: var(--corps-size);
  font-weight: 400;
}
.ag-optin-champ::placeholder { color: var(--pierre); opacity: 0.7; font-size: 13px; }
.ag-optin-champ:focus-visible { outline: none; border-color: var(--encre); }
.ag-optin .bouton-studio { flex: none; padding-inline: var(--s-6); }
.ag-optin-preuve { margin: var(--s-4) 0 0; font-size: var(--petit-size); line-height: var(--petit-lh); color: var(--pierre); }
/* deux repères courts sous le sous-titre (« 7 emails, 7 étapes » | « 5 minutes par jour »), séparés par un filet */
.ag-reperes { display: flex; flex-wrap: wrap; justify-content: center; margin: var(--s-6) 0 0; padding: 0; list-style: none; font-size: var(--petit-size); font-weight: 500; }
.ag-reperes li { padding-inline: var(--s-4); }
.ag-reperes li + li { border-left: var(--filet-epaisseur) solid var(--filet-net-fort); }
@media (max-width: 767px) {
  .ag-optin { flex-direction: column; gap: var(--s-2); }
  .ag-optin-champ { border-right: var(--filet-epaisseur) solid var(--filet-net-fort); }
}
/* Les pages ressources (02/10, Thomas : « en dessous, le contenu bien structuré + FAQ pour les IA à chaque fois ») :
   FAQ en groupes (comme l'agence et l'accompagnement), sections séparées par un filet, relance centrée en bas */
main.ag-cult .faq-groupe + .faq-groupe { margin-top: var(--s-12); }
main.ag-cult .faq-groupe-titre { margin: 0 0 var(--s-2); font-family: var(--font-serif-test); font-size: var(--titre-md-size); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
main.ag-cult .faq-question:focus-visible { outline: none; text-decoration: underline; text-decoration-color: var(--terre); text-decoration-thickness: 1px; text-underline-offset: 5px; }
main.ag-cult .faq-reponse a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
main.ag-cult.ag-ressource > :is(section, article) + :is(section, article) { border-top: var(--filet-epaisseur) solid var(--filet-net); }
.ag-relance-optin { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* ==== Lecture « article » des pages ressources (Thomas, 03/10 : « quelque chose de simple, type blog, un peu comme
   Medium, mais en reprenant notre DA ; être dans l'informatif et bien lisible par les IA ») : une colonne centrée,
   intertitres en Libre Caslon, texte en Geist 300 à 20 px, FAQ dépliée (questions en intertitres, réponses en texte),
   ni carte, ni trait de pinceau dans le corps ; seule pastille : le « Jour N » des étapes ==== */
.ag-article { padding-block: var(--s-20) var(--s-25); }
.ag-article-col { max-width: var(--lecture-mesure); margin-inline: auto; font-size: var(--lecture-size); line-height: var(--lecture-lh); }
.ag-article-col p { margin: 0 0 var(--s-5); }
.ag-article-col a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--duree-survol) ease; }
.ag-article-col a:hover { color: var(--terre); }
.ag-article-col strong { font-weight: 500; } /* texte en Geist 300 : le gras par défaut (bolder = 400) se verrait à peine (03/10) */
.ag-article-h2 { margin: var(--s-20) 0 var(--s-5); font-family: var(--font-serif-test); font-size: var(--titre-compact-size); font-weight: 500; line-height: var(--titre-compact-lh); letter-spacing: -0.01em; text-wrap: balance; }
.ag-article-col > .ag-article-h2:first-child { margin-top: 0; }
/* un filet entre l'article et la FAQ (Thomas, 04/10), sur toutes les pages en lecture « article » */
.ag-article-col > .ag-article-h2#faq { margin-top: var(--s-16); padding-top: var(--s-16); border-top: var(--filet-epaisseur) solid var(--filet-net); }
.ag-article-chapo { color: var(--pierre); }
.ag-article-h3 { margin: var(--s-12) 0 var(--s-3); font-family: var(--font-serif-test); font-size: var(--titre-md-size); font-weight: 500; line-height: var(--titre-md-lh); letter-spacing: -0.01em; }
.ag-article-etapes { margin: 0; padding: 0; list-style: none; }
/* « Jour N » : un surtitre en Geist dans l'intertitre lui-même (03/10), en petite pastille ton sur ton (Thomas, 03/10) :
   le fond et les coins de .ag-pastille, plus serrée, avec le point terre (Thomas, 03/10 : « des petits points rouges »),
   fixe : huit points qui clignotent dans un texte à lire, c'est trop */
.ag-article-surtitre { display: flex; align-items: center; gap: var(--s-2); width: fit-content; margin-bottom: var(--s-2); padding: calc(var(--s-1) / 2) var(--s-2); border-radius: var(--radius-surlignage); background: var(--papier-fonce); font-family: var(--font-geist-test); font-size: var(--petit-size); line-height: var(--petit-lh); font-weight: 500; letter-spacing: 0; color: var(--encre); }
.ag-article-question { margin: var(--s-10) 0 var(--s-2); font-size: var(--lecture-size); font-weight: 500; line-height: 1.4; }
/* « Dans l'email : » puis la liste de ce que contient l'email (03/10 : « vendre le contenu de l'email ») */
.ag-article-col .ag-article-dans { margin-bottom: var(--s-2); font-weight: 500; }
.ag-article-liste { margin: 0 0 var(--s-5); padding-left: var(--s-5); list-style: disc; } /* puces pleines, même imbriquée dans la liste des jours */
.ag-article-liste li { margin-bottom: var(--s-1); padding-left: var(--s-1); }
.ag-article-liste li::marker { color: var(--pierre); }
.ag-relance-optin .titre { max-width: 24ch; text-wrap: balance; }
main.ag-cult .ag-relance-optin .pv-intro { margin-top: var(--s-8); } /* sous le trait de pinceau du titre */
/* le même air que le hero des ressources (Thomas, 03/10 : « rajoute encore un peu d'espace ») */
.ag-relance-optin .ag-pastille { margin-bottom: var(--s-6); }
.ag-relance-optin .ag-optin { margin-top: var(--s-10); }