/* ── Services page ────────────────────────────────────────── */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.offer-card {
  background: var(--light);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .3s, box-shadow .3s, border-color .3s; /* V41 : cohérence hover cartes (CDC §7) */
}
.offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated, var(--shadow-medium)); border-color: transparent; }
.offer-card--featured:hover { border-color: var(--red); }
.offer-card--featured {
  background: var(--black);
  border-color: var(--red);
}
.offer-card--featured h3,
.offer-card--featured p { color: rgba(255,255,255,.8); }
.offer-card--featured .oc-price { color: var(--red); }
.oc-badge-top {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: var(--white);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 100px;
  white-space: nowrap;
}
.oc-icon { font-size: 2.5rem; color: var(--red); display: flex; }
.oc-icon .service-icon-svg { width: 40px; height: 40px; }
.offer-card h3 { font-size: 1.2rem; font-weight: 800; color: var(--black); }
.oc-price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold);
}
.offer-card p { font-size: .875rem; color: var(--gray); line-height: 1.7; flex: 1; }

.conditions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 16px;
}
.cond-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  transition: box-shadow .3s, border-color .3s; /* V41 */
}
.cond-card:hover { box-shadow: var(--shadow-soft); border-color: transparent; }
.cond-icon { font-size: 1.8rem; margin-bottom: 12px; }
.cond-card h4 { font-size: .875rem; font-weight: 700; color: var(--black); margin-bottom: 6px; }
.cond-card p { font-size: .8rem; color: var(--gray); line-height: 1.5; }

/* Service détail */
.service-detail { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
.sd-img { width: 100%; border-radius: var(--radius-lg); margin-bottom: 24px; }
.sd-description { font-size: .95rem; color: var(--gray); line-height: 1.85; white-space: pre-line; }
.sd-body > *:first-child { margin-top: 0 !important; }
.sd-deliverables-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sd-deliverables-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: var(--surface2, #f7f7f9);
  border-radius: var(--radius-btn);
  font-size: var(--fs-base);
  line-height: 1.5;
}
.sd-check {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pole-c, var(--red)) 16%, transparent);
  color: var(--pole-c, var(--red));
}
.sd-check svg { width: 12px; height: 12px; }
.sd-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--nav-h) + var(--announce-h) + 24px); }
.sd-cta-box, .sd-conditions, .sd-other-services {
  background: var(--light);
  border-radius: var(--radius-md);
  padding: 24px;
}
.sd-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 16px;
}
.sd-note { font-size: .75rem; color: var(--muted); text-align: center; margin-top: 12px; }
.sd-conditions h4, .sd-other-services h4 {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 12px;
}
/* V47 : les <ul> gardaient le style-list par défaut du navigateur (puce ronde)
   en plus des icônes déjà présentes dans le markup → double puce "en vrac".
   list-style:none partout + un badge icône coloré uniforme, même traitement
   visuel que .sd-check (liste "Bénéfices") pour que toutes les listes de la
   sidebar service soient cohérentes entre elles. */
.sd-conditions ul, .sd-other-services ul, .sd-other-services .sd-poles-list { list-style: none; margin: 0; padding: 0; }
.sd-conditions ul { display: flex; flex-direction: column; gap: 10px; }
.sd-conditions li {
  font-size: .82rem; color: var(--black); display: flex; align-items: center; gap: 10px;
  background: var(--white); border-radius: var(--radius-btn); padding: 10px 12px;
  border: 1px solid var(--border);
}
.sd-conditions li .ui-icon {
  flex-shrink: 0; width: 30px; height: 30px; padding: 7px; box-sizing: border-box;
  border-radius: 50%;
  background: rgba(200,169,106,.16);
  color: var(--champagne-dark, #9c7c3f);
}
.sd-other-services ul { display: flex; flex-direction: column; gap: 4px; }
.sd-other-services li { list-style: none; }
.sd-other-services a {
  font-size: .85rem; color: var(--gray); padding: 6px 8px; border-radius: var(--radius-sm);
  transition: color .25s, background .25s; display: flex; align-items: center; gap: 8px;
}
.sd-other-services a:hover { color: var(--red); background: var(--white); }
.sd-other-services a .ui-icon, .sd-other-services a .service-icon-svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--pole-c, var(--red)); }
.sd-other-poles { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.sd-poles-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sd-poles-list li { list-style: none; }
.sd-poles-list a { justify-content: space-between; }
.sd-pole-count {
  font-size: .72rem; font-weight: 700; color: var(--muted);
  background: var(--white); border-radius: 100px; padding: 1px 8px; margin-left: auto;
}

/* Formulaire de contact intégré aux pages Expertises (CDC §6) */
.mcf-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
}
[data-pole] .mcf-box { border-top: 3px solid var(--pole-c); }
.mcf-title { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin-bottom: 4px; }
.mcf-title svg { width: 18px; height: 18px; color: var(--pole-c, var(--red)); }
.mcf-sub { font-size: .82rem; color: var(--muted); margin-bottom: 16px; }
.mcf-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: .9rem;
  resize: vertical;
}
.mcf-form .form-group--float { margin-bottom: 12px; }
.mcf-submit { margin-top: 4px; }

.sd-other-poles a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sd-pole-count {
  font-size: .68rem;
  color: var(--muted);
  background: var(--white);
  border-radius: 999px;
  padding: 1px 7px;
  flex-shrink: 0;
}

/* Carte prestations */
.carte-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 14px; }
.carte-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  transition: border-color .3s, background .3s;
}
.carte-card:hover { border-color: rgba(165,0,0,.4); background: rgba(165,0,0,.06); }
.carte-icon { font-size: 1.5rem; flex-shrink: 0; }
.carte-card strong { font-size: .9rem; color: var(--white); display: block; margin-bottom: 2px; }
.carte-card p { font-size: .78rem; color: rgba(255,255,255,.4); }

/* Pôles d'expertise (CDC — extension de l'offre de services)
   Signature éditoriale premium : grand chiffre serif fondu, cohérent
   avec la section "Notre méthode" (.process-number) de l'accueil.
   Toujours utilisée par pages/services.php et pages/ressources.php. */
.poles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 22px; margin-top: 12px; }

/* ============================================================
   §9.4 — GRILLE HOMEPAGE DES 11 UNIVERS (CDC Digital Experience
   Premium 2026). Conçu par Claude en l'absence du §9.4 source :
   hiérarchie à 2 niveaux plutôt qu'une liste plate de 11 items —
   3 univers en vedette (grande carte photo, format éditorial) +
   8 univers en grille compacte dense (icône + numéro + titre).
   Padding de section : 100/72/48px desktop/tablette/mobile (§4,
   ligne "Grille 11 univers, dense"). Stagger 60ms/carte (§7).
   ============================================================ */
.univers-section { padding: 100px 0; }
@media (max-width: 1100px) { .univers-section { padding: 72px 0; } }
@media (max-width: 768px)  { .univers-section { padding: 48px 0; } }

/* ── Rangée vedette — 3 cartes, format éditorial pleine image ── */
.univers-vedette-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
@media (max-width: 900px) { .univers-vedette-row { grid-template-columns: 1fr; } }

.univers-vedette-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: var(--white);
  text-decoration: none;
  isolation: isolate;
}
.univers-vedette-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.univers-vedette-card:hover img { transform: scale(1.05); }
.univers-vedette-card::after {
  /* V49 — Overlay teinté par univers : dégradé noir profond en base,
     rehaussé d'une teinte --pole-c en pied de carte (25% du dégradé),
     façon vitrine de couleur plutôt que noir uniforme. Repli sur le
     champagne si --pole-c absent (carte sans data-pole). */
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,10,10,0) 30%, color-mix(in srgb, var(--pole-c, var(--champagne)) 55%, rgba(10,10,10,.94)) 100%);
  transition: background .5s ease;
}
.univers-vedette-card:hover::after {
  background:
    linear-gradient(180deg, rgba(10,10,10,0) 20%, color-mix(in srgb, var(--pole-c, var(--champagne)) 70%, rgba(10,10,10,.92)) 100%);
}
.univers-vedette-card {
  box-shadow: inset 0 0 0 1px rgba(248,246,242,.08);
  transition: box-shadow .4s ease, transform .4s cubic-bezier(.4,0,.2,1);
}
.univers-vedette-card:hover {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pole-c, var(--champagne)) 70%, transparent),
              0 20px 48px -12px color-mix(in srgb, var(--pole-c, var(--champagne)) 45%, transparent);
  transform: translateY(-4px);
}
.univers-vedette-number {
  position: absolute; top: 20px; left: 24px;
  font-family: var(--font-display);
  font-size: var(--fs-numero-univers, clamp(1.75rem, 2vw + 1rem, 2.5rem));
  font-weight: 600;
  /* V49 — numéro géant en filigrane coloré (teinte du pôle), plutôt
     que blanc 55% opacité uniforme */
  color: color-mix(in srgb, var(--pole-c, var(--champagne)) 70%, rgba(248,246,242,.55));
  opacity: .85;
}
.univers-vedette-icon {
  position: absolute; top: 22px; right: 24px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pole-c, var(--champagne)) 28%, rgba(248,246,242,.10));
  backdrop-filter: blur(4px);
  color: var(--white);
  transition: background .35s ease;
}
.univers-vedette-icon svg { width: 17px; height: 17px; }
.univers-vedette-body { position: absolute; left: 24px; right: 24px; bottom: 24px; }
.univers-vedette-body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4-univers, 1.15rem);
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--white);
}
.univers-vedette-body p {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text-on-dark-muted, rgba(248,246,242,.65));
  max-width: 90ch;
  /* CDC §3 : description carte univers en 1-2 lignes max */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.univers-vedette-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; font-size: .78rem; font-weight: 700;
  color: color-mix(in srgb, var(--pole-c, var(--champagne)) 55%, var(--champagne));
}

/* ── Grille compacte — 8 univers restants, dense (CDC §9.4-B) ──
   3 colonnes desktop (≥1100px), 2 colonnes tablette (768-1099px),
   1 colonne mobile. Gap 24px. Cartes photo (ratio 3:4 via image de
   fond), overlay dégradé bas→haut, numéro haut-gauche, icône+titre+
   description 1 ligne en bas. */
.univers-compact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1099px) and (min-width: 768px) { .univers-compact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .univers-compact-grid { grid-template-columns: 1fr; } }

.univers-compact-card {
  display: block;
  position: relative;
  height: 340px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: var(--white);
  isolation: isolate;
}
@media (max-width: 767px) { .univers-compact-card { height: auto; min-height: 280px; } }
.univers-compact-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.univers-compact-card:hover img { transform: scale(1.05); }
.univers-compact-card::after {
  /* V49 — Overlay bas → haut teinté par univers (CDC §9.4-B, direction
     colorée) : même logique que la carte vedette, base réduite en
     intensité pour laisser la photo respirer sur une carte plus petite. */
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, color-mix(in srgb, var(--pole-c, var(--champagne)) 45%, rgba(10,10,10,.94)) 0%, rgba(10,10,10,.15) 65%, rgba(10,10,10,0) 100%);
  transition: background .5s ease;
}
.univers-compact-card:hover::after {
  background: linear-gradient(0deg, color-mix(in srgb, var(--pole-c, var(--champagne)) 60%, rgba(10,10,10,.9)) 0%, rgba(10,10,10,.15) 65%, rgba(10,10,10,0) 100%);
}
.univers-compact-card {
  box-shadow: inset 0 0 0 1px rgba(248,246,242,.08);
  transition: box-shadow .4s ease, transform .4s cubic-bezier(.4,0,.2,1);
}
.univers-compact-card:hover {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pole-c, var(--champagne)) 65%, transparent);
  transform: translateY(-3px);
}
.univers-compact-number {
  position: absolute; top: 18px; left: 20px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  font-weight: 600;
  color: color-mix(in srgb, var(--pole-c, var(--champagne)) 65%, rgba(248,246,242,.55));
  opacity: .85;
  line-height: 1;
}
.univers-compact-body { position: absolute; left: 20px; right: 20px; bottom: 20px; }
.univers-compact-icon {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--pole-c, var(--champagne)) 30%, rgba(248,246,242,.10));
  backdrop-filter: blur(4px);
  color: var(--white);
  margin-bottom: 10px;
  transition: background .35s ease;
}
.univers-compact-icon svg { width: 15px; height: 15px; }
.univers-compact-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4-univers, 1.0625rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 4px;
}
.univers-compact-body p {
  font-size: .8rem;
  line-height: 1.4;
  color: var(--text-on-dark-muted, rgba(248,246,242,.65));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lien "Explorer tous nos univers" en fin de grille (CDC §9.4-B) */
.univers-compact-more {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  height: 340px;
  position: relative;
  border: 1px dashed color-mix(in srgb, var(--champagne) 45%, transparent);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: var(--dark, #0A0A0A);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  overflow: hidden;
  transition: background .3s cubic-bezier(.4,0,.2,1), border-color .3s cubic-bezier(.4,0,.2,1);
}
@media (max-width: 767px) { .univers-compact-more { height: 140px; } }
/* V49 — Liseré dégradé résumant les 11 teintes : cette carte donne accès
   à "tous les univers", seul endroit du site où la palette complète
   apparaît d'un coup — signature discrète, 3px, pas de saturation excessive */
.univers-compact-more::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #A2145E, #0369A1, #B8232F, #6D28D9, #B45309, #0891B2, #1D3557, #0F766E, #374151, #15803D, #4338CA);
  opacity: .55;
  transition: opacity .3s ease;
}
.univers-compact-more:hover::before { opacity: 1; }
.univers-compact-more:hover {
  background: color-mix(in srgb, var(--champagne) 8%, transparent);
  border-color: var(--champagne);
}
.univers-compact-more-arrow { color: var(--champagne); font-weight: 700; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.univers-compact-more:hover .univers-compact-more-arrow { transform: translateX(4px); }

/* Stagger d'apparition — CDC §7 : 500ms/carte, cubic-bezier(.16,1,.3,1),
   délai 60ms entre cartes (pas 90ms : sur 11 items ça retarderait trop
   la lecture). Piloté par --i (index 0-10) posé en inline style PHP. */
.univers-vedette-card,
.univers-compact-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.univers-vedette-card.is-revealed,
.univers-compact-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .univers-vedette-card, .univers-compact-card {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .univers-vedette-card:hover img { transform: none; }
}



/* Variante compacte — Chapitre I homepage (CDC V33 §7 : "grille resserrée, pas de texte long") */
.poles-grid--compact { grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; }
.pole-card--compact { padding: 24px 18px; text-align: center; display: block; color: inherit; }
.pole-card--compact .pole-number { font-size: 1.4rem; }
.pole-card--compact [data-pole] .pole-icon,
.pole-card--compact .pole-icon { margin: 0 auto 10px; }
.pole-card--compact h3 { font-size: .92rem; font-weight: 600; margin: 0; }

/* Insight card sur fond sombre (Chapitre II — fusionnée avec why/process) */
.insight-card--dark { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.insight-card--dark h3, .insight-card--dark p { color: rgba(255,255,255,.85); }
.pole-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.pole-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--red), transparent);
  opacity: 0; transition: opacity .25s;
}
.pole-card:hover { border-color: rgba(165,0,21,.35); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.pole-card:hover::before { opacity: 1; }
.pole-number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-light);
  margin-bottom: -6px;
}
.pole-icon { font-size: 1.5rem; margin-bottom: 8px; }
.pole-card h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; margin-bottom: 8px; }
.pole-desc { font-size: .85rem; color: var(--muted); line-height: 1.55; margin-bottom: 16px; }
.pole-tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pole-tags a {
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  color: var(--gray);
  background: var(--light);
  padding: 6px 12px;
  border-radius: 999px;
  transition: color .25s, background .25s;
}
.pole-tags a:hover { color: var(--white); background: var(--red); }
.pole-more { margin-top: 12px; }
.pole-more summary {
  font-size: .74rem;
  font-weight: 700;
  color: var(--gold);
  cursor: pointer;
  list-style: none;
}
.pole-more summary::-webkit-details-marker { display: none; }
.pole-more summary:hover { text-decoration: underline; }
.pole-more .pole-tags { margin-top: 12px; }

/* ============================================================
   UNIVERS PAR PÔLE — Neutralisé CDC Digital Experience Premium 2026 §2
   Ancien système (v29) : 11 couleurs vives distinctes par pôle.
   Nouveau : accent champagne unique pour les 11 univers — la
   différenciation se fait par icône, numéro (01-11) et photo,
   jamais par la couleur (règle 60/30/10, sobriété obligatoire).
   Les anciennes teintes sont conservées ci-dessous, désactivées,
   pour traçabilité et retour arrière si besoin.
   Activation via l'attribut [data-pole="slug"] sur un conteneur.
   ============================================================ */
:root {
  /* --pole-conseil-strategie:      #1d3557; boussole, diagnostic — bleu nuit (désactivé CDC 2026) */
  /* --pole-externalisation:        #0f766e; partenariat, rouages — sarcelle (désactivé CDC 2026) */
  /* --pole-branding-design:        #6d28d9; créativité, constellations — violet premium (désactivé CDC 2026) */
  /* --pole-communication-digitale: #0369a1; réseaux, data — bleu électrique (désactivé CDC 2026) */
  /* --pole-creation-contenus:      #b8232f; cinéma, pellicule — rouge cinéma (désactivé CDC 2026) */
  /* --pole-rp-influence:           #b45309; mégaphone, presse — ambre (désactivé CDC 2026) */
  /* --pole-evenementiel:           #a2145e; scène, projecteurs — magenta (désactivé CDC 2026) */
  /* --pole-sites-internet:         #0891b2; interfaces, verre — cyan (désactivé CDC 2026) */
  /* --pole-impression:             #374151; encre CMJN — anthracite (désactivé CDC 2026) */
  /* --pole-formation:              #15803d; pédagogie, croissance — vert (désactivé CDC 2026) */
  /* --pole-etudes-performance:     #4338ca; data, courbes — indigo (désactivé CDC 2026) */
}

[data-pole] { --pole-tint: color-mix(in srgb, var(--pole-c) 10%, transparent); }
/* V49 — Direction « chef-d'œuvre coloré » : chaque univers retrouve une
   teinte signature (palette pierres précieuses, cohérente avec les tons
   --amb-* déjà en place pour FAQ/légal/glossaire...). Contraste AA vérifié
   sur fond noir ET sur blanc cassé. Le rouge --red reste l'exclusivité du
   CTA principal, jamais réutilisé ici (cf. évenementiel qui a sa propre
   teinte distincte). Historique champagne uniforme (V44) conservé en
   commentaire pour retour arrière. */
[data-pole="conseil-strategie"]          { --pole-c: #1D3557; } /* bleu nuit — cf. --amb-documents */
[data-pole="externalisation"]            { --pole-c: #0F766E; } /* sarcelle business — cf. --amb-carrieres */
[data-pole="branding-design"]            { --pole-c: #6D28D9; } /* violet créatif */
[data-pole="communication-digitale"]     { --pole-c: #0369A1; } /* bleu électrique */
[data-pole="creation-contenus"]          { --pole-c: #B8232F; } /* rouge cinéma */
[data-pole="rp-influence"]               { --pole-c: #B45309; } /* ambre prestige */
[data-pole="evenementiel"]               { --pole-c: #A2145E; } /* magenta expérience */
[data-pole="sites-internet"]             { --pole-c: #0891B2; } /* cyan innovation — cf. --amb-faq */
[data-pole="impression"]                 { --pole-c: #374151; } /* anthracite créatif — cf. --amb-legal */
[data-pole="formation"]                  { --pole-c: #15803D; } /* vert croissance */
[data-pole="etudes-performance"]         { --pole-c: #4338CA; } /* indigo data — cf. --amb-404 */
/* V66 : nouvelle palette signature par univers, remplace la palette V44. */

/* V66 : liste fine des prestations par pôle (page pôle) — hover premium */
.sd-prestation-item:hover {
  background: color-mix(in srgb, var(--pole-c, var(--red)) 6%, transparent);
  transform: translateX(2px);
}
.sd-prestation-item:hover .sd-check {
  background: color-mix(in srgb, var(--pole-c, var(--red)) 22%, transparent);
}

/* Motifs de fond distincts par pôle — CSS pur (aucune dépendance image) */
[data-pole="conseil-strategie"]      .pole-pattern { background-image: repeating-radial-gradient(circle at 85% 15%, var(--pole-c) 0 1px, transparent 1px 14px); }
[data-pole="externalisation"]        .pole-pattern { background-image: radial-gradient(circle at 80% 20%, var(--pole-c) 0 3px, transparent 3px), radial-gradient(circle at 92% 38%, var(--pole-c) 0 3px, transparent 3px), radial-gradient(circle at 70% 42%, var(--pole-c) 0 3px, transparent 3px); }
[data-pole="branding-design"]        .pole-pattern { background-image: radial-gradient(circle at 88% 12%, var(--pole-c) 0 2px, transparent 2px), radial-gradient(circle at 95% 30%, var(--pole-c) 0 2px, transparent 2px), radial-gradient(circle at 78% 22%, var(--pole-c) 0 3px, transparent 3px), radial-gradient(circle at 82% 40%, var(--pole-c) 0 1.5px, transparent 1.5px); }
[data-pole="communication-digitale"] .pole-pattern { background-image: repeating-linear-gradient(90deg, var(--pole-c) 0 1px, transparent 1px 16px), repeating-linear-gradient(0deg, var(--pole-c) 0 1px, transparent 1px 16px); }
[data-pole="creation-contenus"]      .pole-pattern { background-image: repeating-linear-gradient(180deg, var(--pole-c) 0 6px, transparent 6px 16px); background-position: right 10px top; background-size: 8px 100%; background-repeat: repeat-y; }
[data-pole="rp-influence"]           .pole-pattern { background-image: conic-gradient(from 0deg at 88% 20%, var(--pole-c) 0 8deg, transparent 8deg 40deg); }
[data-pole="evenementiel"]           .pole-pattern { background-image: linear-gradient(115deg, var(--pole-c) 0 2px, transparent 2px 40px), radial-gradient(circle at 80% 60%, var(--pole-c) 0 2px, transparent 2px); }
[data-pole="sites-internet"]         .pole-pattern { background-image: linear-gradient(var(--pole-c) 1px, transparent 1px), linear-gradient(90deg, var(--pole-c) 1px, transparent 1px); background-size: 18px 18px; }
[data-pole="impression"]             .pole-pattern { background-image: radial-gradient(circle, var(--pole-c) 0 1.4px, transparent 1.4px); background-size: 7px 7px; }
[data-pole="formation"]              .pole-pattern { background-image: linear-gradient(115deg, transparent 60%, var(--pole-c) 60% 64%, transparent 64%), linear-gradient(115deg, transparent 40%, var(--pole-c) 40% 44%, transparent 44%); }
[data-pole="etudes-performance"]     .pole-pattern { background-image: linear-gradient(0deg, var(--pole-c) 0 40%, transparent 40%); background-size: 10px 60%; background-repeat: repeat-x; background-position: bottom left; }

.pole-pattern {
  position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-repeat: repeat; mask-image: radial-gradient(circle at 80% 20%, #000 0%, transparent 70%);
}

/* Illustration line-art éditoriale du pôle (CDC V33 §10) — filigrane discret en coin bas-droit,
   jamais superposée au texte, masquée en dessous de 900px pour préserver la lisibilité */
.pole-illustration {
  position: absolute; right: -30px; bottom: -30px; width: 160px; height: 120px;
  color: var(--pole-c, var(--border)); opacity: .1; pointer-events: none;
}
.pole-illustration-svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce), (max-width: 900px) {
  .pole-illustration { display: none; }
}

/* Carte pôle : accent + badge coloré + motif — remplace l'accent rouge uniforme */
.pole-card { border-top: 3px solid transparent; }
[data-pole] .pole-card::before { background: linear-gradient(90deg, var(--pole-c), transparent) !important; }
[data-pole] .pole-card:hover { border-color: color-mix(in srgb, var(--pole-c) 35%, transparent) !important; }
[data-pole] .pole-number { color: color-mix(in srgb, var(--pole-c) 22%, transparent) !important; }
[data-pole] .pole-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: color-mix(in srgb, var(--pole-c) 14%, transparent);
  color: var(--pole-c); /* hérité par currentColor dans les SVG inline */
  margin-bottom: 12px;
}
.pole-icon-svg { width: 24px; height: 24px; display: block; }

/* Icônes UI génériques (CDC V35 §15) — inline, alignées sur le texte, héritent la couleur */
.ui-icon {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  color: currentColor;
}
.ui-icon--lg { width: 1.6em; height: 1.6em; }
.ui-icon--xl { width: 2.2em; height: 2.2em; }
.service-icon-svg { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; }
[data-pole].mega-menu-pole .mega-menu-icon .pole-icon-svg { width: 18px; height: 18px; }
.pole-card--compact .pole-icon-svg { width: 26px; height: 26px; }
[data-pole] .pole-tags a:hover { background: var(--pole-c) !important; }
[data-pole] .pole-more summary { color: var(--pole-c) !important; }
[data-pole].mega-menu-pole .mega-menu-icon { color: var(--pole-c); }
[data-pole].mega-menu-pole .mega-menu-item--sm:hover { color: var(--pole-c) !important; background: color-mix(in srgb, var(--pole-c) 10%, transparent) !important; }

/* Hero d'une page-service individuelle : liseré + halo colorés selon le pôle */
[data-pole].page-hero { position: relative; overflow: hidden; }
[data-pole].page-hero::after {
  content: ''; position: absolute; top: -30%; right: -10%; width: 55%; height: 160%;
  background: radial-gradient(circle, var(--pole-c) 0%, transparent 65%);
  opacity: .18; pointer-events: none;
}
[data-pole].page-hero .section-eyebrow.light { color: color-mix(in srgb, var(--pole-c) 55%, #fff) !important; }
[data-pole] .sd-cta-box { border-top: 3px solid var(--pole-c); }

@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  .pole-pattern { display: none; }
}

/* ============================================================
   AMBIANCES PAGES SECONDAIRES — Direction artistique v31
   CDC §2 et §6 : aucune page ne doit réutiliser la structure
   graphique d'une autre, "sans exception" — y compris les pages
   utilitaires (FAQ, mentions légales, glossaire, documents,
   carrières, avis, 404). Chaque page reçoit ici sa propre couleur
   d'ambiance, son propre motif de fond et son propre repère visuel,
   sans sacrifier la lisibilité qui est leur fonction première
   (contrairement aux pages pôle, le texte y reste toujours neutre).
   Activation via [data-ambiance="slug"] sur .page-hero.
   ============================================================ */
:root {
  --amb-faq:        #0891b2; /* dialogue, échange — cyan innovation (pôle Sites Internet) */
  --amb-legal:      #374151; /* sceau, papier officiel — anthracite créatif (pôle Impression) */
  --amb-glossaire:  #7a2048; /* signets, index — prune */
  --amb-documents:  #1d3557; /* archives, dossiers — bleu nuit (pôle Conseil & Stratégie) */
  --amb-carrieres:  #0f766e; /* chemin, croissance — sarcelle business (pôle Externalisation) */
  --amb-avis:       #b6801f; /* étoiles, éclat — ambre */
  --amb-404:        #4338ca; /* égarement, nuit — indigo data (pôle Études & Performance) */
}
[data-ambiance] { --amb-c: var(--amb-404); }
[data-ambiance="faq"]       { --amb-c: var(--amb-faq); }
[data-ambiance="legal"]     { --amb-c: var(--amb-legal); }
[data-ambiance="glossaire"] { --amb-c: var(--amb-glossaire); }
[data-ambiance="documents"] { --amb-c: var(--amb-documents); }
[data-ambiance="carrieres"] { --amb-c: var(--amb-carrieres); }
[data-ambiance="avis"]      { --amb-c: var(--amb-avis); }
[data-ambiance="404"]       { --amb-c: var(--amb-404); }

[data-ambiance].page-hero { position: relative; overflow: hidden; }
[data-ambiance].page-hero .section-eyebrow.light,
[data-ambiance].page-hero .section-eyebrow { color: color-mix(in srgb, var(--amb-c) 60%, #fff) !important; }

.ambiance-pattern {
  position: absolute; inset: 0; opacity: .09; pointer-events: none; z-index: 0;
  background-repeat: repeat; mask-image: radial-gradient(circle at 82% 15%, #000 0%, transparent 72%);
}

/* FAQ — nuage de dialogue : bulles éparses évoquant des questions */
[data-ambiance="faq"] .ambiance-pattern {
  background-image:
    radial-gradient(circle at 20% 30%, var(--amb-c) 0 5px, transparent 5px),
    radial-gradient(circle at 45% 60%, var(--amb-c) 0 3px, transparent 3px),
    radial-gradient(circle at 70% 20%, var(--amb-c) 0 4px, transparent 4px),
    radial-gradient(circle at 85% 55%, var(--amb-c) 0 6px, transparent 6px),
    radial-gradient(circle at 30% 80%, var(--amb-c) 0 3px, transparent 3px);
}
/* Mentions légales — grain de papier officiel + sceau discret en angle */
[data-ambiance="legal"] .ambiance-pattern {
  background-image: repeating-linear-gradient(0deg, var(--amb-c) 0 1px, transparent 1px 6px);
}
[data-ambiance="legal"].page-hero::after {
  content: ''; position: absolute; top: 18px; right: 34px; width: 92px; height: 92px;
  border: 2px solid var(--amb-c); border-radius: 50%; opacity: .16; pointer-events: none;
}
[data-ambiance="legal"].page-hero::before {
  content: ''; position: absolute; top: 34px; right: 50px; width: 60px; height: 60px;
  border: 1px dashed var(--amb-c); border-radius: 50%; opacity: .16; pointer-events: none;
}
/* Glossaire — signets d'index empilés, comme la tranche d'un dictionnaire */
[data-ambiance="glossaire"] .ambiance-pattern {
  background-image: repeating-linear-gradient(90deg, var(--amb-c) 0 10px, transparent 10px 26px);
  background-position: right top; background-size: 26px 100%;
}
/* Documents — coins de dossiers empilés */
[data-ambiance="documents"] .ambiance-pattern {
  background-image:
    linear-gradient(var(--amb-c) 2px, transparent 2px),
    linear-gradient(90deg, var(--amb-c) 2px, transparent 2px);
  background-size: 34px 34px; background-position: 80% 20%;
}
/* Carrières — chemin ascendant en marches */
[data-ambiance="carrieres"] .ambiance-pattern {
  background-image: linear-gradient(115deg, transparent 46%, var(--amb-c) 46% 50%, transparent 50%),
    linear-gradient(115deg, transparent 66%, var(--amb-c) 66% 70%, transparent 70%),
    linear-gradient(115deg, transparent 26%, var(--amb-c) 26% 30%, transparent 30%);
}
/* Avis — constellation d'étoiles */
[data-ambiance="avis"] .ambiance-pattern {
  background-image:
    radial-gradient(circle at 25% 25%, var(--amb-c) 0 2px, transparent 2px),
    radial-gradient(circle at 60% 15%, var(--amb-c) 0 3px, transparent 3px),
    radial-gradient(circle at 80% 40%, var(--amb-c) 0 2px, transparent 2px),
    radial-gradient(circle at 40% 55%, var(--amb-c) 0 2px, transparent 2px),
    radial-gradient(circle at 90% 70%, var(--amb-c) 0 3px, transparent 3px);
}
/* 404 — ciel nocturne dérivant, égarement */
[data-ambiance="404"] .ambiance-pattern {
  background-image:
    radial-gradient(circle at 10% 20%, var(--amb-c) 0 2px, transparent 2px),
    radial-gradient(circle at 30% 60%, var(--amb-c) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 55% 30%, var(--amb-c) 0 2px, transparent 2px),
    radial-gradient(circle at 75% 65%, var(--amb-c) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 90% 20%, var(--amb-c) 0 2px, transparent 2px),
    radial-gradient(circle at 15% 85%, var(--amb-c) 0 2px, transparent 2px);
  animation: driftStars 60s linear infinite;
}
@keyframes driftStars { from { background-position: 0 0; } to { background-position: -200px 120px; } }
@media (prefers-reduced-motion: reduce) {
  [data-ambiance="404"] .ambiance-pattern { animation: none; }
}

/* Repère de navigation propre à chaque page (icône + halo léger) */
.ambiance-mark {
  position: absolute; top: 28px; right: 40px; z-index: 0; opacity: .5;
  width: 64px; height: 64px; pointer-events: none;
}
.ambiance-mark svg { width: 100%; height: 100%; }
.ambiance-mark, [data-ambiance] .ambiance-mark { color: var(--amb-c); }
@media (max-width: 780px) { .ambiance-mark { display: none; } }

@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  .ambiance-pattern { display: none; }
}