/* =========================================================================
   Charly Duguey Freelance — main.css v2.4.0
   Palette : blanc + bleu marine + jaune, style corporate / freelance premium
   ========================================================================= */

/* ==========================================================================
   CHANGELOG
   v3.4.0 (2026-08-10) — Passe craft motion (doctrine signature-web-design 08/2026).
   - Tokens easing partagés --cd-ease-out / --cd-ease-in-out ; plus aucun
     `ease` par défaut dans transitions et animations d'entrée.
   - Nav : liens du menu sans transition (élément vu à chaque page, on
     n'anime pas) ; chevron + panel megamenu conservés (feedback d'état).
   - Menu mobile : suppression de l'animation max-height (hors GPU) ;
     ouverture instantanée + fondu du contenu (opacity seule).
   - Hover à transform gatés : neutralisés sur écrans tactiles
     (@media hover:none / pointer:coarse), focus clavier conservé.
   v2.4.0 (2026-07-15) — Refonte des 6 sections restantes + CTA final, en
   cohérence avec le hero v2.3.1 "plaque signalétique".
   - Système commun : grammaire label-mono / valeur reprise de la plaque du
     hero, réutilisée dans les métriques de la réalisation phare, les
     opérations de la méthode et les coordonnées du formulaire.
   - Grilles en lattice à bordures partagées (services, FAQ) au lieu de
     cards individuelles à ombre.
   - Témoignages : suppression du slider JS, les 3 avis s'affichent d'un
     coup (moins de friction, plus de preuve visible).
   - CTA final : grille papier calque du hero reprise en miroir + repères
     d'angle jaunes, remplace le pattern de points radiaux générique.
   - Nouvelle classe partagée .cdlib-eyebrow (eyebrow mono + puce jaune),
     réutilisée dans les 6 sections pour la cohérence avec le hero.
   - Ajout d'un focus-visible manquant sur .cdlib-cta (accessibilité).
   Blocs remplacés : SERVICES GRID, FEATURED CASE, MÉTHODE HORIZONTALE,
   TESTIMONIALS, FAQ 2 COLS, CTA FINAL BLEU NUIT, FORMULAIRE CONTACT.
   Hors scope (inchangés) : HERO, TRUST BAR, ABOUT, Header Blocksy,
   Fallback sections héritées single-service.
   ========================================================================== */

:root {
  /* Couleurs — brief exact */
  --cd-blue:         #1448D8;   /* bleu vif principal */
  --cd-blue-hover:   #0F3AB5;
  --cd-blue-soft:    #EAF0FE;   /* fond icônes / halos */
  --cd-navy:         #071F49;   /* bleu nuit / CTA final / footer */
  --cd-navy-dark:    #050F2F;
  --cd-yellow:       #FFD000;   /* jaune CTA pur */
  --cd-yellow-hover: #E6BA00;
  --cd-ink:          #0B132B;   /* texte principal */
  --cd-muted:        #475569;   /* texte secondaire */
  --cd-line:         #E5EAF2;   /* bordures */
  --cd-white:        #FFFFFF;
  --cd-bg-soft:      #F5F7FA;
  --cd-bg-softer:    #FAFBFD;

  /* Typo */
  --cd-font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cd-fs-xs:  .875rem;
  --cd-fs-sm:  1rem;
  --cd-fs-md:  1.0625rem;
  --cd-fs-lg:  1.25rem;
  --cd-fs-xl:  1.75rem;
  --cd-fs-2xl: clamp(1.75rem, 3.5vw, 2.5rem);
  --cd-fs-3xl: clamp(2.25rem, 5vw, 3.5rem);

  /* Layout */
  --cd-container: 1240px;
  --cd-gutter: clamp(1.25rem, 3vw, 2.5rem);
  --cd-section-y: clamp(3.5rem, 7vw, 6rem);
  --cd-radius:  14px;
  --cd-radius-sm: 8px;
  --cd-shadow:  0 20px 45px -25px rgba(15, 34, 96, .18);
  --cd-shadow-lg: 0 30px 70px -30px rgba(15, 34, 96, .28);

  /* Easing partages (doctrine 08/2026) : jamais `ease` par defaut, jamais ease-in en entree */
  --cd-ease-out:    cubic-bezier(.16, 1, .3, 1);
  --cd-ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ============ Base ============ */
body {
  color: var(--cd-ink);
  font-family: var(--cd-font);
  font-size: var(--cd-fs-md);
  line-height: 1.55;
  background: var(--cd-white);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--cd-font);
  color: var(--cd-ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 1rem;
}
h1 { font-size: var(--cd-fs-3xl); font-weight: 800; }
h2 { font-size: var(--cd-fs-2xl); }
h3 { font-size: var(--cd-fs-lg); font-weight: 700; }
p  { margin: 0 0 1rem; color: var(--cd-muted); line-height: 1.65; }
a  { color: var(--cd-navy); text-decoration: none; }
a:hover { color: var(--cd-blue); }
img { max-width: 100%; height: auto; display: block; }

/* ============ Structure ============ */
.cdlib-container {
  width: 100%;
  max-width: var(--cd-container);
  margin-inline: auto;
  padding-inline: var(--cd-gutter);
}
.cdlib-section { padding-block: var(--cd-section-y); }
.cdlib-section__head {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 3rem;
  text-align: center;
}
.cdlib-section__head p { font-size: var(--cd-fs-md); color: var(--cd-muted); }

/* ============ CTA ============ */
.cdlib-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 1rem 1.6rem;
  border-radius: var(--cd-radius-sm);
  font-family: var(--cd-font);
  font-weight: 700;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform .15s var(--cd-ease-out), background .2s var(--cd-ease-out), color .2s var(--cd-ease-out), box-shadow .2s var(--cd-ease-out);
  border: 2px solid transparent;
  cursor: pointer;
  line-height: 1;
}
.cdlib-cta::after { content: "→"; font-size: 1.05em; }
.cdlib-cta:focus-visible {
  outline: 2px solid var(--cd-blue);
  outline-offset: 3px;
}
.cdlib-cta--primary {
  background: var(--cd-yellow);
  color: var(--cd-ink);
  box-shadow: 0 10px 24px -10px rgba(255, 208, 0, .55);
}
.cdlib-cta--primary:hover {
  background: var(--cd-yellow-hover);
  transform: translateY(-2px);
  color: var(--cd-ink);
  box-shadow: 0 14px 32px -10px rgba(255, 208, 0, .65);
}
.cdlib-cta--ghost { color: var(--cd-blue); border-color: var(--cd-blue); }
.cdlib-cta--ghost:hover { background: var(--cd-blue); color: var(--cd-white); border-color: var(--cd-blue); }
.cdlib-cta--ghost {
  background: transparent;
  color: var(--cd-navy);
  border-color: var(--cd-line);
}
.cdlib-cta--ghost:hover {
  border-color: var(--cd-navy);
  color: var(--cd-navy);
}
.cdlib-cta--dark {
  background: var(--cd-navy);
  color: var(--cd-white);
}
.cdlib-cta--dark:hover { background: var(--cd-navy-dark); color: var(--cd-white); }

/* ============ HERO ============ */
.cdlib-hero--home {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
  background: var(--cd-white);
  overflow: hidden;
}
.cdlib-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 900px) {
  .cdlib-hero__inner { grid-template-columns: 1.05fr 1fr; gap: 3.5rem; }
}
.cdlib-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  color: var(--cd-blue);
  font-weight: 700;
  margin: 0 0 1rem;
}
.cdlib-hero__title {
  color: var(--cd-ink);
  text-transform: none;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 .75rem;
  font-size: var(--cd-fs-3xl);
}
.cdlib-hero__title-highlight {
  display: block;
  color: var(--cd-blue);
}
.cdlib-hero__subtitle {
  color: var(--cd-muted);
  font-size: var(--cd-fs-md);
  font-weight: 400;
  line-height: 1.6;
  max-width: 540px;
  margin: 0 0 1.75rem;
  text-transform: none;
  letter-spacing: 0;
}
.cdlib-hero__badges {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 520px;
}
@media (min-width: 1100px) {
  .cdlib-hero__badges { grid-template-columns: repeat(4, 1fr); max-width: none; }
}
.cdlib-hero__badge {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .85rem;
  line-height: 1.25;
  color: var(--cd-ink);
}
.cdlib-hero__badge-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cd-blue-soft);
  color: var(--cd-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cdlib-hero__badge-icon svg { width: 16px; height: 16px; }
.cdlib-hero__badge strong { display: block; font-weight: 700; color: var(--cd-ink); }
.cdlib-hero__badge span { color: var(--cd-muted); }
.cdlib-hero__cta {
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.cdlib-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  color: var(--cd-muted);
}
.cdlib-hero__meta svg { width: 16px; height: 16px; color: var(--cd-blue); }

.cdlib-hero__media {
  position: relative;
  margin: 0;
}
.cdlib-hero__media::before,
.cdlib-hero__media::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.cdlib-hero__media::before {
  width: 120%; height: 120%;
  top: -10%; right: -30%;
  background: radial-gradient(circle, var(--cd-blue-soft) 0%, transparent 65%);
}
.cdlib-hero__media::after {
  width: 200px; height: 200px;
  bottom: 20%; right: 5%;
  background: radial-gradient(circle at 3px 3px, var(--cd-blue) 1px, transparent 0);
  background-size: 18px 18px;
  opacity: .25;
  border-radius: 0;
}
.cdlib-hero__media {
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
.cdlib-hero__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 15%;
  border-radius: var(--cd-radius);
  box-shadow: var(--cd-shadow);
}
@media (min-width: 900px) {
  .cdlib-hero__media { margin-right: 0; }
}

/* ============ SERVICES : "PLANCHE DE PIÈCES" ============ */
/* Grille en lattice (bordures partagées via gap coloré) : lecture "fiche
   catalogue", pas de card individuelle à ombre. Radius uniquement sur le
   panneau global, cellules internes à angles vifs — c'est un tableau. */
.cdlib-section--services { background: var(--cd-white); }

.cdlib-parts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--cd-line);
  border: 1px solid var(--cd-line);
  border-radius: var(--cdlib-hero-radius);
  overflow: hidden;
}
@media (min-width: 640px)  { .cdlib-parts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cdlib-parts { grid-template-columns: repeat(3, 1fr); } }

.cdlib-part { background: var(--cd-white); }
.cdlib-part__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--cdlib-hero-space-5) var(--cdlib-hero-space-5) var(--cdlib-hero-space-4);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--cdlib-hero-dur-fast) var(--cdlib-hero-ease);
}
.cdlib-part__link:hover,
.cdlib-part__link:focus-visible { background: var(--cd-bg-soft); }
.cdlib-part__link:focus-visible {
  outline: 2px solid var(--cd-blue);
  outline-offset: -2px;
}

.cdlib-part__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cdlib-hero-space-3);
  margin-bottom: var(--cdlib-hero-space-4);
}
.cdlib-part__icon {
  color: var(--cd-navy);
  display: inline-flex;
  transition: transform var(--cdlib-hero-dur-slow) var(--cdlib-hero-ease);
}
.cdlib-part__icon svg { width: 28px; height: 28px; stroke-width: 1.6; }
.cdlib-part__link:hover .cdlib-part__icon { transform: translateX(3px); }

.cdlib-part__ref {
  font-family: var(--cdlib-font-mono);
  font-size: var(--cdlib-hero-fs-xs);
  letter-spacing: .06em;
  color: var(--cd-muted);
  padding: .15rem .45rem;
  border-radius: 4px;
  transition: background-color var(--cdlib-hero-dur-fast) var(--cdlib-hero-ease),
              color var(--cdlib-hero-dur-fast) var(--cdlib-hero-ease);
  white-space: nowrap;
}
.cdlib-part__link:hover .cdlib-part__ref,
.cdlib-part__link:focus-visible .cdlib-part__ref {
  background: var(--cd-yellow);
  color: var(--cd-navy);
}

.cdlib-part__title {
  font-size: 1.125rem;
  margin: 0 0 .5rem;
  color: var(--cd-ink);
  line-height: 1.25;
}
.cdlib-part__title small { display: block; font-weight: 500; color: var(--cd-muted); font-size: .85rem; margin-top: .2rem; letter-spacing: 0; text-transform: none; }
.cdlib-part__desc {
  font-size: .9rem;
  color: var(--cd-muted);
  margin: 0 0 var(--cdlib-hero-space-4);
  line-height: 1.55;
  flex: 1;
}
.cdlib-part__more {
  margin-top: auto;
  font-family: var(--cd-font);
  color: var(--cd-navy);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.cdlib-part__more svg { transition: transform var(--cdlib-hero-dur-fast) var(--cdlib-hero-ease); }
.cdlib-part__link:hover .cdlib-part__more svg { transform: translateX(3px); }

/* ============ TRUST BAR ============ */
.cdlib-section--trust { background: var(--cd-white); padding-block: 3rem; }
.cdlib-trust__intro {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cd-ink);
  margin: 0 0 1.75rem;
}
.cdlib-logos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  align-items: center;
  justify-content: center;
}
.cdlib-logos img {
  max-height: 40px;
  width: auto;
  filter: grayscale(1);
  opacity: .72;
  transition: opacity .2s;
}
.cdlib-logos img:hover { opacity: 1; }

/* ============ RÉALISATION PHARE : "DOSSIER CLIENT" ============ */
.cdlib-section--featured {
  background: var(--cd-bg-soft);
}
.cdlib-featured__head {
  max-width: 760px;
  margin-bottom: var(--cdlib-hero-space-7);
}
.cdlib-featured__head h2 { margin: 0 0 var(--cdlib-hero-space-3); }
.cdlib-featured__intro {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--cd-ink);
  margin: 0;
}

.cdlib-featured {
  display: grid;
  gap: var(--cdlib-hero-space-7);
  align-items: start;
}
@media (min-width: 900px) { .cdlib-featured { grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); } }

.cdlib-featured__media {
  margin: 0;
  border: 1px solid var(--cd-line);
  border-radius: var(--cdlib-hero-radius);
  padding: var(--cdlib-hero-space-3);
  background: var(--cd-white);
}
.cdlib-featured__media img {
  border-radius: calc(var(--cdlib-hero-radius) - 3px);
  width: 100%;
  height: auto;
  display: block;
}

.cdlib-featured__data { display: flex; flex-direction: column; gap: var(--cdlib-hero-space-6); }

.cdlib-featured__metrics {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--cd-line);
}
.cdlib-featured__metric {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--cdlib-hero-space-4);
  padding-block: var(--cdlib-hero-space-4);
  border-bottom: 1px solid var(--cd-line);
}
.cdlib-featured__metric dt {
  margin: 0;
  font-family: var(--cdlib-font-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--cd-muted);
  line-height: 1.4;
}
.cdlib-featured__metric dd {
  margin: 0;
  font-family: var(--cdlib-font-mono);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--cd-navy);
  white-space: nowrap;
}

.cdlib-featured__quote {
  margin: 0;
  padding-left: var(--cdlib-hero-space-4);
  border-left: 2px solid var(--cd-yellow);
}
.cdlib-featured__quote blockquote {
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--cd-ink);
}
.cdlib-featured__quote figcaption {
  font-family: var(--cdlib-font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--cd-muted);
  text-transform: uppercase;
}
.cdlib-featured__quote figcaption span { display: block; text-transform: none; letter-spacing: 0; margin-top: 2px; }

/* ============ MÉTHODE : "ORDRE D'OPÉRATIONS" ============ */
.cdlib-section--method { background: var(--cd-white); }

.cdlib-ops {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
  margin-inline: auto;
  position: relative;
}
.cdlib-op {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: var(--cdlib-hero-space-5);
  position: relative;
}
@media (min-width: 640px) { .cdlib-op { grid-template-columns: 88px 1fr; } }

.cdlib-op__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  align-self: start;
  margin-top: 2px;
  background: var(--cd-navy);
  color: var(--cd-yellow);
  font-family: var(--cdlib-font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 4px;
  z-index: 1;
}
/* Rail vertical continu : une opération après l'autre, jamais en parallèle */
.cdlib-op::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 34px;
  bottom: calc(-1 * var(--cdlib-hero-space-6));
  width: 1px;
  background: var(--cd-line);
}
@media (min-width: 640px) { .cdlib-op::before { left: 44px; } }
.cdlib-op:last-child::before { display: none; }

.cdlib-op__body { padding-bottom: var(--cdlib-hero-space-6); }
.cdlib-op__body h3 { margin: 0 0 .4rem; font-size: 1.15rem; color: var(--cd-ink); }
.cdlib-op__body p  { font-size: .95rem; color: var(--cd-muted); margin: 0; line-height: 1.6; max-width: 52ch; }

/* ============ TÉMOIGNAGES : "REGISTRE D'AVIS" ============ */
.cdlib-section--testimonials { background: var(--cd-bg-soft); }

.cdlib-quotes-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cdlib-hero-space-5);
  margin-bottom: var(--cdlib-hero-space-7);
}
.cdlib-quotes-head__text h2 { margin: 0; }
.cdlib-quotes-head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
}

/* Tampon de contrôle légèrement incliné : seule fantaisie de la section */
.cdlib-stamp {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1.5px solid var(--cd-navy);
  border-radius: var(--cdlib-hero-radius);
  padding: .45rem .85rem;
  transform: rotate(-3deg);
  font-family: var(--cdlib-font-mono);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cd-navy);
  font-weight: 600;
}
.cdlib-stamp__stars { color: var(--cd-yellow); font-size: 1rem; letter-spacing: .06em; -webkit-text-stroke: .5px var(--cd-navy); }
.cdlib-quotes-head__link { color: var(--cd-blue); font-weight: 600; font-size: .9rem; }

.cdlib-quotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--cdlib-hero-space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .cdlib-quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .cdlib-quotes { grid-template-columns: repeat(3, 1fr); } }

.cdlib-quote {
  background: var(--cd-white);
  border: 1px solid var(--cd-line);
  border-radius: var(--cdlib-hero-radius);
  padding: var(--cdlib-hero-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--cdlib-hero-space-4);
}
.cdlib-quote blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cd-ink);
  flex: 1;
}
.cdlib-quote__person {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.cdlib-quote__person img {
  width: 42px; height: 42px;
  border-radius: 4px;
  object-fit: cover;
  filter: grayscale(1);
  flex-shrink: 0;
}
.cdlib-quote__person figcaption { font-size: .85rem; color: var(--cd-muted); line-height: 1.4; }
.cdlib-quote__person strong { color: var(--cd-ink); display: block; font-weight: 700; }
.cdlib-quote__source {
  align-self: flex-start;
  font-family: var(--cdlib-font-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--cd-blue);
  padding-top: var(--cdlib-hero-space-3);
  border-top: 1px solid var(--cd-line);
  width: 100%;
}
.cdlib-quote__source:hover { color: var(--cd-blue-hover); }

/* ============ FAQ : "NOTICE TECHNIQUE" ============ */
.cdlib-section--faq { background: var(--cd-bg-soft); }
.cdlib-faq {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  max-width: 1080px;
  margin-inline: auto;
  background: var(--cd-line);
  border: 1px solid var(--cd-line);
  border-radius: var(--cdlib-hero-radius);
  overflow: hidden;
}
@media (min-width: 800px) { .cdlib-faq { grid-template-columns: 1fr 1fr; } }

.cdlib-faq__item { background: var(--cd-white); }
.cdlib-faq__item summary {
  cursor: pointer;
  padding: var(--cdlib-hero-space-4) var(--cdlib-hero-space-5);
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--cdlib-hero-space-3);
  transition: background-color var(--cdlib-hero-dur-fast) var(--cdlib-hero-ease);
}
.cdlib-faq__item summary::-webkit-details-marker { display: none; }
.cdlib-faq__item summary:hover,
.cdlib-faq__item summary:focus-visible { background: var(--cd-bg-soft); }
.cdlib-faq__item summary:focus-visible { outline: 2px solid var(--cd-blue); outline-offset: -2px; }

.cdlib-faq__index {
  font-family: var(--cdlib-font-mono);
  font-size: .78rem;
  color: var(--cd-blue);
  letter-spacing: .04em;
}
.cdlib-faq__question {
  font-weight: 600;
  color: var(--cd-ink);
  font-size: 1rem;
  line-height: 1.4;
}
.cdlib-faq__toggle {
  position: relative;
  width: 16px; height: 16px;
  flex-shrink: 0;
  align-self: center;
}
.cdlib-faq__toggle::before,
.cdlib-faq__toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--cd-navy);
  transition: transform var(--cdlib-hero-dur-fast) var(--cdlib-hero-ease), opacity var(--cdlib-hero-dur-fast) var(--cdlib-hero-ease);
}
.cdlib-faq__toggle::before { width: 16px; height: 2px; }
.cdlib-faq__toggle::after  { width: 2px; height: 16px; }
.cdlib-faq__item[open] .cdlib-faq__toggle::after { transform: rotate(90deg); opacity: 0; }

.cdlib-faq__answer {
  padding: 0 var(--cdlib-hero-space-5) var(--cdlib-hero-space-5) calc(var(--cdlib-hero-space-5) + 2.6rem);
  color: var(--cd-muted);
  font-size: .95rem;
}
.cdlib-faq__answer p:last-child { margin-bottom: 0; }

/* ============ CTA FINAL : "DERNIER TAMPON" ============ */
/* Referme la page comme le hero l'ouvre : même grille papier calque
   (fondu en miroir, vers le haut) + repères d'angle jaunes de la plaque.
   Rare volontairement : seul autre endroit du site à reprendre ce motif. */
.cdlib-section--cta-final { padding-block: 0 clamp(3rem, 8vw, 6rem); }
.cdlib-cta-final {
  background: var(--cd-navy);
  color: var(--cd-white);
  border-radius: var(--cdlib-hero-radius);
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--cdlib-hero-space-6);
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 800px) { .cdlib-cta-final { grid-template-columns: 1fr; text-align: center; } }

/* v3.7.1 — trame retirée ici. Elle reste sur les deux heros, où elle porte la DA de
   plaque signalétique. Répétée à quatre endroits elle devenait un fond par défaut plutôt
   qu'un accent, et sur le bloc de conversion tout bruit visuel se paie. Aplat volontaire.
   Pour revenir en arrière : restaurer les deux linear-gradient et le background-size. */
.cdlib-cta-final__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cdlib-cta-final::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--cd-yellow), var(--cd-yellow)),
    linear-gradient(var(--cd-yellow), var(--cd-yellow)),
    linear-gradient(var(--cd-yellow), var(--cd-yellow)),
    linear-gradient(var(--cd-yellow), var(--cd-yellow));
  background-repeat: no-repeat;
  background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px;
  background-position: top left, top left, bottom right, bottom right;
  opacity: .8;
}

.cdlib-cta-final__text,
.cdlib-cta-final > .cdlib-cta { position: relative; z-index: 1; }
.cdlib-cta-final h2 { color: var(--cd-white); margin: 0 0 .6rem; font-size: 1.7rem; font-weight: 700; }
.cdlib-cta-final p  { color: rgba(255,255,255,.75); margin: 0; font-size: 1.05rem; max-width: 52ch; }
@media (max-width: 800px) { .cdlib-cta-final p { margin-inline: auto; } }
.cdlib-cta-final .cdlib-cta { align-self: center; white-space: nowrap; }

/* ============ ABOUT (fallback si utilisé) ============ */
.cdlib-section--about { background: var(--cd-bg-soft); }
.cdlib-about { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 800px) { .cdlib-about { grid-template-columns: 360px 1fr; } }
.cdlib-about__eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  color: var(--cd-blue);
  font-weight: 700;
  margin: 0 0 .75rem;
}
.cdlib-about__photo img { border-radius: var(--cd-radius); width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.cdlib-about__badges { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.cdlib-about__badges li { background: var(--cd-blue-soft); color: var(--cd-navy); padding: .45rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }

/* ============ Header — layout DS (structure, spacing, pilule) mais palette maquette ============ */

header#header,
.ct-header,
header.ct-header {
  background-color: var(--cd-white) !important;
  border-bottom: 1px solid var(--cd-line) !important;
  box-shadow: 0 1px 0 rgba(15,34,96,.03) !important;
  padding-block: .35rem !important;
  min-height: 73px;
}

/* Menu items : noir texte + font clean + spacing type DS */
header#header a,
header#header .ct-menu-items > li > a,
.ct-header a:not(.ct-header-cta):not(.ct-header-button):not(.wp-block-button__link),
.ct-menu-items > li > a {
  color: var(--cd-ink) !important;
  font-weight: 500 !important;
  font-family: var(--cd-font) !important;
  font-size: .94rem !important;
  letter-spacing: -0.005em !important;
  transition: color .15s var(--cd-ease-out) !important;
  padding: .35rem 0 !important;
}
header#header a:hover,
.ct-menu-items > li > a:hover,
.ct-menu-items > li.current-menu-item > a { color: var(--cd-blue) !important; }

/* Espacement horizontal entre items du menu (style DS) */
.ct-menu-items > li { padding: 0 .9rem !important; }
@media (min-width: 1200px) { .ct-menu-items > li { padding: 0 1.15rem !important; } }

/* Sous-menus : fond blanc, ombre subtle */
.ct-menu-items ul,
.ct-menu-items .sub-menu {
  background: var(--cd-white) !important;
  border: 1px solid var(--cd-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 40px -20px rgba(15, 34, 96, .18) !important;
  padding: .5rem 0 !important;
  margin-top: .5rem !important;
}
.ct-menu-items ul li > a,
.ct-menu-items .sub-menu a { color: var(--cd-ink) !important; padding: .55rem 1.1rem !important; }
.ct-menu-items ul li > a:hover { background: var(--cd-bg-soft) !important; color: var(--cd-blue) !important; }

/* CTA pilule (structure DS, couleur maquette) */
header .ct-header-cta,
header .ct-header-button,
header a.button,
header .wp-block-button__link,
.ct-header-cta {
  background: var(--cd-yellow) !important;
  color: var(--cd-ink) !important;
  border: none !important;
  padding: .82rem 1.55rem !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: .85rem !important;
  box-shadow: 0 8px 20px -8px rgba(255,208,0,.5) !important;
  transition: transform .15s var(--cd-ease-out), background .2s, box-shadow .2s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  line-height: 1 !important;
}
header .ct-header-cta:hover {
  background: var(--cd-yellow-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(255,208,0,.65) !important;
}

/* Logo taille compact style DS */
header .site-logo img,
.ct-header .site-logo img {
  max-height: 42px;
  width: auto;
  filter: none;
}

/* Icônes header en couleur ink */
header svg, .ct-header svg, .ct-header i, header i {
  color: var(--cd-ink) !important;
  fill: currentColor !important;
}

/* Hamburger mobile en dark propre */
.ct-toggle-close, .ct-toggle-menu { color: var(--cd-ink) !important; }

/* ============ Fallback sections héritées (single-service etc.) ============ */
.cdlib-hero--service { background: var(--cd-navy); color: var(--cd-white); padding-block: clamp(3rem, 6vw, 5rem); }
.cdlib-hero--service .cdlib-hero__title { color: var(--cd-white); }
.cdlib-hero--service .cdlib-hero__subtitle { color: rgba(255,255,255,.85); }
.cdlib-hero--service .cdlib-hero__eyebrow { color: var(--cd-yellow); }

.cdlib-problem-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.cdlib-problem-list li { padding: 1rem 1.25rem; background: var(--cd-bg-soft); border-radius: var(--cd-radius-sm); color: var(--cd-ink); }
.cdlib-problem-list span { color: var(--cd-blue); font-weight: 700; margin-right: .4rem; }

.cdlib-deliverables { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; counter-reset: cdlib-del; }
@media (min-width: 700px) { .cdlib-deliverables { grid-template-columns: repeat(2, 1fr); } }
.cdlib-deliverable { padding: 1.5rem; border: 1px solid var(--cd-line); border-radius: var(--cd-radius); background: var(--cd-white); counter-increment: cdlib-del; position: relative; }
.cdlib-deliverable::before { content: counter(cdlib-del, decimal-leading-zero); font-size: 2rem; color: var(--cd-blue); font-weight: 800; position: absolute; top: 1rem; right: 1.25rem; }

.cdlib-pricing__price { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin: 0 0 1.5rem; }
.cdlib-pricing__price strong { font-size: clamp(2rem, 6vw, 3rem); color: var(--cd-ink); font-weight: 800; }
.cdlib-pricing__label { color: var(--cd-muted); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
.cdlib-pricing__includes { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.cdlib-pricing__includes li::before { content: "✓"; color: var(--cd-blue); font-weight: 700; margin-right: .5rem; }
.cdlib-section--pricing { background: var(--cd-bg-soft); }

.cdlib-cross { background: var(--cd-navy); color: var(--cd-white); padding: 2.5rem; border-radius: var(--cd-radius); text-align: center; }
.cdlib-cross h2 { color: var(--cd-white); }
.cdlib-cross p  { color: rgba(255,255,255,.85); max-width: 620px; margin-inline: auto; }

.cdlib-case-studies { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
@media (min-width: 700px)  { .cdlib-case-studies { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cdlib-case-studies { grid-template-columns: repeat(3, 1fr); } }
.cdlib-case-studies > li { background: var(--cd-white); border: 1px solid var(--cd-line); border-radius: var(--cd-radius); overflow: hidden; }
.cdlib-case-studies > li a { display: block; padding: 1.25rem; color: inherit; text-decoration: none; }
.cdlib-case-studies img { border-radius: var(--cd-radius-sm); margin-bottom: 1rem; aspect-ratio: 3/2; object-fit: cover; width: 100%; }

.cdlib-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.cdlib-result { background: var(--cd-white); border: 1px solid var(--cd-line); border-radius: var(--cd-radius); padding: 1.5rem; text-align: center; }
.cdlib-result strong { display: block; font-size: 2.25rem; color: var(--cd-navy); font-weight: 800; }
.cdlib-result span { font-size: .85rem; color: var(--cd-muted); }

/* ============ CONTACT : "FICHE DE MISSION" ============ */
.cdlib-section--form {
  background: var(--cd-white);
  position: relative;
  overflow: hidden;
}
/* ⚠️ v3.7.2 — RÈGLE SANS EFFET : `.cdlib-section--form` et son ::before sont redéfinis
   plus bas dans ce fichier (voir « Section formulaire » vers la fin), et c'est cette
   seconde définition qui l'emporte en cascade. La section est navy, pas blanche.
   Bloc conservé tel quel pour ne rien casser à l'aveugle, mais toute modification du
   formulaire doit se faire sur la règle du bas. Dette à nettoyer un jour, en une passe. */
.cdlib-section--form::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cdlib-form-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 900px) { .cdlib-form-wrap { grid-template-columns: 1fr 1.25fr; gap: 4.5rem; } }

/* ---- Colonne de gauche ---- */
.cdlib-form__side h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.15;
}
.cdlib-form__side > p {
  color: var(--cd-muted);
  margin: 0 0 2rem;
  font-size: 1.05rem;
  line-height: 1.6;
}

.cdlib-form__points {
  list-style: none;
  padding: 0;
  margin: 0 0 2.25rem;
  display: grid;
  gap: .85rem;
}
.cdlib-form__points li {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--cd-ink);
  font-size: .95rem;
  font-weight: 500;
}
/* Coche minimaliste : carré jaune + trait, même grammaire que la puce eyebrow du hero */
.cdlib-form__check {
  width: 14px;
  height: 14px;
  background: var(--cd-yellow);
  border-radius: 2px;
  flex-shrink: 0;
  position: relative;
}
.cdlib-form__check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 4px;
  height: 7px;
  border-right: 2px solid var(--cd-ink);
  border-bottom: 2px solid var(--cd-ink);
  transform: rotate(45deg);
}

/* Coordonnées directes : paires libellé mono / valeur, même grammaire que la plaque */
.cdlib-form__direct { display: grid; gap: .75rem; }
.cdlib-form__contact {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--cd-white);
  border: 1px solid var(--cd-line);
  border-radius: 6px;
  color: var(--cd-ink);
  text-decoration: none;
  transition: border-color .2s, transform .15s;
  font-size: .9rem;
  line-height: 1.35;
}
.cdlib-form__contact:hover {
  border-color: var(--cd-blue);
  transform: translateY(-2px);
  color: var(--cd-ink);
}
.cdlib-form__contact-label {
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cd-blue);
}
.cdlib-form__contact-value { color: var(--cd-muted); }
.cdlib-form__contact-value strong {
  color: var(--cd-ink);
  font-weight: 700;
  font-size: 1rem;
}

/* ---- Colonne de droite : la fiche de mission ---- */
.cdlib-form__box {
  background: var(--cd-white);
  border: 1px solid var(--cd-line);
  border-radius: 6px;
  padding: 2.25rem 2rem;
  position: relative;
}
/* Repères d'angle jaunes, comme la plaque du hero */
.cdlib-form__box::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--cd-yellow), var(--cd-yellow)),
    linear-gradient(var(--cd-yellow), var(--cd-yellow)),
    linear-gradient(var(--cd-yellow), var(--cd-yellow)),
    linear-gradient(var(--cd-yellow), var(--cd-yellow));
  background-repeat: no-repeat;
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  background-position: top left, top left, bottom right, bottom right;
}
/* Intitulé de document en tête de fiche */
.cdlib-form__box-heading {
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cd-muted);
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cd-line);
}

.cdlib-form { display: grid; gap: 1.15rem; }
.cdlib-form__row { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .cdlib-form__row { grid-template-columns: 1fr 1fr; } }

.cdlib-form label { display: block; position: relative; }
.cdlib-form label > span {
  display: block;
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .72rem;
  font-weight: 600;
  color: var(--cd-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .45rem;
}

.cdlib-form input,
.cdlib-form select,
.cdlib-form textarea {
  width: 100%;
  padding: .95rem 1.1rem;
  border: 1.5px solid var(--cd-line);
  border-radius: 10px;
  font-family: var(--cd-font);
  font-size: 1rem;
  color: var(--cd-ink);
  background: var(--cd-bg-softer);
  transition: border-color .2s, background .2s, box-shadow .2s;
  line-height: 1.4;
}
.cdlib-form input::placeholder,
.cdlib-form textarea::placeholder { color: #94A3B8; }

.cdlib-form input:hover,
.cdlib-form select:hover,
.cdlib-form textarea:hover { border-color: #C0CBE0; background: var(--cd-white); }

.cdlib-form input:focus,
.cdlib-form select:focus,
.cdlib-form textarea:focus {
  outline: none;
  border-color: var(--cd-blue);
  background: var(--cd-white);
  box-shadow: 0 0 0 4px rgba(20, 72, 216, .12);
}

.cdlib-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.cdlib-form textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--cd-font);
}

.cdlib-form button[type=submit] {
  width: 100%;
  margin-top: .75rem;
  justify-content: center;
  padding: 1.1rem 2rem;
  font-size: 1rem;
}
.cdlib-form__legal {
  font-size: .78rem;
  color: var(--cd-muted);
  text-align: center;
  margin: .75rem 0 0;
  line-height: 1.5;
}
.cdlib-form__legal::before { content: "🔒 "; margin-right: 2px; }

/* ============ ANIMATIONS ============ */

@keyframes cd-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cd-scale-in {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes cd-shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Reveal on scroll — activé via JS (classe .cd-in) */
[data-reveal]           { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--cd-ease-out), transform .7s var(--cd-ease-out); }
[data-reveal].cd-in     { opacity: 1; transform: translateY(0); }
[data-reveal="left"]    { transform: translateX(-24px); }
[data-reveal="left"].cd-in    { transform: translateX(0); }
[data-reveal="right"]   { transform: translateX(24px); }
[data-reveal="right"].cd-in   { transform: translateX(0); }
[data-reveal="scale"]   { transform: scale(.96); }
[data-reveal="scale"].cd-in   { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Hero H1 auto-reveal */
.cdlib-hero__eyebrow  { animation: cd-fade-up .6s var(--cd-ease-out) .1s both; }
.cdlib-hero__title    { animation: cd-fade-up .7s var(--cd-ease-out) .2s both; }
.cdlib-hero__subtitle { animation: cd-fade-up .7s var(--cd-ease-out) .35s both; }
.cdlib-hero__badges   { animation: cd-fade-up .6s var(--cd-ease-out) .5s both; }
.cdlib-hero__cta      { animation: cd-fade-up .6s var(--cd-ease-out) .6s both; }
.cdlib-hero__meta     { animation: cd-fade-up .6s var(--cd-ease-out) .7s both; }
.cdlib-hero__media    { animation: cd-scale-in .9s var(--cd-ease-out) .15s both; }

/* Shine sur CTA principal : uniquement au hover, via pseudo-élément (fond uni au repos) */
.cdlib-cta--primary {
  position: relative;
  overflow: hidden;
  background-image: none;
}
.cdlib-cta--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.cdlib-cta--primary:hover::before { transition: transform .7s var(--cd-ease-out); transform: translateX(120%); }

/* Micro-interaction icônes services */
.cdlib-service-card__icon { transition: transform .35s var(--cd-ease-out); }
.cdlib-service-card:hover .cdlib-service-card__icon { transform: translateY(-4px) scale(1.08); }

/* Portrait Hero : léger tilt au scroll */
.cdlib-hero__media img { transition: transform .5s var(--cd-ease-out); }
.cdlib-hero:hover .cdlib-hero__media img { transform: translateY(-4px); }

/* ============ MENTION DIGITAL STENTOR ============ */
.cd-ds-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: var(--cd-blue-soft);
  color: var(--cd-navy);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
.cd-ds-tag:hover { background: var(--cd-blue); color: var(--cd-white); }
.cd-ds-tag::before { content: "◆"; color: var(--cd-blue); font-size: .7em; }
.cd-ds-tag:hover::before { color: var(--cd-yellow); }

/* Utilitaires */
.screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; overflow: hidden; }
/* ==========================================================================
   CHANGELOG
   v1.6.0 (2026-07-15) : Refonte hero home : "plaque signalétique"
   Remplace le split 50/50 + rangée de 4 badges par une grille asymétrique,
   un portrait duotone en bleed, et une plaque façon fiche technique
   (référence directe au monde des pièces auto de mercedes-accessoires.fr).
   Ajuste ce numéro au versioning réel de main.css avant merge.
   ========================================================================== */


/* ============ TOKENS (additions : ne redéfinit aucun --cd-* existant) ============ */
:root {
    /* Utility face : plaque, eyebrow, micro-labels. Rôle de "spec sheet". */
    --cdlib-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Type scale locale au hero (base 16px, ratio ~1.25) */
    --cdlib-hero-fs-xs: 0.75rem;   /* 12px : micro labels mono */
    --cdlib-hero-fs-sm: 0.875rem;  /* 14px : valeurs de plaque */
    --cdlib-hero-fs-md: 1rem;      /* 16px : body */
    --cdlib-hero-title: clamp(2.25rem, 1.6rem + 3vw, 4.25rem);

    /* Spacing (base 4px, cohérent avec l'échelle géométrique du site) */
    --cdlib-hero-space-2: 0.5rem;   /* 8 */
    --cdlib-hero-space-3: 0.75rem;  /* 12 */
    --cdlib-hero-space-4: 1rem;     /* 16 */
    --cdlib-hero-space-5: 1.5rem;   /* 24 */
    --cdlib-hero-space-6: 2rem;     /* 32 */
    --cdlib-hero-space-7: 3rem;     /* 48 */
    --cdlib-hero-space-8: 4rem;     /* 64 */

    --cdlib-hero-gutter: clamp(1rem, 3vw, 2.5rem);

    --cdlib-hero-radius: 6px;
    --cdlib-hero-radius-pill: 999px;

    --cdlib-hero-plate-muted: #AEC0E8; /* texte tertiaire sur navy, AA-safe */

    --cdlib-hero-ease: cubic-bezier(.22, 1, .36, 1);
    --cdlib-hero-dur-fast: 180ms;
    --cdlib-hero-dur-slow: 560ms;
}


/* ============ LAYOUT ============ */
.cdlib-hero {
    position: relative;
    overflow-x: hidden; /* garde-fou si la marge négative de bleed dépasse (cf. note) */
    background: var(--cd-bg-soft);
    padding-block: clamp(3rem, 8vw, 6rem);
}

/* Texture "papier calque" très discrète : évoque la fiche technique, pas le broadsheet */
.cdlib-hero__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(7, 31, 73, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(7, 31, 73, .05) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}

.cdlib-hero__container {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: var(--cdlib-hero-gutter);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "eyebrow"
        "title"
        "visual"
        "body"
        "actions";
    gap: var(--cdlib-hero-space-6);
    align-items: start;
}

@media (min-width: 1024px) {
    .cdlib-hero__container {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
        grid-template-areas:
            "eyebrow visual"
            "title   visual"
            "body    visual"
            "actions visual";
        row-gap: var(--cdlib-hero-space-5);
        column-gap: clamp(2.5rem, 5vw, 4.5rem);
        align-items: center;
    }
}

.cdlib-hero__eyebrow { grid-area: eyebrow; }
.cdlib-hero__title   { grid-area: title; }
.cdlib-hero__visual  { grid-area: visual; align-self: start; }
.cdlib-hero__body    { grid-area: body; }
.cdlib-hero__actions { grid-area: actions; }

@media (min-width: 1024px) {
    .cdlib-hero__visual { align-self: center; }
}


/* ============ COMPOSANTS : texte ============ */
.cdlib-hero__eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--cdlib-hero-space-2);
    font-family: var(--cdlib-font-mono);
    font-size: var(--cdlib-hero-fs-xs);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cd-blue);
}
.cdlib-hero__eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--cd-yellow);
    border-radius: 2px;
    flex: none;
}

.cdlib-hero__title {
    margin: 0;
    max-width: 620px;
    font-family: var(--cd-font);
    font-weight: 800;
    font-size: var(--cdlib-hero-title);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--cd-ink);
}

.cdlib-hero__mark {
    position: relative;
    z-index: 0;
    white-space: nowrap;
}
.cdlib-hero__mark::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -.15em;
    right: -.15em;
    bottom: .08em;
    height: .32em;
    background: var(--cd-yellow);
    transform: scaleX(0);
    transform-origin: left;
}

.cdlib-hero__body {
    margin: 0;
    max-width: 46ch;
    font-family: var(--cd-font);
    font-size: var(--cdlib-hero-fs-md);
    line-height: 1.6;
    color: var(--cd-muted);
}
.cdlib-hero__body strong {
    color: var(--cd-ink);
    font-weight: 600;
}


/* ============ COMPOSANTS : portrait ============ */
.cdlib-hero__visual {
    margin: 0;
    width: 100%;
    max-width: 420px;
}

.cdlib-hero__portrait {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--cdlib-hero-radius);
}
@media (min-width: 1024px) {
    /* le coin qui touche le bord du container reste carré : effet "coupé par le cadre" */
    .cdlib-hero__visual {
        max-width: none;
        margin-right: calc(-1 * var(--cdlib-hero-gutter));
    }
    .cdlib-hero__portrait {
        border-radius: var(--cdlib-hero-radius) 0 0 var(--cdlib-hero-radius);
    }
}

.cdlib-hero__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: grayscale(1) contrast(1.08) brightness(1.03);
}
.cdlib-hero__portrait-tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg, rgba(20, 72, 216, .42) 0%, rgba(7, 31, 73, .62) 100%);
    mix-blend-mode: color;
}


/* ============ COMPOSANTS : plaque signalétique ============ */
.cdlib-hero__plate {
    position: relative;
    margin: var(--cdlib-hero-space-4) 0 0;
    background: var(--cd-navy);
    border-radius: var(--cdlib-hero-radius);
    padding: var(--cdlib-hero-space-5) var(--cdlib-hero-space-4);
    box-shadow: 0 24px 48px -24px rgba(7, 31, 73, .45);
}
@media (min-width: 768px) {
    .cdlib-hero__plate {
        margin-top: calc(-1 * var(--cdlib-hero-space-8));
        margin-left: var(--cdlib-hero-space-5);
        margin-right: var(--cdlib-hero-space-4);
        max-width: 320px;
    }
}

/* Repères d'angle façon plaque riveté / crop mark : un seul détail décoratif du hero */
.cdlib-hero__plate::before {
    content: "";
    position: absolute;
    inset: 6px;
    pointer-events: none;
    background-image:
        linear-gradient(var(--cd-yellow), var(--cd-yellow)),
        linear-gradient(var(--cd-yellow), var(--cd-yellow)),
        linear-gradient(var(--cd-yellow), var(--cd-yellow)),
        linear-gradient(var(--cd-yellow), var(--cd-yellow));
    background-repeat: no-repeat;
    background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px;
    background-position: top left, top left, bottom right, bottom right;
}

.cdlib-hero__plate dt,
.cdlib-hero__plate dd {
    margin: 0;
}
.cdlib-hero__plate-row {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: var(--cdlib-hero-space-3);
    padding-block: var(--cdlib-hero-space-3);
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.cdlib-hero__plate-row:first-child {
    border-top: none;
    padding-top: 0;
}
.cdlib-hero__plate-row dt {
    font-family: var(--cdlib-font-mono);
    font-size: var(--cdlib-hero-fs-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cd-yellow);
}
.cdlib-hero__plate-row dd {
    font-family: var(--cdlib-font-mono);
    font-size: var(--cdlib-hero-fs-sm);
    line-height: 1.45;
    color: #F1F5FB;
}
.cdlib-hero__plate-sub {
    display: block;
    margin-top: 4px;
    font-size: .6875rem; /* 11px, ligne d'appoint uniquement */
    line-height: 1.5;
    color: var(--cdlib-hero-plate-muted);
}


/* ============ COMPOSANTS : CTA ============ */
.cdlib-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cdlib-hero-space-4);
}

.cdlib-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--cdlib-hero-space-2);
    padding: .95rem 1.5rem;
    border-radius: var(--cdlib-hero-radius-pill);
    font-family: var(--cd-font);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: transform var(--cdlib-hero-dur-fast) var(--cdlib-hero-ease),
                box-shadow var(--cdlib-hero-dur-fast) var(--cdlib-hero-ease),
                background-color var(--cdlib-hero-dur-fast) var(--cdlib-hero-ease),
                color var(--cdlib-hero-dur-fast) var(--cdlib-hero-ease),
                border-color var(--cdlib-hero-dur-fast) var(--cdlib-hero-ease);
}
.cdlib-hero__cta:focus-visible {
    outline: 2px solid var(--cd-blue);
    outline-offset: 3px;
}

.cdlib-hero__cta--primary {
    background: var(--cd-yellow);
    color: var(--cd-navy);
    box-shadow: 0 10px 24px -10px rgba(255, 208, 0, .6);
}
.cdlib-hero__cta--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px rgba(255, 208, 0, .75);
}
.cdlib-hero__cta--primary svg {
    transition: transform var(--cdlib-hero-dur-fast) var(--cdlib-hero-ease);
}
.cdlib-hero__cta--primary:hover svg {
    transform: translateX(3px);
}

.cdlib-hero__cta--ghost {
    background: transparent;
    color: var(--cd-ink);
    border: 1.5px solid var(--cd-line);
}
.cdlib-hero__cta--ghost:hover {
    border-color: var(--cd-blue);
    color: var(--cd-blue);
}


/* ============ ANIMATIONS ============ */
@keyframes cdlibHeroIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes cdlibMarkIn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.cdlib-hero__eyebrow,
.cdlib-hero__title,
.cdlib-hero__visual,
.cdlib-hero__body,
.cdlib-hero__actions {
    animation: cdlibHeroIn var(--cdlib-hero-dur-slow) var(--cdlib-hero-ease) both;
}
.cdlib-hero__eyebrow { animation-delay: 0ms; }
.cdlib-hero__title   { animation-delay: 80ms; }
.cdlib-hero__visual  { animation-delay: 150ms; }
.cdlib-hero__body    { animation-delay: 220ms; }
.cdlib-hero__actions { animation-delay: 300ms; }

.cdlib-hero__mark::before {
    animation: cdlibMarkIn var(--cdlib-hero-dur-slow) var(--cdlib-hero-ease) both;
    animation-delay: 520ms;
}

@media (prefers-reduced-motion: reduce) {
    .cdlib-hero__eyebrow,
    .cdlib-hero__title,
    .cdlib-hero__visual,
    .cdlib-hero__body,
    .cdlib-hero__actions,
    .cdlib-hero__mark::before {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   v2.5.0 (2026-07-15) — Header custom + megamenu
   Remplace le header Blocksy. Structure inspirée du megamenu Digital Stentor
   (panels full-width, liens riches icône + titre + description), palette
   claire de la maquette. Hover + focus-within desktop, burger checkbox mobile.
   ========================================================================== */

/* ============ HEADER ============ */
.cdlib-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cd-navy);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
body.admin-bar .cdlib-header { top: 32px; }

.cdlib-header__in {
  max-width: var(--cd-container);
  margin-inline: auto;
  padding-inline: var(--cd-gutter);
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.cdlib-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.cdlib-header__logo img { width: auto; height: 46px; display: block; filter: brightness(0) invert(1); }

/* ---- Nav desktop ---- */
.cdlib-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.cdlib-nav__item { position: static; }

.cdlib-nav__top {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1rem;
  background: none;
  border: none;
  border-radius: 8px;
  font-family: var(--cd-font);
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  cursor: pointer;
  /* pas de transition : item de nav vu a chaque page, on n'anime pas (doctrine 08/2026) */
  line-height: 1;
}
.cdlib-nav__top:hover,
.cdlib-nav__item:focus-within > .cdlib-nav__top {
  color: var(--cd-yellow);
  background: rgba(255, 255, 255, .06);
}
.cdlib-nav__top:focus-visible {
  outline: 2px solid var(--cd-yellow);
  outline-offset: 2px;
}
.cdlib-nav__top svg { transition: transform .2s var(--cd-ease-out); margin-top: 1px; color: var(--cd-yellow); }
.cdlib-nav__item--has-panel:hover .cdlib-nav__top svg,
.cdlib-nav__item--has-panel:focus-within .cdlib-nav__top svg,
.cdlib-nav__item--has-panel.est-deploye .cdlib-nav__top svg { transform: rotate(180deg); }

/* ---- CTA pilule ---- */
.cdlib-header__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-left: .75rem;
  padding: .85rem 1.5rem;
  background: var(--cd-yellow);
  color: var(--cd-ink);
  border-radius: 999px;
  font-family: var(--cd-font);
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 8px 20px -8px rgba(255, 208, 0, .5);
  transition: transform .15s var(--cd-ease-out), background .2s, box-shadow .2s;
  white-space: nowrap;
}
.cdlib-header__cta:hover {
  background: var(--cd-yellow-hover);
  color: var(--cd-ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(255, 208, 0, .65);
}
.cdlib-header__cta svg { transition: transform .15s var(--cd-ease-out); }
.cdlib-header__cta:hover svg { transform: translateX(3px); }

/* ---- Megamenu panel ---- */
.cdlib-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 99;
  background: var(--cd-white);
  border-top: none;
  border-bottom: 1px solid var(--cd-line);
  box-shadow: 0 40px 80px -40px rgba(15, 34, 96, .25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s var(--cd-ease-out), transform .22s var(--cd-ease-out), visibility .22s;
  pointer-events: none;
}
.cdlib-nav__item--has-panel:hover .cdlib-panel,
.cdlib-nav__item--has-panel:focus-within .cdlib-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.cdlib-panel__in {
  max-width: var(--cd-container);
  margin-inline: auto;
  padding: 2.25rem var(--cd-gutter) 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .cdlib-panel__in { grid-template-columns: 1fr 300px; gap: 4rem; }
}

.cdlib-panel__title {
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cd-muted);
  margin: 0 0 1.25rem;
}

.cdlib-panel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
}
@media (min-width: 700px) { .cdlib-panel__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .cdlib-panel__grid { grid-template-columns: repeat(3, 1fr); } }

.cdlib-panel__link {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .85rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s var(--cd-ease-out);
}
.cdlib-panel__link:hover { background: var(--cd-bg-soft); }

.cdlib-panel__ic {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--cd-blue-soft);
  color: var(--cd-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: background .15s var(--cd-ease-out), color .15s var(--cd-ease-out);
}
.cdlib-panel__link:hover .cdlib-panel__ic { background: var(--cd-yellow); color: var(--cd-navy); }

.cdlib-panel__txt { display: block; line-height: 1.35; }
.cdlib-panel__txt b {
  display: block;
  font-size: .92rem;
  font-weight: 600;
  color: var(--cd-ink);
  margin-bottom: 2px;
}
.cdlib-panel__link:hover .cdlib-panel__txt b { color: var(--cd-navy); }
.cdlib-panel__txt > span {
  display: block;
  font-size: .8rem;
  color: var(--cd-muted);
}

/* Colonne aside du panel */
.cdlib-panel__aside {
  border-left: 1px solid var(--cd-line);
  padding-left: 2.5rem;
}
@media (max-width: 1023.98px) {
  .cdlib-panel__aside { border-left: none; padding-left: 0; border-top: 1px solid var(--cd-line); padding-top: 1.5rem; }
}
.cdlib-panel__pitch {
  font-size: .92rem;
  color: var(--cd-muted);
  line-height: 1.55;
  margin: 0 0 1.25rem;
}
.cdlib-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.3rem;
  background: var(--cd-yellow);
  color: var(--cd-navy);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 8px 20px -8px rgba(255, 208, 0, .5);
  transition: background .2s, transform .15s var(--cd-ease-out), box-shadow .2s;
}
.cdlib-panel__cta:hover { background: var(--cd-yellow-hover); color: var(--cd-navy); transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(255, 208, 0, .65); }

/* ---- Burger mobile ---- */
/* v3.5.0 — la case reste RENDUE (masquée visuellement) : un input en display:none
   n'est pas toujours activé par son label sur les navigateurs mobiles. */
.cdlib-burger-toggle {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cdlib-burger:focus-visible { outline: 2px solid var(--cd-yellow); outline-offset: 3px; }
html.cdlib-nav-ouvert, html.cdlib-nav-ouvert body { overflow: hidden; }
.cdlib-burger {
  /* C'est un <button> depuis le 18/08/2026 : on annule le fond, la bordure et le rendu natif. */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
  border-radius: 8px;
}
.cdlib-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--cd-white);
  border-radius: 2px;
  transition: transform .25s var(--cd-ease-out), opacity .2s var(--cd-ease-out);
}

@media (max-width: 1023.98px) {
  .cdlib-burger { display: flex; }

  .cdlib-nav {
    position: fixed;
    inset: 76px 0 0 0;
    z-index: 98;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cd-navy);
    padding: 1rem var(--cd-gutter) 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .28s var(--cd-ease-out);
  }
  .cdlib-burger-toggle:checked ~ .cdlib-header__in .cdlib-nav { transform: translateX(0); }

  /* Burger → croix */
  .cdlib-burger-toggle:checked ~ .cdlib-header__in .cdlib-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .cdlib-burger-toggle:checked ~ .cdlib-header__in .cdlib-burger span:nth-child(2) { opacity: 0; }
  .cdlib-burger-toggle:checked ~ .cdlib-header__in .cdlib-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .cdlib-nav__item { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .cdlib-nav__top { width: 100%; justify-content: space-between; padding: 1.1rem .25rem; font-size: 1.05rem; }

  /* Panel accordéon sur fond navy : textes adaptés */
  .cdlib-panel { background: transparent; }
  .cdlib-panel__title { color: rgba(255, 255, 255, .55); }
  .cdlib-panel__txt b { color: var(--cd-white); }
  .cdlib-panel__txt > span { color: rgba(255, 255, 255, .62); }
  .cdlib-panel__link:hover { background: rgba(255, 255, 255, .07); }
  .cdlib-panel__link:hover .cdlib-panel__txt b { color: var(--cd-yellow); }
  .cdlib-panel__pitch { color: rgba(255, 255, 255, .7); }
  .cdlib-panel__cta {
    background: var(--cd-yellow);
    color: var(--cd-navy);
    border: none;
  }
  .cdlib-panel__cta:hover { background: var(--cd-yellow-hover); }

  /* Panel mobile : accordéon inline, pas d'overlay */
  .cdlib-panel {
    position: static;
    box-shadow: none;
    border: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
  }
  /* Ouverture instantanee (on n'anime jamais une hauteur) ; seul le contenu fond. */
  .cdlib-nav__item--has-panel:focus-within .cdlib-panel,
  .cdlib-nav__item--has-panel.est-deploye .cdlib-panel { max-height: none; }
  .cdlib-panel__in { opacity: 0; transition: opacity .2s var(--cd-ease-out); }
  .cdlib-nav__item--has-panel:focus-within .cdlib-panel__in,
  .cdlib-nav__item--has-panel.est-deploye .cdlib-panel__in { opacity: 1; }
  .cdlib-panel__in { padding: 0 0 1rem; grid-template-columns: 1fr; gap: 1.25rem; }
  .cdlib-panel__grid { grid-template-columns: 1fr; }
  .cdlib-panel__aside { border: none; padding: 0; }

  .cdlib-header__cta { margin: 1.25rem 0 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cdlib-panel, .cdlib-nav, .cdlib-burger span, .cdlib-nav__top svg { transition: none !important; }
}

/* v2.5.1 — ligne géo sous les CTA du hero */
.cdlib-hero--home .cdlib-hero__geo {
  grid-area: geo;
  margin: 0;
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--cd-muted);
  animation: cdlibHeroIn var(--cdlib-hero-dur-slow, .56s) var(--cdlib-hero-ease, var(--cd-ease-out)) both;
  animation-delay: 380ms;
}
.cdlib-hero--home .cdlib-hero__container {
  grid-template-areas:
    "eyebrow"
    "title"
    "visual"
    "body"
    "actions"
    "geo";
}
@media (min-width: 1024px) {
  .cdlib-hero--home .cdlib-hero__container {
    grid-template-areas:
      "eyebrow visual"
      "title   visual"
      "body    visual"
      "actions visual"
      "geo     visual";
  }
}

/* ==========================================================================
   v2.6.0 (2026-07-15) — Déclinaison du style home sur tout le site
   Footer custom navy, hero single-service "fiche technique", en-tête de page
   générique, archive réalisations "dossiers clients", prose des pages.
   ========================================================================== */

/* ============ FOOTER ============ */
.cdlib-footer {
  position: relative;
  background: var(--cd-navy);
  color: rgba(255, 255, 255, .85);
  overflow: hidden;
}
/* v3.7.1 — trame retirée, même raison que sur le bloc de conversion. Un pied de page
   est une zone de service : il n'a pas à porter un motif de marque. */
.cdlib-footer__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cdlib-footer__in {
  position: relative;
  max-width: var(--cd-container);
  margin-inline: auto;
  padding: 4rem var(--cd-gutter) 3rem;
  display: grid;
  gap: 3rem;
}
@media (min-width: 900px) { .cdlib-footer__in { grid-template-columns: 1.2fr 2fr; gap: 5rem; } }

.cdlib-footer__logo { height: 40px; width: auto; filter: brightness(0) invert(1); margin-bottom: 1.25rem; }
.cdlib-footer__pitch { font-size: .92rem; line-height: 1.6; color: rgba(255,255,255,.7); margin: 0 0 1.75rem; max-width: 40ch; }

.cdlib-footer__plate { margin: 0; display: grid; gap: .6rem; }
.cdlib-footer__plate > div {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: .75rem;
  align-items: baseline;
}
.cdlib-footer__plate dt {
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-yellow);
}
.cdlib-footer__plate dd { margin: 0; font-size: .92rem; }
.cdlib-footer__plate a { color: rgba(255,255,255,.9); text-decoration: none; }
.cdlib-footer__plate a:hover { color: var(--cd-yellow); }

.cdlib-footer__nav {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cdlib-footer__nav { grid-template-columns: repeat(3, 1fr); } }

.cdlib-footer__title {
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin: 0 0 1rem;
}
.cdlib-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.cdlib-footer__col a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .92rem;
  transition: color .15s var(--cd-ease-out);
}
.cdlib-footer__col a:hover { color: var(--cd-yellow); }

.cdlib-footer__legal { position: relative; border-top: 1px solid rgba(255,255,255,.12); }
.cdlib-footer__legal-in {
  max-width: var(--cd-container);
  margin-inline: auto;
  padding: 1.25rem var(--cd-gutter);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.cdlib-footer__legal p { margin: 0; font-size: .8rem; color: rgba(255,255,255,.55); }
.cdlib-footer__legal a { color: rgba(255,255,255,.75); text-decoration: none; }
.cdlib-footer__legal a:hover { color: var(--cd-yellow); }

/* ============ HERO SINGLE-SERVICE "fiche technique" ============ */
.cdlib-svc-hero {
  position: relative;
  overflow: hidden;
  background: var(--cd-navy);
  color: var(--cd-white);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.cdlib-svc-hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.cdlib-svc-hero__in {
  position: relative;
  max-width: var(--cd-container);
  margin-inline: auto;
  padding-inline: var(--cd-gutter);
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1000px) { .cdlib-svc-hero__in { grid-template-columns: minmax(0, 1fr) 360px; gap: 4rem; } }

.cdlib-svc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cd-yellow);
  margin: 0 0 1rem;
}
.cdlib-svc-hero__eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--cd-yellow);
  border-radius: 2px;
}
.cdlib-svc-hero__title {
  color: var(--cd-white);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.cdlib-svc-hero__subtitle {
  color: rgba(255,255,255,.8);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 0 1.75rem;
}
.cdlib-svc-hero__actions { display: flex; gap: .85rem; flex-wrap: wrap; }
.cdlib-svc-hero__ghost { color: var(--cd-white) !important; border-color: rgba(255,255,255,.35) !important; }
.cdlib-svc-hero__ghost:hover { border-color: var(--cd-white) !important; }

.cdlib-svc-hero__plate {
  position: relative;
  margin: 0;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  padding: 1.5rem 1.25rem;
}
.cdlib-svc-hero__plate::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--cd-yellow), var(--cd-yellow)),
    linear-gradient(var(--cd-yellow), var(--cd-yellow)),
    linear-gradient(var(--cd-yellow), var(--cd-yellow)),
    linear-gradient(var(--cd-yellow), var(--cd-yellow));
  background-repeat: no-repeat;
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  background-position: top left, top left, bottom right, bottom right;
}
.cdlib-svc-hero__plate-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: .75rem;
  padding-block: .7rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.cdlib-svc-hero__plate-row:first-child { border-top: none; padding-top: 0; }
.cdlib-svc-hero__plate-row dt {
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cd-yellow);
}
.cdlib-svc-hero__plate-row dd {
  margin: 0;
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .85rem;
  line-height: 1.45;
  color: #F1F5FB;
}

/* ============ EN-TÊTE DE PAGE GÉNÉRIQUE ============ */
.cdlib-page-head {
  background: var(--cd-bg-soft);
  border-bottom: 1px solid var(--cd-line);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.cdlib-page-head__in {
  max-width: var(--cd-container);
  margin-inline: auto;
  padding-inline: var(--cd-gutter);
}
.cdlib-page-head h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.cdlib-page-head__sub {
  color: var(--cd-muted);
  font-size: 1.05rem;
  max-width: 60ch;
  margin: .75rem 0 0;
}

/* ============ ARCHIVE RÉALISATIONS "dossiers clients" ============ */
.cdlib-cases {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2rem;
}
@media (min-width: 800px) { .cdlib-cases { grid-template-columns: repeat(2, 1fr); } }

.cdlib-case {
  background: var(--cd-white);
  border: 1px solid var(--cd-line);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .2s var(--cd-ease-out), box-shadow .2s var(--cd-ease-out), border-color .2s var(--cd-ease-out);
}
.cdlib-case:hover { transform: translateY(-4px); box-shadow: var(--cd-shadow); border-color: var(--cd-blue); }
.cdlib-case__link { display: block; text-decoration: none; color: inherit; }
.cdlib-case__media { margin: 0; }
.cdlib-case__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.cdlib-case__body { padding: 1.5rem 1.5rem 1.75rem; }
.cdlib-case__ref {
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cd-blue);
  margin: 0 0 .6rem;
}
.cdlib-case__body h2 { font-size: 1.35rem; margin: 0 0 .5rem; }
.cdlib-case__desc { font-size: .95rem; color: var(--cd-muted); margin: 0 0 1rem; }
.cdlib-case__more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cd-ink);
  border-bottom: 2px solid var(--cd-yellow);
  padding-bottom: 2px;
  transition: gap .2s var(--cd-ease-out), color .2s var(--cd-ease-out);
}
.cdlib-case:hover .cdlib-case__more { gap: .65rem; color: var(--cd-blue); }

/* ============ PROSE (contenu des pages classiques) ============ */
.cdlib-prose { max-width: 780px; }
.cdlib-prose > * + * { margin-top: 1.1em; }
.cdlib-prose h2 { font-size: 1.6rem; margin-top: 2em; }
.cdlib-prose h3 { font-size: 1.25rem; margin-top: 1.6em; }
.cdlib-prose a { color: var(--cd-blue); text-decoration: underline; text-underline-offset: 3px; }
.cdlib-prose ul, .cdlib-prose ol { padding-left: 1.4rem; color: var(--cd-muted); }
.cdlib-prose li + li { margin-top: .4rem; }
.cdlib-prose blockquote {
  border-left: 3px solid var(--cd-yellow);
  padding-left: 1.25rem;
  color: var(--cd-ink);
  font-style: normal;
  margin-left: 0;
}

/* v2.6.1 — fix hover gap du megamenu : pont invisible + délai de fermeture */
.cdlib-panel::before {
  content: "";
  position: absolute;
  top: -26px;
  left: 0;
  right: 0;
  height: 26px;
}
.cdlib-panel {
  transition: opacity .18s var(--cd-ease-out) .14s, transform .18s var(--cd-ease-out) .14s, visibility .18s .14s;
}
.cdlib-nav__item--has-panel:hover .cdlib-panel,
.cdlib-nav__item--has-panel:focus-within .cdlib-panel {
  transition-delay: 0s;
}

/* ==========================================================================
   v2.6.2 — Packs pricing (table comparative) + cross-link enrichi
   ========================================================================== */
.cdlib-section--packs { background: var(--cd-bg-soft); }
.cdlib-packs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  /* La grille reservait toujours trois colonnes : une ligne incomplete (deux formules sur
     /site-internet-par-abonnement-caen/, ou cinq formules en 3+2 sur /creation-site-web-caen/)
     restait collee a gauche avec un vide a droite, qui se lisait comme une formule manquante.
     En flex, une ligne incomplete se centre d'elle-meme. Le plafond de 420 px laisse la
     disposition a trois formules inchangee : elles etaient deja a 397 px. 20/08/2026. */
  .cdlib-packs { display: flex; flex-wrap: wrap; justify-content: center; }
  .cdlib-packs > li { flex: 1 1 300px; max-width: 420px; }
}

.cdlib-pack {
  position: relative;
  background: var(--cd-white);
  border: 1px solid var(--cd-line);
  border-radius: 12px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: transform .2s var(--cd-ease-out), box-shadow .2s var(--cd-ease-out);
}
.cdlib-pack:hover { transform: translateY(-4px); box-shadow: var(--cd-shadow); }
.cdlib-pack--reco {
  border: 2px solid var(--cd-yellow);
  box-shadow: 0 24px 60px -28px rgba(15, 34, 96, .25);
}
@media (min-width: 900px) { .cdlib-pack--reco { transform: scale(1.03); } .cdlib-pack--reco:hover { transform: scale(1.03) translateY(-4px); } }

.cdlib-pack__flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cd-yellow);
  color: var(--cd-ink);
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: 999px;
  white-space: nowrap;
}
.cdlib-pack__badge {
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cd-blue);
  margin: 0 0 .5rem;
}
.cdlib-pack__name { font-size: 1.4rem; margin: 0 0 .5rem; }
.cdlib-pack__intro { font-size: .9rem; color: var(--cd-muted); margin: 0 0 1.25rem; min-height: 3em; }
.cdlib-pack__price {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--cd-line);
}
.cdlib-pack__price span { font-size: .78rem; color: var(--cd-muted); text-transform: uppercase; letter-spacing: .06em; }
.cdlib-pack__price strong { font-size: 2.2rem; font-weight: 800; color: var(--cd-ink); line-height: 1; }
.cdlib-pack__price em { font-style: normal; font-size: .85rem; color: var(--cd-muted); }

.cdlib-pack__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  gap: .55rem;
  flex: 1;
}
.cdlib-pack__features li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .92rem;
  color: var(--cd-ink);
  line-height: 1.45;
}
.cdlib-pack__features li::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 4px;
  background: var(--cd-blue-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231448D8' stroke-width='3'><polyline points='20 6 9 17 4 12'/></svg>") center/10px no-repeat;
}
.cdlib-pack__cta { width: 100%; justify-content: center; }
.cdlib-packs__note {
  margin: 2rem auto 0;
  max-width: 640px;
  text-align: center;
  font-size: .85rem;
  color: var(--cd-muted);
}

/* Cross-link enrichi : body long avec liens */
.cdlib-cross { text-align: left; }
.cdlib-cross h2 { text-align: center; margin-bottom: 1.5rem; }
.cdlib-cross__body { max-width: 720px; margin: 0 auto 1.75rem; }
.cdlib-cross__body p { color: rgba(255,255,255,.82); font-size: .98rem; line-height: 1.65; }
.cdlib-cross__body a { color: var(--cd-yellow); text-decoration: underline; text-underline-offset: 3px; }
.cdlib-cross__body a:hover { color: #fff; }
.cdlib-cross__body strong { color: #fff; }
.cdlib-cross { display: flex; flex-direction: column; align-items: center; }

/* ==========================================================================
   v2.6.3 — Habillage visuel single-service
   Backdrop photo hero, icônes deliverables, section problème avec media.
   ========================================================================== */

/* Hero service : photo en backdrop sous overlay navy */
.cdlib-svc-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .16;
  filter: saturate(.6);
  pointer-events: none;
}
.cdlib-svc-hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cd-navy) 15%, rgba(7, 31, 73, .55) 60%, rgba(7, 31, 73, .8) 100%);
  pointer-events: none;
}
.cdlib-svc-hero--photo .cdlib-svc-hero__in { z-index: 2; }
.cdlib-svc-hero--photo .cdlib-svc-hero__grid { z-index: 1; }

/* Icône livrable */
.cdlib-deliverable__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--cd-blue-soft);
  color: var(--cd-blue);
  margin-bottom: 1rem;
}
.cdlib-deliverable { padding-top: 1.75rem; }
.cdlib-deliverable::before { top: 1.4rem; }

/* Section problème : 2 colonnes texte + image */
.cdlib-problem { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1000px) {
  .cdlib-problem--with-media { grid-template-columns: 1.15fr 1fr; gap: 4rem; }
}
.cdlib-problem__text .cdlib-section__head { text-align: left; margin-inline: 0; }
.cdlib-problem__text h2 { margin-bottom: 1.5rem; }
.cdlib-problem__media { margin: 0; position: relative; }
.cdlib-problem__media img {
  border-radius: 12px;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--cd-shadow);
}
/* Repères d'angle jaunes sur l'image, rappel de la plaque */
.cdlib-problem__media::before {
  content: "";
  position: absolute;
  inset: -10px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--cd-yellow), var(--cd-yellow)),
    linear-gradient(var(--cd-yellow), var(--cd-yellow)),
    linear-gradient(var(--cd-yellow), var(--cd-yellow)),
    linear-gradient(var(--cd-yellow), var(--cd-yellow));
  background-repeat: no-repeat;
  background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px;
  background-position: top left, top left, bottom right, bottom right;
}

/* ==========================================================================
   v2.6.4 — Hero service pleine hauteur + animations cascade (façon DS)
   ========================================================================== */
.cdlib-svc-hero {
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: center;
}
body.admin-bar .cdlib-svc-hero { min-height: calc(100vh - 76px - 32px); }
.cdlib-svc-hero__in { width: 100%; }

/* Cascade d'entrée (réutilise les keyframes du hero home) */
.cdlib-svc-hero__eyebrow  { animation: cdlibHeroIn .56s cubic-bezier(.22,1,.36,1) 0ms both; }
.cdlib-svc-hero__title    { animation: cdlibHeroIn .6s  cubic-bezier(.22,1,.36,1) 90ms both; }
.cdlib-svc-hero__subtitle { animation: cdlibHeroIn .6s  cubic-bezier(.22,1,.36,1) 180ms both; }
.cdlib-svc-hero__actions  { animation: cdlibHeroIn .6s  cubic-bezier(.22,1,.36,1) 280ms both; }
.cdlib-svc-hero__plate    { animation: cdlibHeroIn .7s  cubic-bezier(.22,1,.36,1) 360ms both; }
.cdlib-svc-hero__bg       { animation: cdlibSvcBgIn 1.4s var(--cd-ease-out) both; }

@keyframes cdlibSvcBgIn {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: .16; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cdlib-svc-hero__eyebrow, .cdlib-svc-hero__title, .cdlib-svc-hero__subtitle,
  .cdlib-svc-hero__actions, .cdlib-svc-hero__plate, .cdlib-svc-hero__bg {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .cdlib-svc-hero__bg { opacity: .16 !important; }
}

/* ==========================================================================
   v2.6.5 — Formulaire conversion-first : chips besoin, submit humanisé
   ========================================================================== */
.cdlib-form__chips {
  border: none;
  padding: 0;
  margin: 0;
}
.cdlib-form__chips legend {
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cd-muted);
  margin-bottom: .6rem;
  padding: 0;
}
.cdlib-form__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.cdlib-form__chips legend { width: 100%; }
.cdlib-chip { cursor: pointer; }
.cdlib-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cdlib-chip span {
  display: inline-block;
  padding: .55rem 1.05rem;
  border: 1.5px solid var(--cd-line);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--cd-ink);
  background: var(--cd-white);
  transition: border-color .15s var(--cd-ease-out), background .15s var(--cd-ease-out), color .15s var(--cd-ease-out), transform .1s var(--cd-ease-out);
  line-height: 1;
}
.cdlib-chip:hover span { border-color: var(--cd-blue); }
.cdlib-chip input:checked + span {
  background: var(--cd-navy);
  border-color: var(--cd-navy);
  color: var(--cd-white);
}
.cdlib-chip input:focus-visible + span {
  outline: 2px solid var(--cd-blue);
  outline-offset: 2px;
}

/* Submit row : bouton auto-width + humain */
.cdlib-form__submit-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.cdlib-form__submit-row .cdlib-cta { width: auto; margin-top: 0; padding: 1rem 1.75rem; }
.cdlib-form__human {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: 1;
  min-width: 220px;
}
.cdlib-form__human img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 15%;
  flex-shrink: 0;
}
.cdlib-form__human p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--cd-muted);
}
.cdlib-form__human strong { color: var(--cd-ink); }

/* Textarea plus courte par défaut (3 lignes suffisent pour démarrer) */
.cdlib-form textarea { min-height: 88px; }

/* v2.6.6b — le bouton submit reprend une largeur naturelle dans la submit-row */
.cdlib-form .cdlib-form__submit-row button[type=submit] {
  width: auto;
  margin-top: 0;
}

/* v2.6.8 — médaillon portrait : cadrage sur le visage (source non croppée) */
.cdlib-form__human img {
  object-position: center 12%;
}

/* ==========================================================================
   v2.7.0 — Section formulaire en navy full-bleed, fiche blanche posée dessus
   Le formulaire devient le closing de page (cta-final retiré là où il est).
   ========================================================================== */
.cdlib-section--form {
  background: var(--cd-navy);
  position: relative;
  overflow: hidden;
}
/* v3.7.2 — trame retirée. C'est la règle qui s'applique réellement (celle du haut du
   fichier est morte). La section du formulaire est LA zone de conversion du site : même
   arbitrage que pour le bloc de devis, aplat volontaire. La trame ne subsiste que sur
   les deux heros, où elle porte la DA de plaque signalétique.
   Pour revenir en arrière : restaurer les deux linear-gradient, le background-size et
   les deux mask-image. */
.cdlib-section--form::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Colonne gauche : textes en blanc */
.cdlib-section--form .cdlib-eyebrow { color: var(--cd-yellow); }
.cdlib-section--form .cdlib-form__side h2 { color: var(--cd-white); }
.cdlib-section--form .cdlib-form__side > p { color: rgba(255, 255, 255, .75); }
.cdlib-section--form .cdlib-form__points li { color: rgba(255, 255, 255, .9); }

/* Contact direct : carte translucide sur navy */
.cdlib-section--form .cdlib-form__contact {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
  color: var(--cd-white);
}
.cdlib-section--form .cdlib-form__contact:hover { border-color: var(--cd-yellow); color: var(--cd-white); }
.cdlib-section--form .cdlib-form__contact-label { color: var(--cd-yellow); }
.cdlib-section--form .cdlib-form__contact-value { color: rgba(255, 255, 255, .7); }
.cdlib-section--form .cdlib-form__contact-value strong { color: var(--cd-white); }

/* La fiche blanche ressort avec une vraie élévation sur le fond sombre */
.cdlib-section--form .cdlib-form__box {
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .55);
}

/* ==========================================================================
   v2.7.1 — Note Google dans le hero + rôle avis dans les quotes
   ========================================================================== */
.cdlib-hero--home .cdlib-hero__trust {
  grid-area: geo;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  animation: cdlibHeroIn .56s cubic-bezier(.22,1,.36,1) 380ms both;
}
.cdlib-hero--home .cdlib-hero__geo { animation: none; }
.cdlib-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  background: var(--cd-white);
  border: 1px solid var(--cd-line);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--cd-muted);
  white-space: nowrap;
}
.cdlib-hero__stars {
  color: var(--cd-yellow);
  font-size: .9rem;
  letter-spacing: .06em;
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.cdlib-hero__rating strong { color: var(--cd-ink); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .cdlib-hero--home .cdlib-hero__trust { animation: none !important; }
}

/* ==========================================================================
   v2.7.2 — Trust strip en bas des heros (note Google + logos clients)
   ========================================================================== */
.cdlib-trust-strip {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--cd-line);
  background: var(--cd-white);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.cdlib-trust-strip__in {
  max-width: var(--cd-container);
  margin-inline: auto;
  padding: 1.1rem var(--cd-gutter);
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.cdlib-trust-strip__rating {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  color: var(--cd-muted);
  white-space: nowrap;
}
.cdlib-trust-strip__rating span[aria-hidden] { color: var(--cd-yellow); letter-spacing: .06em; }
.cdlib-trust-strip__rating strong { color: var(--cd-ink); }

.cdlib-trust-strip__label {
  margin: 0;
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cd-muted);
  padding-left: 1.75rem;
  border-left: 1px solid var(--cd-line);
  white-space: nowrap;
}
.cdlib-trust-strip__logos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  flex: 1;
}
.cdlib-trust-strip__logos img {
  max-height: 34px;
  width: auto;
  filter: grayscale(1);
  opacity: .65;
  transition: opacity .2s, filter .2s;
  display: block;
}
.cdlib-trust-strip__logos li:hover img { filter: grayscale(0); opacity: 1; }

/* --- Variante sombre (hero service navy) --- */
.cdlib-trust-strip--dark {
  background: transparent;
  border-top-color: rgba(255, 255, 255, .12);
}
.cdlib-trust-strip--dark .cdlib-trust-strip__rating { color: rgba(255,255,255,.7); }
.cdlib-trust-strip--dark .cdlib-trust-strip__rating strong { color: var(--cd-white); }
.cdlib-trust-strip--dark .cdlib-trust-strip__label {
  color: rgba(255,255,255,.5);
  border-left-color: rgba(255,255,255,.15);
}
/* Pastilles blanches : robuste pour tous les formats (JPG opaques inclus) */
.cdlib-trust-strip--dark .cdlib-trust-strip__logos li {
  background: rgba(255, 255, 255, .93);
  border-radius: 8px;
  padding: .45rem .8rem;
  display: inline-flex;
  align-items: center;
  transition: background .2s var(--cd-ease-out);
}
.cdlib-trust-strip--dark .cdlib-trust-strip__logos li:hover { background: #fff; }
.cdlib-trust-strip--dark .cdlib-trust-strip__logos img {
  filter: grayscale(1);
  opacity: .85;
  max-height: 24px;
}
.cdlib-trust-strip--dark .cdlib-trust-strip__logos li:hover img { filter: grayscale(0); opacity: 1; }

/* Le hero service en flex column pour caler la strip en bas */
.cdlib-svc-hero { flex-direction: column; justify-content: center; }
.cdlib-svc-hero .cdlib-trust-strip { width: 100%; margin-top: auto; padding-top: 1rem; }

/* Hero home : la strip sort du grid, pleine largeur en bas */
.cdlib-hero--home { padding-bottom: 0; }
.cdlib-hero--home .cdlib-trust-strip { margin-top: clamp(2.5rem, 5vw, 4rem); }

@media (max-width: 700px) {
  .cdlib-trust-strip__label { border-left: none; padding-left: 0; }
  .cdlib-trust-strip__logos { gap: 1.25rem; }
  .cdlib-trust-strip__logos img { max-height: 26px; }
}

/* ==========================================================================
   v2.8.0 — Hero home compact (au-dessus de la ligne de flottaison) + portrait N&B
   ========================================================================== */

/* Portrait : noir & blanc pur, plus de duotone bleu */
.cdlib-hero--home .cdlib-hero__portrait-tint { display: none; }
.cdlib-hero--home .cdlib-hero__portrait img {
  filter: grayscale(1) contrast(1.06);
  aspect-ratio: 900 / 954;
  object-position: center top;
}

/* Compactage vertical : tout le hero + strip tiennent dans un écran */
.cdlib-hero--home { padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; }
.cdlib-hero--home .cdlib-hero__container { row-gap: 1rem; }
@media (min-width: 1024px) {
  .cdlib-hero--home .cdlib-hero__container { row-gap: .85rem; column-gap: clamp(2rem, 4vw, 3.5rem); }
}
.cdlib-hero--home .cdlib-hero__title {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  margin-bottom: .25rem;
}
.cdlib-hero--home .cdlib-hero__body {
  font-size: .95rem;
  line-height: 1.55;
  margin: 0;
}
.cdlib-hero--home .cdlib-hero__visual { max-width: 400px; }
.cdlib-hero--home .cdlib-hero__plate { padding: 1.1rem 1rem; }
.cdlib-hero--home .cdlib-hero__plate-row { padding-block: .5rem; }
.cdlib-hero--home .cdlib-hero__plate-sub { display: none; } /* la ligne d'appoint prenait 3 lignes : coupée pour la flottaison */
.cdlib-hero--home .cdlib-hero__actions { margin-top: .25rem; }
.cdlib-hero--home .cdlib-hero__geo { font-size: .72rem; }
.cdlib-hero--home .cdlib-trust-strip { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

/* v2.8.1 — compactage hero home, 2e passe (mesuré 1132px pour 892 de viewport) */
@media (min-width: 1024px) {
  .cdlib-hero--home .cdlib-hero__container {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}
.cdlib-hero--home .cdlib-hero__visual { max-width: 340px; }
.cdlib-hero--home .cdlib-hero__title {
  font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.9rem);
  line-height: 1.05;
}
.cdlib-hero--home .cdlib-hero__plate { margin-top: -2.5rem; padding: .9rem .9rem; }
.cdlib-hero--home .cdlib-hero__plate-row { padding-block: .45rem; grid-template-columns: 72px 1fr; }
.cdlib-hero--home .cdlib-hero__plate-row dt { font-size: .62rem; }
.cdlib-hero--home .cdlib-hero__plate-row dd { font-size: .75rem; line-height: 1.35; }
.cdlib-hero--home { padding-top: 1.25rem; }
.cdlib-hero--home .cdlib-hero__eyebrow { margin-bottom: .5rem; font-size: .68rem; }

/* v2.8.2 — compactage hero home, 3e passe (995 → objectif < 892) */
@media (min-width: 1024px) {
  .cdlib-hero--home .cdlib-hero__container { grid-template-columns: minmax(0, 1fr) 300px; row-gap: .6rem; }
}
.cdlib-hero--home .cdlib-hero__visual { max-width: 300px; }
.cdlib-hero--home { padding-top: .75rem; }
.cdlib-hero--home .cdlib-hero__body { font-size: .9rem; line-height: 1.5; max-width: 52ch; }
.cdlib-hero--home .cdlib-hero__actions { margin-top: 0; }
.cdlib-hero--home .cdlib-hero__cta { padding: .8rem 1.3rem; font-size: .85rem; }
.cdlib-hero--home .cdlib-trust-strip { margin-top: 1rem; }
.cdlib-hero--home .cdlib-trust-strip__in { padding-block: .8rem; }
.cdlib-trust-strip__logos img { max-height: 28px; }

/* v2.8.3 — dernière passe flottaison (-50px) */
.cdlib-hero--home { padding-top: .5rem; }
.cdlib-hero--home .cdlib-hero__title { font-size: clamp(1.8rem, 1.15rem + 2.1vw, 2.7rem); }
.cdlib-hero--home .cdlib-hero__plate { margin-top: -4rem; }
.cdlib-hero--home .cdlib-trust-strip { margin-top: .5rem; }
@media (min-width: 1024px) {
  .cdlib-hero--home .cdlib-hero__container { row-gap: .5rem; }
}

/* ==========================================================================
   v2.8.4 — Hero home pleine hauteur (remplit l'écran, strip calée en bas)
   Portrait re-cadré tête + buste (4:5).
   ========================================================================== */
.cdlib-hero--home {
  min-height: calc(100vh - 76px);
  display: flex;
  flex-direction: column;
  padding-top: 0;
}
body.admin-bar .cdlib-hero--home { min-height: calc(100vh - 76px - 32px); }

.cdlib-hero--home .cdlib-hero__container {
  flex: 1;
  align-content: center;
  padding-block: 1.5rem;
}
.cdlib-hero--home .cdlib-trust-strip { margin-top: auto; }

/* Portrait : retour au cadrage 4:5 tête + buste, taille équilibrée */
@media (min-width: 1024px) {
  .cdlib-hero--home .cdlib-hero__container { grid-template-columns: minmax(0, 1fr) 380px; row-gap: .75rem; }
}
.cdlib-hero--home .cdlib-hero__visual { max-width: 380px; }
.cdlib-hero--home .cdlib-hero__portrait img {
  aspect-ratio: 4 / 5;
  object-position: center 12%;
  max-height: 58vh;
}

/* Le H1 peut respirer à nouveau un peu */
.cdlib-hero--home .cdlib-hero__title { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); }

/* v2.8.5 — portrait dézoomé v3 : cadrage neutre */
.cdlib-hero--home .cdlib-hero__portrait img { object-position: center top; }

/* v2.8.7 — logos cliquables */
.cdlib-trust-strip__logos li a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 6px;
}
.cdlib-trust-strip__logos li a:focus-visible {
  outline: 2px solid var(--cd-blue);
  outline-offset: 3px;
}

/* Intro archive réalisations (v2.9.2) */
.cdlib-archive-intro { margin: 0 auto var(--space-8, 3rem); }
.cdlib-archive-intro p { max-width: 68ch; }

/* ============================================================
   Dock d'actions rapides (v2.9.3)
   Déclinaison charlyduguey du dock digitalstentor : plaque navy,
   action prioritaire en jaune (doctrine jaune = action).
   ============================================================ */
.cdlib-dock {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9978;
}
.cdlib-dock a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--cd-radius);
  background: var(--cd-navy);
  color: var(--cd-white);
  box-shadow: 0 10px 26px rgba(7, 31, 73, .28), 0 2px 6px rgba(7, 31, 73, .18);
  transition: transform .25s var(--cd-ease-out), background .2s var(--cd-ease-out), box-shadow .25s var(--cd-ease-out);
  animation: cdlib-dock-in .45s cubic-bezier(.22,.9,.36,1) backwards;
}
.cdlib-dock a:nth-child(1) { animation-delay: .10s; }
.cdlib-dock a:nth-child(2) { animation-delay: .18s; }
.cdlib-dock a:nth-child(3) { animation-delay: .26s; }
.cdlib-dock a:nth-child(4) { animation-delay: .34s; }
.cdlib-dock a:hover {
  transform: translateY(-3px);
  background: var(--cd-blue);
  box-shadow: 0 14px 32px rgba(7, 31, 73, .34), 0 3px 8px rgba(7, 31, 73, .2);
}
.cdlib-dock a:focus-visible {
  outline: 2px solid var(--cd-yellow);
  outline-offset: 2px;
}
.cdlib-dock a.cdlib-dock__audit {
  background: var(--cd-yellow);
  color: var(--cd-navy);
}
.cdlib-dock a.cdlib-dock__audit:hover { background: var(--cd-yellow-hover); }
.cdlib-dock a.cdlib-dock__audit:focus-visible { outline-color: var(--cd-blue); }
.cdlib-dock svg { width: 22px; height: 22px; }

@keyframes cdlib-dock-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
  .cdlib-dock { top: auto; bottom: 16px; right: 12px; transform: none; gap: 8px; }
  .cdlib-dock a { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .cdlib-dock a { animation: none; transition: none; }
  .cdlib-dock a:hover { transform: none; }
}
@media print {
  .cdlib-dock { display: none; }
}

/* ============================================================
   Ergonomie mobile (v2.9.7) — audit Playwright 16/07/2026
   ============================================================ */

/* Le dock s'efface quand le formulaire ou le footer est à l'écran
   (il recouvrait le bouton « Envoyer ma demande » sur mobile). */
.cdlib-dock {
  transition: opacity .3s var(--cd-ease-out), transform .3s var(--cd-ease-out);
}
.cdlib-dock--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(140%);
}

/* Cibles tactiles ≥ 44px pour les liens secondaires */
.cdlib-quotes-head__link { display: inline-block; padding: .65rem 0; }
.cdlib-part__more { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 700px) {
  .cdlib-dock--hidden { transform: translateX(140%); }

  /* La plaque signalétique ne passe plus sous le dock (colonne droite 56px) */
  .cdlib-hero--home .cdlib-hero__plate,
  .cdlib-hero__plate,
  .cdlib-svc-hero__plate { padding-right: 3.5rem; }

  /* Bande de confiance : pile centrée et rangées de logos régulières */
  .cdlib-trust-strip__in {
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    padding: 1.4rem var(--cd-gutter);
    text-align: center;
  }
  .cdlib-trust-strip__label { border-left: none; padding-left: 0; }
  .cdlib-trust-strip__logos {
    justify-content: center;
    gap: .9rem 1.4rem;
    flex: none;
  }
  .cdlib-trust-strip__logos img { max-height: 26px; }
  .cdlib-trust-strip--dark .cdlib-trust-strip__logos img { max-height: 22px; }
}

/* ============================================================
   Page Contact native (v2.9.9)
   ============================================================ */

/* Plaque du hero : coordonnées cliquables */
.cdlib-svc-hero__plate dd a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  transition: color .15s var(--cd-ease-out), border-color .15s var(--cd-ease-out);
}
.cdlib-svc-hero__plate dd a:hover,
.cdlib-svc-hero__plate dd a:focus-visible {
  color: var(--cd-yellow);
  border-bottom-color: var(--cd-yellow);
}

/* Carte formulaire */
.cdlib-contact-main .cdlib-container { max-width: 820px; }
.cdlib-contact-main__card {
  background: var(--cd-white);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  box-shadow: var(--cd-shadow);
  padding: clamp(1.5rem, 4.5vw, 3rem);
}
.cdlib-contact-main__head { text-align: center; margin-bottom: 2rem; }
.cdlib-contact-main__head h2 { margin: .35rem 0 .6rem; font-size: var(--cd-fs-2xl); color: var(--cd-ink); }
.cdlib-contact-main__head p:last-child { color: var(--cd-muted); max-width: 46ch; margin-inline: auto; }

/* Skin Fluent Forms → tokens maison */
.cdlib-contact-main .frm-fluent-form .ff-el-input--label label, .cdlib-form__box .frm-fluent-form .ff-el-input--label label {
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-ink);
}
.cdlib-contact-main .frm-fluent-form .ff-el-form-control, .cdlib-form__box .frm-fluent-form .ff-el-form-control {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius-sm);
  background: var(--cd-bg-softer);
  font-family: var(--cd-font);
  font-size: 1rem;
  color: var(--cd-ink);
  transition: border-color .15s var(--cd-ease-out), box-shadow .15s var(--cd-ease-out), background .15s var(--cd-ease-out);
}
.cdlib-contact-main .frm-fluent-form .ff-el-form-control:focus, .cdlib-form__box .frm-fluent-form .ff-el-form-control:focus {
  outline: none;
  border-color: var(--cd-blue);
  background: var(--cd-white);
  box-shadow: 0 0 0 3px var(--cd-blue-soft);
}
.cdlib-contact-main .frm-fluent-form .ff-el-group, .cdlib-form__box .frm-fluent-form .ff-el-group { margin-bottom: 1.35rem; }
.cdlib-contact-main .frm-fluent-form .ff-btn-submit, .cdlib-form__box .frm-fluent-form .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: 1.05rem 1.5rem;
  /* !important : Fluent Forms pose sa couleur en inline/haute spécificité */
  background: var(--cd-yellow) !important;
  color: var(--cd-navy) !important;
  border: none;
  border-radius: 999px;
  font-family: var(--cd-font);
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(255, 208, 0, .5);
  transition: background .2s, transform .15s var(--cd-ease-out), box-shadow .2s;
}
.cdlib-contact-main .frm-fluent-form .ff-btn-submit:hover, .cdlib-form__box .frm-fluent-form .ff-btn-submit:hover {
  background: var(--cd-yellow-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(255, 208, 0, .65);
}
.cdlib-contact-main .frm-fluent-form .ff-btn-submit:focus-visible, .cdlib-form__box .frm-fluent-form .ff-btn-submit:focus-visible {
  outline: 2px solid var(--cd-blue);
  outline-offset: 2px;
}
.cdlib-contact-main .frm-fluent-form .ff-el-is-error .ff-el-form-control, .cdlib-form__box .frm-fluent-form .ff-el-is-error .ff-el-form-control { border-color: #C0362C; }
.cdlib-contact-main .frm-fluent-form .error, .cdlib-form__box .frm-fluent-form .error { color: #C0362C; font-size: .85rem; }

/* Réassurance sous le formulaire */
.cdlib-contact-main__trust {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--cd-line);
  display: grid;
  gap: .5rem;
  text-align: center;
  font-size: .88rem;
  color: var(--cd-muted);
}
.cdlib-contact-main__trust strong { color: var(--cd-ink); }
.cdlib-contact-main__rgpd {
  margin: .75rem 0 0;
  text-align: center;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--cd-muted);
}
.cdlib-contact-main__rgpd a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.cdlib-contact-main__rgpd a:hover,
.cdlib-contact-main__rgpd a:focus-visible { color: var(--cd-ink); }

/* ============================================================
   Page Contact v3.0.2 — grille formulaire + aside "Qui vous répond"
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
#formulaire { scroll-margin-top: 90px; }

.cdlib-contact-main .cdlib-container { max-width: var(--cd-container); }
.cdlib-contact-main__grid { display: grid; gap: 1.75rem; }
@media (min-width: 1024px) {
  .cdlib-contact-main__grid {
    grid-template-columns: 1.55fr 1fr;
    gap: 2.5rem;
    align-items: start;
  }
  .cdlib-contact-who { position: sticky; top: 100px; }
}

/* Aside : qui vous répond */
.cdlib-contact-who {
  background: var(--cd-white);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  box-shadow: var(--cd-shadow);
  overflow: hidden;
}
.cdlib-contact-who__photo { margin: 0; }
.cdlib-contact-who__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(1);
}
.cdlib-contact-who__id { padding: 1.4rem 1.5rem 1.25rem; }
.cdlib-contact-who__name { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--cd-ink); }
.cdlib-contact-who__role {
  margin: .2rem 0 .65rem;
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-muted);
}
.cdlib-contact-who__rating { margin: 0 0 .75rem; font-size: .88rem; color: var(--cd-muted); }
.cdlib-contact-who__rating span { color: var(--cd-yellow); letter-spacing: .06em; }
.cdlib-contact-who__pitch { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--cd-ink); }

/* Mini plaque navy : la suite en 3 étapes (écho de la plaque hero) */
.cdlib-contact-who__steps {
  margin: 0 1.5rem 1.5rem;
  padding: 1.1rem 1.2rem;
  background: var(--cd-navy);
  border-radius: var(--cd-radius-sm);
}
.cdlib-contact-who__steps-title {
  margin: 0 0 .75rem;
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cd-yellow);
}
.cdlib-contact-who__step {
  display: flex;
  gap: .8rem;
  padding: .5rem 0;
}
.cdlib-contact-who__step + .cdlib-contact-who__step { border-top: 1px solid rgba(255, 255, 255, .1); }
.cdlib-contact-who__step dt {
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .75rem;
  font-weight: 600;
  color: var(--cd-yellow);
  padding-top: .1rem;
}
.cdlib-contact-who__step dd { margin: 0; font-size: .875rem; line-height: 1.45; color: rgba(255, 255, 255, .88); }

/* Contact : hero compact — le formulaire doit affleurer dès l'arrivée.
   (Les pages de vente gardent leur hero pleine hauteur.) */
.cdlib-svc-hero--contact,
body.admin-bar .cdlib-svc-hero--contact {
  min-height: 0;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* Deliverables cliquables (v3.0.5) : maillage vers les fiches prestation */
.cdlib-deliverable h3 a {
  color: inherit;
  text-decoration: none;
  transition: color .15s var(--cd-ease-out);
}
.cdlib-deliverable--linked:hover h3 a,
.cdlib-deliverable h3 a:hover,
.cdlib-deliverable h3 a:focus-visible { color: var(--cd-blue); }
.cdlib-deliverable__more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .75rem;
  min-height: 44px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cd-blue);
  text-decoration: none;
}
.cdlib-deliverable__more svg { transition: transform .15s var(--cd-ease-out); }
.cdlib-deliverable__more:hover svg { transform: translateX(3px); }
.cdlib-deliverable--linked {
  transition: transform .2s var(--cd-ease-out), box-shadow .2s var(--cd-ease-out);
}
.cdlib-deliverable--linked:hover {
  transform: translateY(-3px);
  box-shadow: var(--cd-shadow);
}

/* ============================================================
   Page Merci (v3.0.6)
   ============================================================ */
.cdlib-merci .cdlib-container { max-width: 760px; }
.cdlib-merci__card {
  background: var(--cd-white);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  box-shadow: var(--cd-shadow);
  padding: clamp(1.5rem, 4.5vw, 3rem);
  text-align: center;
}
.cdlib-merci__head h2 { margin: .35rem 0 .6rem; font-size: var(--cd-fs-2xl); color: var(--cd-ink); }
.cdlib-merci__head p:last-child { color: var(--cd-muted); max-width: 48ch; margin-inline: auto; }
.cdlib-merci__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin: 1.75rem 0;
}
.cdlib-merci__ghost { color: var(--cd-ink); border-color: var(--cd-line); }
.cdlib-merci__steps { text-align: left; margin: 0 auto 1.5rem; max-width: 480px; }
.cdlib-merci__home { margin: 0; font-size: .9rem; }
.cdlib-merci__home a { color: var(--cd-muted); }
.cdlib-merci__home a:hover { color: var(--cd-blue); }

/* Chevrons du menu en jaune signature (v3.0.14).
   !important : une règle tierce à égalité de spécificité gagnait la cascade. */
.cdlib-header .cdlib-nav__top svg { color: var(--cd-yellow) !important; }

/* Panel Réalisations : vraies vignettes des études de cas (v3.0.15) */
.cdlib-panel__ic--thumb { overflow: hidden; background: var(--cd-bg-soft); }
.cdlib-panel__ic--thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Études de cas v2 (v3.0.16) — hero fiche technique, cadre
   navigateur (visuels jamais recadrés), galerie, avant/après.
   ============================================================ */
.cdlib-svc-hero--case { padding-bottom: 0; min-height: 0; }
.cdlib-svc-hero--case,
body.admin-bar .cdlib-svc-hero--case { min-height: 0; }

/* Cadre navigateur : barre à 3 pastilles + image entière */
.cdlib-case-shot {
  max-width: min(980px, calc(100% - 2 * var(--cd-gutter)));
  margin: clamp(2rem, 5vw, 3.5rem) auto calc(-1 * clamp(2.5rem, 6vw, 4.5rem));
  position: relative;
  z-index: 3;
}
.cdlib-case-shot__frame,
.cdlib-case-gallery__item {
  margin: 0;
  background: var(--cd-white);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  box-shadow: var(--cd-shadow-lg);
  overflow: hidden;
}
.cdlib-case-shot__bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: var(--cd-bg-soft);
  border-bottom: 1px solid var(--cd-line);
}
.cdlib-case-shot__bar i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cd-line);
}
.cdlib-case-shot__frame img,
.cdlib-case-gallery__item img {
  display: block;
  width: 100%;
  height: auto;   /* jamais recadré */
}
/* La section suivante laisse la place au visuel qui déborde du hero */
.cdlib-svc-hero--case + .cdlib-section { padding-top: clamp(4.5rem, 10vw, 7rem); }

/* Galerie */
.cdlib-case-gallery {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.75rem;
}
@media (min-width: 900px) { .cdlib-case-gallery { grid-template-columns: 1fr 1fr; } }
.cdlib-case-gallery__item figcaption {
  padding: .7rem 1rem;
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-muted);
  border-top: 1px solid var(--cd-line);
}

/* Problématiques */
.cdlib-case-problems {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.cdlib-case-problems li {
  position: relative;
  padding: .85rem 1rem .85rem 2.4rem;
  background: var(--cd-bg-softer);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius-sm);
}
.cdlib-case-problems li::before {
  content: "";
  position: absolute;
  left: 1rem; top: 1.15rem;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--cd-yellow);
}

/* Avant / après */
.cdlib-beforeafter {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.75rem;
}
@media (min-width: 900px) { .cdlib-beforeafter { grid-template-columns: 1fr 1fr; } }
.cdlib-beforeafter__col {
  margin: 0;
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  overflow: hidden;
  box-shadow: var(--cd-shadow);
}
.cdlib-beforeafter__col img { display: block; width: 100%; height: auto; }
.cdlib-beforeafter__col figcaption {
  padding: .6rem 1rem;
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cdlib-beforeafter__col--before figcaption { background: var(--cd-bg-soft); color: var(--cd-muted); }
.cdlib-beforeafter__col--after figcaption { background: var(--cd-navy); color: var(--cd-yellow); }
.cdlib-beforeafter__note { margin-top: 1rem; color: var(--cd-muted); font-size: .92rem; }

/* Les choix qui comptent (études de cas, v3.0.18) */
.cdlib-case-choices {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
@media (min-width: 900px) { .cdlib-case-choices { grid-template-columns: 1fr 1fr; } }
.cdlib-case-choice {
  padding: 1.4rem 1.5rem;
  background: var(--cd-white);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  box-shadow: var(--cd-shadow);
}
.cdlib-case-choice__tag {
  display: inline-block;
  margin-bottom: .7rem;
  padding: .3rem .6rem;
  background: var(--cd-navy);
  color: var(--cd-yellow);
  border-radius: 4px;
  font-family: var(--cdlib-font-mono, ui-monospace, monospace);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cdlib-case-choice h3 { margin: 0 0 .5rem; font-size: 1.1rem; color: var(--cd-ink); }
.cdlib-case-choice p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--cd-muted); }


/* ============================================================
   Gating tactile (doctrine motion 08/2026) : un hover anime ne
   doit jamais coller au doigt. Sur ecran tactile, les
   deplacements au survol sont neutralises ; les etats focus
   clavier et les changements de couleur restent.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  .cdlib-cta--primary:hover,
  header .ct-header-cta:hover,
  .cdlib-form__contact:hover,
  .cdlib-service-card:hover .cdlib-service-card__icon,
  .cdlib-hero:hover .cdlib-hero__media img,
  .cdlib-hero__cta--primary:hover,
  .cdlib-hero__cta--primary:hover svg,
  .cdlib-header__cta:hover,
  .cdlib-header__cta:hover svg,
  .cdlib-panel__cta:hover,
  .cdlib-case:hover,
  .cdlib-pack:hover,
  .cdlib-pack--reco:hover,
  .cdlib-dock a:hover,
  .cdlib-form__box .frm-fluent-form .ff-btn-submit:hover,
  .cdlib-deliverable__more:hover svg,
  .cdlib-deliverable--linked:hover,
  .cdlib-part__link:hover .cdlib-part__icon,
  .cdlib-part__link:hover .cdlib-part__more svg {
    transform: none;
  }
  /* le reflet du CTA reste gare hors champ (sinon il fige en plein bouton) */
  .cdlib-cta--primary:hover::before { transform: translateX(-120%); transition: none; }
}
/* Le pack recommande garde son echelle de base sur tablette tactile large */
@media ((hover: none) or (pointer: coarse)) and (min-width: 900px) {
  .cdlib-pack--reco:hover { transform: scale(1.03); }
}

/* Lien d'évitement : il était masqué par .screen-reader-text sans jamais réapparaître au focus,
   signalé par Lighthouse (« Les liens d'ancrage ne sont pas sélectionnables »). Un visiteur au
   clavier ne voyait donc pas où il se trouvait. Ajouté le 18/08/2026. */
.screen-reader-text:focus,
.skip-link:focus {
  position: fixed !important;
  top: 12px;
  left: 12px;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--cd-navy, #071F49);
  color: var(--cd-white, #fff);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  outline: 2px solid var(--cd-yellow, #FFD000);
  outline-offset: 2px;
}

/* Encart vers le contrôle technique, sur les pages de référencement (18/08/2026).
   Bleu plein : il doit trancher avec les sections voisines sans crier, et rester
   secondaire par rapport au CTA de la page, qui vend la prestation. */
.cdct-encart {
  padding: 0 var(--cd-gutter);
  margin: clamp(2rem, 5vw, 3.5rem) auto;
  max-width: var(--cd-container);
}
.cdct-encart__in {
  background: var(--cd-blue);
  color: var(--cd-white);
  border-radius: 16px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.cdct-encart__eyebrow {
  font-size: var(--cd-fs-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin: 0 0 .5rem;
}
.cdct-encart__titre {
  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 .6rem;
  color: var(--cd-white);
}
.cdct-encart__txt {
  font-size: var(--cd-fs-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  margin: 0 0 1.25rem;
  max-width: 58ch;
}
.cdct-encart__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: var(--cd-fs-sm);
  padding: .8rem 1.35rem;
  border-radius: 10px;
  background: var(--cd-yellow);
  color: var(--cd-ink);
  text-decoration: none;
  transition: background .2s ease-out, transform .12s ease-out;
}
@media (hover: hover) { .cdct-encart__cta:hover { background: var(--cd-yellow-hover); } }
.cdct-encart__cta:active { transform: translateY(1px); }
.cdct-encart__cta:focus-visible { outline: 2px solid var(--cd-white); outline-offset: 3px; }

/* Mention « gratuit » dans le pied de page */
.cdlib-footer__tag {
  display: inline-block;
  margin-left: .45rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cd-yellow);
}

/* Lancement rapide du contrôle depuis l'accueil (18/08/2026).
   Bandeau navy pour trancher avec les sections claires qui l'entourent, sans reprendre
   le bleu des encarts : ce n'est pas une offre, c'est une invitation à agir. */
.cdrap { background: var(--cd-navy); color: var(--cd-white); padding: clamp(2.75rem, 6vw, 4.25rem) 0; }
.cdrap__in {
  width: min(100% - (var(--cd-gutter) * 2), var(--cd-container));
  margin-inline: auto;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) { .cdrap__in { grid-template-columns: 1.1fr 1fr; } }
.cdrap__eyebrow {
  font-size: var(--cd-fs-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cd-yellow); margin: 0 0 .6rem;
}
.cdrap__titre {
  font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; line-height: 1.15;
  color: var(--cd-white); margin: 0 0 .75rem;
}
.cdrap__p {
  font-size: var(--cd-fs-sm); line-height: 1.65;
  color: rgba(255,255,255,.82); margin: 0; max-width: 52ch;
}
.cdrap__label {
  display: block; font-size: var(--cd-fs-xs); font-weight: 600;
  color: rgba(255,255,255,.7); margin-bottom: .5rem;
}
.cdrap__champ { display: flex; flex-wrap: wrap; gap: .7rem; }
.cdrap__champ input {
  flex: 1 1 14rem; min-width: 0; font: inherit; font-size: var(--cd-fs-md);
  padding: .9rem 1.1rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  color: var(--cd-white);
}
.cdrap__champ input::placeholder { color: rgba(255,255,255,.42); }
.cdrap__champ input:focus-visible {
  outline: 2px solid var(--cd-yellow); outline-offset: 2px;
  border-color: transparent; background: rgba(255,255,255,.1);
}
.cdrap__go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-weight: 700; font-size: var(--cd-fs-sm);
  padding: .9rem 1.4rem; border: 0; border-radius: 10px;
  background: var(--cd-yellow); color: var(--cd-ink); cursor: pointer;
  transition: background .2s ease-out, transform .12s ease-out;
}
@media (hover: hover) { .cdrap__go:hover { background: var(--cd-yellow-hover); } }
.cdrap__go:active { transform: translateY(1px); }
.cdrap__go:focus-visible { outline: 2px solid var(--cd-white); outline-offset: 3px; }

/* Remplissage automatique du navigateur sur le champ d'analyse de l'accueil (fond navy). */
.cdrap__champ input:-webkit-autofill,
.cdrap__champ input:-webkit-autofill:hover,
.cdrap__champ input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF;
  caret-color: #FFFFFF;
  transition: background-color 100000s ease-in-out 0s;
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, .06);
}