/*
  Finitions « unslop » de tout le site (refonte du 31/10/2026), chargées en dernier sur chaque page.
  Méthode : unslop par Damir Sokolovsky (@heydamir), CC BY 4.0,
  https://github.com/heydamir/unslop

  Direction
  - Produit : un consultant de Rennes qui repense avec l'IA le travail d'un
    métier, pour des équipes de 3 à 50 personnes.
  - Caractère : posé, exact, un peu chaleureux.
  - Monde : Rennes, pans de bois et ardoise, dossiers papier, encre marine.
  - Moments : la photo de Rennes en tête d'accueil et les chiffres avant / après.
  - Signature : la note manuscrite « Né à Rennes. Partout en France. », seule
    trace d'écriture à la main sur le site.
*/

/* ---------- 1. Espacement : grille de 4 px, même chose, même taille ---------- */
.ep-tiles {
  gap: 16px;
}
.ep-tile {
  padding: 24px;
}
.ep-tile p {
  margin: 12px 0 16px;
  font-size: 15px;
  line-height: 1.5;
}
.client-proof-head {
  margin-bottom: 24px;
}
.utility-header,
.editorial-header {
  padding: 20px 28px;
}

/* ---------- 2. Couleur : une rampe marine, un accent, pas de halo ---------- */
:root {
  --us-ink: #0e2c53;
  --us-text-2: #46566b;
  --us-muted: #66768a;
  --us-hair: rgba(14, 44, 83, 0.1);
  --us-raised: #f5f7fa;
}
/* Fonds sombres pleins : plus de lueur radiale ni de dégradé de raccord. */
body.home-epure .ep-manifeste,
body.home-epure .ep-guide,
body.home-epure .ep-contact,
.ep-contact {
  background: var(--ep-night, #0b1a30);
}
/* Le surligneur ne reste que sur l'accroche. */
mark.hl-h {
  background-size: 100% 28% !important;
  animation: none !important;
  transition: none !important;
}
.ep-contact mark.hl-h,
#projet mark.hl-h {
  background: none;
  color: inherit;
}
/* Libellés et petits textes : couleur secondaire, plus de bleu vif. */
.ep-tile small,
.ep-shift-head,
.eyebrow {
  color: var(--us-muted);
}
/* Encadrés à grosse bordure gauche : une carte calme avec un filet. */
.oi-capacity,
.utility-copy .oi-capacity,
[class*='callout'],
.editorial-content blockquote,
.transformation-context,
.examples-note,
.examples-study,
.delivered-case,
.offer-questions,
.offer-case,
.study,
.hub-note,
.guide-brief {
  border: 1px solid var(--us-hair) !important;
  border-radius: 12px !important;
  background: var(--us-raised) !important;
}
/* Tuiles de preuve : surface relevée + filet, même famille que le reste. */
.ep-tile {
  background: var(--us-raised);
  border: 1px solid var(--us-hair);
  border-radius: 12px;
}

/* ---------- 5. Typographie : 600 au plus, casse normale, pas de manuscrit ---------- */
:root {
  --section-title-weight: 600;
}
h1,
h2,
h3,
.section-title,
.ep-title,
.ep-contact-title,
.client-proof h2,
.offer-hero h1,
.editorial-hero h1 {
  font-weight: 600 !important;
}
.ep-tile b {
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* Plus de capitales espacées. */
*:not(h1, h2, h3, h4) {
  text-transform: none !important;
}
.eyebrow,
.ep-shift-head,
.client-proof .eyebrow,
small,
.res-tags a,
[class*='label'],
[class*='kicker'] {
  letter-spacing: 0 !important;
}
.eyebrow,
.client-proof .eyebrow {
  font-size: 13px;
  font-weight: 500;
}
/* L'écriture manuscrite reste la signature de l'accueil, nulle part ailleurs. */
.offer-hero h1 em,
.offer-card-number,
.banner-handwriting,
body.home-v3 .founder-signature {
  font-family: Manrope, sans-serif !important;
  font-style: normal !important;
  transform: none !important;
}
.offer-card-number {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--us-muted);
  font-variant-numeric: tabular-nums;
}
.offer-hero h1 em {
  font-size: 1em;
  color: inherit;
}
em,
i {
  font-style: normal;
}
/* Gras d'interface : 600 au plus. */
.editorial-header .brand,
.utility-header .brand,
.editorial-header nav,
.client-logo-card figcaption,
.ep-text-link,
.button,
[class*='button'],
.book-link {
  font-weight: 600 !important;
}

/* ---------- 7. Détails : rayons cohérents ---------- */
.editorial-header .book-link,
.utility-header .book-link {
  border-radius: 8px;
}
.client-logo-card {
  border-radius: 12px;
}

/* ---------- 8. Visuels : plus d'objets 3D brillants générés ---------- */
img[src*='/assets/3d/'] {
  display: none !important;
}
.examples-hero {
  grid-template-columns: minmax(0, 1fr) !important;
}
.examples-hero::after {
  display: none !important;
}

/* ---------- 9. Mouvement : rien ne boucle sans raison ---------- */
.flow-spin,
.flow-cycle,
[class*='pulse'],
[class*='glow'] {
  animation: none !important;
}
.clients-marquee .clients-track {
  animation: none !important;
  transform: none !important;
  width: auto !important;
}
.clients-marquee [data-client-clone],
.clients-track > .clients-group ~ .clients-group {
  display: none !important;
}
.clients-viewport {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.clients-marquee .clients-track {
  display: block !important;
}
.clients-marquee .clients-group {
  flex: 1 1 auto !important;
  max-width: 1120px;
  margin-inline: auto !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  padding-right: 0 !important;
}
.client-proof-control {
  display: none;
}

/* ---------- Navigation commune aux pages utilitaires ---------- */
.utility-header.oi-header {
  max-width: 1240px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.oi-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--us-ink);
  text-decoration: none;
}
.oi-header .brand-symbol {
  width: 32px;
  height: 38px;
}
.oi-header nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  font-weight: 500;
}
.oi-header nav a {
  color: var(--us-ink);
  text-decoration: none;
}
.oi-header .book-link {
  padding: 10px 16px;
  border: 1px solid var(--us-hair);
}
@media (max-width: 560px) {
  .oi-header nav a:not(.book-link) {
    display: none;
  }
  .oi-header .book-link {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ---------- Mode sombre ---------- */
html.dark {
  --us-ink: #e3ebf6;
  --us-text-2: #b5c3d6;
  --us-muted: #8fa1b8;
  --us-hair: rgba(227, 235, 246, 0.1);
  --us-raised: #0f1d30;
}
html.dark .ep-tile {
  background: var(--us-raised);
}
html.dark .ep-tile small,
html.dark .eyebrow {
  color: var(--us-muted);
}

@media (max-width: 800px) {
  .clients-marquee .clients-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-inline: 20px !important;
  }
  .clients-marquee .clients-group > li {
    flex: none;
  }
  .clients-marquee .client-logo-card {
    width: 100%;
    min-height: 0;
    grid-template-rows: 56px auto;
  }
}