/* Thème C2 « Lignes » (branche redesign-c2) : offres en plans de ligne, polices de la pré-prod, titres centrés ;
   « Votre visite » de l'accueil en jauge segmentée.
   Sources : Studio/27-directions/directions (departs.css + c2.css) et Studio/29-visite-expertises/variantes/g.css, concaténés tels quels. */
/* Direction C : tableau des départs.
   Hall clair en acier, un vrai tableau à palettes noir posé dedans comme un objet ; ambre = en attente, teal = mesuré.
   Barlow Condensed en capitales pour la signalétique, Barlow pour la lecture, JetBrains Mono dans les palettes. */
.d-departs {
  --canvas: #eef0f0;
  --bloc: #e3e6e6;
  --bloc-2: #d8dcdc;
  --filet: rgba(18, 18, 18, 0.12);
  --filet-fort: rgba(18, 18, 18, 0.3);
  --ink: #121212;
  --ink-soft: #3f4444;
  --ink-mute: #555b5b;
  --tableau: #141414;
  --palette: #1f1f1f;
  --palette-txt: #f4f4f2;
  --ambre: #ffb000;
  --mesure: #2dd4bf;
  --teal-fonce: #0f766e;
  --sans-ui: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --signal: "Barlow Condensed", "Arial Narrow", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --rayon: 6px;
  accent-color: var(--teal-fonce);
}
.d-departs body { background: var(--canvas); font-family: var(--sans-ui); color: var(--ink-soft); }
.d-departs ::selection { background: var(--ambre); color: var(--ink); }
.d-departs :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.d-departs h1, .d-departs h2, .d-departs h3 { color: var(--ink); }
.d-departs h1, .d-departs h2 { font-family: var(--signal); font-weight: 700; text-transform: uppercase; }
.d-departs h1 { font-size: clamp(56px, 7vw, 104px); line-height: 0.9; letter-spacing: -0.01em; }
.d-departs h2 { font-size: clamp(38px, 4.4vw, 64px); line-height: 0.95; letter-spacing: 0; }
.d-departs h3 { font-family: var(--signal); font-weight: 600; font-size: 28px; letter-spacing: 0.005em; text-transform: uppercase; }
.d-departs h1 em, .d-departs h2 em { font-style: normal; color: var(--teal-fonce); }
.d-departs .kicker { display: none; }
.d-departs .section-entete { max-width: none; margin: 0 0 48px; text-align: left; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 48px; align-items: end; }
.d-departs .section-entete .sous-titre { margin: 0; max-width: 46ch; font-size: 18px; }
.d-departs .section-entete:not(:has(.sous-titre)) { grid-template-columns: 1fr; }

.d-departs .btn { border-radius: var(--rayon); font-family: var(--signal); font-size: 18px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.d-departs .btn-primaire { background: var(--ambre); color: var(--ink); }
.d-departs .btn-primaire:hover { background: #ffc233; }
.d-departs .btn-secondaire { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.d-departs .btn-secondaire:hover { background: #fff; color: var(--ink); }
.d-departs .lien-voir { border-radius: var(--rayon); border: 1.5px solid var(--ink); background: transparent; font-family: var(--signal); font-size: 17px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); }
.d-departs .lien-voir:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* En-tête : bandeau de quai noir */
.d-departs .entete { background: var(--tableau); }
.d-departs .entete .wordmark { color: #fff; }
.d-departs .entete .wm-tag, .d-departs .entete .wm-slash { color: var(--ambre); }
.d-departs .nav { background: transparent; }
.d-departs .nav > a, .d-departs .nav-declencheur { border-radius: var(--rayon); font-family: var(--signal); font-size: 17px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
.d-departs .nav > a:hover, .d-departs .nav-declencheur:hover, .d-departs .nav-groupe.ouvert .nav-declencheur { color: #fff; background: rgba(255, 255, 255, 0.08); }
.d-departs .nav > a[aria-current="page"], .d-departs .nav-groupe:has([aria-current="page"]) .nav-declencheur { background: var(--ambre); color: var(--ink); }
.d-departs .nav-deroulant-boite { border-radius: var(--rayon); }
.d-departs .entete .btn-primaire { background: var(--ambre); color: var(--ink); }
.d-departs .nav-mobile-entete { background: var(--tableau); }
.d-departs .nav-mobile-entete .wm-tag, .d-departs .nav-mobile-entete .wm-slash { color: var(--ambre); }

/* Héros */
.d-departs .hero { padding: 80px 0 72px; text-align: left; }
.d-departs .hs .hs-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.d-departs .hero .chapo { margin: 28px 0 0; max-width: 42ch; font-size: 20px; }
.d-departs .hero .actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.d-departs .fenetre.hvid { border: 10px solid var(--tableau); border-radius: 10px; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.5); }
.d-departs .h1-legende { border-top: 0; background: var(--tableau); color: #f4f4f2; font-family: var(--sans-ui); }
.d-departs .h1-legende b { border-radius: 3px; background: var(--ambre); color: var(--ink); font-family: var(--mono); }
.d-departs .hvid-lecture { border-radius: var(--rayon); }

/* La bande du tableau */
.d-departs .dp-bande { padding: 0 0 96px; }
.d-departs .dp-tableau { padding: 28px 28px 22px; border-radius: 12px; background: var(--tableau); box-shadow: inset 0 0 0 1px #2a2a2a, 0 40px 80px -50px rgba(0, 0, 0, 0.6); color: var(--palette-txt); }
.d-departs .dp-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid #2c2c2c; }
.d-departs .dp-titre { margin: 0; font-family: var(--signal); font-size: clamp(26px, 2.6vw, 38px); font-weight: 700; text-transform: uppercase; color: #fff; }
.d-departs .dp-horloge { font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--ambre); font-variant-numeric: tabular-nums; }
.d-departs .dp-cols, .d-departs .dp-ligne { display: grid; grid-template-columns: 9fr 15fr 23fr 4.5fr 11fr; gap: 14px; align-items: center; }
.d-departs .dp-cols { padding: 14px 0 8px; font-family: var(--signal); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9a9a; }
.d-departs .dp-lignes { margin: 0; padding: 0; list-style: none; }
.d-departs .dp-ligne { padding: 6px 0; border-top: 1px solid #242424; }
.d-departs .dp-c { display: flex; gap: 2px; min-width: 0; overflow: hidden; }
.d-departs .dp-f { position: relative; display: inline-grid; place-items: center; flex: none; width: 1.05em; height: 1.55em; border-radius: 2px; background: var(--palette); font-family: var(--mono); font-size: 15px; font-weight: 500; line-height: 1; color: var(--palette-txt); }
.d-departs .dp-f::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.65); }
.d-departs .dp-f.bascule { color: #bdbdbd; }
.d-departs .dp-ligne.ok .dp-c4 .dp-f { color: var(--mesure); }
.d-departs .dp-ligne.attente .dp-c4 .dp-f { color: var(--ambre); }
.d-departs .dp-ligne.attente .dp-c0 .dp-f, .d-departs .dp-ligne.attente .dp-c1 .dp-f { color: #8f8f8f; }
.d-departs .dp-ligne.neuf { animation: dp-neuf 1.4s ease-out; }
@keyframes dp-neuf { from { background: rgba(255, 176, 0, 0.12); } to { background: transparent; } }
.d-departs .dp-note { margin: 16px 0 0; font-size: 13.5px; color: #a6a6a6; }

/* Chiffres : afficheurs à palettes */
.d-departs .chiffres-section { padding: 0 0 24px; }
.d-departs #preuve .chiffres { padding: 0; border: 0; gap: 16px; }
.d-departs #preuve .chiffre, .d-departs #preuve .chiffre:first-child { padding: 0; border: 0; }
.d-departs #preuve .chiffre-valeur { align-self: flex-start; padding: 8px 14px 6px; border-radius: 6px; background: var(--tableau) linear-gradient(transparent calc(50% - 0.5px), rgba(0, 0, 0, 0.9) calc(50% - 0.5px), rgba(0, 0, 0, 0.9) calc(50% + 0.5px), transparent calc(50% + 0.5px)); font-family: var(--mono); font-size: 40px; font-weight: 500; letter-spacing: 0.04em; color: var(--palette-txt); }
.d-departs #preuve .chiffre-barre { display: none; }
.d-departs #preuve .chiffre-legende { margin-top: 12px; font-family: var(--signal); font-size: 17px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2; color: var(--ink); }

.d-departs .section { padding: 104px 0; }
.d-departs .fond-bloc, .d-departs .audit-bloc { border-radius: 12px; }
.d-departs .fond-bloc { background: #fff; }
.d-departs .fond-bloc::before { display: none; }

/* Expertises : trois voies, une ligne par voie */
.d-departs .expertises { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 3px solid var(--ink); }
.d-departs .expertise { grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: auto; grid-row: auto; padding: 32px 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--filet-fort); }
.d-departs .expertise::before { content: attr(data-dp-voie); align-self: start; justify-self: start; padding: 6px 12px 4px; border-radius: 4px; background: var(--tableau); color: var(--ambre); font-family: var(--signal); font-size: 22px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.d-departs .expertise-vignette { display: none; }
.d-departs .expertise-texte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: 8px 40px; align-items: start; padding: 0; }
.d-departs .titre-exp { grid-column: 1; margin: 0; font-size: 34px; }
.d-departs .titre-exp .titre-icone { display: none; }
.d-departs .expertise-texte > p { grid-column: 1; font-size: 17px; }
.d-departs .sous-services { grid-column: 2; grid-row: 1 / span 3; margin: 0 !important; columns: 2; column-gap: 28px; }
.d-departs .sous-services li { break-inside: avoid; font-size: 15px; }
.d-departs .expertise-texte .lien-voir { grid-column: 3; grid-row: 1; margin: 0; }
.d-departs .expertise:nth-child(1) .titre-exp { color: var(--teal-fonce); }
.d-departs .expertise:nth-child(2) .titre-exp { color: var(--offre-acq); }
.d-departs .expertise:nth-child(3) .titre-exp { color: var(--offre-ia); }

/* Outils */
.d-departs .outils-liste li { border-radius: 10px; border: 1px solid var(--filet-fort); background: #fff; }

/* MAPS : quatre arrêts, lettres en palettes */
.d-departs .maps-mot { gap: 10px; font-family: var(--signal); font-weight: 700; font-size: 104px; line-height: 1; }
.d-departs .maps-mot span { display: inline-grid; place-items: center; width: 1.05em; height: 1.2em; border-radius: 8px; background: var(--tableau) linear-gradient(transparent calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), transparent calc(50% + 1px)); color: var(--palette-txt); }
.d-departs .maps[data-actif] .maps-mot span { color: #5d5d5d; }
.d-departs .maps[data-actif="0"] .maps-mot span:nth-child(1), .d-departs .maps[data-actif="1"] .maps-mot span:nth-child(2), .d-departs .maps[data-actif="2"] .maps-mot span:nth-child(3), .d-departs .maps[data-actif="3"] .maps-mot span:nth-child(4) { color: var(--ambre); }
.d-departs .maps-etapes { position: relative; gap: 24px; padding-top: 34px; }
.d-departs .maps-etapes::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 3px; background: var(--ink); }
.d-departs .maps-etape { position: relative; }
.d-departs .maps-etape::before { content: ""; position: absolute; top: -32px; left: 22px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px var(--ink); }
.d-departs .maps-carte { border-radius: 8px; background: var(--canvas); border: 0; }
.d-departs .maps-badge { border-radius: 4px; font-family: var(--signal); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.d-departs .maps-badge-plein { background: var(--ambre); color: var(--ink); }
.d-departs .maps-fin { text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.d-departs .maps-lien { margin: 0; }

/* Avis */
.d-departs .avis-carte { border-radius: 10px; background: #fff; }
.d-departs .avis-carte figcaption { font-family: var(--signal); font-size: 16px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-soft); }

/* Audit : guichet */
.d-departs .audit-bloc { position: relative; padding-top: 96px; background: #fff; overflow: hidden; }
.d-departs .audit-bloc::before { content: "Guichet · audit gratuit · sans engagement"; position: absolute; top: 0; left: 0; right: 0; padding: 12px 64px; background: var(--tableau); color: var(--ambre); font-family: var(--signal); font-size: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.d-departs .sujet-carte, .d-departs .champ input, .d-departs .champ textarea { border-radius: 8px; border-color: var(--filet-fort); font-family: var(--sans-ui); }
.d-departs .sujet-radio:checked + .sujet-carte { border-color: var(--ink); }
.d-departs .sujet-radio:checked + .sujet-carte .sujet-coche { border-color: var(--ink); background: var(--ink); }
.d-departs .progression-segment.plein { background: var(--ambre) !important; }

/* Pied */
.d-departs .pied { background: var(--tableau); }
.d-departs .pied .wm-tag, .d-departs .pied .wm-slash { color: var(--ambre); }
.d-departs .pied-email { color: var(--ambre); }
.d-departs .pied-titre { font-family: var(--signal); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; }

/* Page Tracking : la chaîne du héros en panneau de quai */
.d-departs .hero-chaine { padding: 22px; border-radius: 12px; background: var(--tableau); }
.d-departs .mini-carte { border-radius: 6px; background: var(--palette); }
.d-departs .mini-titre { font-family: var(--signal); font-size: 24px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; }
.d-departs .mini-legende { color: #b5b5b5; }
.d-departs .tuile { border-radius: 4px; background: #2a2a2a; color: var(--ambre); }
.d-departs .fleche-chaine { color: var(--ambre); }
.d-departs .pilule-preuve { border-radius: 4px; background: #fff; }
.d-departs .tuile-grande { border-radius: 6px; background: var(--tableau); color: var(--ambre); }
.d-departs .a1 { border-radius: 12px; }

@media (max-width: 980px) {
  .d-departs .hs .hs-grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .d-departs .section-entete { grid-template-columns: 1fr; }
  .d-departs .expertises { max-width: none; }
  .d-departs .expertise { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .d-departs .expertise-texte { grid-template-columns: minmax(0, 1fr); }
  .d-departs .sous-services { grid-column: 1; grid-row: auto; columns: 1; margin-top: 12px !important; }
  .d-departs .expertise-texte .lien-voir { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 12px; }
}
@media (max-width: 760px) {
  .d-departs .hero { padding: 44px 0 48px; }
  .d-departs h1 { font-size: 58px; }
  .d-departs h2 { font-size: 38px; }
  .d-departs .dp-bande { padding-bottom: 56px; }
  .d-departs .dp-tableau { padding: 18px 12px 14px; margin: 0 -8px; }
  .d-departs .dp-cols, .d-departs .dp-ligne { grid-template-columns: 13fr 9fr 7fr; gap: 6px; }
  .d-departs .dp-c { gap: 1px; }
  .d-departs .dp-cols span:nth-child(1), .d-departs .dp-cols span:nth-child(4), .d-departs .dp-c0, .d-departs .dp-c3 { display: none; }
  .d-departs .dp-f { width: 0.98em; font-size: 10.5px; }
  .d-departs .dp-horloge { font-size: 16px; }
  .d-departs #preuve .chiffre-valeur { font-size: 30px; }
  .d-departs .section { padding: 56px 0; } /* 72 -> 56 px le 24/10/2026 (audit UX : vides de 144 px entre blocs) */
  .d-departs .maps-mot { font-size: 64px; gap: 8px; }
  .d-departs .maps-etapes::before { display: none; }
  .d-departs .maps-etapes { padding-top: 0; }
  .d-departs .maps-etape::before { display: none; }
  .d-departs .audit-bloc { padding-top: 80px; }
  .d-departs .audit-bloc::before { padding: 10px 16px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .d-departs .dp-ligne.neuf { animation: none; }
}
/* C2 « Lignes » : base C (departs.css), signalétique de transport ; polices de la pré-prod, titres de section centrés, tableau lisible (une palette par mot). *
   Titres en casse normale, lignes d'offre en couleur pleine : teal (Tracking), bleu (Acquisition), ambre (IA, plus de violet). */
.d-c2 {
  --canvas: #f7f7f5;
  /* Polices de la pré-prod : SF Pro sur Apple, Figtree (auto-hébergée) ailleurs */
  --sans-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Figtree", "Helvetica Neue", Arial, sans-serif;
  --signal: var(--sans-ui);
  --l-trk: #0f766e;
  --l-acq: #1d4ed8;
  --l-ia: #d97706;
}
.d-c2 h1, .d-c2 h2 { font-family: var(--signal); font-weight: 600; text-transform: none; letter-spacing: -0.032em; }
.d-c2 h1 { font-size: clamp(48px, 5.6vw, 76px); line-height: 1.02; }
.d-c2 h2 { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.06; }
.d-c2 h3 { font-family: var(--signal); font-weight: 600; text-transform: none; letter-spacing: -0.02em; }
.d-c2 .audit-succes-titre { font-family: var(--signal); font-weight: 600; letter-spacing: -0.02em; }
.d-c2 .btn, .d-c2 .lien-voir, .d-c2 .nav > a, .d-c2 .nav-declencheur { font-family: var(--sans-ui); text-transform: none; letter-spacing: -0.005em; font-weight: 600; }
.d-c2 .btn { font-size: 16px; }
.d-c2 .nav > a, .d-c2 .nav-declencheur { font-size: 15px; font-weight: 500; }
.d-c2 .btn-primaire { background: var(--ink); color: #fff; }
.d-c2 .btn-primaire:hover { background: #2a2a2a; }
.d-c2 .entete .btn-primaire { background: #fff; color: var(--ink); }
.d-c2 .nav > a[aria-current="page"], .d-c2 .nav-groupe:has([aria-current="page"]) .nav-declencheur { background: #fff; color: var(--ink); }
.d-c2 .entete .wm-tag, .d-c2 .entete .wm-slash, .d-c2 .pied .wm-tag, .d-c2 .pied .wm-slash { color: #5eead4; }

/* Titres de section centrés, comme sur la pré-prod */
.d-c2 .section-entete { display: block; max-width: 880px; margin: 0 auto 56px; text-align: center; }
.d-c2 .section-entete .sous-titre { max-width: 720px; margin: 20px auto 0; }
.d-c2 .maps-fin { justify-content: center; text-align: center; }

/* Chiffres : afficheurs sombres, chiffres dans la police du site */
.d-c2 #preuve .chiffres { text-align: left; }
.d-c2 #preuve .chiffre-valeur { font-family: var(--sans-ui); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; padding: 6px 14px 4px; }
.d-c2 #preuve .chiffre-legende { font-family: var(--sans-ui); font-weight: 500; text-transform: none; font-size: 15px; color: var(--ink-soft); }
.d-c2 .maps-mot { font-family: var(--sans-ui); font-weight: 600; }

/* Tableau « Votre visite » : une palette par mot, lisible */
.d-c2 .dp-tableau { padding: 30px 32px 24px; }
.d-c2 .dp-titre { font-family: var(--sans-ui); font-weight: 600; text-transform: none; letter-spacing: -0.025em; }
.d-c2 .dp-horloge { font-family: var(--sans-ui); font-weight: 600; font-variant-numeric: tabular-nums; }
.d-c2 .dp-cols { font-family: var(--sans-ui); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #8f8f8f; }
.d-c2 .dp-cols, .d-c2 .dp-mots .dp-ligne { grid-template-columns: 7fr 11fr 14fr 3fr 7fr; }
.d-c2 .dp-mots .dp-ligne { padding: 5px 0; }
.d-c2 .dp-mots .dp-c { perspective: 400px; }
.d-c2 .dp-m { display: inline-flex; align-items: center; max-width: 100%; min-height: 38px; padding: 0 14px; border-radius: 6px; background: #222 linear-gradient(transparent calc(50% - 0.5px), rgba(0, 0, 0, 0.75) calc(50% - 0.5px), rgba(0, 0, 0, 0.75) calc(50% + 0.5px), transparent calc(50% + 0.5px)); font-family: var(--sans-ui); font-size: 17px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: #f4f4f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: 50% 50%; }
.d-c2 .dp-m.vide { min-width: 64px; background-color: #1b1b1b; }
.d-c2 .dp-m.bascule { animation: c2-bascule .32s cubic-bezier(.4, 0, .2, 1); }
@keyframes c2-bascule { 0% { transform: rotateX(0); } 50% { transform: rotateX(88deg); filter: brightness(.6); } 100% { transform: rotateX(0); } }
.d-c2 .dp-ligne.ok .dp-c4 .dp-m { color: var(--mesure); }
.d-c2 .dp-ligne.attente .dp-c4 .dp-m { color: var(--ambre); }
.d-c2 .dp-ligne.attente .dp-c0 .dp-m, .d-c2 .dp-ligne.attente .dp-c1 .dp-m { color: #9a9a9a; }
.d-c2 .dp-note { font-size: 14px; }

/* Expertises : une ligne par offre, les sous-services en arrêts */
.d-c2 .expertises { border-top: 0; gap: 20px; }
.d-c2 .expertise { --l: var(--l-trk); grid-template-columns: minmax(0, 1fr); padding: 32px 36px 36px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); }
.d-c2 .c2-acq { --l: var(--l-acq); }
.d-c2 .c2-ia { --l: var(--l-ia); }
.d-c2 .expertise::before { display: none; }
.d-c2 .expertise-texte { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 40px; }
.d-c2 .titre-exp { display: flex; align-items: center; gap: 16px; grid-column: 1; font-size: 32px; color: var(--ink) !important; }
.d-c2 .c2-picto { display: inline-grid; place-items: center; flex: none; min-width: 48px; height: 48px; padding: 0 8px; border-radius: 10px; background: var(--l); color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.d-c2 .expertise-texte > p { grid-column: 1; padding-left: 64px; }
.d-c2 .expertise-texte .lien-voir { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.d-c2 .sous-services { grid-column: 1 / -1 !important; grid-row: auto !important; display: grid; column-gap: 0; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); columns: auto; margin: 34px 0 0 !important; padding: 0; position: relative; }
.d-c2 .sous-services li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 9px; left: 13px; right: 0; height: 8px; background: var(--l); }
.d-c2 .sous-services li { position: relative; padding: 34px 16px 0 0; border: 0; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.d-c2 .sous-services li::before { content: ""; position: absolute; z-index: 1; top: 0 !important; left: 0; width: 26px !important; height: 26px !important; border-radius: 50% !important; background: #fff !important; box-shadow: inset 0 0 0 5px var(--l); }
.d-c2 .sous-services li:last-child::before { box-shadow: inset 0 0 0 5px var(--l), inset 0 0 0 9px #fff, inset 0 0 0 13px var(--l); }

/* MAPS : une ligne de quatre arrêts */
.d-c2 .maps-etapes::before { height: 8px; border-radius: 4px; top: 7px; background: var(--ink); }
.d-c2 .maps-etape::before { top: -34px; width: 26px; height: 26px; box-shadow: inset 0 0 0 5px var(--ink); }
.d-c2 .maps-carte { background: #fff; box-shadow: inset 0 0 0 1px var(--filet); }
.d-c2 .maps-badge { text-transform: none; font-family: var(--signal); font-weight: 700; letter-spacing: 0; font-size: 13px; }
.d-c2 .maps-badge-plein { background: var(--ink); color: #fff; }

.d-c2 .avis-carte figcaption { text-transform: none; font-family: var(--signal); font-weight: 700; font-size: 15px; letter-spacing: 0; }
.d-c2 .audit-bloc::before { content: "Audit gratuit, sans engagement"; text-transform: none; letter-spacing: 0; font-family: var(--signal); font-weight: 700; color: #fff; }
html[lang="en"] .audit-bloc::before { content: "Free audit, no commitment"; }
.d-c2 .progression-segment.plein { background: var(--ink) !important; }
.d-c2 .pied-email { color: #5eead4; }
.d-c2 .pied-titre { text-transform: none; letter-spacing: 0; font-family: var(--signal); }
.d-c2 .mini-titre { text-transform: none; font-family: var(--signal); font-weight: 700; letter-spacing: -0.01em; }
.d-c2 .fleche-chaine, .d-c2 .tuile, .d-c2 .tuile-grande { color: #5eead4; }

@media (max-width: 980px) {
  .d-c2 .expertise-texte { grid-template-columns: minmax(0, 1fr); }
  .d-c2 .expertise-texte .lien-voir { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 20px; }
  .d-c2 .sous-services { grid-auto-flow: row; margin-top: 22px !important; }
  .d-c2 .sous-services li:not(:last-child)::after { top: 13px; bottom: -13px; left: 9px; right: auto; width: 8px; height: auto; }
  .d-c2 .sous-services li { padding: 2px 0 18px 44px; }
  .d-c2 .sous-services li::before { top: 0 !important; }
}
@media (max-width: 760px) {
  .d-c2 .dp-tableau { padding: 20px 14px 16px; }
  .d-c2 .dp-cols, .d-c2 .dp-mots .dp-ligne { grid-template-columns: 11fr 9fr 7fr; gap: 8px; }
  .d-c2 .dp-m { min-height: 30px; padding: 0 8px; font-size: 13px; }
  .d-c2 .dp-m.vide { min-width: 40px; }
  .d-c2 h1 { font-size: 46px; }
  .d-c2 h2 { font-size: 34px; }
  .d-c2 .expertise { padding: 24px 18px 26px; }
  .d-c2 .titre-exp { font-size: 26px; gap: 12px; }
  .d-c2 .c2-picto { min-width: 40px; height: 40px; font-size: 20px; }
  .d-c2 .expertise-texte > p { padding-left: 0; margin-top: 10px; }
}

/* Offre IA : l'ambre remplace le violet partout (variable et teintes codées en dur dans les pages) ; ambre foncé pour le texte (contraste AA) */
html.d-c2 { --offre-ia: #b45309; }
.d-c2 .titre-icone-ia, .d-c2 .chip-ia, .d-c2 .agent-flottant-tuile, .d-c2 .carte-agent-tuile { background: #fdf0dc; }
.d-c2 .fond-bloc.fond-ia { background: #fdf6ea; }
/* G : jauge segmentée. Posé sur le thème C2. */
.vxg { padding: 36px 40px 30px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); }
.vxg-tete { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px 40px; }
.vxg-titre { margin: 0; font-size: clamp(28px, 2.8vw, 40px) !important; }
.vxg-sous { margin: 12px 0 0; max-width: 60ch; font-size: 16.5px; color: var(--ink-soft); }
.vxg-compte { margin: 0; font-size: 15px; color: var(--ink-soft); }
.vxg-compte b { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 4px; }

.vxg-jauge { position: relative; margin: 52px 0 0; }
.vxg-segments { display: flex; gap: 4px; }
.vxg-seg { flex-basis: 0; min-width: 88px; display: flex; flex-direction: column; gap: 8px; }
.vxg-barre { position: relative; display: block; height: 30px; overflow: hidden; border-radius: 6px; background: #e7e7e3; }
.vxg-barre::after { content: ""; position: absolute; inset: 0; background: var(--teal-fonce); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.vxg-seg.mesure .vxg-barre::after { transform: none; }
.vxg-seg:first-child .vxg-barre { border-radius: 15px 6px 6px 15px; }
.vxg-terminus .vxg-barre { border-radius: 6px 15px 15px 6px; background: #fff; box-shadow: inset 0 0 0 2.5px var(--ink); }
.vxg-terminus .vxg-barre::after { background: var(--ink); }
.vxg-nom { font-size: 14.5px; font-weight: 600; color: #8a8a85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vxg-seg.mesure .vxg-nom { color: var(--ink); }
.vxg-heure { margin-top: -6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--teal-fonce); font-variant-numeric: tabular-nums; min-height: 1.3em; }
.vxg-terminus .vxg-heure { color: #b45309; font-weight: 600; }
.vxg-repere { position: absolute; top: -8px; left: 0; width: 0; height: 46px; pointer-events: none; transition: left .15s linear; }
.vxg-repere::before { content: ""; position: absolute; left: -1.5px; top: 0; width: 3px; height: 46px; border-radius: 2px; background: var(--ink); }
.vxg-repere span { position: absolute; left: -10px; top: -30px; padding: 3px 9px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.vxg-pied { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--filet); }
.vxg-pied p { margin: 0; max-width: 60ch; font-size: 15.5px; color: var(--ink-soft); }

/* Barre fine collée sous l'en-tête pendant le défilement */
.vxg-mini { position: fixed; z-index: 40; left: 0; right: 0; top: 64px; background: rgba(247, 247, 245, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--filet); transform: translateY(-110%); opacity: 0; transition: transform .35s ease, opacity .35s ease; pointer-events: none; }
.vxg-mini.visible { transform: none; opacity: 1; }
.vxg-mini-c { display: flex; align-items: center; gap: 20px; min-height: 40px; }
.vxg-mini-t { flex: none; font-size: 13px; color: var(--ink-soft); }
.vxg-mini-t b { color: var(--ink); font-variant-numeric: tabular-nums; }
.vxg-petite { flex: 1; margin: 0; }
.vxg-petite .vxg-segments { gap: 2px; }
.vxg-petite .vxg-barre { height: 8px; border-radius: 3px !important; }
.vxg-petite .vxg-repere { top: -4px; height: 16px; }
.vxg-petite .vxg-repere::before { height: 16px; width: 2px; }

@media (max-width: 860px) {
  .vxg { padding: 26px 18px 22px; }
  .vxg-jauge { margin-top: 48px; }
  .vxg-seg { min-width: 22px; }
  .vxg-nom { font-size: 11.5px; }
  .vxg-heure { display: none; }
  .vxg-seg:not(.mesure):not(.vxg-terminus) .vxg-nom { visibility: hidden; }
  .vxg-pied .btn { width: 100%; }
  .vxg-mini-t { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vxg-barre::after, .vxg-repere, .vxg-mini { transition: none; } }
.capture .vxg-barre::after, .capture .vxg-repere { transition: none; }

/* Accueil mobile et titre (aperçu Studio/30-mobile-accueil, variante D, validé le 18/10/2026).
   Tout est limité à l'accueil (html[data-groupe="accueil"]) sauf l'en-tête : menu mobile, logo du menu, onglets en majuscules. */

/* 1. Logo du menu mobile : vert du logo, plus l'ambre hérité de la direction C */
.d-c2 .nav-mobile-entete .wm-tag, .d-c2 .nav-mobile-entete .wm-slash { color: #5eead4; }

/* 2. Menu mobile simplifié : une seule liste, six lignes, pastille de couleur de l'offre, sans descriptions ni icônes */
.d-c2 .nav-mobile-corps { width: 100%; padding-top: 12px; }
.d-c2 .nav-mobile-groupe { display: none; }
.d-c2 .nav-mobile-liens { gap: 0; }
.d-c2 .nav-mobile-carte { gap: 14px; min-height: 62px; padding: 0 4px; border-radius: 0; background: none; border-bottom: 1px solid var(--filet); }
.d-c2 .nav-mobile-carte[aria-current="page"] { box-shadow: none; }
.d-c2 .nav-mobile-ico { width: 12px; height: 12px; border-radius: 3px; background: var(--l-trk); }
.d-c2 .nav-mobile-ico-acq { background: var(--l-acq); }
.d-c2 .nav-mobile-ico-ia { background: var(--l-ia); }
.d-c2 .nav-mobile-ico svg, .d-c2 .nav-mobile-desc, .d-c2 .nav-mobile-lignes svg { display: none; }
.d-c2 .nav-mobile-titre { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.d-c2 .nav-mobile-lignes { margin: 0; }
.d-c2 .nav-mobile-lignes a { min-height: 62px; padding: 0 4px 0 30px; border-bottom: 1px solid var(--filet); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.d-c2 .nav-mobile-lignes a:last-child { border-bottom: 0; }

/* 3. Chiffres : chaque bloc centré dans sa colonne */
html.d-c2[data-groupe="accueil"] #preuve .chiffres { text-align: center; }
html.d-c2[data-groupe="accueil"] #preuve .chiffre { align-items: center; }
html.d-c2[data-groupe="accueil"] #preuve .chiffre-valeur { align-self: center; }
html.d-c2[data-groupe="accueil"] #preuve .chiffre-legende { max-width: 22ch; margin-left: auto; margin-right: auto; }

/* 4. Derniers restes de l'ambre de la direction C : vert du logo (légende de la vidéo, lettre active de MAPS, sélection) */
html.d-c2[data-groupe="accueil"] .h1-legende b { background: #5eead4; color: var(--ink); }
html.d-c2[data-groupe="accueil"] .maps[data-actif="0"] .maps-mot span:nth-child(1), html.d-c2[data-groupe="accueil"] .maps[data-actif="1"] .maps-mot span:nth-child(2), html.d-c2[data-groupe="accueil"] .maps[data-actif="2"] .maps-mot span:nth-child(3), html.d-c2[data-groupe="accueil"] .maps[data-actif="3"] .maps-mot span:nth-child(4) { color: #5eead4; }
html.d-c2[data-groupe="accueil"] ::selection { background: #5eead4; }

/* 5. Mobile : la vidéo du héros disparaît (illisible à cette taille) */
@media (max-width: 760px) {
  html.d-c2[data-groupe="accueil"] .hs .hv { display: none; }
  html.d-c2[data-groupe="accueil"] .hero { padding-bottom: 40px; }
  html.d-c2[data-groupe="accueil"] .hs .actions { flex-direction: column; }
  html.d-c2[data-groupe="accueil"] .hs .actions .btn { width: 100%; justify-content: center; }
  html.d-c2[data-groupe="accueil"] #preuve .chiffres { column-gap: 12px; row-gap: 28px; }
  /* Outils : une seule grille de 5 colonnes au lieu de deux listes à lignes orphelines (10 + 9 logos) */
  html.d-c2[data-groupe="accueil"] .outils-rangees { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 320px; margin: 0 auto; }
  html.d-c2[data-groupe="accueil"] .outils-rangees .outils-liste { display: contents; }
  html.d-c2[data-groupe="accueil"] .outils-liste li { width: 56px; height: 56px; }
  html.d-c2[data-groupe="accueil"] .outils-liste svg { width: 30px; height: 30px; }
  html.d-c2[data-groupe="accueil"] .outils-liste svg[viewBox="0 0 24 24"] { width: 26px; height: 26px; }
  /* Jauge « Votre visite » : noms de sections tronqués (« Ac… », « Dem… ») retirés, le repère « Vous êtes ici » suffit */
  html.d-c2[data-groupe="accueil"] .vxg-nom { display: none; }
}

/* Titre de l'accueil (D) : « Paid & Data. » sur une palette noire, sous « Agence » */
html.d-c2[data-groupe="accueil"] .hs h1 { font-size: clamp(56px, 6.2vw, 88px); line-height: 1.02; letter-spacing: -0.045em; }
html.d-c2[data-groupe="accueil"] .hs h1 em { display: block; width: fit-content; margin-top: 0.1em; padding: 0.02em 0.2em 0.08em; border-radius: 0.12em; background: var(--tableau) linear-gradient(transparent calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), transparent calc(50% + 1px)); color: #5eead4; font-style: normal; }
@media (max-width: 760px) { html.d-c2[data-groupe="accueil"] .hs h1 { font-size: 15.5vw; } }

/* Accueil, titre étiré sur ordinateur (aperçu Studio/31-titre-ordi, variante G, validé le 18/10/2026) : titre centré sur une ligne, texte et boutons centrés, vidéo centrée dessous ; « Paid & Data. » à 82 % */
@media (min-width: 761px) {
  html.d-c2[data-groupe="accueil"] .hs { text-align: center; }
  html.d-c2[data-groupe="accueil"] .hs .hs-grille { grid-template-columns: minmax(0, 1fr); row-gap: 56px; justify-items: center; }
  html.d-c2[data-groupe="accueil"] .hs h1 { margin: 0; font-size: clamp(56px, 9vw, 116px); line-height: 1; white-space: nowrap; }
  html.d-c2[data-groupe="accueil"] .hs h1 em { display: inline-block; margin: 0 0 0 0.12em; font-size: 0.82em; vertical-align: 0.06em; }
  html.d-c2[data-groupe="accueil"] .hs .chapo { margin: 28px auto 0; max-width: 56ch; }
  html.d-c2[data-groupe="accueil"] .hs .actions { justify-content: center; }
  html.d-c2[data-groupe="accueil"] .hs .hv { width: 100%; }
  html.d-c2[data-groupe="accueil"] .hs .hv-zone { max-width: 720px; margin: 0 auto; }
}

/* Onglets de l'en-tête en majuscules */
.d-c2 .nav > a, .d-c2 .nav-declencheur { text-transform: uppercase; font-size: 13.5px; font-weight: 600; letter-spacing: 0.06em; }

/* Signature des avis en vert du logo (version foncée, lisible sur carte blanche) */
html.d-c2[data-groupe="accueil"] .avis-carte figcaption { color: var(--teal-fonce); }

/* Accueil, premier bloc B « Pixels » (aperçu Studio/32-hero-motion, validé le 18/10/2026) : la vidéo est remplacée par un panneau sombre
   plein cadre ; à droite, des pixels s'assemblent en barres (canevas, script de la page) ; sur mobile, en fond transparent. Remplace la mise en page G. */
html.d-c2[data-groupe="accueil"] .hs.hm-b { position: relative; overflow: hidden; margin: 28px 14px 10px; padding: 120px 0 112px; border-radius: 22px; background: var(--tableau); color: #fff; text-align: left; }
html.d-c2[data-groupe="accueil"] .hm-b canvas.hm-pixels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
html.d-c2[data-groupe="accueil"] .hm-b .hs-grille { position: relative; z-index: 1; justify-items: start; }
html.d-c2[data-groupe="accueil"] .hm-b .hs-texte { max-width: 600px; }
html.d-c2[data-groupe="accueil"] .hm-b h1 { color: #fff; white-space: normal; }
html.d-c2[data-groupe="accueil"] .hm-b h1 em { display: block; width: fit-content; margin: 0.08em 0 0; font-size: 1em; background: #262626 linear-gradient(transparent calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), transparent calc(50% + 1px)); }
html.d-c2[data-groupe="accueil"] .hm-b .chapo { margin: 28px 0 0; max-width: 46ch; color: rgba(255, 255, 255, 0.8); }
html.d-c2[data-groupe="accueil"] .hm-b .actions { justify-content: flex-start; }
html.d-c2[data-groupe="accueil"] .hm-b .hero-reassurance { color: rgba(255, 255, 255, 0.55); }
html.d-c2[data-groupe="accueil"] .hm-b .btn-primaire { background: #5eead4; color: var(--ink); }
html.d-c2[data-groupe="accueil"] .hm-b .btn-primaire:hover { background: #99f6e4; }
html.d-c2[data-groupe="accueil"] .hm-b .btn-secondaire { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45); }
html.d-c2[data-groupe="accueil"] .hm-b .btn-secondaire:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
html.d-c2[data-groupe="accueil"] .hm-b :focus-visible { outline-color: #fff; }
html.d-c2[data-groupe="accueil"] .hm-b + .chiffres-section { padding-top: 56px; }
@media (min-width: 761px) {
  html.d-c2[data-groupe="accueil"] .hm-b { text-align: left; }
  html.d-c2[data-groupe="accueil"] .hm-b h1 { font-size: clamp(56px, 6.4vw, 92px); line-height: 1.02; }
  html.d-c2[data-groupe="accueil"] .hm-b h1 em { margin: 0.08em 0 0; font-size: 1em; vertical-align: baseline; }
  html.d-c2[data-groupe="accueil"] .hm-b .chapo { margin: 28px 0 0; }
}
@media (max-width: 760px) {
  html.d-c2[data-groupe="accueil"] .hs.hm-b { margin: 16px 8px 8px; padding: 44px 0 36px; border-radius: 18px; }
  html.d-c2[data-groupe="accueil"] .hm-b canvas.hm-pixels { display: none; } /* variante B de Studio/37-audit-mobile, validée le 20/10/2026 : pas de pixels derrière le texte */
  html.d-c2[data-groupe="accueil"] .hm-b + .chiffres-section { padding-top: 40px; }
}

/* Langues (chantier EN du 18/10/2026) : sélecteur « EN | FR » de l'en-tête et du menu mobile, bandeau de suggestion, titre EN de l'accueil */
.d-c2 .langues { display: inline-flex; align-items: center; gap: 2px; margin-right: 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; }
.d-c2 .langues a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: rgba(255, 255, 255, 0.62); text-decoration: none; }
.d-c2 .langues a:hover { color: #fff; }
.d-c2 .langues a.actif { color: #fff; text-decoration: underline; text-decoration-color: #5eead4; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.d-c2 .langues-sep { color: rgba(255, 255, 255, 0.3); }
/* Menu mobile : sélecteur EN / FR en pastille dans la barre du haut, à côté de la croix (24/10/2026) */
.d-c2 .nav-mobile-entete .langues-mobile { margin: 0 10px 0 auto; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.d-c2 .nav-mobile-entete .langues-mobile a { min-height: 36px; padding: 0 13px; border-radius: 999px; color: rgba(255, 255, 255, 0.7); }
.d-c2 .nav-mobile-entete .langues-mobile a.actif { background: #fff; color: #141414; text-decoration: none; }
.d-c2 .nav-mobile-entete .langues-mobile .langues-sep { display: none; }
/* Pied de page : « English | Français » */
.d-c2 .langues-pied { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.d-c2 .langues-pied a { padding: 0 8px; }
.d-c2 .langues-pied a:first-child { padding-left: 0; }
@media (max-width: 760px) { .d-c2 .entete .langues { display: none; } }

.langue-suggestion { background: var(--tableau, #141414); color: #fff; font-size: 14px; }
.langue-suggestion[hidden] { display: none; }
.langue-suggestion .contenant { display: flex; align-items: center; justify-content: center; gap: 8px 16px; min-height: 44px; flex-wrap: wrap; }
.langue-suggestion p { margin: 0; color: rgba(255, 255, 255, 0.78); }
.langue-suggestion a { color: #5eead4; font-weight: 600; }
.langue-fermer { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, 0.7); cursor: pointer; }
.langue-fermer:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.langue-fermer svg { width: 16px; height: 16px; }

/* Accueil EN : « Paid & Data » en palette sur la première ligne, « agency. » en dessous */
html.d-c2[lang="en"][data-groupe="accueil"] .hs h1 em, html.d-c2[lang="en"][data-groupe="accueil"] .hm-b h1 em { margin: 0 0 0.08em; }

/* Retouches du 18/10/2026 (soir), à la demande de l'utilisateur */
/* À propos : fiche de l'agence sans bandeau (variante C de Studio/35-fiche-a-propos, validée le 18/10/2026) : le logo est déjà dans l'en-tête du site */
.d-c2 .fiche-agence-tete { display: none; }
.d-c2 .fiche-agence dl { padding-top: 12px; }

/* Tracking et Google Ads : panneau sombre du héros retiré, seules les cartes sombres restent posées sur le fond clair */
.d-c2 .hero-chaine { padding: 0; border-radius: 0; background: none; }
.d-c2 .mini-carte { border-radius: 12px; background: var(--tableau); }
.d-c2 .fleche-chaine { color: var(--ink); }

/* Réalisations : titre et chapô centrés, titre étalé sur la largeur (seule page à titre centré, comme avant le thème C2) */
html.d-c2[data-groupe="realisations"] .hero { text-align: center; }
html.d-c2[data-groupe="realisations"] .hero h1 { max-width: 1100px; margin: 0 auto; text-wrap: balance; }
html.d-c2[data-groupe="realisations"] .hero .chapo { margin: 24px auto 0; max-width: 720px; }
.d-c2 .fiche-agence { border-color: var(--filet); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.35); }

/* IA & Automatisation : panneau gris du héros retiré, cartes blanches inchangées */
.d-c2 .agents-fond { padding: 0; border-radius: 0; background: none; }

/* Espaces resserrés sous le héros (aperçu Studio/34-retouches-ui, points 3 et 4, validés le 18/10/2026) */
html.d-c2[data-groupe="realisations"] .hero { padding-bottom: 24px; }
html.d-c2[data-groupe="realisations"] .section-cas { padding-top: 32px; }
.d-c2 .hero-contact + .section { padding-top: 40px; }
.d-c2 .hs-fiche { padding-bottom: 32px; }
.d-c2 #parcours { padding-top: 64px; }

/* Pied de page : lien LinkedIn sous l'e-mail (variante A de Studio/36-pied-linkedin-favicon, 18/10/2026) */
.pied-reseaux { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.pied-linkedin { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: -11px; color: #fff; text-decoration: none; transition: color .15s; }
.pied-linkedin svg { width: 22px; height: 22px; flex: none; }
.pied-linkedin:hover { color: #5eead4; }

/* Accueil, tableau de bord (aperçu Studio/39-accueil, 24/10/2026) : interface reconstituée de app.tagbrut.com, données fictives de la démo */
html.d-c2[data-groupe="accueil"] .pilotage { overflow: hidden; }
html.d-c2[data-groupe="accueil"] .pm-grille { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; }
html.d-c2[data-groupe="accueil"] .pm-texte { text-align: left; }
html.d-c2[data-groupe="accueil"] .pm-label { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px; border-radius: 999px; background: #e9f4f2; font-size: 13px; font-weight: 600; color: var(--teal-fonce); }
html.d-c2[data-groupe="accueil"] .pm-texte h2 { margin: 0; text-align: left; }
html.d-c2[data-groupe="accueil"] .pm-chapo { margin: 18px 0 0; max-width: 46ch; font-size: 18px; line-height: 1.5; color: var(--ink-soft); }
html.d-c2[data-groupe="accueil"] .pm-texte .actions { justify-content: flex-start; margin-top: 28px; }
html.d-c2[data-groupe="accueil"] .pm-texte .micro-copie { margin-top: 12px; }
html.d-c2[data-groupe="accueil"] .pm-app { overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--filet), 0 40px 70px -40px rgba(0,0,0,.35); font-family: var(--sans-ui, system-ui, sans-serif); color: var(--ink); text-align: left; }
html.d-c2[data-groupe="accueil"] .pm-barre { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--filet); background: #f7f7f5; }
html.d-c2[data-groupe="accueil"] .pm-barre > span { width: 10px; height: 10px; border-radius: 50%; background: #dcdcd8; }
html.d-c2[data-groupe="accueil"] .pm-barre em { margin: 0 auto; padding: 2px 40px; border-radius: 6px; background: #fff; font-size: 11.5px; font-style: normal; color: var(--ink-soft); }
html.d-c2[data-groupe="accueil"] .pm-ecran { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 360px; }
html.d-c2[data-groupe="accueil"] .pm-menu { padding: 14px 10px; border-right: 1px solid var(--filet); }
html.d-c2[data-groupe="accueil"] .pm-logo { display: flex; align-items: center; gap: 8px; padding: 0 6px 14px; font-size: 12px; font-weight: 700; }
html.d-c2[data-groupe="accueil"] .pm-logo b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #115e59; color: #a7f3d0; font-size: 12px; }
html.d-c2[data-groupe="accueil"] .pm-menu ul { margin: 0; padding: 0; list-style: none; }
html.d-c2[data-groupe="accueil"] .pm-menu li { display: flex; align-items: center; gap: 7px; padding: 7px 6px; border-radius: 7px; font-size: 11.5px; color: var(--ink); }
html.d-c2[data-groupe="accueil"] .pm-menu li::before { display: none; }
html.d-c2[data-groupe="accueil"] .pm-menu li.actif { background: #fff; box-shadow: inset 0 0 0 1px var(--filet); font-weight: 600; }
html.d-c2[data-groupe="accueil"] .pm-menu svg { flex: none; width: 14px; height: 14px; }
html.d-c2[data-groupe="accueil"] .pm-main { min-width: 0; padding: 14px 16px 16px; }
html.d-c2[data-groupe="accueil"] .pm-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
html.d-c2[data-groupe="accueil"] .pm-tete b { display: block; font-size: 14px; }
html.d-c2[data-groupe="accueil"] .pm-id span { font-size: 11px; color: var(--ink-soft); }
/* Fidélité à app.tagbrut.com (24/10/2026) : sélecteur de période, flèches des écarts ; .pm-mob = éléments de la vue mobile de l'app */
html.d-c2[data-groupe="accueil"] .pm-mob { display: none; }
html.d-c2[data-groupe="accueil"] .pm-periodes, html.d-c2[data-groupe="accueil"] .pm-onglets { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 8px; background: #f7f7f5; box-shadow: inset 0 0 0 1px var(--filet); }
html.d-c2[data-groupe="accueil"] .pm-periodes i, html.d-c2[data-groupe="accueil"] .pm-onglets i { padding: 3px 8px; border-radius: 6px; font-size: 10.5px; font-style: normal; color: var(--ink-soft); white-space: nowrap; }
html.d-c2[data-groupe="accueil"] .pm-periodes i.actif, html.d-c2[data-groupe="accueil"] .pm-onglets i.actif { background: #fff; box-shadow: 0 0 0 1px var(--filet); font-weight: 600; color: var(--ink); }
html.d-c2[data-groupe="accueil"] .pm-onglets { display: flex; width: max-content; margin-top: 8px; }
html.d-c2[data-groupe="accueil"] .pm-fl { margin-right: 3px; font-size: .78em; font-style: normal; }
html.d-c2[data-groupe="accueil"] .pm-vs { font-weight: 400; color: var(--ink-soft); }
html.d-c2[data-groupe="accueil"] .pm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
html.d-c2[data-groupe="accueil"] .pm-kpi { padding: 9px 10px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--filet); }
html.d-c2[data-groupe="accueil"] .pm-kpi-l { display: block; font-size: 10.5px; color: var(--ink-soft); }
html.d-c2[data-groupe="accueil"] .pm-kpi-v { display: block; margin-top: 2px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.d-c2[data-groupe="accueil"] .pm-delta { font-size: 10.5px; font-weight: 600; }
html.d-c2[data-groupe="accueil"] .pm-hausse { color: var(--vert, #15803d); }
html.d-c2[data-groupe="accueil"] .pm-neutre { color: var(--ink-soft); }
html.d-c2[data-groupe="accueil"] .pm-bas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
html.d-c2[data-groupe="accueil"] .pm-carte { padding: 10px 12px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--filet); }
html.d-c2[data-groupe="accueil"] .pm-carte > b { display: block; font-size: 11.5px; }
html.d-c2[data-groupe="accueil"] .pm-leg { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 10px; color: var(--ink-soft); }
html.d-c2[data-groupe="accueil"] .pm-leg i { display: inline-block; width: 12px; height: 2px; background: #0f766e; }
html.d-c2[data-groupe="accueil"] .pm-leg i.pt { margin-left: 8px; background: repeating-linear-gradient(90deg, #a3a3a3 0 3px, transparent 3px 5px); }
html.d-c2[data-groupe="accueil"] .pm-courbe { display: block; width: 100%; height: 120px; margin-top: 8px; overflow: visible; }
html.d-c2[data-groupe="accueil"] .pm-act { fill: none; stroke: #0f766e; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
html.d-c2[data-groupe="accueil"] .pm-prec { fill: none; stroke: #a3a3a3; stroke-width: 1.4; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
html.d-c2[data-groupe="accueil"] .pm-aire { fill: rgba(15,118,110,.08); transition: opacity .8s .9s; }
html.d-c2[data-groupe="accueil"] .pm-canaux ul { margin: 8px 0 0; padding: 0; list-style: none; }
html.d-c2[data-groupe="accueil"] .pm-canaux li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 6px; padding: 5px 0; font-size: 10.5px; }
html.d-c2[data-groupe="accueil"] .pm-canaux li::before { display: none; }
html.d-c2[data-groupe="accueil"] .pm-can-n { display: flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html.d-c2[data-groupe="accueil"] .pm-can-n i { flex: none; width: 6px; height: 6px; border-radius: 50%; }
html.d-c2[data-groupe="accueil"] .pm-can-p { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
html.d-c2[data-groupe="accueil"] .pm-can-b { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 3px; background: #f0f0ed; }
html.d-c2[data-groupe="accueil"] .pm-can-b i { display: block; width: var(--p); height: 100%; min-width: 4px; border-radius: 3px; transition: width .9s cubic-bezier(.3, .7, .2, 1); }
/* État de départ de l'animation (posé par accueil.js tant que le bloc n'a pas été vu) */
html.d-c2[data-groupe="accueil"] .pm-app.attente .pm-act { stroke-dashoffset: 1; }
html.d-c2[data-groupe="accueil"] .pm-app.attente .pm-aire { opacity: 0; }
html.d-c2[data-groupe="accueil"] .pm-app.attente .pm-can-b i { width: 0; }
html.d-c2[data-groupe="accueil"] .pm-app.joue .pm-act { transition: stroke-dashoffset 1.8s cubic-bezier(.4, 0, .2, 1); }
html.d-c2[data-groupe="accueil"] .pm-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 56px 0 0; padding: 0; list-style: none; }
html.d-c2[data-groupe="accueil"] .pm-feat { padding: 22px 22px 24px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); text-align: left; }
html.d-c2[data-groupe="accueil"] .pm-feat::before { display: none; }
html.d-c2[data-groupe="accueil"] .pm-feat-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #e9f4f2; color: var(--teal-fonce); }
html.d-c2[data-groupe="accueil"] .pm-feat-ico svg { width: 21px; height: 21px; }
html.d-c2[data-groupe="accueil"] .pm-feat h3 { margin: 16px 0 0; font-size: 18px; }
html.d-c2[data-groupe="accueil"] .pm-feat p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 1080px) {
  html.d-c2[data-groupe="accueil"] .pm-grille { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  html.d-c2[data-groupe="accueil"] .pm-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  html.d-c2[data-groupe="accueil"] .pm-ecran { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  html.d-c2[data-groupe="accueil"] .pm-menu { display: none; }
  html.d-c2[data-groupe="accueil"] .pm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.d-c2[data-groupe="accueil"] .pm-bas { grid-template-columns: minmax(0, 1fr); }
  html.d-c2[data-groupe="accueil"] .pm-canaux { display: none; }
  /* Mobile : rendu de la vue téléphone de l'app (en-tête à menu, périodes, section, cartes, onglets), sans barre de navigateur */
  html.d-c2[data-groupe="accueil"] .pm-barre { display: none; }
  html.d-c2[data-groupe="accueil"] .pm-app { border-radius: 22px; box-shadow: 0 0 0 1px var(--filet), 0 30px 60px -36px rgba(0,0,0,.35); }
  html.d-c2[data-groupe="accueil"] .pm-main { padding: 16px 14px 14px; }
  html.d-c2[data-groupe="accueil"] .pm-mob { display: block; }
  html.d-c2[data-groupe="accueil"] .pm-tete { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; }
  html.d-c2[data-groupe="accueil"] .pm-burger { display: inline-grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--filet); }
  html.d-c2[data-groupe="accueil"] .pm-burger svg { width: 20px; height: 20px; }
  html.d-c2[data-groupe="accueil"] .pm-id { min-width: 0; }
  html.d-c2[data-groupe="accueil"] .pm-id b { font-size: 17px; }
  html.d-c2[data-groupe="accueil"] .pm-id span { font-size: 12.5px; }
  html.d-c2[data-groupe="accueil"] .pm-periodes { order: 3; padding: 4px; border-radius: 10px; }
  html.d-c2[data-groupe="accueil"] .pm-periodes i { padding: 6px 12px; font-size: 13px; border-radius: 7px; }
  html.d-c2[data-groupe="accueil"] .pm-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--filet); }
  html.d-c2[data-groupe="accueil"] .pm-section b { display: block; font-size: 19px; letter-spacing: -0.01em; }
  html.d-c2[data-groupe="accueil"] .pm-section span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
  html.d-c2[data-groupe="accueil"] .pm-kpis { gap: 10px; margin-top: 14px; }
  html.d-c2[data-groupe="accueil"] .pm-kpi { padding: 13px 14px; border-radius: 14px; }
  html.d-c2[data-groupe="accueil"] .pm-kpi-l { font-size: 13px; }
  html.d-c2[data-groupe="accueil"] .pm-kpi-v { margin-top: 4px; font-size: 22px; }
  html.d-c2[data-groupe="accueil"] .pm-delta { display: block; margin-top: 4px; font-size: 12px; }
  html.d-c2[data-groupe="accueil"] .pm-vs { display: inline; }
  html.d-c2[data-groupe="accueil"] .pm-bas { margin-top: 10px; }
  html.d-c2[data-groupe="accueil"] .pm-carte { padding: 14px; border-radius: 14px; }
  html.d-c2[data-groupe="accueil"] .pm-carte > b { font-size: 15px; }
  html.d-c2[data-groupe="accueil"] .pm-onglets { display: flex; width: max-content; max-width: 100%; }
  html.d-c2[data-groupe="accueil"] .pm-onglets i { padding: 5px 9px; font-size: 12px; }
  html.d-c2[data-groupe="accueil"] .pm-leg { margin-top: 10px; font-size: 11.5px; }
  html.d-c2[data-groupe="accueil"] .pm-courbe { height: 130px; }
  html.d-c2[data-groupe="accueil"] .pm-feats { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 32px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); }
  html.d-c2[data-groupe="accueil"] .pm-feat { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 14px; padding: 16px; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--filet); }
  html.d-c2[data-groupe="accueil"] .pm-feat:first-child { border-top: 0; }
  html.d-c2[data-groupe="accueil"] .pm-feat-ico { grid-row: 1 / 3; width: 36px; height: 36px; }
  html.d-c2[data-groupe="accueil"] .pm-feat h3 { margin: 0; font-size: 16.5px; }
  html.d-c2[data-groupe="accueil"] .pm-feat p { margin: 4px 0 0; font-size: 14.5px; }
  html.d-c2[data-groupe="accueil"] .pm-chapo { font-size: 17px; }
  html.d-c2[data-groupe="accueil"] .pm-texte .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html.d-c2[data-groupe="accueil"] .pm-can-b i, html.d-c2[data-groupe="accueil"] .pm-app.joue .pm-act { transition: none; }
}
html.d-c2[data-groupe="accueil"] .pm-canaux li:nth-child(1) i { background: #0f766e; }
html.d-c2[data-groupe="accueil"] .pm-canaux li:nth-child(2) i { background: #ea580c; }
html.d-c2[data-groupe="accueil"] .pm-canaux li:nth-child(3) i { background: #1d4ed8; }
html.d-c2[data-groupe="accueil"] .pm-canaux li:nth-child(4) i { background: #d97706; }
html.d-c2[data-groupe="accueil"] .pm-canaux li:nth-child(1) .pm-can-b i { --p: 35%; }
html.d-c2[data-groupe="accueil"] .pm-canaux li:nth-child(2) .pm-can-b i { --p: 40%; }
html.d-c2[data-groupe="accueil"] .pm-canaux li:nth-child(3) .pm-can-b i { --p: 19%; }
html.d-c2[data-groupe="accueil"] .pm-canaux li:nth-child(4) .pm-can-b i { --p: 6%; }

/* Titre « Paid Media & Data Performance. » (24/10/2026, aperçu Studio/39-accueil) : « Paid Media & Data » en vert menthe sur une ligne,
   sans palette ni trait médian, aligné à gauche sur « Performance. » en blanc dessous */
html.d-c2[data-groupe="accueil"] .hm-b h1 em, html.d-c2[lang][data-groupe="accueil"] .hm-b h1 em { display: block; width: auto; margin: 0; padding: 0; border-radius: 0; background: none; color: #5eead4; white-space: nowrap; }
html.d-c2[data-groupe="accueil"] .hm-b h1 .h1-suite { display: block; }
/* Surtitre du H1 (audit SEO du 24/10/2026) : les mots-clés de la page dans le titre, sans changer la composition */
html.d-c2[data-groupe="accueil"] .hs h1 .h1-surtitre { display: block; margin: 0 0 22px; font-family: var(--sans-ui); font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; white-space: normal; color: rgba(255, 255, 255, 0.72); }
@media (min-width: 761px) {
  html.d-c2[data-groupe="accueil"] .hm-b h1 { font-size: clamp(48px, 5.3vw, 76px); }
}
@media (max-width: 760px) {
  html.d-c2[data-groupe="accueil"] .hm-b h1 { font-size: 11.2vw; }
}

/* Pied de page : place pour la pastille « événements mesurés » (fixe en bas à gauche), qui couvrait « © TAGBRUT » (24/10/2026) */
.d-c2 .pied-bas { padding-bottom: 60px; }

/* Audit UX du 24/10/2026 (Studio/40-audit-final/ux) */
/* Ambre #ffb000 illisible sur fond clair (ratio 1,5 à 1,8) : version foncée dans le panneau « Votre visite » et la console */
.d-c2 .vx-ligne dd .vx-non, .d-c2 .vx-consent-etat[data-etat="refuse"], .d-c2 .a1 .a1-consentement:not([data-etat="accorde"]) { color: #b45309; }
/* Zones tactiles de 44 px : onglets Vue simple / technique, « Essayer », « Modifier mon choix », sélecteur de langue du menu mobile */
.d-c2 .vx-vue { min-height: 44px; }
.d-c2 .vx-conv a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.d-c2 .vx .lien-texte { display: inline-flex; align-items: center; min-height: 44px; }
.d-c2 .nav-mobile-entete .langues-mobile a { min-height: 40px; }
/* Héros des pages services sur mobile : boutons empilés en pleine largeur, comme l'accueil */
@media (max-width: 760px) {
  .d-c2 .hs .actions { flex-direction: column; align-items: stretch; }
  .d-c2 .hs .actions .btn { width: 100%; }
}
/* Mobile : listes de détail repliées (cartes des chantiers, formules IA), voir theme/c2.js */
.d-c2 .repli-bouton { display: none; }
@media (max-width: 760px) {
  .d-c2 .repli-bouton { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; padding: 0; border: 0; background: none; font-family: var(--sans-ui); font-size: 15px; font-weight: 600; color: #115e59; cursor: pointer; }
  .d-c2 .repli-bouton svg { width: 12px; height: 12px; transition: transform .2s; }
  .d-c2 .repli-ouvert .repli-bouton svg { transform: rotate(180deg); }
  .d-c2 .repli:not(.repli-ouvert) .liste-coches, .d-c2 .repli:not(.repli-ouvert) .formule-sous, .d-c2 .repli:not(.repli-ouvert) .formule-liste { display: none; }
}