/* homepage-classic.css purgé pour les pages publiques hors accueil (templates, src, config, JS, contenus Studio scannés).
   Régénérer si une classe de homepage-classic.css est introduite dans un gabarit ou un contenu ; le mode Studio/aperçu garde la feuille complète. */
/* =====================================================================
   "RESEAU DE CONFIANCE" — reprise fidele du prototype valide
   design-preview/ (2026-09-10, remplace Signal Clair). Initialement
   homepage uniquement, etendu le meme jour aux pages internes du menu
   (Maintenance/Reseau/Hebergement/Conseils/Developpement/A propos/
   Contact/References clients) a la demande explicite de l'utilisateur.
   Scope entier sous .hc-page pour ne rien casser sur les
   ~120 autres gabarits du site (meme principe que .sc-page avant).
   Navbar/footer partages restent INCHANGES (partials/navbar.html.twig,
   partials/footer.html.twig) : seul le contenu entre les deux change.
   ===================================================================== */
.hc-page {
    /* Lot 0 (2026-09-11) : marine et orange ne sont plus redefinis ici, mais aliases
       vers la source unique --pg-* d'app.css (voir commentaire au-dessus de ce token
       dans app.css) - corrige les deux marines/deux oranges de marque releves par
       l'audit. --hc-signal-600 (et le nouveau --hc-signal-700 pour :hover/:active)
       sont desormais LA couleur d'action AA-conforme ; --hc-signal-500 reste plus
       clair et reserve au decoratif (ne jamais l'utiliser pour du texte ou un bouton). */
    /* Lot 1 (2026-09) : encre/papier/bordures/succes/rayons/container alignes eux aussi
       sur la source unique d'app.css, meme principe que le marine/orange du Lot 0 -
       une seule paire de valeurs, pas une redefinition parallele. */
    --hc-ink: var(--pg-text-primary);
    --hc-ink-soft: var(--pg-text-secondary);
    --hc-ink-mute: var(--pg-text-muted);
    --hc-paper: var(--pg-surface-alt);
    --hc-paper-alt: #eef1f7;
    --hc-card: var(--pg-surface);
    --hc-navy-900: var(--pg-navy-900);
    --hc-navy-800: var(--pg-navy-800);
    --hc-navy-700: var(--pg-navy-700);
    --hc-azure-500: #2559d9;
    --hc-azure-100: #e7edff;
    --hc-signal-500: var(--pg-signal-500);
    --hc-signal-600: var(--pg-signal-600);
    --hc-signal-700: var(--pg-signal-700);
    --hc-success-500: var(--pg-success);
    --hc-line: var(--pg-border);
    --hc-line-soft: var(--pg-border-soft);
    --hc-radius-sm: 10px;
    --hc-radius-md: 16px;
    --hc-radius-lg: 28px;
    --hc-shadow-md: 0 12px 32px rgba(7,26,58,.10);
    --hc-shadow-lg: 0 28px 64px rgba(7,26,58,.16);
    --hc-container: var(--pg-container);
    background: var(--hc-paper);
    color: var(--hc-ink-soft);
    font-family: var(--pg-font-body);
}
.hc-page * { box-sizing: border-box; }
.hc-page h1, .hc-page h2, .hc-page h3 {
    font-family: var(--pg-font-display);
    color: var(--hc-ink);
    line-height: 1.12;
    margin: 0 0 .5em;
    letter-spacing: -.01em;
}
.hc-page h2 { font-size: var(--text-h2); font-weight: 600; }
.hc-page:not(.hc-home-commercial) p {
    margin: 0 0 1em;
}
.hc-page a { color: inherit; text-decoration: none; }
.hc-container { max-width: var(--hc-container); margin: 0 auto; padding: 0 24px; }
.hc-section { padding: 96px 0; }

.hc-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--pg-font-display);
    font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: #1a4fbf;
    margin-bottom: 14px;
}
.hc-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--hc-signal-500); display: inline-block; border-radius: 2px; }
.hc-lede { font-size: 1.15rem; color: var(--hc-ink-soft); max-width: 640px; }

/* ---------- Boutons ---------- */
.hc-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px;
    font-family: var(--pg-font-display); font-weight: 600; font-size: .95rem;
    border-radius: 999px; border: 1px solid transparent; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
    white-space: nowrap;
}
.hc-btn svg { width: 16px; height: 16px; transition: transform .18s ease; }
.hc-btn:hover svg { transform: translateX(3px); }
/* Lot 0 : fond en --hc-signal-600 (ex --hc-signal-500) - l'ancien fond #ff7a1a donnait
   2.61:1 en texte blanc (echec WCAG AA 4.5:1, mesure lors de l'audit) ; #b6490c donne 5.32:1. */
.hc-btn-primary { background: var(--hc-signal-600); color: #fff; box-shadow: 0 10px 24px rgba(0, 136, 163, .28); }
.hc-btn-primary:hover { background: var(--hc-signal-700); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 136, 163, .35); color:#fff; }
.hc-btn-outline { background: transparent; border-color: var(--hc-line); color: var(--hc-ink); }
.hc-btn-outline:hover { border-color: var(--hc-navy-900); background: var(--hc-navy-900); color: #fff; transform: translateY(-2px); }
/* .hc-page a { color: inherit } gagne en spécificité sur .hc-btn-primary — texte grisé sur fond orange */
.hc-page a.hc-btn-primary,
.hc-page a.hc-btn-primary:hover,
.hc-page a.hc-btn-primary:focus-visible { color: #fff; }
.hc-page a.hc-btn-outline { color: var(--hc-ink); }
.hc-page a.hc-btn-outline:hover,
.hc-page a.hc-btn-outline:focus-visible { color: #fff; }

/* ---------- Hero ---------- */
.hc-hero-bg { position: absolute; inset: 0; }
.hc-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.hc-hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(1100px 520px at 82% -10%, rgba(46,107,242,.35), transparent 60%),
        linear-gradient(180deg, rgba(7,26,58,.55) 0%, rgba(7,26,58,.92) 78%, var(--hc-navy-900) 100%);
}
/* Lot 1 : accueil aligne sur --text-display (meme plafond que le hero smart_page/hubs) - le
   clamp precedent grimpait a 3.4rem/54px et restait fige a ce maximum des 1360px de large,
   seul point du site encore hors de l'echelle commune. */
.hc-hero-panel { position: relative; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--hc-radius-lg); padding: 28px; backdrop-filter: blur(10px); display: grid; gap: 16px; overflow: hidden; }
/* Lot "motion" (2026-09-16, audit visuel) : la homepage etait la seule page "reseau/hero
   technique" du site sans aucune trace de motion (0 <canvas>, verifie en direct) - ce panneau
   de 3 vraies informations restait un bloc statique. Toile en fond (topic "accueil"), sous les
   3 lignes reelles, opacite faible pour rester une texture de profondeur et jamais concurrencer
   le texte (le panneau et son contenu restent aria-hidden, deja purement visuel). */
.hc-hero-panel-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: var(--hc-radius-sm); background: rgba(7,20,40,.32); }
.hc-hero-panel-icon { width: 46px; height: 46px; border-radius: 12px; flex: none; background: linear-gradient(135deg, var(--hc-signal-500), var(--hc-signal-600)); display: flex; align-items: center; justify-content: center; }
.hc-hero-panel-icon svg { width: 22px; height: 22px; color: #fff; }
.hc-hero-panel-row strong { display: block; color: #fff; font-size: .95rem; }
.hc-hero-panel-row span { font-size: .82rem; color: #9fb0d6; }

/* ---------- Trust strip (partenaires) ---------- */
.hc-trust-strip { background: var(--hc-card); border-bottom: 1px solid var(--hc-line); padding: 26px 0; }
.hc-trust-strip .hc-container { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hc-trust-strip img { height: 34px; width: auto; filter: grayscale(1) opacity(.55); transition: filter .2s ease; }
.hc-trust-strip img:hover { filter: grayscale(0) opacity(1); }
.hc-trust-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--pg-text-secondary); font-weight: 600; white-space: nowrap; }
.hc-trust-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* ---------- Cartes expertises ---------- */

/* ---------- Stats ---------- */
.hc-stats-section { position: relative; background: var(--hc-navy-900); overflow: hidden; }
.hc-stats-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(7,26,58,.96), rgba(13,38,80,.88)); }

/* ---------- Split : pourquoi progedys ---------- */
.hc-check-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.hc-check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--hc-ink-soft); }
.hc-check-list li svg { width: 20px; height: 20px; flex: none; color: var(--hc-success-500); margin-top: 1px; }

/* ---------- CTA final (refonte 2026-09-16) : conclusion de page, pas une
   banniere marketing generique - eyebrow contextuel + titre + texte court a
   gauche, zone d'action structuree a droite (CTA principal + telephone en
   lien discret, plus d'egalite visuelle entre les 2). Detail technique tres
   discret : petit pulse "signal" pres de l'eyebrow + fine ligne verticale de
   separation interne (aucun nouveau diagramme, cf. brief : conclusion pas
   nouveau hero). Contenu contextualise par famille, voir cta_final.html.twig. ---------- */
.hc-cta-wrap { padding: 32px 24px 80px; }
.hc-cta-wrap .cta-final {
    /* --pg-* : CTA hors .hc-page (ex. /actualites/) — les alias --hc-* n’existent pas sans .hc-page */
    background: linear-gradient(135deg, var(--pg-navy-900), var(--pg-navy-700));
    border-radius: var(--hc-radius-lg, 28px); color: #fff; padding: 48px 56px; margin: 0 auto; max-width: var(--pg-container, 1120px);
    display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 32px;
    position: relative; overflow: hidden;
}
.hc-cta-wrap .cta-final::after { content: ""; position: absolute; right: -50px; top: -50px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 168, 201,.25), transparent 70%); }
.hc-cta-wrap .cta-final-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--pg-font-display); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-brand-cyan-soft, #5ec4dc); position: relative; z-index: 2; }
.hc-cta-wrap .cta-final-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--pg-signal-500, #5ec4dc); flex: none; animation: hc-cta-pulse 2.4s ease-in-out infinite; }
@keyframes hc-cta-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hc-cta-wrap .cta-final-pulse { animation: none; opacity: 1; } }
.hc-cta-wrap .cta-final-title { color: #fff; margin: 0 0 10px; font-family: var(--pg-font-display); font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 700; line-height: 1.28; max-width: 24ch; position: relative; z-index: 2; }
.hc-cta-wrap .cta-final-text { color: #c9d3e8; margin: 0; max-width: 42ch; font-size: .96rem; line-height: 1.5; position: relative; z-index: 2; }
/* Ligne de separation ancree sur le vrai bord de colonne de grille (border-left
   + demi-gap en marge/padding negatifs), plutot qu'un left:% fixe qui ne suit
   pas la repartition reelle 1.5fr/1fr et finissait par traverser le bouton
   sur les grands ecrans (retour QA, capture a l'appui, 2026-09-16). */
.hc-cta-wrap .cta-final-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; position: relative; z-index: 2; border-left: 1px solid rgba(255,255,255,.14); margin-left: -16px; padding-left: 32px; }
.hc-cta-wrap .cta-final-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; font-family: var(--pg-font-display); font-weight: 600; font-size: .95rem; border-radius: 999px; background: var(--pg-signal-600); color: #fff; white-space: nowrap; flex: none; transition: transform .18s ease, background .18s ease; text-decoration: none; }
.hc-cta-wrap .cta-final-btn svg { width: 16px; height: 16px; flex: none; }
.hc-cta-wrap .cta-final-btn:hover { background: var(--pg-signal-700); transform: translateY(-2px); color: #fff; }
.hc-cta-wrap .cta-final-phone { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; font-family: var(--pg-font-display); font-weight: 600; font-size: .95rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); color: #fff; text-decoration: none; white-space: nowrap; flex: none; transition: transform .18s ease, background .18s ease, border-color .18s ease, color .15s ease; }
.hc-cta-wrap .cta-final-phone svg { width: 16px; height: 16px; flex: none; }
.hc-cta-wrap .cta-final-phone:hover { color: #fff; background: rgba(255,255,255,.12); border-color: #fff; transform: translateY(-2px); }

/* ---------- Reveal au scroll (progressive enhancement) ---------- */
.hc-reveal { opacity: 1; }
:is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-reveal[data-reveal] {
    /* Opacité laissée à 1 : un fondu depuis 0 faisait échouer le contraste
       pendant l'animation (texte encore translucide). Le mouvement reste le translate. */
    opacity: 1; transform: translateY(16px);
    transition: transform .6s cubic-bezier(.16,.84,.44,1);
    transition-delay: var(--hc-reveal-delay, 0ms);
}
:is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-reveal[data-reveal].hc-in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    :is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-reveal[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .hc-hero-panel { max-width: 480px; margin-left: 0; margin-right: auto; }
    .template-business-home .hc-hero-panel { max-width: 100%; }
}
@media (max-width: 767px) {
    .hc-section { padding: 64px 0; }
    .hc-trust-strip .hc-container { justify-content: center; text-align: center; }
    .hc-cta-wrap .cta-final { grid-template-columns: 1fr; padding: 30px 26px; border-radius: var(--hc-radius-md); gap: 20px; }
    .hc-cta-wrap .cta-final-title { max-width: none; font-size: 1.28rem; }
    .hc-cta-wrap .cta-final-text { max-width: none; }
    .hc-cta-wrap .cta-final-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 22px; border-left: none; margin-left: 0; padding-left: 0; }
    .hc-cta-wrap { padding: 24px 20px 56px; }
}

/* =====================================================================
   PAGES INTERNES (2026-09-10) — meme gabarit pour toutes les pages du
   menu qui passent par partials/studio_article.html.twig (Maintenance,
   Reseau et telecom, Hebergement, Conseils, Developpement, A propos),
   plus Contact et References clients (templates dedies). Le contenu CMS
   reel (studio_editable, body_html, FAQ, liens associes) est conserve
   a l'identique : seul l'habillage visuel change.
   ===================================================================== */
.hc-page-hero { background: var(--hc-navy-900); color: #fff; padding: 64px 0 56px; position: relative; overflow: hidden; }
.hc-page-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 400px at 90% 0%, rgba(46,107,242,.3), transparent 60%); }
.hc-page-hero .hc-container { position: relative; z-index: 2; }
.hc-page-hero h1 { color: #fff; max-width: 780px; margin-bottom: 12px; font-size: var(--text-h1); font-weight: 600; }
.hc-page-hero .hc-lede { color: #c9d3e8; max-width: 640px; margin: 0; }
/* Hero a 2 colonnes (audit UX 2026-09-10 : "lecture en Z", pas un simple
   bandeau de texte plat) - rempli en JS avec la 1ere image reelle du
   contenu (voir homepage-classic.js). Sans JS/vide : 1 seule colonne,
   rien ne casse. */
.hc-page-hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.hc-page-hero-grid:has(.hc-page-hero-visual:not(:empty)) { grid-template-columns: 1.1fr .9fr; }
.hc-page-hero-visual:empty { display: none; }
.hc-page-hero-visual img { width: 100%; border-radius: var(--hc-radius-lg); box-shadow: 0 30px 70px rgba(0,0,0,.35); display: block; }
.hc-page-hero-visual { position: relative; min-height: 260px; }
.hc-page-hero-visual::before { content: ""; position: absolute; inset: -14px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--hc-radius-lg); pointer-events: none; }
/* Canvas Infra Kit de secours (aucune image reelle sur cette page) :
   meme boite que l'image, sur un panneau translucide pour rester
   lisible sur le fond navy du hero. */
.hc-page-hero-visual canvas.hc-topic-canvas {
    display: block; width: 100%; height: 260px;
    background: rgba(255,255,255,.05); border-radius: var(--hc-radius-lg);
    border: 1px solid rgba(255,255,255,.12);
}

@media (max-width: 900px) {
    .hc-page-hero-grid:has(.hc-page-hero-visual:not(:empty)) { grid-template-columns: 1fr; }
    .hc-page-hero-visual { order: -1; }
}

/* Contenu editorial (body_html CMS reel : h2/p/ul/figure Gutenberg) */
.hc-article { padding: 0; }
/* Container elargi (1100px, etait 820px) : une vitrine premium doit
   profiter de la largeur reelle pour des compositions horizontales
   (splits, grilles, bannieres) - la lisibilite du texte est preservee
   en bornant chaque colonne de texte individuellement (.hc-flow-text),
   pas le conteneur entier. */
.hc-article .hc-container { max-width: 1100px; }
.hc-flow-section:first-child { padding-top: 64px; }
.hc-flow-section:last-child { padding-bottom: 64px; }
.hc-article h2 { margin-top: 1.6em; }
.hc-article h2:first-child { margin-top: 0; }
.hc-article p { color: var(--hc-ink-soft); font-size: 1.02rem; }
.hc-article ul, .hc-article ol { color: var(--hc-ink-soft); font-size: 1.02rem; padding-left: 1.3em; }
.hc-article li { margin-bottom: .5em; }
.hc-article figure { margin: 28px 0; }
.hc-article figure img { border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); width: 100%; }
.hc-article figcaption { font-size: .85rem; color: var(--hc-ink-mute); margin-top: 8px; }
.hc-article a:not(.hc-btn) { color: var(--hc-azure-500); text-decoration: underline; text-decoration-color: rgba(46,107,242,.35); }

/* FAQ (classes/JS INCHANGES — partials/faq.html.twig + app.js .faq-trigger,
   seul l'habillage visuel change ici). */
.hc-page .faq-accordion { display: grid; gap: 12px; max-width: 1080px; margin: 0 auto; }
.hc-page .faq-item { border: 1px solid var(--hc-line); border-radius: var(--hc-radius-md); background: var(--hc-card); overflow: hidden; }
.hc-page .faq-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; background: none; border: none; text-align: left; cursor: pointer; font-family: var(--pg-font-display); font-weight: 600; font-size: 1rem; color: var(--hc-ink); }
.hc-page .faq-chevron { flex: none; width: 12px; height: 12px; border-right: 2px solid var(--hc-azure-500); border-bottom: 2px solid var(--hc-azure-500); transform: rotate(45deg); transition: transform .2s ease; }
.hc-page .faq-trigger[aria-expanded="true"] .faq-chevron { transform: rotate(-135deg); }
.hc-page .faq-answer-wrap { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.hc-page .faq-item.is-open .faq-answer-wrap { max-height: 400px; }
.hc-page .faq-answer { padding: 0 24px 20px; margin: 0; color: var(--hc-ink-soft); font-size: .96rem; }

/* Liens associes (partials/related_links.html.twig, classe INCHANGEE) */
.hc-page .related-links { max-width: 820px; margin: 0 auto 72px; padding: 0 24px; }
.hc-page .related-links h2 { font-size: 1.3rem; }
.hc-page .related-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hc-page .related-links a { color: var(--hc-azure-500); font-weight: 600; font-size: .95rem; }

/* Formulaire de contact */
.hc-form-card { background: var(--hc-card); border-radius: var(--hc-radius-lg); box-shadow: var(--hc-shadow-lg); padding: 44px; }
.hc-field { margin-bottom: 20px; }
.hc-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--hc-ink); margin-bottom: 8px; }
.hc-field input, .hc-field textarea { width: 100%; padding: 14px 16px; border-radius: var(--hc-radius-sm); border: 1.5px solid var(--hc-line); font-family: var(--pg-font-body); font-size: .95rem; background: var(--hc-paper); transition: border-color .15s ease, box-shadow .15s ease; }
.hc-field input:focus, .hc-field textarea:focus { outline: none; border-color: var(--hc-azure-500); box-shadow: 0 0 0 4px var(--hc-azure-100); background: #fff; }
.hc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hc-field--honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.hc-contact-info-list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 22px; }
.hc-contact-info-list li { display: flex; gap: 16px; align-items: flex-start; }
.hc-contact-info-list li:has(.pg-email-copy) { align-items: center; }
.hc-contact-info-list .pg-email-copy { margin-top: 0; }
.hc-contact-info-list .hc-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--hc-azure-100); color: var(--hc-navy-900); display: flex; align-items: center; justify-content: center; flex: none; font-size: 1.1rem; }
.hc-contact-info-list .hc-ic svg { width: 20px; height: 20px; }
.hc-contact-info-list strong { display: block; color: var(--hc-ink); font-size: .95rem; }
.hc-contact-info-list span, .hc-contact-info-list a { font-size: .88rem; color: var(--hc-ink-soft); }
.hc-alert { padding: 14px 18px; border-radius: var(--hc-radius-sm); font-size: .92rem; margin-bottom: 20px; }
.hc-alert--success { background: #e8f8f0; color: #0f6b3f; }
.hc-alert--error { background: #fdeceb; color: #a3241a; }

.hc-chip { display: inline-flex; padding: 8px 16px; border-radius: 999px; background: var(--hc-azure-100); color: var(--hc-navy-900); font-size: .82rem; font-weight: 600; }

@media (max-width: 767px) {
    .hc-field-row { grid-template-columns: 1fr; }
    .hc-form-card { padding: 26px; }
}

/* =====================================================================
   SYSTEME DE PREUVE (Lot 2, 2026-09) — references_client/index.html.twig
   + partials/proof/*. Reutilise integralement les tokens/rayons/ombres/
   espacements du design system (Lot 1) : aucune nouvelle couleur, aucun
   nouveau bouton. --hc-signal-600 reste l'unique orange d'action.
   ===================================================================== */

/* ---- Hero : stats de preuve immediate (colonne texte + colonne chiffres) ---- */
.hc-proof-hero-stats { display: grid; gap: var(--space-5); align-content: center; padding-left: clamp(0px, 4vw, 32px); border-left: 1px solid rgba(255,255,255,.14); }
@media (max-width: 900px) { .hc-proof-hero-stats { border-left: none; padding-left: 0; margin-top: var(--space-6); } }
.hc-proof-stat { display: flex; flex-direction: column; gap: 2px; }
.hc-proof-stat strong { font-family: var(--pg-font-display); font-size: var(--text-h2); font-weight: 700; color: #fff; line-height: 1; }
.hc-proof-stat span { font-size: .82rem; color: #a9b6cf; }

/* ---- Filtre secteur (boutons, pas un <select> generique) ---- */
.hc-proof-sectors { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.hc-proof-sector-btn {
    font-family: var(--pg-font-body); font-size: .85rem; font-weight: 600; color: var(--hc-ink-soft);
    background: var(--hc-card); border: 1.5px solid var(--hc-line); border-radius: 999px;
    padding: 9px 16px; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.hc-proof-sector-btn span { color: var(--hc-ink-mute); font-weight: 500; }
.hc-proof-sector-btn:hover { border-color: var(--hc-signal-600); color: var(--hc-ink); }
.hc-proof-sector-btn:focus-visible { outline: 2px solid var(--hc-signal-600); outline-offset: 2px; }
.hc-proof-sector-btn.is-active { background: var(--hc-signal-600); border-color: var(--hc-signal-600); color: #fff; }
.hc-proof-sector-btn.is-active span { color: rgba(255,255,255,.92); }

/* ---- Grille de references (Niveau B) — pas de carte uniforme : la photo (quand elle existe),
   le secteur et les domaines varient reellement d'une carte a l'autre. ---- */
.hc-proof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }
.hc-proof-grid [data-proof-filter-sector] { transition: opacity .2s ease; }
.hc-proof-grid [data-proof-filter-sector][hidden] { display: none; }
.hc-proof-card { display: flex; flex-direction: column; height: 100%; background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius-md); overflow: hidden; position: relative; transition: border-color .2s ease, box-shadow .2s ease; }
.hc-proof-card:hover { border-color: var(--hc-line); box-shadow: var(--hc-shadow-md); }
@media (prefers-reduced-motion: reduce) { .hc-proof-card { transition: none; } }
.hc-proof-card-media { aspect-ratio: 16/9; background: var(--hc-navy-900); }
.hc-proof-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-proof-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.hc-proof-sector { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hc-signal-600); }
.hc-proof-card h3 { font-size: 1.05rem; margin: 0; line-height: 1.3; }
.hc-proof-domains { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.hc-proof-domain { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; color: var(--hc-ink-soft); background: var(--hc-paper); border-radius: 999px; padding: 4px 10px; }
.hc-proof-missions { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font-size: .86rem; color: var(--hc-ink-soft); line-height: 1.5; }
.hc-proof-missions li { padding-left: 16px; position: relative; }
.hc-proof-missions li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--hc-line); }
.hc-proof-more { font-size: .8rem; color: var(--hc-ink-mute); margin: 4px 0 0; font-style: italic; }

/* Lot R — page /realisations/ (cas anonymisés) */
.hc-real-card-link { text-decoration: none; color: inherit; }
.hc-real-card-link:focus-visible { outline: 2px solid var(--hc-signal-600); outline-offset: 3px; }
.hc-real-card-visual {
    aspect-ratio: 16/9;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--hc-navy-900) 0%, #1a2844 100%);
}
.hc-real-card-glyph {
    font-family: var(--pg-font-display);
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 700;
    color: rgba(255,255,255,.22);
    user-select: none;
}
.hc-real-card-visual { display: block; position: relative; overflow: hidden; aspect-ratio: auto; height: 170px; }
.hc-real-card-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.hc-real-card-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,26,58,.45), rgba(7,26,58,0) 55%); pointer-events: none; }
.hc-real-card-link:hover .hc-real-card-visual img { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) { .hc-real-card-visual img { transition: none; } .hc-real-card-link:hover .hc-real-card-visual img { transform: none; } }
.hc-real-summary { font-size: .88rem; color: var(--hc-ink-soft); margin: 0; line-height: 1.5; }
#realisations-grid [data-realisation-theme] { transition: opacity .2s ease; }
#realisations-grid [data-realisation-theme][hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { #realisations-grid [data-realisation-theme] { transition: none; } }
.hc-real-detail-stack { display: grid; gap: var(--space-6); max-width: 1080px; margin: 0 auto; }

/* Etude de cas : bandeau + besoin / livrables en tuiles */
.hc-real-case { background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius-md); overflow: hidden; box-shadow: var(--hc-shadow-md); scroll-margin-top: 88px; }
.hc-real-case-head { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); background: linear-gradient(135deg, var(--hc-navy-900) 0%, #1a2844 100%); color: #fff; }
.hc-real-case-glyph { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-family: var(--pg-font-display); font-size: 1.5rem; font-weight: 700; background: var(--hc-signal-600); color: #fff; }
.hc-real-case-headtxt { flex: 1; min-width: 0; }
.hc-real-case-sector { margin: 0 0 4px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.65); }
.hc-real-case-head h3 { margin: 0; font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.3; color: #fff; }
.hc-real-case-kpi { flex: none; text-align: center; padding-left: var(--space-5); border-left: 1px solid rgba(255,255,255,.2); }
.hc-real-case-kpi strong { display: block; font-size: 1.9rem; line-height: 1; font-family: var(--pg-font-display); }
.hc-real-case-kpi span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.65); }
.hc-real-case-body { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; }
.hc-real-case-side { padding: var(--space-6); background: var(--hc-paper); border-right: 1px solid var(--hc-line-soft); display: flex; flex-direction: column; gap: var(--space-3); }
.hc-real-case-main { padding: var(--space-6); }
.hc-real-case h4 { margin: 0 0 8px; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--hc-signal-600); }
.hc-real-case-need { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--hc-ink); font-weight: 500; }
.hc-real-case-follow { margin-top: auto; padding: var(--space-4); border-left: 3px solid var(--hc-signal-600); background: var(--hc-card); border-radius: 0 var(--hc-radius-sm) var(--hc-radius-sm) 0; }
.hc-real-case-follow p { margin: 0; font-size: .86rem; color: var(--hc-ink-soft); line-height: 1.5; }
.hc-real-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hc-real-tile { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius-sm); background: var(--hc-card); font-size: .9rem; line-height: 1.45; color: var(--hc-ink); transition: border-color .2s ease, transform .2s ease; }
.hc-real-tile:hover { border-color: var(--hc-signal-600); transform: translateY(-2px); }
.hc-real-tile-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--hc-azure-100); color: var(--hc-azure-500); }
.hc-real-case-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--hc-line-soft); background: var(--hc-paper); }
.hc-real-case-foot > span { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hc-ink-mute); margin-right: 6px; }
.hc-real-case-link { font-size: .84rem; font-weight: 600; text-decoration: none; color: var(--hc-signal-600); border: 1px solid var(--hc-line); background: var(--hc-card); border-radius: 999px; padding: 6px 14px; }
.hc-real-case-link:hover { background: var(--hc-signal-600); border-color: var(--hc-signal-600); color: #fff; }
.hc-real-case-link:focus-visible { outline: 2px solid var(--hc-signal-600); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hc-real-tile { transition: none; } .hc-real-tile:hover { transform: none; } }
@media (max-width: 860px) {
    .hc-real-case-body { grid-template-columns: 1fr; }
    .hc-real-case-side { border-right: 0; border-bottom: 1px solid var(--hc-line-soft); }
    .hc-real-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .hc-real-case-head { flex-wrap: wrap; padding: var(--space-4); }
    .hc-real-case-headtxt { flex-basis: calc(100% - 68px); }
    .hc-real-case-kpi { order: 3; flex-basis: 100%; }
    .hc-real-case-kpi { border-left: 0; padding-left: 0; text-align: left; display: flex; gap: 8px; align-items: baseline; }
    .hc-real-case-side, .hc-real-case-main { padding: var(--space-4); }
}

/* ---- Bande de confiance (Niveau C) — regroupee par secteur, jamais un mur de logos minuscules. ---- */
.hc-proof-strip { display: grid; gap: var(--space-4); }
.hc-proof-strip-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.hc-proof-strip-sector { font-size: .78rem; font-weight: 700; color: var(--hc-ink-mute); text-transform: uppercase; letter-spacing: .05em; flex: none; min-width: 140px; }
.hc-proof-strip-names { display: flex; flex-wrap: wrap; gap: var(--space-2); }

@media (max-width: 640px) {
    .hc-proof-grid { grid-template-columns: 1fr; }
    .hc-proof-sectors { gap: 8px; }
    .hc-proof-strip-sector { min-width: 100%; }
}

/* =====================================================================
   CONTENU EDITORIAL REEL (2026-09-10) — le contenu CMS (body_html) est
   du HTML Gutenberg/WordPress deja structure (wp-block-cover, wp-block-
   columns, wp-block-list, figures, separators). Plutot que d'inventer
   du contenu ou des cards vides, on habille ces blocs REELS avec le
   meme langage visuel que la homepage (cards, images arrondies,
   checklist, reveal au scroll) — zero mot ajoute/retire.
   ===================================================================== */

/* Bandeau de couverture (image + citation) : mini page-hero editorial */
.hc-article .wp-block-cover {
    position: relative; border-radius: var(--hc-radius-lg); overflow: hidden;
    margin: 0 0 40px; min-height: 220px; display: flex; align-items: center;
    box-shadow: var(--hc-shadow-md);
}
.hc-article .wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc-article .wp-block-cover__background { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(7,26,58,.88), rgba(13,38,80,.7)); }
.hc-article .wp-block-cover.is-light .wp-block-cover__background { background: linear-gradient(120deg, rgba(7,26,58,.72), rgba(13,38,80,.55)); }
.hc-article .wp-block-cover:not(:has(.wp-block-cover__background))::after {
    content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(7,26,58,.82), rgba(13,38,80,.62));
}
.hc-article .wp-block-cover__inner-container { position: relative; z-index: 2; padding: 40px 44px; }
.hc-article .wp-block-cover__inner-container p { color: #fff !important; font-family: var(--pg-font-display); font-weight: 600; font-size: 1.3rem !important; line-height: 1.4; margin: 0; max-width: 640px; }
.hc-article .wp-block-cover__inner-container p span { color: #a8e8f5 !important; }

/* Colonnes Gutenberg = grille de cartes (structure REELLE deja presente
   dans le contenu — Delegation de personnels / Parc PC / Serveurs etc.) */
.hc-article .wp-block-columns {
    display: grid; grid-template-columns: 1fr; gap: 22px;
    margin: 40px 0; list-style: none; padding: 0;
}
/* Le nombre reel de colonnes varie selon le contenu CMS (parfois 1 seule
   colonne pleine largeur, parfois 2 ou 3) - la grille s'adapte au nombre
   reel d'enfants plutot que de toujours forcer 3 pistes (qui laissait
   des cases vides des qu'il y avait moins de 3 colonnes reelles). */
.hc-article .wp-block-columns:has(> .wp-block-column:nth-child(2)) { grid-template-columns: repeat(2, 1fr); }
.hc-article .wp-block-columns:has(> .wp-block-column:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
.hc-article .wp-block-column {
    background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius-md);
    padding: 26px; transition: transform .2s ease, box-shadow .2s ease;
}
.hc-article .wp-block-column:hover { transform: translateY(-4px); box-shadow: var(--hc-shadow-md); }
.hc-article .wp-block-column p:first-child { font-family: var(--pg-font-display); font-weight: 600; color: var(--hc-ink); margin-bottom: 8px; }
.hc-article .wp-block-column p:first-child a { color: var(--hc-navy-900); }
.hc-article .wp-block-column p:last-child { margin: 0; font-size: .92rem; }
/* Colonnes vides (astuce WP frequente pour centrer une image via des
   colonnes "flanquantes" vides) : ne pas les afficher comme des cards
   vides. Colonne contenant uniquement une image : image nette, sans
   habillage card. */
.hc-article .wp-block-column:empty { display: none; }
.hc-article .wp-block-column:has(> .wp-block-image:only-child) { background: none; border: none; padding: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; }
.hc-article .wp-block-column .wp-block-image img { border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); width: 100%; height: auto; }

/* Bloc "image + texte" (wp-block-media-text), motif reel distinct des
   colonnes - image d'un cote, texte de l'autre, jamais style avant. */
.hc-article .wp-block-media-text { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: center; margin: 24px 0; }
.hc-article .wp-block-media-text__media { margin: 0; }
.hc-article .wp-block-media-text__media img { width: 100%; display: block; border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); }
.hc-article .wp-block-media-text__content { padding: 0; }
.hc-article .wp-block-media-text__content p { margin: 0 0 10px; }
@media (max-width: 700px) {
    .hc-article .wp-block-media-text { grid-template-columns: 1fr; }
}

/* Listes a puces reelles -> checklist visuelle (memes coches que la
   homepage), qu'elles portent une classe wp-block-list ou non. */
.hc-article ul:not(.related-links ul) {
    list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px;
}
.hc-article ul:not(.related-links ul) li {
    position: relative; padding-left: 30px; font-size: 1rem;
}
.hc-article ul:not(.related-links ul) li::before {
    content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--hc-success-500);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}
/* "Pages associees"/liens simples : pas de coche, juste une liste de liens */
.hc-article h2:has(+ ul) + ul li::before { display: none; }
.hc-article h2:has(+ ul) + ul li { padding-left: 0; }
.hc-article h2:has(+ ul) + ul { gap: 8px; }

/* Images/figures reelles : arrondi + ombre + legende, jamais brutes */
.hc-article figure, .hc-article .wp-block-image, .hc-article > img {
    margin: 32px 0; border-radius: var(--hc-radius-md); overflow: hidden; box-shadow: var(--hc-shadow-md);
}
.hc-article figure img, .hc-article .wp-block-image img { width: 100%; display: block; border-radius: var(--hc-radius-md); }
.hc-article .wp-block-gallery { display: block; box-shadow: none; margin: 32px 0; }
.hc-article figcaption { font-size: .85rem; color: var(--hc-ink-mute); padding: 10px 16px; }

/* Separateurs : ligne fine degradee plutot que le <hr> brut du navigateur */
.hc-article hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--hc-line) 20%, var(--hc-line) 80%, transparent); margin: 40px 0; }

/* Paragraphes surlignes (highlight WP) : deja colores par le CMS,
   on ajoute juste un traitement "bandeau" au lieu d'un simple fond plat. */
.hc-article p[class*="has-background"] { padding: 16px 22px; border-radius: var(--hc-radius-sm); font-weight: 600; }
.hc-article .has-luminous-vivid-amber-color { color: var(--hc-signal-600); font-weight: 600; }

@media (max-width: 900px) {
    .hc-article .wp-block-columns { grid-template-columns: 1fr !important; }
    .hc-article .wp-block-media-text { grid-template-columns: 1fr !important; }
}

/* Version compacte de ces memes regles pour les pages passees au systeme
   "corporate" (.hc-corp) - le HTML CMS brut reste identique (zero perte
   de contenu), seule l'echelle est resserree pour matcher le reste du
   design system. */
.hc-corp .hc-article .wp-block-cover { min-height: 160px; margin-bottom: 28px; border-radius: var(--hc-radius-md); }
.hc-corp .hc-article .wp-block-cover__inner-container { padding: 26px 30px; }
.hc-corp .hc-article .wp-block-cover__inner-container p { font-size: 1.05rem !important; }
.hc-corp .hc-article .wp-block-columns { margin: 28px 0; gap: 18px; }
.hc-corp .hc-article .wp-block-column { padding: 20px; border-radius: var(--hc-radius-sm); }
.hc-corp .hc-article h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-top: 1.3em; }
.hc-corp .hc-article h3, .hc-corp .hc-article h4 { font-size: 1.05rem; }
.hc-corp .hc-article p, .hc-corp .hc-article ul, .hc-corp .hc-article ol { font-size: .96rem; }
.hc-corp .hc-article ul:not(.related-links ul) { margin: 14px 0; gap: 10px; }
.hc-corp .hc-article figure { margin: 24px 0; }

/* Reveal au scroll applique dynamiquement par homepage-classic.js aux
   blocs structurants du contenu editorial (figures/colonnes/couverture) -
   memes classes que le reste du site, aucune animation nouvelle. */

/* =====================================================================
   LECTURE EN "Z" (audit 2026-09-10 : "effet blog", pas de rythme visuel).
   homepage-classic.js regroupe le contenu CMS reel par section H2 et
   alterne : fond clair/pale-bleu, texte/image en Z quand une image
   existe dans le groupe. Zero contenu invente - uniquement la MEME
   matiere reorganisee visuellement, comme le split "Pourquoi Progedys"
   de la homepage.
   ===================================================================== */
/* Full-bleed : chaque section casse la largeur du conteneur editorial
   (1100px) pour occuper tout le viewport (fond alterne/bandeau visibles
   bord a bord, comme sur la homepage) ; .hc-flow-inner recentre le
   contenu reel a une largeur confortable. */
.hc-flow-section, .hc-trust-band {
    width: 100vw; position: relative; left: 50%; margin-left: -50vw;
}
.hc-flow-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.hc-flow-section { padding: 64px 0; }
.hc-flow-section.hc-flow-alt { background: var(--hc-paper-alt); }
.hc-flow-section > h2:first-child { margin-top: 0; }
.hc-flow-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hc-flow-split.hc-flow-reverse { grid-template-columns: .95fr 1.05fr; }
.hc-flow-split.hc-flow-reverse .hc-flow-media { order: 2; }
.hc-flow-media figure, .hc-flow-media .wp-block-image { margin: 0; }
.hc-flow-media img { width: 100%; border-radius: var(--hc-radius-lg); box-shadow: var(--hc-shadow-lg); }
.hc-flow-text h2:first-child { margin-top: 0; }
/* Banniere pleine largeur (texte long + image reelle) : l'image passe
   au-dessus du texte plutot que compressee dans une colonne etroite. */
.hc-flow-banner-media { margin: 0 0 32px !important; }
.hc-flow-banner-media img { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--hc-radius-lg); box-shadow: var(--hc-shadow-lg); }
.hc-flow-section .hc-flow-text { max-width: none; }

/* Emplacement visuel a fournir (audit 2026-09-11 : plus de canvas de
   remplissage - un encadre clairement identifie a la place, pour que
   l'utilisateur sache exactement ou glisser une vraie photo). */
.hc-image-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    min-height: 240px; border: 1.5px dashed var(--hc-line); border-radius: var(--hc-radius-lg);
    background: rgba(46,107,242,.03); color: var(--hc-ink-mute); text-align: center; padding: 24px;
}
.hc-image-placeholder svg { width: 34px; height: 34px; opacity: .5; }
.hc-image-placeholder span { font-size: .85rem; max-width: 220px; }

/* Grille de features (paragraphes repetes titre+description, ex.
   Developpement : Gestion/Metiers/Internet/Mobiles) */
.hc-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 28px; }
.hc-feature-card { padding: 28px; border-radius: var(--hc-radius-md); background: var(--hc-card); border: 1px solid var(--hc-line-soft); transition: transform .2s ease, box-shadow .2s ease; }
.hc-feature-card:hover { transform: translateY(-4px); box-shadow: var(--hc-shadow-md); }
.hc-feature-card h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--hc-azure-500); }
.hc-feature-card p { margin: 0; font-size: .95rem; }

/* Grille d'avantages (listes courtes 3-8 items) */
.hc-advantage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px; margin: 24px 0; }
.hc-advantage-item { display: flex; align-items: flex-start; gap: 14px; }
.hc-advantage-item svg { flex: none; width: 22px; height: 22px; color: var(--hc-success-500); margin-top: 2px; }
.hc-advantage-item span { font-size: .98rem; color: var(--hc-ink-soft); }

/* Bandeau de confiance "Pourquoi choisir Progedys" - traitement distinct
   (navy) pour marquer une rupture forte avant le reste du contenu. */
.hc-trust-band { background: var(--hc-navy-900); color: #fff; padding: 64px 0; }
.hc-trust-band h2 { color: #fff; text-align: center; margin-bottom: 36px; }
.hc-trust-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.hc-trust-band-item { padding: 20px; text-align: center; font-size: .92rem; color: #c9d3e8; border-left: 2px solid var(--hc-signal-500); text-align: left; }
@media (max-width: 900px) {
    .hc-flow-split { grid-template-columns: 1fr; gap: 28px; }
    .hc-flow-split.hc-flow-reverse { grid-template-columns: 1fr; }
    .hc-flow-split.hc-flow-reverse .hc-flow-media { order: -1; }
    .hc-feature-grid, .hc-advantage-grid { grid-template-columns: 1fr; }
    .hc-trust-band-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   COMPOSANTS "VITRINE PREMIUM" (2026-09-11) — DSI externalisee /
   Developpement / Audit. Structure ecrite en Twig (voir templates/
   conseils/dsi_externalisee.html.twig etc.), le JS ne fait plus que du
   reveal/animation ici. Un seul systeme de largeur (1360px, comme la
   homepage) partage par tous les composants ci-dessous.
   ===================================================================== */
.hc-sc { max-width: var(--hcw); margin: 0 auto; padding: 0 clamp(24px, 5vw, 64px); }
/* Grille editoriale reelle (12 colonnes) - chaque section positionne ses
   enfants via un grid-column explicite (voir Twig), pas deux div 50%. */
.hc-grid12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); }
.hc-grid12 > * { min-width: 0; }
/* Utilitaires de decalage/chevauchement (audit 2026-09-11 : "contenu
   colle a un cote", "toujours du 50/50") */
.hc-z2 { position: relative; z-index: 2; }

/* ---------- Hero variantes (A/B/C selon la page) ---------- */
.hc-hero2 { position: relative; background: var(--hc-navy-900); color: #fff; overflow: hidden; padding: clamp(64px, 9vh, 108px) 0 clamp(72px, 9vh, 120px); }
.hc-hero2::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1100px 520px at 82% -10%, rgba(46,107,242,.32), transparent 62%); pointer-events: none; }
.hc-hero2-grid { position: relative; z-index: 2; align-items: center; min-height: 46vh; }
/* Lot 1 : font-size sur l'echelle partagee (var(--text-display), plafond 2.75rem/44px) au lieu
   d'un clamp() a 4.2rem (67px) propre a ce selecteur - c'etait la valeur non maitrisee que le
   correctif .hc-corp .hc-hero2 h1 ci-dessous masquait deja partout ou .hc-hero2 est utilise
   (toujours avec .hc-corp en pratique, verifie) ; alignee ici pour qu'un futur usage de .hc-hero2
   hors .hc-corp n'y retombe pas. */
.hc-hero2 h1 { color: #fff; font-size: var(--text-display); font-weight: 700; line-height: 1.05; margin: 0 0 22px; }
.hc-hero2 .hc-lede { color: #c9d3e8; font-size: 1.12rem; max-width: 42ch; margin: 0 0 32px; }
/* Hauteur explicite plutot que aspect-ratio : en grille 12 colonnes,
   aspect-ratio sur un item stretch peut se resoudre a partir de la
   hauteur de ligne (plus courte que prevue) au lieu de la largeur de
   colonne, retrecissant l'image bien en-dessous de sa colonne reelle
   (mesure en direct : 248px au lieu des ~750px attendus). */
/* Hero avec image cover pleine largeur, titre superpose (type 3) */

/* Numero eyebrow (01, 02...) */
.hc-num-eyebrow { font-family: var(--pg-font-display); font-size: .8rem; font-weight: 700; letter-spacing: .18em; color: var(--hc-signal-600); display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
/* Orange sombre (#b6490c) sur marine ≈ 2,8:1. Teinte plus claire, même famille, réservée au texte sur fond navy. */

.hc-hero2 .hc-num-eyebrow,
.hc-corp-section--navy .hc-num-eyebrow,
.hc-corp-section--navy .hc-eyebrow,
.hc-stats-section .hc-eyebrow {
    color: #b8ecf7;
}
.hc-num-eyebrow::after { content: ""; width: 46px; height: 1px; background: var(--hc-line); }
 .hc-hero2 .hc-num-eyebrow::after { background: rgba(255,255,255,.25); }

/* ---------- Section asymetrique (eyebrow num + grand titre + colonne
   etroite + visuel qui deborde) - grille 12 col, placement par instance ---------- */

/* Petit bloc flottant sur une image (chiffre/mot cle) */

/* ---------- Story sticky (visuel/titre fixe + blocs qui defilent) ---------- */

/* ---------- Liste editoriale numerotee (remplace les cards) ---------- */
.hc-editorial-list { display: flex; flex-direction: column; }
.hc-editorial-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 28px; padding: 32px 0; border-top: 1px solid var(--hc-line); align-items: baseline; }
.hc-editorial-row:last-child { border-bottom: 1px solid var(--hc-line); }
.hc-editorial-row .hc-editorial-num { font-family: var(--pg-font-display); font-size: 1.6rem; font-weight: 700; color: var(--hc-line); transition: color .3s ease; }
.hc-editorial-row:hover .hc-editorial-num { color: var(--hc-signal-600); }
.hc-editorial-row h3 { font-size: 1.2rem; margin-bottom: 6px; }
.hc-editorial-row p { margin: 0; color: var(--hc-ink-soft); max-width: 62ch; }
.hc-editorial-row a { color: var(--hc-azure-500); font-weight: 600; text-decoration: none; }
.hc-editorial-row a:hover { text-decoration: underline; }

/* ---------- "Pour aller plus loin" / colonnes vides : illustration contextuelle
   (revision 2026-09-18, 2e passe apres retour "rapport d'echelle casse, points
   orphelins, ca ressemble a une vignette de bibliotheque d'icones") - carte
   pleine (fond navy, meme poids visuel que .hc-orbit-center/.hc-bridge-node--
   core/.hc-defense-layer--4 deja utilises sur le site), icone en trait blanc
   large, badge signal ancre au coin (plus de point orphelin flottant), libelle
   integre dans le SVG. Occupe une part bien plus large de la colonne - ne
   redevient plus "un petit truc perdu dans le vide". Masque sous 900px : pas
   de place, la liste redevient pleine largeur - purement decoratif (role="img"
   + aria-label porte le sens, svg interne aria-hidden). ---------- */
.hc-editorial-split { display: block; }
.hc-editorial-motif { display: none; }
@media (min-width: 900px) {
    .hc-editorial-split { display: flex; align-items: flex-start; gap: 48px; }
    .hc-editorial-split .hc-editorial-list { flex: 1 1 640px; }
    .hc-editorial-motif { display: block; flex: 1 1 auto; max-width: 340px; }
}
.hc-context-illustration svg { width: 100%; max-width: 340px; height: auto; display: block; filter: drop-shadow(var(--hc-shadow-md)); }
/* Animation d'entree (2026-09-18, "on peut le rendre anime ?") - meme principe
   que le reste du site : se joue UNE fois quand la carte entre dans l'ecran
   (.hc-in-view, deja pose par initReveal() sur l'ancestor .hc-reveal partage -
   aucun nouveau JS), puis reste calme. Icone : se trace au trait (meme
   technique que .hc-orbit-link/.hc-bridge-arrow). Badge : petit pulse "signal"
   continu mais tres discret, comme celui du CTA final. */
.hc-ctx-icon-group { opacity: 0; transform: scale(.82); transform-origin: center; transform-box: fill-box; }
.hc-ctx-icon-line { stroke-dasharray: 100; stroke-dashoffset: 100; }
.hc-ctx-badge-dot { opacity: 0; transform-origin: center; transform-box: fill-box; }
.hc-ctx-label { opacity: 0; transform: translateY(4px); }
.hc-reveal.hc-in-view .hc-ctx-icon-group { animation: hc-ctx-pop .5s cubic-bezier(.2,.9,.3,1.3) .15s forwards; }
.hc-reveal.hc-in-view .hc-ctx-icon-line { animation: hc-ctx-draw .8s ease-out .3s forwards; }
.hc-reveal.hc-in-view .hc-ctx-badge-dot { animation: hc-ctx-badge-in .3s ease-out .75s forwards, hc-ctx-pulse 2.6s ease-in-out 1.1s infinite; }
.hc-reveal.hc-in-view .hc-ctx-label { animation: hc-ctx-label-in .4s ease-out .55s forwards; }
@keyframes hc-ctx-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes hc-ctx-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes hc-ctx-badge-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes hc-ctx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes hc-ctx-label-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .hc-ctx-icon-group { opacity: 1; transform: none; animation: none !important; }
    .hc-ctx-icon-line { stroke-dashoffset: 0; animation: none !important; }
    .hc-ctx-badge-dot { opacity: 1; transform: none; animation: none !important; }
    .hc-ctx-label { opacity: 1; transform: none; animation: none !important; }
}

/* Ligne numerotee PLEINE LARGEUR (ex. "Pourquoi Progedys" repartie sur
   tout le container, pas une colonne gauche+droite) */

/* ---------- Section de confiance editoriale ---------- */

/* ---------- Visuel immersif pleine largeur (grande image + leger
   gradient + label) ---------- */

/* ---------- Grande typographie (phrase forte reelle) ---------- */

/* ---------- Collage photographique (photos client reelles, tailles
   variees - pas une galerie empilee dans une colonne etroite) ---------- */

/* ---------- Liste editoriale numerotee sur 2 colonnes (remplace les
   petites cards perdues dans une grande zone vide) ---------- */

/* ---------- Illustrations SVG (motifs abstraits par metier, statiques -
   toujours visibles, pas de dependance canvas/JS) ---------- */

/* ---------- Chips discretes (zone d'intervention) ---------- */
.hc-chip-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hc-chip-outline { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--hc-line); color: var(--hc-ink-soft); font-size: .85rem; }

/* ---------- Reveal image (clip-path) + ligne qui se dessine ---------- */
:is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-clip-reveal { clip-path: inset(0 0 100% 0); transition: clip-path .9s cubic-bezier(.16,.84,.44,1); transition-delay: var(--hc-reveal-delay, 0ms); }
:is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-clip-reveal.hc-in-view { clip-path: inset(0 0 0% 0); }
@media (prefers-reduced-motion: reduce) {
    :is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-clip-reveal { clip-path: none; transition: none; }
}

/* Tablettes : pas de chevauchement texte/visuel par marges negatives ou colonnes partagees */
@media (min-width: 981px) and (max-width: 1180px) {
    
    .hc-corp .hc-hero2-grid.hc-grid12 > .hc-reveal.hc-z2 { grid-column: 1 / -1 !important; }
}
@media (max-width: 980px) {
    /* Sur mobile, la grille editoriale 12 colonnes redevient un simple
       empilement vertical : chaque enfant reprend toute la largeur et
       son ordre naturel (texte avant visuel), tous les decalages/
       chevauchements desktop sont neutralises. */
    .hc-grid12 { grid-template-columns: 1fr; gap: 32px; }
    .hc-grid12 > * { grid-column: 1 / -1 !important; grid-row: auto !important; order: initial !important; }
    .hc-editorial-row { grid-template-columns: 50px minmax(0, 1fr); gap: 16px; }
}

/* ---------- Debordement jusqu'au bord du viewport (1-2 fois par page
   seulement, pas systematique) ---------- */

/* =====================================================================
   SYSTEME "CORPORATE COMPACT" (2026-09) — remplace la direction
   editoriale/magazine precedente pour toutes les pages internes du
   navbar (jamais utilise sur l'accueil : scope .hc-page.hc-corp
   uniquement). Echelle typographique sobre, sections denses, cards
   nettes. Reutilise les tokens et utilitaires deja partages
   (--hc-*, .hc-btn, .hc-eyebrow, .hc-num-eyebrow, .hc-lede, .hc-sc)
   plutot que d'en recreer.
   ===================================================================== */
.hc-corp { --hcw: 1280px; }
.hc-corp .hc-sc { max-width: var(--hcw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

.hc-corp h1 { font-size: var(--text-h1); line-height: 1.15; font-weight: 700; margin: 0 0 14px; overflow-wrap: break-word; }
.hc-corp h2 { font-size: var(--text-h2); line-height: 1.2; font-weight: 700; margin: 0; }
.hc-corp h3 { font-size: var(--text-h3); line-height: 1.3; font-weight: 600; }
.hc-corp p { font-size: .98rem; line-height: 1.65; }
.hc-corp .hc-lede { font-size: 1.05rem; max-width: 620px; margin: 0 0 24px; }
/* Lead plus marque (20-24px) pour les phrases d'ouverture de section sur
   les pages institutionnelles (A propos...) - au-dessus du corps de
   texte standard, en dessous d'un vrai titre. */
.hc-corp-lead { font-family: var(--pg-font-display); font-weight: 500; font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.5; color: var(--hc-ink); max-width: 620px; margin: 0 0 20px; }
.hc-corp-section--navy .hc-corp-lead { color: #fff; }
/* Intro smart_page : eyebrow + lead + corps — neutralise le bruit WP. */
.hc-corp-lead-stack { max-width: 44rem; }
.hc-corp-lead-stack > .hc-eyebrow { margin: 0 0 14px; }
.hc-corp-lead-stack > p { margin: 0 0 1.05rem; font-size: 1.02rem; line-height: 1.7; color: var(--hc-ink-soft); }
.hc-corp-lead-stack > .hc-eyebrow + p {
    font-family: var(--pg-font-display);
    font-weight: 500;
    font-size: clamp(1.18rem, 1.7vw, 1.45rem);
    line-height: 1.4;
    color: var(--hc-ink);
    margin-bottom: 1.15rem;
    max-width: 38rem;
}
.hc-corp-lead-stack > p:last-child { margin-bottom: 0; }
.hc-corp-lead-stack .has-text-color,
.hc-corp-lead-stack .has-inline-color,
.hc-corp-lead-stack [style*="color"] { color: inherit !important; }
@media (min-width: 901px) {
    .hc-corp-sticky-label { position: sticky; top: 100px; align-self: start; }
}
/* Prestations / colonnes CMS → cartes pleine largeur (titre ≠ description ≠ lien). */
.hc-corp-offer-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: end;
    margin-bottom: clamp(28px, 4vw, 40px);
}
@media (min-width: 901px) {
    .hc-corp-offer-head {
        grid-template-columns: minmax(0, 1.15fr) minmax(240px, .75fr);
        gap: clamp(28px, 4vw, 48px);
    }
}
.hc-corp-offer-head__copy h2 { margin: 0; max-width: 18ch; }
.hc-corp-offer-head__copy .hc-eyebrow { margin-bottom: 10px; }
.hc-corp-offer-head__photo {
    margin: 0;
    border-radius: var(--hc-radius-md, 16px);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--hc-navy-900);
    box-shadow: var(--hc-shadow-md);
}
.hc-corp-offer-head__photo--motif {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: none;
    aspect-ratio: auto;
}
.hc-corp-offer-head__photo img,
.hc-corp-offer-head__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hc-corp-offer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 701px) {
    .hc-corp-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
.hc-corp-offer-card {
    background: var(--hc-card, #fff);
    border: 1px solid var(--hc-line);
    border-radius: var(--hc-radius-md, 16px);
    padding: 26px 24px 24px;
    box-shadow: var(--hc-shadow-md);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
}
.hc-corp-offer-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--hc-shadow-lg);
}
.hc-corp-offer-card__num {
    font-family: var(--pg-font-display);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .06em;
    color: var(--hc-signal-600, #0aa2c0);
    margin-bottom: 12px;
}
.hc-corp-offer-card__title {
    font-family: var(--pg-font-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    line-height: 1.25;
    margin: 0 0 12px;
    color: var(--hc-ink);
}
.hc-corp-offer-card__body {
    flex: 1 1 auto;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--hc-ink-soft);
}
.hc-corp-offer-card__body p {
    margin: 0 0 .75rem;
    color: var(--hc-ink-soft);
    font-size: inherit;
    max-width: none;
}
.hc-corp-offer-card__body p:last-child { margin-bottom: 0; }
.hc-corp-offer-card__body .has-text-color,
.hc-corp-offer-card__body .has-inline-color,
.hc-corp-offer-card__body [style*="color"],
.hc-corp-offer-card__body [style*="font-size"] {
    color: inherit !important;
    font-size: inherit !important;
}
.hc-corp-offer-card__body a {
    font-family: var(--pg-font-display);
    font-weight: 600;
    font-size: .92rem;
    color: var(--hc-signal-600, #0aa2c0) !important;
    text-decoration: none;
    white-space: nowrap;
}
.hc-corp-offer-card__body a:hover { text-decoration: underline; }
.hc-corp-offer-card__body a::before {
    content: "";
    display: block;
    height: 12px;
}
.hc-corp .hc-eyebrow, .hc-corp .hc-num-eyebrow { font-size: .74rem; }

/* ---------- Hero compact (~420-500px, jamais un ecran entier) ---------- */
.hc-corp-hero { position: relative; background: var(--hc-navy-900); color: #fff; overflow: hidden; padding: clamp(36px, 6vh, 52px) 0; }
.hc-corp-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 420px at 85% -10%, rgba(46,107,242,.28), transparent 60%); pointer-events: none; }
.hc-corp-hero h1 { color: #fff; }
.hc-corp-hero .hc-lede { color: #c9d3e8; }
.hc-corp-hero .hc-num-eyebrow::after { background: rgba(255,255,255,.25); }

/* Variante hero avec photo reelle en fond (au lieu d'un visuel a droite) -
   reste compacte, jamais un ecran entier. */
.hc-corp-hero-bg { position: absolute; inset: 0; background: var(--hc-navy-900); }
.hc-corp-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Lisibilite du texte (audit 2026-09-10, ecart trouve sur /a-propos-de/ : le H1/lede
   passaient sous le seuil de contraste WCAG AA malgre ce degrade) - stops renforces
   (.95/.88/.6 au lieu de .92/.72/.4) pour que la zone sous le texte (max-width 520-640px,
   soit environ la moitie gauche du hero) reste tres sombre quelle que soit la photo
   source, tout en laissant la photo lisible sur le tiers droit. */
.hc-corp-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7,26,58,.95) 0%, rgba(7,26,58,.88) 40%, rgba(7,26,58,.6) 75%, rgba(7,26,58,.42) 100%); }

/* Hero .hc-hero2 avec photo plein fond — même rendu sur toutes les pages (pas de vignette carrée). */
.hc-corp .hc-hero2.hc-hero2--photo {
    padding: clamp(40px, 6vh, 64px) 0 clamp(48px, 7vh, 72px);
    min-height: clamp(300px, 42vh, 520px);
    max-height: none;
}
.hc-corp .hc-hero2.hc-hero2--photo .hc-hero2-grid {
    min-height: clamp(220px, 32vh, 420px) !important;
}
.hc-corp .hc-hero2.hc-hero2--photo .hc-corp-hero-bg {
    z-index: 0;
}
.hc-corp .hc-hero2.hc-hero2--photo .hc-corp-hero-bg img {
    object-fit: cover;
    object-position: 58% 42%;
    transform: none;
}
/* Photo serveurs / hébergement : zone texte (gauche) plus assombrie que le dégradé générique. */
.hc-corp .hc-hero2.hc-hero2--photo .hc-corp-hero-bg::after {
    background: linear-gradient(
        108deg,
        rgba(7, 26, 58, .98) 0%,
        rgba(7, 26, 58, .96) 28%,
        rgba(7, 26, 58, .9) 48%,
        rgba(7, 26, 58, .72) 68%,
        rgba(7, 26, 58, .45) 88%,
        rgba(7, 26, 58, .32) 100%
    );
}
.hc-corp .hc-hero2.hc-hero2--photo::before {
    opacity: .25;
}
.hc-corp .hc-hero2.hc-hero2--photo h1,
.hc-corp .hc-hero2.hc-hero2--photo .hc-lede,
.hc-corp .hc-hero2.hc-hero2--photo .hc-num-eyebrow {
    text-shadow: 0 1px 2px rgba(7, 26, 58, .9), 0 8px 32px rgba(7, 26, 58, .55);
}
.hc-corp .hc-hero2 .hc-lede,
.hc-corp .hc-hero2 .hc-lede p {
    font-size: 1.05rem !important;
    line-height: 1.55;
    color: #c9d3e8 !important;
    text-align: left !important;
    max-width: 42ch;
}
.hc-corp .hc-hero2 .hc-lede p {
    margin: 0;
}

/* ---------- Header de section compact (eyebrow + h2 + intro courte) --- */
.hc-corp-header { max-width: 720px; margin-bottom: clamp(24px, 4vh, 36px); }
.hc-corp-header.hc-corp-center { margin-left: auto; margin-right: auto; text-align: center; }
.hc-corp-header .hc-corp-intro { margin: 10px 0 0; color: var(--hc-ink-soft); font-size: .96rem; max-width: 60ch; }
.hc-corp-header.hc-corp-center .hc-corp-intro { margin-left: auto; margin-right: auto; }

/* ---------- Sections / rythme de fond (blanc / bleu tres pale / navy) ---------- */
.hc-corp-section { padding: clamp(44px, 7vh, 68px) 0; }
/* Meme teinte off-white/gris-bleu que .hc-flow-alt sur la homepage
   (--hc-paper-alt, deja validee) plutot que l'azure pastel "SaaS"
   generique - alternance plus sobre, coherente avec la charte reelle. */
.hc-corp-section--alt { background: var(--hc-paper-alt); }
.hc-corp-section--navy { background: var(--hc-navy-900); color: #fff; }

.hc-corp-section--navy h2, .hc-corp-section--navy h3 { color: #fff; }
.hc-corp-section--navy p { color: #c9d3e8; }
.hc-corp-section--navy .hc-num-eyebrow::after { background: rgba(255,255,255,.25); }

/* Cyber P2 (2026-09-16) : decoupage editorial du bandeau "Ransomware & continuite"
   (voir conseils/cyber_securite.html.twig) - citation reelle du texte source mise
   en exergue, gros corps, bordure fine signal pour la distinguer des paragraphes
   de lecture courants places a cote. */

/* ---------- Grilles de cards ---------- */
.hc-corp-grid { display: grid; gap: 20px; }
.hc-corp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.hc-corp-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .hc-corp-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .hc-corp-grid-2, .hc-corp-grid-3 { grid-template-columns: 1fr; } }

/* Secteurs (Lot 3, À propos) : ligne icone + texte, volontairement pas une card
   (pas de fond/bordure/ombre) pour se distinguer de la liste editoriale numerotee
   du bloc "Un service complet" juste au-dessus. */

.hc-corp-card { background: var(--hc-card); border: 1px solid var(--hc-line); border-radius: var(--hc-radius-md); padding: 26px 24px; box-shadow: var(--hc-shadow-md); transition: transform .2s ease, box-shadow .2s ease; }
.hc-corp-card:hover { transform: translateY(-3px); box-shadow: var(--hc-shadow-lg); }
.hc-corp-card-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--hc-azure-100); color: var(--hc-azure-500); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-family: var(--pg-font-display); font-weight: 700; }
.hc-corp-section--navy .hc-corp-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.hc-corp-section--navy .hc-corp-card-icon { background: rgba(255,255,255,.1); color: #fff; }
.hc-corp-card h3 { margin: 0 0 8px; }
.hc-corp-card p { margin: 0; color: var(--hc-ink-soft); font-size: .92rem; }
.hc-corp-section--navy .hc-corp-card p { color: #c9d3e8; }

/* ---------- Split texte / visuel compact (remplace hc-asym) - ratio
   legerement asymetrique par defaut (jamais un 50/50 mecanique), avec
   des variantes explicites pour varier reellement le rythme d'une page
   a l'autre (grille 12 colonnes : 5/7, 7/5, 4/8, 8/4). ---------- */
.hc-corp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 56px); align-items: center; }
.hc-corp-split.hc-corp-split--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.hc-corp-split.hc-corp-split--reverse .hc-corp-split-media { order: -1; }
.hc-corp-split.hc-corp-split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hc-corp-split.hc-corp-split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hc-corp-split.hc-corp-split--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.hc-corp-split-media {
    position: relative;
    border-radius: var(--hc-radius-md);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    max-width: min(100%, 440px);
    max-height: 280px;
    margin-inline: auto;
    box-shadow: var(--hc-shadow-md);
    background: var(--hc-paper-alt);
}
.hc-corp-split-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 6px;
    box-sizing: border-box;
}
/* L'image peut legerement deborder de sa colonne plutot que de rester
   un rectangle parfaitement pose - debordement sobre, jamais plein-bleed. */
@media (max-width: 900px) {
    .hc-corp-split,
    .hc-corp-split.hc-corp-split--reverse,
    .hc-corp-split.hc-corp-split--5-7,
    .hc-corp-split.hc-corp-split--7-5,
    .hc-corp-split.hc-corp-split--4-8 { grid-template-columns: minmax(0, 1fr); }
    .hc-corp-split.hc-corp-split--reverse .hc-corp-split-media { order: 0; }
}

/* Partenaires téléphonie : 2 rangées texte | média, même format, bien séparées. */
.hc-partner-stack .hc-partner-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(28px, 4vw, 48px);
    align-items: center;
    padding: clamp(28px, 4vh, 40px) 0;
}
.hc-partner-stack .hc-partner-row + .hc-partner-row {
    border-top: 1px solid var(--hc-line-soft, #e2e8f0);
}
.hc-partner-stack .hc-partner-row--reverse .hc-partner-row__copy {
    order: 2;
}
.hc-partner-stack .hc-partner-row--reverse .hc-partner-row__media {
    order: 1;
}
.hc-partner-stack .hc-partner-row__copy .hc-corp-header {
    margin-bottom: 0;
    max-width: 42ch;
}
.hc-partner-stack .hc-partner-row__media .hc-corp-split-media {
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-inline: 0;
}
.hc-partner-stack .hc-partner-row__media .hc-corp-split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
}
.hc-partner-stack .hc-partner-row__media--badge .hc-corp-split-media {
    background: #fff;
}
.hc-partner-stack .hc-partner-row__media--badge .hc-corp-split-media img {
    object-fit: contain;
    padding: clamp(20px, 4vw, 36px);
    background: #fff;
}
@media (max-width: 900px) {
    .hc-partner-stack .hc-partner-row,
    .hc-partner-stack .hc-partner-row--reverse {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .hc-partner-stack .hc-partner-row--reverse .hc-partner-row__copy,
    .hc-partner-stack .hc-partner-row--reverse .hc-partner-row__media {
        order: unset;
    }
}

/* Vision téléphonie : mêmes cadres média, images distinctes. */
.hc-evo-row .hc-corp-split-media {
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
    aspect-ratio: 16 / 10;
    margin-inline: 0;
}
.hc-evo-row .hc-corp-split-media img {
    object-fit: cover;
    padding: 0;
}

/* Accordéons vision (listes repliables)
   Spécificité .hc-page : Bootstrap impose summary{display:list-item} et ol,ul{padding-left:2rem}. */
.hc-page .hc-vision-acc {
    margin-top: 12px;
    border: 1px solid var(--hc-line, #e2e8f0);
    border-radius: var(--hc-radius-sm, 8px);
    background: var(--hc-card, #fff);
    overflow: hidden;
}
.hc-page .hc-vision-acc + .hc-vision-acc {
    margin-top: 10px;
}
.hc-page .hc-vision-acc > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--hc-ink, #0f172a);
    user-select: none;
}
.hc-page .hc-vision-acc > summary::-webkit-details-marker,
.hc-page .hc-vision-acc > summary::marker {
    display: none;
    content: "";
}
.hc-page .hc-vision-acc > summary::after {
    content: "+";
    flex: none;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--hc-signal-600, #0aa9e8);
}
.hc-page .hc-vision-acc[open] > summary::after {
    content: "−";
}
.hc-page .hc-vision-acc > summary:focus-visible {
    outline: 2px solid var(--hc-signal-600, #0aa9e8);
    outline-offset: 2px;
}
.hc-page .hc-vision-acc__body {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--hc-line-soft, #eef2f6);
}
.hc-page .hc-vision-acc__body .hc-evo-steps,
.hc-page .hc-vision-acc__body .hc-evo-tags,
.hc-page .hc-vision-acc__body .hc-evo-list,
.hc-page .hc-vision-acc__body .hc-usage-grid {
    margin-top: 6px;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}
/* Étapes dans l’accordéon : colonne unique, lignes séparées */
.hc-page .hc-vision-acc__body .hc-evo-steps {
    grid-template-columns: 1fr;
    gap: 0;
}
.hc-page .hc-vision-acc__body .hc-evo-steps li {
    padding: 10px 0;
    border-bottom: 1px solid var(--hc-line-soft, #eef2f6);
    align-items: flex-start;
}
.hc-page .hc-vision-acc__body .hc-evo-steps li:last-child {
    border-bottom: none;
    padding-bottom: 2px;
}
.hc-page .hc-vision-acc__body .hc-evo-list {
    gap: 0;
}
.hc-page .hc-vision-acc__body .hc-evo-list li {
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 26px;
    border-bottom: 1px solid var(--hc-line-soft, #eef2f6);
}
.hc-page .hc-vision-acc__body .hc-evo-list li:last-child {
    border-bottom: none;
    padding-bottom: 2px;
}
.hc-page .hc-vision-acc__body .hc-evo-list li::before {
    top: 11px;
}
.hc-page .hc-vision-acc__body .hc-evo-tags {
    gap: 6px;
}
.hc-page .hc-vision-acc__body .hc-usage-grid {
    gap: 8px;
}
.hc-page .hc-vision-acc__body--warn .hc-evo-list li::before {
    background-color: #fdecea;
}
.hc-evo-list--warn li::before {
    background: #fdecea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23c0392b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 5l10 10M15 5L5 15'/%3E%3C/svg%3E") center/10px no-repeat !important;
}

/* ---------- Etapes / methode, liste numerotee compacte ---------- */

/* ---------- Bandeau chiffres compact ---------- */

/* ---------- Liste "avantages" compacte (check + texte, sans card) ---------- */
.hc-corp-check-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 28px; }
.hc-corp-check-list--2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) {
    .hc-corp-check-list--2col { grid-template-columns: 1fr; }
}
.hc-corp-check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; color: var(--hc-ink-soft); }
.hc-corp-check-list svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--hc-success-500); }
.hc-corp-section--navy .hc-corp-check-list li { color: #c9d3e8; }
/* ProDesign e-Boutique (offres web) — cartes premium + reveal échelonné */
.hc-eboutique-buckets { position: relative; overflow: hidden; }
.hc-eboutique-grid { margin-top: clamp(28px, 4vh, 40px); }
.hc-eboutique-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: var(--hc-radius-lg);
    background: var(--hc-card);
    border: 1px solid var(--hc-line);
    box-shadow: var(--hc-shadow-md);
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2, .9, .3, 1), box-shadow .35s ease, border-color .35s ease;
}
.hc-eboutique-card:hover {
    transform: translateY(-5px);
    border-color: rgba(46, 107, 242, .22);
    box-shadow: var(--hc-shadow-lg);
}
.hc-eboutique-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: clamp(16px, 2vw, 20px) clamp(18px, 2.2vw, 22px);
    background: var(--pg-navy-900);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.hc-eboutique-card__icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, .18);
    transition: transform .4s cubic-bezier(.2, .9, .3, 1.2), border-color .35s ease, background .35s ease;
}
.hc-eboutique-card__icon svg { width: 22px; height: 22px; }
.hc-eboutique-card:hover .hc-eboutique-card__icon {
    transform: scale(1.05);
    border-color: rgba(94, 196, 220, .55);
    background: rgba(255, 255, 255, .14);
}
.hc-eboutique-card.hc-in-view .hc-eboutique-card__icon { animation: hc-eboutique-icon-in .55s cubic-bezier(.2, .9, .3, 1.25) both; animation-delay: var(--hc-reveal-delay, 0ms); }
.hc-eboutique-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.35; color: #fff; }
.hc-eboutique-card__body {
    flex: 1;
    padding: clamp(16px, 2vw, 20px) clamp(18px, 2.2vw, 22px) clamp(20px, 2.4vw, 24px);
}
.hc-eboutique-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hc-eboutique-check { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; line-height: 1.45; color: var(--hc-ink-soft); }
.hc-eboutique-check__mark {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 160, 107, .12);
    color: var(--hc-success-500);
}
.hc-eboutique-check__mark svg { width: 13px; height: 13px; }
:is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-eboutique-card[data-reveal]:not(.hc-in-view) .hc-eboutique-check { opacity: 0; transform: translate3d(-10px, 0, 0); }
:is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-eboutique-card.hc-in-view .hc-eboutique-check {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity .45s ease, transform .45s cubic-bezier(.2, .9, .3, 1);
    transition-delay: calc(var(--hc-reveal-delay, 0ms) + 140ms + var(--item-i, 0) * 55ms);
}
@keyframes hc-eboutique-icon-in {
    from { opacity: 0; transform: scale(.75) rotate(-8deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hc-eboutique-card:hover { transform: none; }
    .hc-eboutique-card.hc-in-view .hc-eboutique-card__icon { animation: none; }
    :is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-eboutique-card[data-reveal]:not(.hc-in-view) .hc-eboutique-check { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
    .hc-corp-hero h1 { font-size: 1.7rem; }
    .hc-corp h2 { font-size: 1.35rem; }
}

/* =====================================================================
   EXTENSIONS "COMPOSITIONS RICHES" (2026-09) — reutilise volontairement
   les mecaniques deja construites pendant la phase editoriale (grille 12
   colonnes, offsets, bleed, chip flottant, sticky story, bandeau immersif,
   canvas topic anime de la homepage) mais recalees sur l'echelle compacte
   .hc-corp : chaque page peut ainsi composer une mise en page differente
   (Z, split invers, sticky, diagramme...) sans que ca redevienne un hero
   de 900px ou un vide de 200px. Zero nouveau vocabulaire visuel invente -
   memes tokens, meme canvas, meme motion que le reste du site.
   ===================================================================== */
.hc-corp .hc-hero2 { padding: clamp(40px, 6vh, 64px) 0 clamp(48px, 7vh, 72px); }
.hc-corp .hc-hero2-grid { min-height: 0; align-items: center; }
/* Illustration SVG hero : hauteur pilotée par le ratio, SVG contenu (pas rogné) */
/* Visuels photo dans le hero (ex. messagerie) : cadre plus bas, image entière visible. */
/* Typographie (audit 2026-09-10, retour explicite "pas de H1/H2 de 70px pour
   sembler moderne") : .hc-hero2 h1 sans cette regle grimpe a 4.2rem (~67px)
   sur les grands ecrans - correct pour la homepage (un seul hero, un message
   fort) mais disproportionne sur les ~90 pages pillar/local-seo/CMS qui
   partagent ce meme hero via smart_page.html.twig, avec un H1 souvent plus
   long ("Infogérance informatique entreprise Bordeaux"). Plafond ramene a
   une taille confortable, coherente avec .hc-page-hero h1 (clamp 2/3.6vw/2.8)
   utilise sur les pages CMS bespoke deja jugees justes (Maintenance, Audit). */
.hc-corp .hc-hero2 h1 { line-height: 1.15; }
.hc-corp .hc-hero2 .hc-lede { font-size: 1.05rem; }

/* Canvas topic anime (meme moteur que la homepage - TOPIC_SCENES) utilise
   comme visuel de section a la place d'une photo, quand le sujet est
   une architecture/un flux technique plutot qu'une scene reelle. */

/* Timeline (etapes reliees par une ligne, plus riche qu'une simple
   grille de cards numerotees). Lot 3 (À propos) : la ligne se dessine
   progressivement au scroll (scaleY) plutot que d'etre presente a pleine
   hauteur des le chargement - reutilise exactement le mecanisme .hc-reveal
   deja en place (le conteneur doit porter hc-reveal + data-reveal), aucune
   nouvelle logique JS. Respecte prefers-reduced-motion par heritage (la
   classe .hc-in-view est posee immediatement si reduceMotion, voir
   homepage-classic.js). */
.hc-corp-timeline { position: relative; display: grid; gap: 36px; counter-reset: hc-tl; }
.hc-corp-timeline::before { content: ""; position: absolute; left: 19px; top: 6px; bottom: 6px; width: 1px; background: var(--hc-line); transform: scaleY(0); transform-origin: top; transition: transform 1.1s ease; }
.hc-corp-timeline.hc-in-view::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .hc-corp-timeline::before { transition: none; transform: scaleY(1); } }
.hc-corp-section--navy .hc-corp-timeline::before { background: rgba(255,255,255,.18); }
.hc-corp-timeline-item { position: relative; padding-left: 56px; }
.hc-corp-timeline-item::before { counter-increment: hc-tl; content: counter(hc-tl, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--hc-card); border: 1.5px solid var(--hc-line); color: var(--hc-signal-600); font-family: var(--pg-font-display); font-weight: 700; font-size: .82rem; display: flex; align-items: center; justify-content: center; z-index: 2; }
.hc-corp-section--navy .hc-corp-timeline-item::before { background: var(--hc-navy-800); border-color: rgba(255,255,255,.2); }
.hc-corp-timeline-item h3 { margin: 0 0 6px; }
.hc-corp-timeline-item p { margin: 0; color: var(--hc-ink-soft); font-size: .94rem; }
.hc-corp-section--navy .hc-corp-timeline-item p { color: #c9d3e8; }

/* Bandeau horizontal plein largeur (chiffres ou mini-features en ligne,
   fond distinct pour casser le rythme blanc/gris-bleu). */
.hc-corp-band { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center; justify-content: space-between; }
.hc-corp-band-item { display: flex; align-items: center; gap: 14px; }
.hc-corp-band-item svg { flex: none; width: 30px; height: 30px; color: var(--hc-signal-600); }
.hc-corp-band-item strong { display: block; font-family: var(--pg-font-display); font-size: 1rem; }
.hc-corp-band-item span { font-size: .84rem; color: var(--hc-ink-mute); }
.hc-corp-section--navy .hc-corp-band-item span { color: #a9b6cf; }

/* ---- Diagramme d'identite (Lot 3, À propos) : PROGEDYS/le SI client au centre, les domaines
   reels d'intervention autour - PAS un canvas reseau generique (deja utilise sur les pages
   metiers), construit en CSS/grid + un anneau decoratif, texte HTML reel (accessible, pas
   d'info enfermee dans du SVG). 6 des 8 positions d'une grille 3x3 "boussole" sont occupees
   (les 2 coins restants vides evitent de forcer un 7e/8e domaine invente). ---- */
.hc-orbit { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, 1fr); gap: 14px; max-width: 560px; margin: 0 auto; aspect-ratio: 1; }
.hc-orbit::before { content: ""; position: absolute; inset: 16%; border: 1.5px dashed var(--hc-line); border-radius: 50%; z-index: 0; }
.hc-orbit-center { grid-column: 2; grid-row: 2; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--hc-navy-900); color: #fff; border-radius: 50%; padding: 12px; box-shadow: var(--hc-shadow-lg); }
.hc-orbit-center strong { font-family: var(--pg-font-display); font-size: .92rem; line-height: 1.25; }
.hc-orbit-center span { font-size: .72rem; color: #a9b6cf; margin-top: 4px; display: block; }
.hc-orbit-node { z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; justify-content: center; }
.hc-orbit-node span[aria-hidden] { font-size: 1.3rem; }
.hc-orbit-node strong { font-family: var(--pg-font-display); font-size: .82rem; }
.hc-orbit-node p { margin: 0; font-size: .74rem; color: var(--hc-ink-mute); line-height: 1.3; }
.hc-orbit-node--1 { grid-column: 1; grid-row: 1; }
.hc-orbit-node--2 { grid-column: 2; grid-row: 1; }
.hc-orbit-node--3 { grid-column: 3; grid-row: 1; }
.hc-orbit-node--4 { grid-column: 1; grid-row: 3; }
.hc-orbit-node--5 { grid-column: 2; grid-row: 3; }
.hc-orbit-node--6 { grid-column: 3; grid-row: 3; }

/* Lot "motion P2" (2026-09-16) : "Votre SI surveille et prend en charge" -
   activation sequentielle des 4 connecteurs reels (centre -> domaine), puis
   respiration tres legere du centre en etat stable. Une seule fois par
   chargement (.hc-in-view deja pose une seule fois par l'observer partage,
   voir initReveal() dans homepage-classic.js - jamais de re-declenchement au
   re-scroll). Etat final = diagramme calme et lisible, pas un radar. */
.hc-orbit-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.hc-orbit-link {
    stroke: var(--hc-ink-mute);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
}
/* À propos — canvas hub SI (topic apropos) + légende accessible */
/* Liste des expertises (colonne gauche) — apparition décalée au scroll */
/* QA finale motion (2026-09-16) : la respiration du centre (scale 1<->1.012)
   a ete mesuree reellement - sur un cercle d'environ 177px de diametre, 1,2%
   represente ~2px de variation, en dessous du seuil de perception (confirme
   par mesure directe getBoundingClientRect avant suppression). Retiree :
   aucune animation plutot qu'un mouvement permanent non percu. */
@media (prefers-reduced-motion: reduce) {
    .hc-orbit-link { stroke: var(--hc-ink-mute); stroke-dashoffset: 0; animation: none !important; }
    .hc-orbit-node, .hc-orbit-center, .hc-orbit::before { animation: none !important; filter: none; transform: none; opacity: 1; }
}
@media (max-width: 640px) {
    /* Les connecteurs sont calcules pour la grille 3x3 desktop - sans objet
       une fois la composition mobile en pile verticale (voir .hc-orbit plus
       haut). Le cercle pointille est deja masque au meme seuil. */
    .hc-orbit-links { display: none; }
}
@media (max-width: 640px) {
    /* Un cercle illisible en dessous de 640px - liste verticale simple, information identique. */
    .hc-orbit { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; aspect-ratio: auto; gap: 16px; max-width: 420px; }
    .hc-orbit::before { display: none; }
    .hc-orbit-center { grid-column: 1; grid-row: auto; border-radius: var(--hc-radius-md); padding: 20px; order: -1; }
    .hc-orbit-node { flex-direction: row; text-align: left; gap: 12px; }
    .hc-orbit-node--1, .hc-orbit-node--2, .hc-orbit-node--3, .hc-orbit-node--4, .hc-orbit-node--5, .hc-orbit-node--6 { grid-column: 1; grid-row: auto; }
}

/* ---- Duo fondateurs (Lot 3, À propos) : remplace le chip plat "Nom & Nom" par un vrai
   binome nom+role - aucune photo (aucune n'existe), texte uniquement. ---- */

/* Neutralise les couleurs inline du CMS (ex. spans #121212) quand un
   fragment reel doit s'afficher en blanc sur un fond navy. */
.hc-statement-force-white, .hc-statement-force-white * { color: #fff !important; }

/* Badge numerote autonome (meme langage visuel que .hc-corp-timeline-item,
   mais utilisable hors timeline - ex. rangees alternees texte/image ou
   chaque etape a besoin de garder son numero "organise" malgre la rupture
   de la colonne unique). */
.hc-step-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--hc-card); border: 1.5px solid var(--hc-line); color: var(--hc-signal-600); font-family: var(--pg-font-display); font-weight: 700; font-size: .82rem; margin-bottom: 16px; }
.hc-corp-section--alt .hc-step-badge { background: var(--hc-paper); }

/* Carte "pour aller plus loin" - meme langage que .hc-corp-card, mais le
   titre est le vrai lien reel extrait du CMS (article_list_items renvoie
   deja un <a href> resolu) plutot qu'un texte invente. */
.hc-corp-card-link-title { font-family: var(--pg-font-display); font-weight: 600; font-size: 1rem; }
.hc-corp-card-link-title a { color: var(--hc-ink); text-decoration: none; }
.hc-corp-card-link-title a::after { content: "→"; margin-left: 8px; display: inline-block; transition: transform .2s ease; color: var(--hc-signal-600); }

/* ================================================================
   LOT 4 (passe qualite) - Nuage de sujets reels (DSI, "Pourquoi
   externaliser") : chips en position organique (rotation legere,
   tailles variees), pas un rectangle contenant des rectangles. Remplit
   naturellement une colonne haute sans etirer un contenu pauvre. */

/* ================================================================
   LOT 4 - Pilote A (DSI externalisee) : diagramme organisationnel.
   3 paliers verticaux (Direction / PROGEDYS-DSI / domaines de pilotage),
   relies par une ligne qui se dessine au scroll (meme mecanique que
   .hc-corp-timeline du Lot 3). Pas des cards : le palier 3 est une liste
   horizontale texte+icone, sans fond/ombre.
   ================================================================ */

/* Zone de perimetre (passe qualite Lot 4) : cadre en pointilles autour du hub
   et des domaines - lit "ce que PROGEDYS pilote au quotidien", distingue le
   perimetre gere du reste de la cartographie. Remplace l'organigramme plat
   par quelque chose qui ressemble a une carte de pilotage. */

/* Bus + branches (remplace le tronc commun) : le hub distribue vers CHAQUE
   domaine individuellement plutot qu'une seule ligne partagee - lecture plus
   proche d'une cartographie de flux que d'un organigramme scolaire. */

/* ================================================================
   LOT 4 - Pilote B (Developpement) : transformation besoin -> solution.
   Noeud "besoin" a gauche, noeud central "etude / developpement sur
   mesure", 4 modules reels connectes a droite (Gestion/Metier/Web/Mobile).
   SVG pur, pas de canvas - l'info reste dans le DOM (texte reel).
   ================================================================ */
/* Hub développement : nav texte + une photo unique par offre + liens utiles */
.hc-dev-jump {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: clamp(28px, 4vw, 40px);
}
.hc-dev-jump-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    background: var(--hc-card, #fff);
    border: 1px solid var(--hc-line-soft);
    border-radius: var(--hc-radius-md);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--hc-shadow-md);
    transition: transform .25s ease, border-color .2s ease, box-shadow .25s ease;
}
.hc-dev-jump-item:hover {
    transform: translateY(-2px);
    border-color: var(--hc-signal-600);
    box-shadow: var(--hc-shadow-lg);
}
.hc-dev-jump-num {
    flex: none;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--hc-signal-600);
    padding-top: 2px;
}
.hc-dev-jump-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.hc-dev-jump-text strong {
    font-family: var(--pg-font-display);
    font-size: 1rem;
    line-height: 1.25;
    color: var(--hc-ink);
}
.hc-dev-jump-text span {
    font-size: .84rem;
    line-height: 1.35;
    color: var(--hc-ink-soft);
}
.hc-dev-offer { padding-block: clamp(48px, 7vh, 80px); }
.hc-dev-offer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
.hc-dev-offer-row--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.hc-dev-offer-row--flip .hc-dev-offer-copy { order: 2; }
.hc-dev-offer-row--flip .hc-dev-offer-media { order: 1; }
.hc-dev-offer-copy h2 {
    margin-top: 4px;
    font-size: clamp(1.7rem, 2.8vw, 2.35rem);
}
.hc-dev-offer-body {
    margin-top: var(--space-3);
    max-width: 38rem;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--hc-ink-soft);
}
.hc-dev-offer-body p { margin: 0; }
.hc-dev-offer-cta { margin: 22px 0 0; }
.hc-dev-offer-photo {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 10;
    border-radius: var(--hc-radius-lg);
    box-shadow: var(--hc-shadow-lg);
}
.hc-dev-links-title {
    margin: 6px 0 var(--space-5);
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
}
.hc-dev-links-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.hc-page .hc-dev-links-body li {
    margin: 0;
    padding: 0;
}
.hc-dev-links-body a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 16px 18px;
    background: var(--hc-card, #fff);
    border: 1px solid var(--hc-line-soft);
    border-radius: var(--hc-radius-md);
    text-decoration: none;
    color: var(--hc-ink);
    font-weight: 600;
    font-size: .98rem;
    line-height: 1.35;
    box-shadow: var(--hc-shadow-md);
    transition: transform .2s ease, border-color .2s ease;
}
.hc-dev-links-body a::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hc-signal-600);
}
.hc-dev-links-body a:hover {
    transform: translateY(-2px);
    border-color: var(--hc-signal-600);
}
@media (max-width: 900px) {
    .hc-dev-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hc-dev-offer-row,
    .hc-dev-offer-row--flip { grid-template-columns: 1fr; }
    .hc-dev-offer-row--flip .hc-dev-offer-copy,
    .hc-dev-offer-row--flip .hc-dev-offer-media { order: initial; }
    .hc-dev-offer-media { order: -1; }
    .hc-dev-links-body ul { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .hc-dev-jump { grid-template-columns: 1fr; }
}

/* ================================================================
   LOT 4 - Pilote C (Reseau/ingenierie) : architecture en couches.
   Represente le flux reel decrit par le contenu (postes de travail ->
   commutateur -> materiel de securite -> serveur/Internet). Une ligne
   verticale traverse les couches ; un point "paquet" descend le long
   au scroll (SVG natif, s'arrete avec prefers-reduced-motion).
   ================================================================ */
.hc-layers { max-width: 640px; margin: 0 auto; position: relative; }
/* Zones reelles (reseau local / securite & production) - bracket en pointilles
   avec label, padding symetrique pour garder l'icone centree sur la ligne. */
.hc-layers-zone { position: relative; padding: 8px 16px; border: 1.5px dashed var(--hc-line); border-radius: var(--hc-radius-md); margin: 10px 0; }
.hc-layers-zone-label { position: absolute; top: -11px; left: 18px; background: var(--hc-paper); padding: 0 10px; font-family: var(--pg-font-display); font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--hc-ink-mute); }
/* Indicateur d'etat de lien - petit point qui pulse doucement (etat "actif"),
   place entre 2 segments pour montrer la continuite du flux, pas juste sa
   presence. Reduced-motion : le point reste visible, fixe. */
.hc-layers-link { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; margin-left: calc(50% - 20px); width: max-content; font-size: .68rem; color: var(--hc-ink-mute); padding: 3px 0; }
.hc-layers-link-dot { width: 6px; height: 6px; border-radius: 50%; background: #1fae6b; flex: none; animation: hc-link-pulse 2s ease-in-out infinite; }
@keyframes hc-link-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hc-layers-link-dot { animation: none; opacity: 1; } }
.hc-layers-line { position: absolute; left: 50%; top: 8px; bottom: 8px; width: 2px; background: var(--hc-ink-mute); transform: translateX(-50%); }
.hc-layers-packet { position: absolute; left: 50%; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--hc-signal-600); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(0, 168, 201,.18); opacity: 0; }
.hc-layers.hc-in-view .hc-layers-packet { opacity: 1; animation: hc-layers-descend 3.4s ease-in-out infinite; }
@keyframes hc-layers-descend { 0%, 8% { top: 8px; } 46%, 54% { top: 50%; } 92%, 100% { top: calc(100% - 8px); } }
@media (prefers-reduced-motion: reduce) { .hc-layers.hc-in-view .hc-layers-packet { animation: none; opacity: 0; } }
.hc-layer { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.hc-layer-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--hc-card); border: 1.5px solid var(--hc-line); display: flex; align-items: center; justify-content: center; margin-left: calc(50% - 20px); }
.hc-layer-icon svg { width: 18px; height: 18px; color: var(--hc-navy-900); }
.hc-layer-text { position: absolute; width: 200px; font-size: .82rem; line-height: 1.35; }
.hc-layer--right .hc-layer-text { right: calc(50% + 34px); text-align: right; }
.hc-layer--left .hc-layer-text { left: calc(50% + 34px); text-align: left; }
.hc-layer-text strong { display: block; font-family: var(--pg-font-display); font-size: .88rem; color: var(--hc-ink); margin-bottom: 2px; }
.hc-layer-text span { color: var(--hc-ink-mute); }
@media (max-width: 640px) {
    .hc-layers { max-width: 340px; }
    .hc-layer-text { position: static; width: auto; text-align: left !important; margin-left: 14px; }
    .hc-layer { align-items: flex-start; }
    .hc-layer-icon { margin-left: 0; }
    .hc-layers-zone { padding: 6px 12px; }
    .hc-layers-link { margin-left: 40px; }
}

/* Point d'interaction tactile (Lot 4, offre Mobiles) : anneau qui pulse
   doucement sur l'icone de validation - traduit visuellement le mot
   "tactile", s'arrete avec prefers-reduced-motion (info deja portee par le
   texte reel, l'animation est un plus et non une necessite). */

/* Variante compacte (hero technique, fond sombre) : chaine d'icones verticale
   sans legendes inline (la version complete legendee suit juste en dessous
   dans la page, en fond clair) - alternative textuelle portee par aria-label. */
.hc-corp-card:hover .hc-corp-card-link-title a::after { transform: translateX(4px); }

/* ================================================================
   LOT 5 - Famille Cybersecurite : couches de defense emboitees.
   4 cadres imbriques (exposition -> controle -> protection -> continuite,
   le coeur protege au centre) - grammaire volontairement differente de
   .hc-org (hierarchie), .hc-transform (pipeline) et .hc-layers (flux
   lineaire) : ici la lecture est "de l'exterieur vers le coeur protege",
   pas une succession d'etapes. Pas de bouclier/cadenas decoratif.
   ================================================================ */
/* 460px -> 540px (verification 1920px, section 10) : le diagramme est seul
   dans une section centree pleine largeur (~1184px de conteneur), laissant
   ~360px de vide de chaque cote a 460px - augmentation moderee, alignee sur
   l'echelle de .hc-orbit (560px, meme famille visuelle "cercle centre") sans
   devenir demesuree. */
/* Lot "motion P2" (2026-09-16) : "defense structuree et maitrise, pas peur" -
   une fois les 4 couches apparues (reveal existant ci-dessus, 0->.36s), un
   signal traverse une seule fois de l'exterieur vers le coeur : chaque
   bordure s'illumine brievement en orange puis retombe au neutre (jamais de
   rouge/clignotement), le coeur Continuite recoit un halo doux qui reste
   stable ensuite - la zone la plus calme du diagramme, pas la plus active.
   Sequence liee au meme .hc-in-view pose une seule fois par page (voir
   initReveal()) : jamais de re-declenchement au re-scroll. */
/* Motion P2 (2026-09-16, verification visuelle 1920px) : les 3 premieres
   couches etaient transparentes (aucun background defini) - leur texte reel
   (4 lignes pour Controle, 3 pour Protection) depassait largement la place
   disponible avant le bord de la couche suivante et se melangeait visuellement
   avec elle (confirme a l'ecran, pas seulement en mesure DOM). Un fond propre
   par couche regle la lisibilite sans toucher au contenu ni a la mise en page
   d'ensemble. */
@media (max-width: 640px) {
    /* Recomposition mobile : 4 bandes empilees (exterieur -> coeur), pas
       une reduction du cadre emboite qui deviendrait illisible. */
}

/* Variante compacte (hero technique, fond sombre) : anneaux concentriques
   sans legendes inline, meme lecture "exterieur -> coeur protege" que la
   version complete qui suit juste en dessous en fond clair. */

/* ================================================================
   LOT 5 - Famille Conseil/pilotage.
   .hc-funnel (Audit) : barres descendantes, la largeur du sujet se
   reduit jusqu'a la decision - grammaire distincte de la hierarchie
   DSI, du pipeline Dev et des couches Cyber.
   ================================================================ */
@media (max-width: 640px) {
    /* Recomposition mobile : escalier vertical (le plus large en haut),
       pas une reduction de barres illisibles. */
}

/* .hc-bridge (AMOA) : 3 poles relies par des connecteurs bidirectionnels
   (maitre d'ouvrage <-> AMOA <-> corps de metier) - PAS un pipeline lineaire
   (Dev) ni une hierarchie descendante (DSI) : lecture d'interface entre 2
   parties, chacune gardant son autonomie. */
.hc-bridge { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 28px); max-width: 980px; margin: 0 auto; }
.hc-bridge-node { flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 18px; border-radius: var(--hc-radius-md); width: 190px; }
.hc-bridge-node--side { border: 1.5px solid var(--hc-line); background: var(--hc-card); }
.hc-bridge-node--core { background: var(--hc-navy-900); color: #fff; box-shadow: var(--hc-shadow-lg); width: 200px; padding: 26px 20px; }
.hc-bridge-node strong { font-family: var(--pg-font-display); font-size: .9rem; }
.hc-bridge-node span, .hc-bridge-node ul { font-size: .74rem; color: var(--hc-ink-mute); line-height: 1.4; }
.hc-bridge-node--core span { color: #a9b6cf; }
.hc-bridge-node ul { margin: 0; padding: 0; list-style: none; }
/* QA retour utilisateur (2026-09-16, capture a l'appui) : "c pas clair" ->
   connecteurs trop discrets a l'etat statique (var(--hc-line), le meme gris
   quasi-invisible que les bordures de carte, alors qu'ici la ligne PORTE une
   information reelle - la relation entre les 3 poles - pas une simple
   separation decorative). Passe a --hc-ink-mute (gris moyen, deja utilise
   pour du texte secondaire donc lisible par construction) et un trait un peu
   plus epais ; le sweep anime au survol du viewport reste inchange. */
.hc-bridge-arrow { flex: 1 1 auto; min-width: 20px; height: 2px; background: var(--hc-ink-mute); position: relative; }
.hc-bridge-arrow::before, .hc-bridge-arrow::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--hc-ink-mute); border-bottom: 2px solid var(--hc-ink-mute); }
.hc-bridge-arrow::after { right: 0; transform: translateY(-50%) rotate(-45deg); }
.hc-bridge-arrow::before { left: 0; transform: translateY(-50%) rotate(135deg); }
/* Lot "motion P2" (2026-09-16) : AMOA = interface de coordination, pas une
   infrastructure reseau - langage volontairement distinct de l'orbit
   (traits qui se dessinent) et de la defense (bordures qui s'illuminent) :
   ici un segment plein qui traverse chaque connecteur, dans un sens puis
   dans l'autre, pour lire "aller-retour / echange" plutot que "flux route".
   Sequence unique liee a .hc-in-view (pose une fois par l'observer partage -
   jamais de re-declenchement au re-scroll). Etat final : connecteurs neutres,
   noeud AMOA avec un tres leger repere "hub actif", stable et non clignotant. */
.hc-bridge-pulse { position: absolute; top: 50%; left: -22%; width: 22%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--hc-signal-600); opacity: 0; }
.hc-bridge.hc-in-view .hc-bridge-arrow--1 .hc-bridge-pulse { animation: hc-bridge-sweep-fwd .55s ease-in-out .2s 1, hc-bridge-sweep-rev .55s ease-in-out 3.35s 1; }
.hc-bridge.hc-in-view .hc-bridge-arrow--2 .hc-bridge-pulse { animation: hc-bridge-sweep-fwd .55s ease-in-out 1.2s 1, hc-bridge-sweep-rev .55s ease-in-out 2.35s 1; }
@keyframes hc-bridge-sweep-fwd {
    0% { left: -22%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
@keyframes hc-bridge-sweep-rev {
    0% { left: 100%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: -22%; opacity: 0; }
}
.hc-bridge.hc-in-view .hc-bridge-node--core {
    animation-name: hc-bridge-hub-pulse, hc-bridge-hub-pulse, hc-bridge-hub-settle;
    animation-duration: .5s, .5s, .6s;
    animation-timing-function: ease-out, ease-out, ease-out;
    animation-delay: .75s, 2.9s, 3.9s;
    animation-fill-mode: both, both, both;
}
@keyframes hc-bridge-hub-pulse { 0%, 100% { box-shadow: var(--hc-shadow-lg); } 50% { box-shadow: var(--hc-shadow-lg), 0 0 0 3px rgba(0, 168, 201,.3); } }
/* QA finale motion (2026-09-16) : Cyber et AMOA finissaient tous deux sur un
   halo diffus identique (meme flou, memes valeurs) - trop proches l'un de
   l'autre. AMOA passe a un anneau net (spread, zero flou) plutot qu'une lueur
   diffuse : "noeud de coordination accentue/encadre", distinct de la
   "protection qui rayonne" de Cyber. Meme outil (box-shadow), pas de nouvel
   effet, juste des parametres differents - coherent avec le pulse ci-dessus
   qui est deja un anneau net, pas un flou. */
@keyframes hc-bridge-hub-settle { from { box-shadow: var(--hc-shadow-lg); } to { box-shadow: var(--hc-shadow-lg), 0 0 0 2px rgba(0, 168, 201,.45); } }
@media (prefers-reduced-motion: reduce) {
    .hc-bridge-pulse { animation: none !important; opacity: 0; }
    .hc-bridge-node--core { animation: none !important; box-shadow: var(--hc-shadow-lg), 0 0 0 2px rgba(0, 168, 201,.45); }
}
@media (max-width: 780px) {
    .hc-bridge { flex-direction: column; }
    .hc-bridge-arrow { width: 1.5px; height: 24px; min-width: 0; }
    .hc-bridge-arrow::after { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%) rotate(45deg); }
    .hc-bridge-arrow::before { left: 50%; top: 0; transform: translateX(-50%) rotate(-135deg); }
    .hc-bridge-node, .hc-bridge-node--core { width: 100%; max-width: 320px; }
    /* Aller-retour vertical : le segment suit desormais l'axe haut/bas. */
    .hc-bridge-pulse { top: -22%; left: 50%; width: 3px; height: 22%; margin-top: 0; margin-left: -1.5px; }
    @keyframes hc-bridge-sweep-fwd { 0% { top: -22%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
    @keyframes hc-bridge-sweep-rev { 0% { top: 100%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: -22%; opacity: 0; } }
}

/* .hc-scope-grid (AMOA) : perimetre IT reel en grille dense (8 domaines),
   simple grille etiquetee - pas une "zone pilotee" (DSI), juste l'etendue
   reelle du perimetre couvert. */
.hc-scope-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hc-line); border: 1px solid var(--hc-line); border-radius: var(--hc-radius-md); overflow: hidden; }
.hc-scope-item { background: var(--hc-card); padding: 18px 16px; display: flex; flex-direction: column; gap: 6px; }
.hc-scope-item svg { width: 20px; height: 20px; color: var(--hc-signal-600); }
.hc-scope-item strong { font-family: var(--pg-font-display); font-size: .82rem; }
.hc-scope-item span { font-size: .7rem; color: var(--hc-ink-mute); line-height: 1.3; }
@media (max-width: 900px) { .hc-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hc-scope-grid { grid-template-columns: minmax(0, 1fr); } }

/* .hc-photo-gallery : bande compacte de vraies photos de chantiers.
   Vignettes uniformes et petites (3 par ligne, 2 si seulement 2 photos),
   apparition echelonnee (clip-reveal), numero, zoom + relevage au survol.
   Mobile : bande defilante a accroche (scroll-snap) plutot qu'une pile de grandes photos. */
.hc-photo-gallery { display: flex; justify-content: center; gap: 16px; max-width: 960px; margin: 0 auto; }
.hc-photo-gallery-item { position: relative; flex: 1 1 0; max-width: 300px; aspect-ratio: 4/3; max-height: 225px; border-radius: var(--hc-radius-md); overflow: hidden; box-shadow: var(--hc-shadow-md); transition: transform .35s ease, box-shadow .35s ease; }
.hc-photo-gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,20,32,.35), transparent 45%); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.hc-photo-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.hc-photo-gallery-item:hover { transform: translateY(-4px); box-shadow: var(--hc-shadow-lg); }
.hc-photo-gallery-item:hover img { transform: scale(1.07); }
.hc-photo-gallery-item:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hc-photo-gallery-item, .hc-photo-gallery-item img, .hc-photo-gallery-item::after { transition: none; } .hc-photo-gallery-item:hover, .hc-photo-gallery-item:hover img { transform: none; } }
@media (max-width: 700px) {
    .hc-photo-gallery { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
    .hc-photo-gallery-item { flex: 0 0 72%; max-height: 210px; scroll-snap-align: start; }
}

/* .hc-compare (Refonte reseau) : avant / apres, pas une architecture -
   deux colonnes opposees (etat degrade vs etat cible) relies par une fleche. */

/* .hc-flow (Offre Sante) : chaine lineaire a 4 noeuds (Doctolib -> WLPG10 ->
   Worklist -> Appareil medical) - vocabulaire distinct de hc-bridge (AMOA,
   3 noeuds bidirectionnels) et hc-layers (reseau, zones empilees) : ici un
   flux a sens unique, simple et lisible, propre au sujet sante. */
.hc-flow { display: flex; align-items: center; gap: clamp(8px, 2vw, 20px); max-width: 1020px; margin: 0 auto; }
.hc-flow-node { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 14px; border-radius: var(--hc-radius-md); background: var(--hc-card); border: 1.5px solid var(--hc-line); }
.hc-flow-node--core { background: var(--hc-navy-900); border-color: var(--hc-navy-900); color: #fff; box-shadow: var(--hc-shadow-lg); }
.hc-flow-node-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--hc-azure-100); color: var(--hc-azure-500); display: flex; align-items: center; justify-content: center; }
.hc-flow-node--core .hc-flow-node-icon { background: rgba(255,255,255,.12); color: var(--hc-signal-400, var(--hc-brand-cyan-soft, #5ec4dc)); }
.hc-flow-node-icon svg { width: 22px; height: 22px; }
.hc-flow-node strong { font-family: var(--pg-font-display); font-size: .88rem; }
.hc-flow-node span { font-size: .74rem; color: var(--hc-ink-mute); line-height: 1.35; }
.hc-flow-node--core span { color: #a9b6cf; }
.hc-flow-arrow { flex: none; width: 22px; height: 14px; color: var(--hc-signal-600); display: block; }
/* Lot "motion" (2026-09-16, audit) : le flux Doctolib -> WLPG10 -> Worklist -> Appareil restait
   entierement statique (fleches fixes) alors que le sujet meme de la page est "envoi en un clic" -
   un point relaye d'une fleche a l'autre (delais empiles 0/1.1/2.2s) rend ce trajet perceptible
   sans ajouter de particules permanentes ni de bruit visuel : chaque point ne joue qu'une fois par
   cycle de 3.3s. role="img"/aria-label du conteneur porte deja l'info complete (section 22). */
.hc-flow-arrow-wrap { position: relative; flex: none; width: 22px; height: 14px; }
.hc-flow-packet { position: absolute; top: 50%; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--hc-signal-600); opacity: 0; transform: translate(0, -50%); animation: hc-flow-packet-travel 3.3s ease-in-out infinite; }
@keyframes hc-flow-packet-travel {
    0%, 4% { left: 0; opacity: 0; }
    10% { opacity: 1; }
    30% { left: calc(100% - 6px); opacity: 1; }
    36%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hc-flow-packet { animation: none; opacity: 0; } }
@media (max-width: 860px) {
    .hc-flow { flex-direction: column; }
    .hc-flow-node { width: 100%; max-width: 320px; }
    .hc-flow-arrow { transform: rotate(90deg); }
    .hc-flow-arrow-wrap { width: 22px; height: 22px; }
    .hc-flow-packet { top: 0; left: 50%; transform: translate(-50%, 0); animation-name: hc-flow-packet-travel-vertical; }
}
@keyframes hc-flow-packet-travel-vertical {
    0%, 4% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    30% { top: calc(100% - 6px); opacity: 1; }
    36%, 100% { opacity: 0; }
}

/* Onglets du détail des réalisations */
.hc-real-tabs { display: flex; gap: 10px; margin: 0 auto var(--space-5); max-width: 1080px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.hc-real-tabs[hidden] { display: none; }
.hc-real-tab { flex: 1 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px; text-align: left; background: var(--hc-card); border: 1px solid var(--hc-line); border-radius: var(--hc-radius-sm); color: var(--hc-ink); cursor: pointer; scroll-snap-align: start; transition: border-color .2s ease, background .2s ease; }
.hc-real-tab:hover { border-color: var(--hc-signal-600); }
.hc-real-tab:focus-visible { outline: 2px solid var(--hc-signal-600); outline-offset: 2px; }
.hc-real-tab-num { font-family: var(--pg-font-display); font-weight: 700; font-size: .85rem; color: var(--hc-signal-600); }
.hc-real-tab-txt { display: grid; line-height: 1.25; }
.hc-real-tab-txt strong { font-size: .9rem; white-space: nowrap; }
.hc-real-tab-txt small { font-size: .72rem; color: var(--hc-ink-mute); white-space: nowrap; }
.hc-real-tab.is-active { background: var(--hc-navy-900); border-color: var(--hc-navy-900); color: #fff; }
.hc-real-tab.is-active .hc-real-tab-num { color: #fff; }
.hc-real-tab.is-active small { color: rgba(255,255,255,.7); }
.hc-real-detail-stack.is-tabs .hc-real-case { display: none; }
.hc-real-detail-stack.is-tabs .hc-real-case.is-active { display: block; animation: hc-real-in .25s ease; }
@keyframes hc-real-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hc-real-detail-stack.is-tabs .hc-real-case.is-active { animation: none; } .hc-real-tab { transition: none; } }

/* Grille de cartes "atouts" (pages de service recomposees) */
.hc-feat-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hc-feat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hc-feat-card { background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius-md); padding: var(--space-5); transition: border-color .2s ease, box-shadow .2s ease; }
.hc-feat-card:hover { border-color: var(--hc-line); box-shadow: var(--hc-shadow-md); }
.hc-feat-card h3 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.3; }
.hc-feat-card p { margin: 0; color: var(--hc-ink-soft); font-size: .92rem; line-height: 1.5; }
@media (max-width: 860px) { .hc-feat-grid--3 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hc-feat-card { transition: none; } }
.hc-tool-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-decoration: none; color: inherit; }
.hc-tool-card:focus-visible { outline: 2px solid var(--hc-signal-600); outline-offset: 3px; }
.hc-tool-logo { display: grid; place-items: center; width: 100%; height: 120px; margin-bottom: 8px; border-radius: var(--hc-radius-sm); background: var(--hc-paper); }
.hc-tool-logo img { max-width: 70%; max-height: 80px; width: auto; height: auto; object-fit: contain; }
.hc-tool-cta { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: .88rem; color: var(--hc-signal-600); }

/* Visuel portrait (ex. PROSTOCK ERP) : hauteur maitrisee, image entiere visible */

/* Maintenance vs infogerance : deux cartes comparatives */
.hc-mvi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
.hc-mvi-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-top: 4px solid var(--hc-azure-500); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); transition: transform .3s ease, box-shadow .3s ease; }
.hc-mvi-card--accent { border-top-color: var(--hc-signal-600); }
.hc-mvi-card:hover { transform: translateY(-4px); box-shadow: var(--hc-shadow-lg); }
.hc-mvi-head { display: flex; align-items: center; gap: var(--space-4); }
.hc-mvi-ico { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--hc-azure-100); color: var(--hc-azure-500); }
.hc-mvi-card--accent .hc-mvi-ico { background: #e8f7fb; color: var(--hc-signal-600); }
.hc-mvi-ico svg { width: 26px; height: 26px; }
.hc-mvi-tag { margin: 0 0 2px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hc-ink-mute); }
.hc-mvi-head h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.hc-mvi-lead { margin: 0; color: var(--hc-ink-soft); line-height: 1.55; }
.hc-mvi-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hc-page .hc-mvi-chips li { font-size: .78rem; font-weight: 600; color: var(--hc-ink-soft); background: var(--hc-paper); border-radius: 999px; padding: 5px 12px; }
.hc-mvi-for { margin-top: auto; padding: var(--space-4); background: var(--hc-paper); border-radius: var(--hc-radius-sm); }
.hc-mvi-for h4 { margin: 0 0 4px; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--hc-signal-600); }
.hc-mvi-for p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--hc-ink-soft); }
.hc-mvi-link { font-weight: 700; font-size: .92rem; color: var(--hc-signal-600); text-decoration: none; }
.hc-mvi-link:hover { text-decoration: underline; }
.hc-mvi-link:focus-visible, .hc-mvi-guides a:focus-visible { outline: 2px solid var(--hc-signal-600); outline-offset: 3px; }
.hc-mvi-note { display: flex; align-items: center; gap: 10px; margin: var(--space-5) 0 0; color: var(--hc-ink-soft); font-size: .92rem; }
.hc-mvi-note svg { flex: none; width: 20px; height: 20px; color: var(--hc-azure-500); }
.hc-mvi-guides { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: var(--space-4) 0 0; }
.hc-mvi-guides span { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hc-ink-mute); margin-right: 4px; }
.hc-mvi-guides a { font-size: .84rem; font-weight: 600; text-decoration: none; color: var(--hc-signal-600); border: 1px solid var(--hc-line); border-radius: 999px; padding: 6px 14px; background: var(--hc-card); }
.hc-mvi-guides a:hover { background: var(--hc-signal-600); border-color: var(--hc-signal-600); color: #fff; }
@media (prefers-reduced-motion: reduce) { .hc-mvi-card { transition: none; } .hc-mvi-card:hover { transform: none; } }
@media (max-width: 860px) { .hc-mvi-grid { grid-template-columns: 1fr; } .hc-mvi-card { padding: var(--space-5); } }

/* Visuel composite "serveurs" : photo principale + deux tuiles (logos sur fond clair, jamais recadres) */
.hc-svr-visual { display: grid; gap: 14px; width: 100%; max-width: 560px; margin-inline: auto; }
.hc-svr-visual figure { position: relative; margin: 0; border-radius: var(--hc-radius-md); overflow: hidden; box-shadow: var(--hc-shadow-md); }
.hc-svr-main { aspect-ratio: 16 / 9; background: var(--hc-navy-900); }
.hc-svr-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.hc-svr-main:hover img { transform: scale(1.05); }
.hc-svr-main figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 16px 10px; background: linear-gradient(0deg, rgba(4,20,32,.85), rgba(4,20,32,0)); color: #fff; font-family: var(--pg-font-display); font-size: .82rem; font-weight: 600; }
.hc-svr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hc-svr-tile { display: grid; grid-template-rows: 1fr auto; place-items: center; height: 150px; padding: 14px 14px 0; background: var(--hc-card); border: 1px solid var(--hc-line-soft); transition: transform .3s ease, box-shadow .3s ease; }
.hc-svr-tile:hover { transform: translateY(-3px); box-shadow: var(--hc-shadow-lg); }
.hc-svr-tile img { max-width: 100%; max-height: 90px; width: auto; height: auto; object-fit: contain; }
.hc-svr-tile figcaption { align-self: end; width: calc(100% + 28px); margin: 0 -14px; padding: 8px 14px; text-align: center; background: var(--hc-paper); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hc-ink-mute); }
@media (prefers-reduced-motion: reduce) { .hc-svr-main img, .hc-svr-tile { transition: none; } .hc-svr-main:hover img, .hc-svr-tile:hover { transform: none; } }
@media (max-width: 520px) { .hc-svr-tile { height: 130px; } }

/* Visuels stables : une image s'affiche immediatement, a sa place finale (ni glissement vertical,
   ni rideau clip-path, ni delai) - ces effets decalaient les photos par rapport au texte. */
:is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-reveal[data-reveal]:is(.hc-clip-reveal, .hc-corp-split-media, .hc-photo-gallery-item, .hc-svr-visual, .hc-real-card-visual, .hc-article .wp-block-image, .hc-article .wp-block-cover, .hc-article .wp-block-gallery),
:is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-reveal[data-reveal]:has(> img, > picture, > figure > img),
:is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-clip-reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
}

/* Bloc "Evolution" (telephonie) : tout dans la colonne texte de la rangee 01 (meme rythme que 02/03/04) */
.hc-evo-title { margin: 0 0 var(--space-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--hc-signal-600); }
.hc-evo-row { align-items: center; }
.hc-tel-vision-head {
    margin-bottom: 44px;
}
.hc-page .hc-evo-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.hc-page .hc-evo-steps li { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; line-height: 1.35; color: var(--hc-ink); }
.hc-page .hc-evo-steps__n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--hc-signal-600); color: #fff; font-size: .75rem; font-weight: 700; }
.hc-page .hc-evo-steps__label { flex: 1; min-width: 0; font-weight: 600; color: var(--hc-ink); background: transparent; }
.hc-evo-sub { margin: var(--space-3) 0 0; color: var(--hc-ink-soft); font-size: .86rem; line-height: 1.5; }
@media (max-width: 520px) { .hc-evo-steps { grid-template-columns: 1fr; } }

/* Perimetre : tags visibles (plus de bloc replie) */
.hc-evo-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hc-page .hc-evo-tags li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; font-size: .8rem; font-weight: 600; line-height: 1.2; color: var(--hc-ink); background: var(--hc-card); border: 1px solid var(--hc-line); border-radius: 999px; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.hc-evo-tags li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--hc-signal-600); }
.hc-evo-tags li:hover { border-color: var(--hc-signal-600); background: var(--hc-azure-100); }
@media (prefers-reduced-motion: reduce) { .hc-evo-tags li { transition: none; } }

/* Rangs 02-04 (telephonie) : memes briques que le rang 01, dans la meme colonne */
.hc-evo-callout { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); background: var(--hc-azure-100); border-radius: var(--hc-radius-sm); font-size: .88rem; line-height: 1.5; color: var(--hc-ink); }
.hc-evo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hc-evo-list li { position: relative; padding-left: 22px; font-size: .86rem; line-height: 1.4; color: var(--hc-ink); }
.hc-evo-list li::before { content: ""; position: absolute; left: 0; top: .2em; width: 14px; height: 14px; border-radius: 50%; background: var(--hc-azure-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232e6bf2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.5 3.5L15 6'/%3E%3C/svg%3E") center/10px no-repeat; }

/* Rang 02 : comparatif Bien concue / Mal pensee ; rang 03 : profils d'usage - listes courtes et aerees */
.hc-usage-grid { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.hc-page .hc-usage-grid li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--hc-paper); border-left: 3px solid var(--hc-azure-500); border-radius: 0 var(--hc-radius-sm) var(--hc-radius-sm) 0; }
.hc-usage-grid strong { font-size: .92rem; color: var(--hc-ink); }
.hc-usage-grid span { font-size: .82rem; color: var(--hc-ink-soft); }
@media (max-width: 700px) {  .hc-usage-grid { grid-template-columns: 1fr; } }

/* Architecture : chaine reseau horizontale (postes -> commutateur -> securite -> production) */
.hc-arch { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr 64px 1fr 64px 1fr; grid-template-rows: auto auto; column-gap: 0; row-gap: 14px; align-items: stretch; padding: var(--space-4) 0 var(--space-2); }
.hc-arch-zone { grid-row: 1; padding: 6px 12px; border-bottom: 2px solid var(--hc-line); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hc-ink-mute); }
.hc-arch-zone--a { grid-column: 1 / 4; border-bottom-color: var(--hc-azure-500); color: var(--hc-azure-500); }
.hc-arch-zone--b { grid-column: 5 / 8; border-bottom-color: var(--hc-signal-600); color: var(--hc-signal-600); }
.hc-arch-node { grid-row: 2; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--space-4); background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); transition: transform .3s ease, box-shadow .3s ease; }
.hc-arch-node:hover { transform: translateY(-4px); box-shadow: var(--hc-shadow-lg); }
.hc-arch-node--1 { grid-column: 1; } .hc-arch-node--2 { grid-column: 3; } .hc-arch-node--3 { grid-column: 5; } .hc-arch-node--4 { grid-column: 7; }
.hc-arch-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--hc-azure-100); color: var(--hc-azure-500); }
.hc-arch-node--3 .hc-arch-ico, .hc-arch-node--4 .hc-arch-ico { background: #e8f7fb; color: var(--hc-signal-600); }
.hc-arch-ico svg { width: 24px; height: 24px; }
.hc-arch-step { position: absolute; top: 12px; right: 14px; font-family: var(--pg-font-display); font-weight: 700; font-size: .78rem; color: var(--hc-ink-mute); }
.hc-arch-node strong { font-size: .98rem; line-height: 1.3; color: var(--hc-ink); }
.hc-arch-node > span:last-child { font-size: .82rem; line-height: 1.45; color: var(--hc-ink-soft); }
.hc-arch-link { grid-row: 2; position: relative; z-index: 1; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hc-arch-link--1 { grid-column: 2; } .hc-arch-link--2 { grid-column: 4; } .hc-arch-link--3 { grid-column: 6; }
.hc-arch-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hc-success-500); box-shadow: 0 0 0 0 rgba(39,174,96,.5); animation: hc-flow-pulse 2.2s ease-out infinite; }
@keyframes hc-flow-pulse { 70% { box-shadow: 0 0 0 8px rgba(39,174,96,0); } 100% { box-shadow: 0 0 0 0 rgba(39,174,96,0); } }
@media (prefers-reduced-motion: reduce) {  .hc-arch-dot { animation: none; } .hc-arch-node { transition: none; } .hc-arch-node:hover { transform: none; } }
@media (max-width: 960px) {
    .hc-arch { display: flex; flex-direction: column; gap: 10px; }
    .hc-arch-zone--a { order: 0; } .hc-arch-node--1 { order: 1; } .hc-arch-link--1 { order: 2; } .hc-arch-node--2 { order: 3; }
    .hc-arch-link--2 { order: 4; } .hc-arch-zone--b { order: 5; margin-top: 6px; } .hc-arch-node--3 { order: 6; } .hc-arch-link--3 { order: 7; } .hc-arch-node--4 { order: 8; }
    .hc-arch-link { flex-direction: row; justify-content: center; }
}

/* Liens du schema Architecture : vraie fleche entre les maillons, avec une pastille qui la parcourt */
.hc-arch-link { position: relative; align-self: center; height: 24px; width: 100%; display: block; }
.hc-arch-link::before { content: ""; position: absolute; left: 0; right: 7px; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 2px; background: linear-gradient(90deg, var(--hc-azure-500), var(--hc-signal-600)); }
.hc-arch-link--1::before { background: var(--hc-azure-500); }
.hc-arch-link--3::before { background: var(--hc-signal-600); }
.hc-arch-link::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-left: 10px solid var(--hc-signal-600); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.hc-arch-link--1::after { border-left-color: var(--hc-azure-500); }
.hc-arch-link--2::after { border-left-color: var(--hc-signal-600); }
.hc-arch-dot { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--hc-signal-600); animation: hc-flow-slide 2.4s ease-in-out infinite; }
.hc-arch-link--2 .hc-arch-dot { animation-delay: .8s; }
.hc-arch-link--3 .hc-arch-dot { animation-delay: 1.6s; }
@keyframes hc-flow-slide { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 17px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hc-arch-dot { animation: none; left: calc(50% - 4.5px); } }
@media (max-width: 960px) {
    .hc-arch-link { width: 24px; height: 40px; align-self: center; }
    .hc-arch-link::before { left: 50%; right: auto; top: 0; bottom: 7px; width: 3px; height: auto; transform: translateX(-50%); }
    .hc-arch-link::after { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid var(--hc-signal-600); border-bottom: 0; }
    .hc-arch-link--1::after { border-top-color: var(--hc-azure-500); }
    .hc-arch-dot { left: 50%; top: 0; margin: 0 0 0 -4.5px; animation-name: hc-flow-slide-v; }
    @keyframes hc-flow-slide-v { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 17px); opacity: 0; } }
}

/* Pastilles en sequence : 1 -> 2 -> 3, une seule en mouvement a la fois (cycle de 6 s, 2 s par lien) */
.hc-arch-dot { animation: none; opacity: 0; }
.hc-arch-link--1 .hc-arch-dot { animation: hc-flow-seq-1 6s linear infinite; }
.hc-arch-link--2 .hc-arch-dot { animation: hc-flow-seq-2 6s linear infinite; }
.hc-arch-link--3 .hc-arch-dot { animation: hc-flow-seq-3 6s linear infinite; }
@keyframes hc-flow-seq-1 { 0% { left: 0; opacity: 0; } 3% { opacity: 1; } 30% { opacity: 1; } 33.3% { left: calc(100% - 17px); opacity: 0; } 33.4%, 100% { left: 0; opacity: 0; } }
@keyframes hc-flow-seq-2 { 0%, 33.3% { left: 0; opacity: 0; } 36.3% { opacity: 1; } 63.3% { opacity: 1; } 66.6% { left: calc(100% - 17px); opacity: 0; } 66.7%, 100% { left: 0; opacity: 0; } }
@keyframes hc-flow-seq-3 { 0%, 66.6% { left: 0; opacity: 0; } 69.6% { opacity: 1; } 96.6% { opacity: 1; } 100% { left: calc(100% - 17px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hc-arch-dot, .hc-arch-link--1 .hc-arch-dot, .hc-arch-link--2 .hc-arch-dot, .hc-arch-link--3 .hc-arch-dot { animation: none; opacity: 1; left: calc(50% - 4.5px); } }
@media (max-width: 960px) {
    .hc-arch-link--1 .hc-arch-dot { animation-name: hc-flow-seq-v1; }
    .hc-arch-link--2 .hc-arch-dot { animation-name: hc-flow-seq-v2; }
    .hc-arch-link--3 .hc-arch-dot { animation-name: hc-flow-seq-v3; }
    @keyframes hc-flow-seq-v1 { 0% { top: 0; opacity: 0; } 3% { opacity: 1; } 30% { opacity: 1; } 33.3% { top: calc(100% - 17px); opacity: 0; } 33.4%, 100% { top: 0; opacity: 0; } }
    @keyframes hc-flow-seq-v2 { 0%, 33.3% { top: 0; opacity: 0; } 36.3% { opacity: 1; } 63.3% { opacity: 1; } 66.6% { top: calc(100% - 17px); opacity: 0; } 66.7%, 100% { top: 0; opacity: 0; } }
    @keyframes hc-flow-seq-v3 { 0%, 66.6% { top: 0; opacity: 0; } 69.6% { opacity: 1; } 96.6% { opacity: 1; } 100% { top: calc(100% - 17px); opacity: 0; } }
}

/* Avant / Apres (refonte reseau) : 3 transformations alignees, probleme -> solution */
.hc-ba { max-width: 980px; margin: 0 auto; }
.hc-ba-head, .hc-ba-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; }
.hc-ba-head { margin-bottom: var(--space-3); }
.hc-ba-tag { justify-self: start; padding: 5px 14px; border-radius: 999px; font-family: var(--pg-font-display); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.hc-ba-tag--before { background: #fdecea; color: #c0392b; }
.hc-ba-tag--after { background: #e6f7ee; color: #137a49; }
.hc-ba-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.hc-ba-card { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 16px 20px; border-radius: var(--hc-radius-md); font-size: .95rem; line-height: 1.4; font-weight: 600; }
.hc-ba-card svg { flex: none; width: 24px; height: 24px; }
.hc-ba-card--before { background: var(--hc-paper-alt); border: 1.5px dashed #e3b0aa; color: var(--hc-ink-soft); }
.hc-ba-card--before svg { color: #c0392b; }
.hc-ba-card--after { background: var(--hc-navy-900); color: #fff; box-shadow: var(--hc-shadow-md); border: 1.5px solid transparent; transition: transform .3s ease, box-shadow .3s ease; }
.hc-ba-card--after svg { color: #1fae6b; }
.hc-ba-card--after:hover { transform: translateY(-3px); box-shadow: var(--hc-shadow-lg); }
.hc-ba-arrow { justify-self: center; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--hc-signal-600); color: #fff; box-shadow: 0 0 0 5px rgba(0, 168, 201,.15); animation: hc-ba-nudge 2.4s ease-in-out infinite; }
.hc-ba-arrow svg { width: 20px; height: 20px; }
.hc-ba-row:nth-child(2) .hc-ba-arrow { animation-delay: .4s; } .hc-ba-row:nth-child(3) .hc-ba-arrow { animation-delay: .8s; }
@keyframes hc-ba-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .hc-ba-arrow { animation: none; } .hc-ba-card--after { transition: none; } .hc-ba-card--after:hover { transform: none; } }
@media (max-width: 760px) {
    .hc-ba-head { display: none; }
    .hc-ba-row { grid-template-columns: 1fr; gap: 8px; padding: 14px; background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); }
    .hc-ba-arrow { width: 34px; height: 34px; animation-name: hc-ba-nudge-v; }
    .hc-ba-arrow svg { transform: rotate(90deg); }
    .hc-ba-card { min-height: 0; padding: 14px 16px; }
    @keyframes hc-ba-nudge-v { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
}

/* Perimetre refonte : 4 etapes en cartes, reliees par un trait (ordre d'intervention) */
.hc-rp-grid { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); counter-reset: none; }
.hc-rp-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: var(--space-5); background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-top: 4px solid var(--hc-azure-500); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); transition: transform .3s ease, box-shadow .3s ease; }
.hc-rp-card:nth-child(n+3) { border-top-color: var(--hc-signal-600); }
.hc-rp-card:hover { transform: translateY(-4px); box-shadow: var(--hc-shadow-lg); }
.hc-rp-card:not(:last-child)::after { content: ""; position: absolute; top: 40px; right: calc(var(--space-4) * -1 - 1px); width: var(--space-4); height: 2px; background: var(--hc-line); }
.hc-rp-num { position: absolute; top: 14px; right: 16px; font-family: var(--pg-font-display); font-weight: 700; font-size: .8rem; color: var(--hc-ink-mute); }
.hc-rp-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--hc-azure-100); color: var(--hc-azure-500); margin-bottom: 4px; }
.hc-rp-card:nth-child(n+3) .hc-rp-ico { background: #e8f7fb; color: var(--hc-signal-600); }
.hc-rp-ico svg { width: 24px; height: 24px; }
.hc-rp-card h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.hc-rp-card p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--hc-ink-soft); }
.hc-rp-chips { list-style: none; margin: auto 0 0; padding: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hc-page .hc-rp-chips li { font-size: .74rem; font-weight: 600; color: var(--hc-ink-soft); background: var(--hc-paper); border-radius: 999px; padding: 4px 10px; }
@media (prefers-reduced-motion: reduce) { .hc-rp-card { transition: none; } .hc-rp-card:hover { transform: none; } }
@media (max-width: 1000px) { .hc-rp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hc-rp-card::after { display: none; } }
@media (max-width: 560px) { .hc-rp-grid { grid-template-columns: 1fr; } }

/* Creation reseau : plan de baie encadre + prestations regroupees en 3 blocs */
.hc-rack-plan { margin: 0; position: sticky; top: 96px; max-width: 340px; width: 100%; margin-inline: auto; background: #fff; border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); overflow: hidden; }
.hc-rack-plan img { display: block; width: 100%; height: auto; padding: 14px; box-sizing: border-box; }
.hc-rack-plan figcaption { padding: 10px 14px; background: var(--hc-paper); border-top: 1px solid var(--hc-line-soft); text-align: center; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hc-ink-mute); }
.hc-rack-group { background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-left: 4px solid var(--hc-azure-500); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); overflow: hidden; }
.hc-rack-group:nth-child(2) { border-left-color: var(--hc-signal-600); }
.hc-rack-group:nth-child(3) { border-left-color: var(--hc-success-500); }
.hc-rack-group header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--hc-paper); }
.hc-rack-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--hc-azure-100); color: var(--hc-azure-500); }
.hc-rack-ico svg { width: 20px; height: 20px; }
.hc-rack-group:nth-child(2) .hc-rack-ico { background: #e8f7fb; color: var(--hc-signal-600); }
.hc-rack-group:nth-child(3) .hc-rack-ico { background: #e6f7ee; color: var(--hc-success-500); }
.hc-rack-group h3 { margin: 0; flex: 1; font-size: 1rem; line-height: 1.3; }
.hc-rack-group ul { list-style: none; margin: 0; padding: 14px 18px 16px; display: grid; gap: 10px; }
.hc-rack-group li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.45; color: var(--hc-ink-soft); }
.hc-rack-group li svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--hc-success-500); }
@media (max-width: 900px) { .hc-rack-plan { position: static; max-width: 300px; } }

/* Creation reseau (v2) : une rangee plan + 3 blocs de prestations */
.hc-rack-row { display: grid; grid-template-columns: 200px repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; margin-top: var(--space-5); }
.hc-rack-row .hc-rack-plan { position: static; max-width: none; margin: 0; display: flex; flex-direction: column; }
.hc-rack-row .hc-rack-plan img { flex: 1; min-height: 0; object-fit: contain; }
.hc-rack-row .hc-rack-group { display: flex; flex-direction: column; border-left-width: 1px; border-top: 4px solid var(--hc-azure-500); }
.hc-rack-row .hc-rack-group:nth-of-type(2) { border-top-color: var(--hc-signal-600); }
.hc-rack-row .hc-rack-group:nth-of-type(3) { border-top-color: var(--hc-success-500); }
.hc-rack-row .hc-rack-group ul { flex: 1; }
@media (max-width: 1000px) { .hc-rack-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hc-rack-row .hc-rack-plan { grid-column: 1 / -1; max-width: 260px; margin-inline: auto; } }
@media (max-width: 600px) { .hc-rack-row { grid-template-columns: 1fr; } }
.hc-rack-row .hc-rack-group .hc-rack-ico { background: var(--hc-azure-100); color: var(--hc-azure-500); }
.hc-rack-row .hc-rack-group:nth-of-type(2) .hc-rack-ico { background: #e8f7fb; color: var(--hc-signal-600); }
.hc-rack-row .hc-rack-group:nth-of-type(3) .hc-rack-ico { background: #e6f7ee; color: var(--hc-success-500); }
.hc-rack-row .hc-rack-group, .hc-rack-row .hc-rack-group:nth-child(n) { border-left-color: var(--hc-line-soft); }

/* Telephonie : fonctionnalites par familles + cartes localisation avec photo */
.hc-fx-head { max-width: 720px; margin-bottom: var(--space-6); }
.hc-loc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.hc-loc-card { display: flex; flex-direction: column; background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.hc-loc-card:hover { transform: translateY(-4px); box-shadow: var(--hc-shadow-lg); }
.hc-loc-media { height: 150px; overflow: hidden; background: var(--hc-navy-900); }
.hc-loc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.hc-loc-card:hover .hc-loc-media img { transform: scale(1.06); }
.hc-loc-body { padding: var(--space-5); }
.hc-loc-body h3 { margin: 4px 0 8px; font-size: 1.1rem; }
.hc-loc-body p:not(.hc-eyebrow) { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--hc-ink-soft); }
@media (prefers-reduced-motion: reduce) {  .hc-loc-card, .hc-loc-media img { transition: none; }  .hc-loc-card:hover, .hc-loc-card:hover .hc-loc-media img { transform: none; } }
@media (max-width: 1000px) { .hc-loc-grid { grid-template-columns: 1fr; } .hc-fx-head { grid-template-columns: 1fr; } }

/* Page /hebergement/ : encadre cles en main, 3 cartes d'offres, tuiles de liens */
.hc-heb-lead { display: flex; align-items: flex-start; gap: var(--space-4); max-width: 880px; padding: var(--space-5) var(--space-6); background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-left: 4px solid var(--hc-signal-600); border-radius: 0 var(--hc-radius-md) var(--hc-radius-md) 0; box-shadow: var(--hc-shadow-md); }
.hc-heb-lead-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: #e8f7fb; color: var(--hc-signal-600); }
.hc-heb-lead-ico svg { width: 24px; height: 24px; }
.hc-heb-lead-tag { margin: 0 0 4px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hc-signal-600); }
.hc-heb-lead-text { margin: 0; color: var(--hc-ink-soft); line-height: 1.6; }
.hc-heb-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.hc-heb-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-top: 4px solid var(--hc-azure-500); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); transition: transform .3s ease, box-shadow .3s ease; }
.hc-heb-card:nth-child(2) { border-top-color: var(--hc-signal-600); }
.hc-heb-card:nth-child(3) { border-top-color: var(--hc-success-500); }
.hc-heb-card:hover { transform: translateY(-4px); box-shadow: var(--hc-shadow-lg); }
.hc-heb-card header { display: flex; align-items: center; justify-content: space-between; }
.hc-heb-ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--hc-azure-100); color: var(--hc-azure-500); }
.hc-heb-card:nth-child(2) .hc-heb-ico { background: #e8f7fb; color: var(--hc-signal-600); }
.hc-heb-card:nth-child(3) .hc-heb-ico { background: #e6f7ee; color: var(--hc-success-500); }
.hc-heb-ico svg { width: 26px; height: 26px; }
.hc-heb-num { font-family: var(--pg-font-display); font-weight: 700; font-size: .85rem; color: var(--hc-ink-mute); }
.hc-heb-card h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.hc-heb-text p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--hc-ink-soft); }
.hc-heb-text a { color: var(--hc-signal-600); font-weight: 600; }
.hc-heb-card .hc-evo-tags { margin-top: auto; padding-top: var(--space-2); }
.hc-page .hc-heb-card .hc-evo-tags li { font-size: .76rem; padding: 5px 11px; }
@media (prefers-reduced-motion: reduce) { .hc-heb-card { transition: none; } .hc-heb-card:hover { transform: none; } }
@media (max-width: 1000px) { .hc-heb-offers { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .hc-heb-lead { flex-direction: column; padding: var(--space-4); } .hc-heb-card { padding: var(--space-5); } }

/* Capture d'ecran en "fenetre de navigateur" : grande, lisible, cadree (au lieu d'une miniature recadree) */
.hc-shot-row { align-items: center; }
.hc-shot { margin: 0; width: 100%; background: var(--hc-card); border: 1px solid var(--hc-line); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-lg); overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; }
.hc-shot:hover { transform: translateY(-4px); }
.hc-shot-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--hc-paper-alt); border-bottom: 1px solid var(--hc-line-soft); }
.hc-shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d3d9e6; }
.hc-shot-bar i:nth-child(1) { background: #ff6b5e; } .hc-shot-bar i:nth-child(2) { background: #ffbd44; } .hc-shot-bar i:nth-child(3) { background: #3ecf72; }
.hc-shot-bar span { margin-left: 10px; flex: 1; padding: 3px 12px; border-radius: 999px; background: var(--hc-card); font-size: .7rem; color: var(--hc-ink-mute); }
.hc-shot img { display: block; width: 100%; height: auto; }
.hc-shot figcaption { padding: 10px 14px; border-top: 1px solid var(--hc-line-soft); background: var(--hc-paper); font-size: .78rem; font-weight: 600; color: var(--hc-ink-soft); }
@media (prefers-reduced-motion: reduce) { .hc-shot { transition: none; } .hc-shot:hover { transform: none; } }
@media (max-width: 900px) { .hc-shot { max-width: 560px; margin-inline: auto; } }

/* Illustrations "messagerie" creees pour le site (HTML/CSS, nettes a toute taille) : petites, dans la charte */

/* Captures de messagerie : taille moderee (lisibles sans etre envahissantes) */
.hc-shot { max-width: 400px; margin-inline: auto; }
@media (max-width: 900px) { .hc-shot { max-width: 400px; } }

/* Page /audit/ : definition + perimetre en tags, issue de l'audit, cartes par type, tuiles de securite */
.hc-aud-def { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.hc-aud-scope { padding: var(--space-5) var(--space-6); background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-top: 4px solid var(--hc-azure-500); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); }
.hc-aud-scope .hc-evo-tags li { font-size: .8rem; }
.hc-aud-out { margin-top: var(--space-5); padding: var(--space-5) var(--space-6); background: var(--hc-navy-900); color: #fff; border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-lg); }
.hc-aud-out-title { margin: 0 0 var(--space-4); font-family: var(--pg-font-display); font-weight: 700; font-size: 1.05rem; color: #fff; }
.hc-aud-out ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.hc-page .hc-aud-out li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-left: 3px solid var(--hc-signal-600); background: rgba(255,255,255,.06); border-radius: 0 10px 10px 0; }
.hc-aud-out li strong { font-size: .92rem; color: #fff; }
.hc-aud-out li span { font-size: .8rem; color: #c9d3e8; }
.hc-aud-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.hc-aud-type { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-left: 4px solid var(--hc-azure-500); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); transition: transform .3s ease, box-shadow .3s ease; }
.hc-aud-type:nth-child(even) { border-left-color: var(--hc-signal-600); }
.hc-aud-type:hover { transform: translateY(-4px); box-shadow: var(--hc-shadow-lg); }
.hc-aud-type header { display: flex; align-items: center; justify-content: space-between; }
.hc-aud-type-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--hc-azure-100); color: var(--hc-azure-500); }
.hc-aud-type:nth-child(even) .hc-aud-type-ico { background: #e8f7fb; color: var(--hc-signal-600); }
.hc-aud-type-ico svg { width: 24px; height: 24px; }
.hc-aud-type-num { font-family: var(--pg-font-display); font-weight: 700; font-size: .85rem; color: var(--hc-ink-mute); }
.hc-aud-type h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.hc-aud-type-text p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--hc-ink-soft); }
.hc-aud-type-text p + p { margin-top: 8px; }
.hc-aud-services { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.hc-page .hc-aud-services li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius-md); font-size: .9rem; line-height: 1.45; color: var(--hc-ink); transition: border-color .2s ease, transform .2s ease; }
.hc-aud-services li:hover { border-color: var(--hc-success-500); transform: translateY(-2px); }
.hc-aud-check { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #e6f7ee; color: var(--hc-success-500); }
.hc-aud-check svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .hc-aud-type, .hc-aud-services li { transition: none; } .hc-aud-type:hover, .hc-aud-services li:hover { transform: none; } }
@media (max-width: 1000px) { .hc-aud-def { grid-template-columns: 1fr; } .hc-aud-out ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hc-aud-types { grid-template-columns: 1fr; } .hc-aud-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hc-aud-out ul, .hc-aud-services { grid-template-columns: 1fr; } .hc-aud-type { padding: var(--space-5); } .hc-aud-scope, .hc-aud-out { padding: var(--space-4); } }

/* Cyber : chaine Exposition -> Controle -> Protection (horizontale) + bandeau Continuite PCA/PRA */
.hc-cy { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr); row-gap: var(--space-5); align-items: stretch; margin-top: var(--space-5); }
.hc-cy-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-top: 4px solid var(--cy, var(--hc-azure-500)); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); transition: transform .3s ease, box-shadow .3s ease; }
.hc-cy-card:hover { transform: translateY(-4px); box-shadow: var(--hc-shadow-lg); }
.hc-cy-card--risk { --cy: #c0392b; --cy-bg: #fdecea; }
.hc-cy-card--ctrl { --cy: var(--hc-signal-600); --cy-bg: #e8f7fb; }
.hc-cy-card--prot { --cy: var(--hc-success-500); --cy-bg: #e6f7ee; }
.hc-cy-card--n1 { grid-column: 1; } .hc-cy-card--n2 { grid-column: 3; } .hc-cy-card--n3 { grid-column: 5; }
.hc-cy-card header { display: flex; align-items: center; justify-content: space-between; }
.hc-cy-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--cy-bg); color: var(--cy); }
.hc-cy-ico svg { width: 24px; height: 24px; }
.hc-cy-num { font-family: var(--pg-font-display); font-weight: 700; font-size: .85rem; color: var(--hc-ink-mute); }
.hc-cy-card h3 { margin: 0; font-size: 1.15rem; color: var(--cy); }
.hc-cy-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hc-cy-card li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.4; color: var(--hc-ink); }
.hc-cy-card li svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--cy); }
.hc-cy-card--risk li svg { display: none; }
.hc-cy-card--risk li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: #c0392b; }
.hc-cy-link { position: relative; align-self: center; height: 24px; }
.hc-cy-link::before { content: ""; position: absolute; left: 0; right: 7px; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 2px; background: var(--hc-signal-600); }
.hc-cy-link::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-left: 10px solid var(--hc-signal-600); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.hc-cy-link--1 { grid-column: 2; } .hc-cy-link--2 { grid-column: 4; }
.hc-cy-link--1::before { background: linear-gradient(90deg, #c0392b, var(--hc-signal-600)); } .hc-cy-link--1::after { border-left-color: var(--hc-signal-600); }
.hc-cy-link--2::before { background: linear-gradient(90deg, var(--hc-signal-600), var(--hc-success-500)); } .hc-cy-link--2::after { border-left-color: var(--hc-success-500); }
.hc-cy-dot { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--hc-signal-600); opacity: 0; }
.hc-cy-link--1 .hc-cy-dot { animation: hc-flow-seq-1 6s linear infinite; }
.hc-cy-link--2 .hc-cy-dot { animation: hc-flow-seq-2 6s linear infinite; }
.hc-cy-core { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--space-4) var(--space-5); padding: var(--space-5) var(--space-6); background: var(--hc-navy-900); color: #fff; border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-lg); }
.hc-cy-core-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--hc-signal-600); color: #fff; }
.hc-cy-core-ico svg { width: 26px; height: 26px; }
.hc-cy-core-tag { margin: 0 0 2px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hc-brand-cyan-soft, #5ec4dc); }
.hc-cy-core h3 { margin: 0; font-size: 1.25rem; color: #fff; }
.hc-cy-core-text { margin: 0; font-size: .92rem; line-height: 1.55; color: #c9d3e8; }
@media (prefers-reduced-motion: reduce) { .hc-cy-card { transition: none; } .hc-cy-card:hover { transform: none; } .hc-cy-dot { animation: none !important; opacity: 1; left: calc(50% - 4.5px); } }
@media (max-width: 960px) {
    .hc-cy { display: flex; flex-direction: column; gap: 0; }
    .hc-cy-link { width: 24px; height: 40px; align-self: center; }
    .hc-cy-link::before { left: 50%; right: auto; top: 0; bottom: 7px; width: 3px; height: auto; transform: translateX(-50%); }
    .hc-cy-link::after { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid var(--hc-signal-600); border-bottom: 0; }
    .hc-cy-link--2::after { border-top-color: var(--hc-success-500); }
    .hc-cy-dot { left: 50%; top: 0; margin: 0 0 0 -4.5px; }
    .hc-cy-link--1 .hc-cy-dot { animation-name: hc-flow-seq-v1; } .hc-cy-link--2 .hc-cy-dot { animation-name: hc-flow-seq-v2; }
    .hc-cy-core { margin-top: var(--space-4); grid-template-columns: auto 1fr; padding: var(--space-4); }
    .hc-cy-core-text { grid-column: 1 / -1; }
}

/* Cyber : philosophie pragmatique = principe, causes d'incident, questions posees, mise en oeuvre */

/* Philosophie (v2) : bandeau causes en pastilles + questions sur 2 colonnes, plus compact */

/* Philosophie cyber (v4) : intro + questions en 2 cols, mise en œuvre pleine largeur */
.hc-ph2 {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(28px, 4vw, 48px) clamp(32px, 5vw, 64px);
    align-items: start;
}
/* Contenu Studio combiné : empiler intro puis bloc questions+impl en pleine largeur */
.hc-ph2--stacked { grid-template-columns: 1fr; }
.hc-ph2--stacked .hc-ph2-intro { max-width: 40rem; }
.hc-ph2-questions {
    padding: var(--space-5) var(--space-6);
    background: var(--hc-paper);
    border: 1px solid var(--hc-line-soft);
    border-radius: var(--hc-radius-md);
    border-left: 3px solid var(--hc-signal-600);
}
.hc-ph2-lead { margin: var(--space-4) 0 0; font-size: 1.05rem; line-height: 1.75; color: var(--hc-ink-soft); max-width: 38rem; }
.hc-ph2-causes { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--hc-line-soft); font-size: .95rem; line-height: 1.7; color: var(--hc-ink-soft); }
.hc-ph2-causes > span:first-child {
    display: block;
    margin-bottom: 12px;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--hc-ink-mute);
}
.hc-ph2-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hc-page .hc-ph2-chips li {
    padding: 8px 14px;
    background: #fdecea;
    border-radius: var(--hc-radius-sm);
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.35;
    color: #8f2b20;
}
.hc-ph2-label { margin: 0 0 var(--space-4); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hc-signal-600); }
.hc-ph2-questions ol,
.hc-ph2-ask ol { list-style: none; margin: 0; padding: 0; counter-reset: q; display: grid; gap: 0; }
.hc-page .hc-ph2-questions li,
.hc-page .hc-ph2-ask > ol > li,
.hc-page .hc-ph2-ask .hc-ph2-questions li {
    counter-increment: q;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--hc-line-soft);
    font-size: .95rem;
    line-height: 1.45;
    color: var(--hc-ink);
}
.hc-ph2-questions li::before,
.hc-ph2-ask > ol > li::before,
.hc-ph2-ask .hc-ph2-questions li::before {
    content: counter(q, decimal-leading-zero);
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--hc-signal-600);
    background: #e8f7fb;
    margin-top: 0;
}
.hc-ph2-questions li:last-child,
.hc-ph2-ask > ol > li:last-child { border-bottom: 0; padding-bottom: 0; }
.hc-ph2-questions li:first-child,
.hc-ph2-ask > ol > li:first-child { padding-top: 0; }
.hc-ph2-impl {
    grid-column: 1 / -1;
    margin-top: clamp(8px, 1.5vw, 16px);
    padding: clamp(24px, 3vw, 36px);
    background: linear-gradient(180deg, var(--hc-paper) 0%, #fff 100%);
    border: 1px solid var(--hc-line-soft);
    border-radius: var(--hc-radius-md);
}
.hc-ph2-impl > .hc-ph2-label { margin-bottom: var(--space-5); }
@media (max-width: 900px) {
    .hc-ph2 { grid-template-columns: 1fr; }
    .hc-ph2-questions { order: 2; }
    .hc-ph2-impl { order: 3; }
}
@media (max-width: 600px) {
    .hc-ph2-questions { padding: var(--space-4); }
    .hc-ph2-impl { padding: var(--space-4); }
    .hc-page .hc-ph2-questions li { font-size: .9rem; padding: 10px 0; }
}

/* Mise en oeuvre concrete (cyber) : 3 panneaux sobres, pleine largeur */
.hc-impl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: 0; }
.hc-impl-col {
    padding: var(--space-5);
    background: var(--hc-card, #fff);
    border: 1px solid var(--hc-line-soft);
    border-radius: var(--hc-radius-sm);
    border-top: 3px solid var(--hc-signal-600);
    box-shadow: var(--hc-shadow-md);
}
.hc-impl-col h4 { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--space-4); font-size: 1.02rem; line-height: 1.3; color: var(--hc-ink); }
.hc-impl-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #e8f7fb; color: var(--hc-signal-600); }
.hc-impl-ico svg { width: 20px; height: 20px; }
.hc-impl-col ul { list-style: none; margin: 0; padding: 0; }
.hc-page .hc-impl-col li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hc-line-soft); font-size: .95rem; line-height: 1.45; color: var(--hc-ink-soft); }
.hc-impl-col li:last-child { border-bottom: 0; padding-bottom: 0; }
.hc-impl-col li:first-child { padding-top: 0; }
.hc-impl-chk { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--hc-signal-600); }
@media (max-width: 900px) { .hc-impl-grid { grid-template-columns: 1fr; gap: var(--space-3); } }

/* Cyber : ransomware / expertise / locale - style sobre (listes a filets fins, une couleur d'accent) */
.hc-cs-head { max-width: 760px; margin-bottom: var(--space-6); }
.hc-cs-head h2 { margin-top: 4px; }
.hc-cs-lead { margin: var(--space-3) 0 0; font-size: 1.05rem; line-height: 1.7; color: var(--hc-ink-soft); }
.hc-corp-section--navy .hc-cs-lead { color: #c9d3e8; }
.hc-cs-label { margin: 0 0 var(--space-3); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hc-signal-600); }
.hc-corp-section--navy .hc-cs-label { color: var(--hc-brand-cyan-soft, #5ec4dc); }

/* Cyber (v4) : schema causes -> reprise, frise de demarche, cartes/tuiles, schema de zone locale */
.hc-rw { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.hc-rw-col { align-self: stretch; }
.hc-rw-causes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hc-page .hc-rw-causes li { display: flex; align-items: flex-start; gap: 10px; padding: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--hc-radius-sm); font-size: .92rem; line-height: 1.4; color: #fff; }
.hc-rw-causes li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--hc-brand-cyan-soft, #5ec4dc); }
.hc-rw-arrow { display: grid; place-items: center; width: 44px; height: 44px; margin-inline: auto; border-radius: 50%; background: var(--hc-signal-600); color: #fff; box-shadow: 0 0 0 6px rgba(0, 168, 201,.2); }
.hc-rw-arrow svg { width: 22px; height: 22px; }
.hc-rw-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hc-page .hc-rw-tiles li { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #fff; border-radius: var(--hc-radius-sm); box-shadow: var(--hc-shadow-md); }
.hc-rw-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #e6f7ee; color: var(--hc-success-500); }
.hc-rw-ico svg { width: 21px; height: 21px; }
.hc-rw-tiles strong { font-size: .92rem; line-height: 1.3; color: var(--hc-navy-900); }
.hc-rw-note { margin: var(--space-5) 0 0; max-width: 860px; font-size: .95rem; line-height: 1.65; color: #c9d3e8; }
.hc-tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; position: relative; }
.hc-tl::before { content: ""; position: absolute; left: 8%; right: 8%; top: 17px; height: 2px; background: var(--hc-line); }
.hc-page .hc-tl li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 8px; text-align: center; }
.hc-tl li span { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--hc-signal-600); color: #fff; font-weight: 700; font-size: .85rem; box-shadow: 0 0 0 5px var(--hc-card, #fff); }
.hc-tl li p { margin: 0; font-size: .88rem; line-height: 1.4; color: var(--hc-ink); }
.hc-ex-gap { margin-top: var(--space-6); }
.hc-ex-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.hc-page .hc-ex-cards li { display: flex; flex-direction: column; gap: 12px; padding: var(--space-5); background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); transition: transform .3s ease; }
.hc-ex-cards li:hover { transform: translateY(-3px); }
.hc-ex-ico { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--hc-azure-100); color: var(--hc-azure-500); }
.hc-ex-ico svg { width: 22px; height: 22px; }
.hc-ex-cards strong { font-size: .95rem; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .hc-ex-cards li { transition: none; } .hc-ex-cards li:hover { transform: none; } }
@media (max-width: 960px) {
    .hc-rw { grid-template-columns: 1fr; gap: var(--space-4); }
    .hc-rw-arrow svg { transform: rotate(90deg); }
    .hc-tl { grid-template-columns: 1fr; gap: var(--space-3); }
    .hc-tl::before { left: 17px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
    .hc-tl li { flex-direction: row; align-items: center; text-align: left; padding: 0; }
    .hc-ex-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .hc-rw-causes, .hc-rw-tiles { grid-template-columns: 1fr; } .hc-ex-cards { grid-template-columns: 1fr; } }

/* ===== Cyber (v5) : plus de pep (apparitions en cascade, trait qui se dessine, carte animee) + marges regulieres ===== */
/* Rythme vertical commun */
.hc-cs-head { margin-bottom: clamp(32px, 5vw, 56px); }
.hc-cs-label { margin-bottom: var(--space-4, 16px); }
.hc-ex-gap { margin-top: clamp(48px, 6vw, 72px); }
.hc-rw { margin-top: 0; gap: var(--space-4, 16px); }
.hc-rw-note { margin-top: clamp(28px, 4vw, 44px); padding-top: var(--space-4, 16px); border-top: 1px solid rgba(255,255,255,.14); }
.hc-corp-section .hc-cs-head + .hc-cs-label, .hc-cs-head + .hc-tl { margin-top: 0; }

/* Cascade d'apparition (declenchee par .hc-in-view pose sur le bloc parent) */
@keyframes hc-pop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hc-slide-l { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes hc-slide-r { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
.hc-in-view .hc-rw-causes li { animation: hc-slide-l .6s cubic-bezier(.2,.8,.2,1) both; }
.hc-in-view .hc-rw-tiles li { animation: hc-slide-r .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: .5s; }
.hc-tl.hc-in-view li, .hc-ex-cards.hc-in-view li { animation: hc-pop .6s cubic-bezier(.2,.8,.2,1) both; }
.hc-rw-causes li:nth-child(1), .hc-tl.hc-in-view li:nth-child(1), .hc-ex-cards.hc-in-view li:nth-child(1) { animation-delay: 0.05s; }
.hc-rw-causes li:nth-child(2), .hc-tl.hc-in-view li:nth-child(2), .hc-ex-cards.hc-in-view li:nth-child(2) { animation-delay: 0.13s; }
.hc-rw-causes li:nth-child(3), .hc-tl.hc-in-view li:nth-child(3), .hc-ex-cards.hc-in-view li:nth-child(3) { animation-delay: 0.21s; }
.hc-rw-causes li:nth-child(4), .hc-tl.hc-in-view li:nth-child(4), .hc-ex-cards.hc-in-view li:nth-child(4) { animation-delay: 0.29s; }
.hc-rw-causes li:nth-child(5), .hc-tl.hc-in-view li:nth-child(5), .hc-ex-cards.hc-in-view li:nth-child(5) { animation-delay: 0.37s; }
.hc-rw-causes li:nth-child(6), .hc-tl.hc-in-view li:nth-child(6), .hc-ex-cards.hc-in-view li:nth-child(6) { animation-delay: 0.45s; }
.hc-rw-causes li:nth-child(7), .hc-tl.hc-in-view li:nth-child(7), .hc-ex-cards.hc-in-view li:nth-child(7) { animation-delay: 0.53s; }
.hc-rw-causes li:nth-child(8), .hc-tl.hc-in-view li:nth-child(8), .hc-ex-cards.hc-in-view li:nth-child(8) { animation-delay: 0.61s; }
.hc-rw-causes li:nth-child(9), .hc-tl.hc-in-view li:nth-child(9), .hc-ex-cards.hc-in-view li:nth-child(9) { animation-delay: 0.69s; }
.hc-rw-causes li:nth-child(10), .hc-tl.hc-in-view li:nth-child(10), .hc-ex-cards.hc-in-view li:nth-child(10) { animation-delay: 0.77s; }
.hc-rw-causes li:nth-child(11), .hc-tl.hc-in-view li:nth-child(11), .hc-ex-cards.hc-in-view li:nth-child(11) { animation-delay: 0.85s; }
.hc-rw-causes li:nth-child(12), .hc-tl.hc-in-view li:nth-child(12), .hc-ex-cards.hc-in-view li:nth-child(12) { animation-delay: 0.93s; }
.hc-rw-causes li:nth-child(13), .hc-tl.hc-in-view li:nth-child(13), .hc-ex-cards.hc-in-view li:nth-child(13) { animation-delay: 1.01s; }
.hc-rw-causes li:nth-child(14), .hc-tl.hc-in-view li:nth-child(14), .hc-ex-cards.hc-in-view li:nth-child(14) { animation-delay: 1.09s; }
.hc-rw-tiles li:nth-child(1) { animation-delay: .55s; } .hc-rw-tiles li:nth-child(2) { animation-delay: .65s; } .hc-rw-tiles li:nth-child(3) { animation-delay: .75s; } .hc-rw-tiles li:nth-child(4) { animation-delay: .85s; }

/* Ransomware : fleche vivante, icones qui pulsent, halo sur fond marine */
.hc-corp-section--navy { position: relative; overflow: hidden; }
.hc-corp-section--navy::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 520px; height: 520px; background: radial-gradient(circle, rgba(0, 168, 201,.18), transparent 65%); pointer-events: none; }
.hc-corp-section--navy > .hc-sc { position: relative; z-index: 1; }
.hc-rw-arrow { animation: hc-arrow-go 1.8s ease-in-out infinite; }
@keyframes hc-arrow-go { 0%, 100% { transform: translateX(0); box-shadow: 0 0 0 6px rgba(0, 168, 201,.2); } 50% { transform: translateX(6px); box-shadow: 0 0 0 12px rgba(0, 168, 201,0); } }
.hc-rw-causes li svg { animation: hc-warn 2.4s ease-in-out infinite; }
@keyframes hc-warn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.hc-rw-causes li { transition: background .25s ease, transform .25s ease; }
.hc-rw-causes li:hover { background: rgba(255,255,255,.12); }
.hc-rw-tiles li { transition: transform .25s ease, box-shadow .25s ease; }
.hc-rw-tiles li:hover { transform: translateY(-5px); box-shadow: var(--hc-shadow-lg); }
.hc-rw-tiles li { border-bottom: 3px solid var(--hc-success-500); }

/* Expertise : trait de la frise qui se dessine, pastilles en degrade, cartes colorees */
.hc-tl::before { transform-origin: left center; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.3,.7,.2,1) .2s; }
.hc-tl.hc-in-view::before { transform: scaleX(1); }
.hc-tl li span { background: linear-gradient(135deg, var(--hc-signal-600), var(--hc-brand-cyan-soft, #5ec4dc)); }
.hc-tl li:hover span { transform: scale(1.12); transition: transform .2s ease; }
.hc-ex-cards li { border-top: 3px solid var(--hc-azure-500); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.hc-ex-cards li:nth-child(even) { border-top-color: var(--hc-signal-600); }
.hc-ex-cards li:nth-child(even) .hc-ex-ico { background: #e8f7fb; color: var(--hc-signal-600); }
.hc-ex-cards li:hover { box-shadow: var(--hc-shadow-lg); }

/* Locale : carte animee (traits qui se tracent, villes qui apparaissent, anneau qui defile) */

@media (prefers-reduced-motion: reduce) {
    .hc-rw-arrow, .hc-rw-causes li svg { animation: none; }
    .hc-tl::before { transform: none; transition: none; }
}
@media (max-width: 960px) { .hc-tl::before { transform: scaleY(0); transform-origin: top; } .hc-tl.hc-in-view::before { transform: scaleY(1); } .hc-rw-arrow { animation-name: hc-arrow-down; } @keyframes hc-arrow-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } }
@media (max-width: 960px) {
    .hc-in-view .hc-rw-causes li, .hc-in-view .hc-rw-tiles li { animation-name: hc-pop; }
}

/* Perimetre : 3 bandeaux de mots qui defilent en continu, sens opposes (pause au survol) */
.hc-mq { display: grid; gap: 14px; margin-top: var(--space-4, 16px); overflow: hidden; padding: 6px 0; }
.hc-mq-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.hc-mq-belt { display: flex; gap: 14px; width: max-content; animation: hc-mq-run 38s linear infinite; }
.hc-mq-row--2 .hc-mq-belt { animation-direction: reverse; animation-duration: 46s; }
.hc-mq-row--3 .hc-mq-belt { animation-duration: 42s; }
.hc-mq:hover .hc-mq-belt { animation-play-state: paused; }
.hc-mq-belt span { flex: none; display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; border-radius: 999px; font-family: var(--pg-font-display); font-size: 1.05rem; font-weight: 700; line-height: 1; white-space: nowrap; color: var(--hc-ink); background: var(--hc-card); border: 1.5px solid var(--hc-line); box-shadow: var(--hc-shadow-md); transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.hc-mq-belt span::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--hc-signal-600); }
.hc-mq-row--2 .hc-mq-belt span { background: var(--hc-navy-900); border-color: var(--hc-navy-900); color: #fff; }
.hc-mq-row--2 .hc-mq-belt span::before { background: var(--hc-brand-cyan-soft, #5ec4dc); }
.hc-mq-row--3 .hc-mq-belt span::before { background: var(--hc-azure-500); }
.hc-mq-belt span:hover { transform: translateY(-3px) scale(1.04); background: var(--hc-signal-600); border-color: var(--hc-signal-600); color: #fff; }
.hc-mq-belt span:hover::before { background: #fff; }
@keyframes hc-mq-run { to { transform: translateX(-33.3333%); } }
.hc-mq-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hc-mq-sr li { padding: 0; }
@media (max-width: 600px) { .hc-mq { gap: 10px; } .hc-mq-belt { gap: 10px; } .hc-mq-belt span { padding: 11px 20px; font-size: .92rem; } }
@media (prefers-reduced-motion: reduce) { .hc-mq-belt { animation: none; } .hc-mq-row { -webkit-mask-image: none; mask-image: none; overflow-x: auto; } }

/* Cybersecurite locale : grille de tuiles (7 contraintes + zone d'intervention) */
.hc-bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4, 16px); }
.hc-page .hc-bento > li { padding: 0; }
.hc-bento-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4, 16px); min-height: 150px; padding: var(--space-5, 24px); background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.hc-page .hc-bento > .hc-bento-tile { padding: var(--space-5, 24px); }
.hc-bento-tile::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--hc-signal-600), var(--hc-brand-cyan-soft, #5ec4dc)); transition: width .4s ease; }
.hc-bento-tile:hover { transform: translateY(-4px); box-shadow: var(--hc-shadow-lg); border-color: var(--hc-line); }
.hc-bento-tile:hover::after { width: 100%; }
.hc-bento-num { position: absolute; top: 16px; right: 20px; font-family: var(--pg-font-display); font-weight: 700; font-size: .85rem; color: var(--hc-ink-mute); }
.hc-bento-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--hc-azure-100); color: var(--hc-azure-500); transition: background .3s ease, color .3s ease, transform .3s ease; }
.hc-bento-tile:nth-child(even) .hc-bento-ico { background: #e8f7fb; color: var(--hc-signal-600); }
.hc-bento-tile:hover .hc-bento-ico { transform: rotate(-6deg) scale(1.08); }
.hc-bento-ico svg { width: 24px; height: 24px; }
.hc-bento-tile p { margin: 0; font-family: var(--pg-font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--hc-ink); }
.hc-bento-zone { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; gap: var(--space-3, 12px); padding: var(--space-5, 24px) var(--space-6, 32px); background: linear-gradient(135deg, var(--hc-navy-900), #1a2d5c); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-lg); color: #fff; position: relative; overflow: hidden; }
.hc-page .hc-bento > .hc-bento-zone { padding: var(--space-5, 24px) var(--space-6, 32px); }
.hc-bento-zone::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 168, 201,.35), transparent 70%); pointer-events: none; }
.hc-bento-zone-tag { margin: 0; position: relative; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hc-brand-cyan-soft, #5ec4dc); }
.hc-bento-cities { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.hc-page .hc-bento-cities li { padding: 7px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; font-size: .9rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.06); transition: background .2s ease, transform .2s ease; }
.hc-page .hc-bento-cities li:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.hc-page .hc-bento-cities li.is-main { background: var(--hc-signal-600); border-color: var(--hc-signal-600); animation: hc-city-pulse 2.6s ease-out infinite; }
@keyframes hc-city-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 168, 201,.55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(0, 168, 201,0); } }
.hc-bento-zone-far { margin: 0; position: relative; font-size: .9rem; color: #c9d3e8; }
/* Apparition en cascade */
:is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-bento > li { opacity: 0; }
.hc-bento.hc-in-view > li { animation: hc-pop .6s cubic-bezier(.2,.8,.2,1) both; }
.hc-bento.hc-in-view > li:nth-child(1) { animation-delay: .05s; } .hc-bento.hc-in-view > li:nth-child(2) { animation-delay: .13s; } .hc-bento.hc-in-view > li:nth-child(3) { animation-delay: .21s; }
.hc-bento.hc-in-view > li:nth-child(4) { animation-delay: .29s; } .hc-bento.hc-in-view > li:nth-child(5) { animation-delay: .37s; } .hc-bento.hc-in-view > li:nth-child(6) { animation-delay: .45s; }
.hc-bento.hc-in-view > li:nth-child(7) { animation-delay: .53s; } .hc-bento.hc-in-view > li:nth-child(8) { animation-delay: .65s; }
@media (prefers-reduced-motion: reduce) { :is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-bento > li { opacity: 1; animation: none !important; } .hc-bento-tile, .hc-bento-ico { transition: none; } .hc-bento-cities li.is-main { animation: none !important; } }
@media (max-width: 900px) { .hc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hc-bento-zone { grid-column: 1 / -1; } }
@media (max-width: 520px) { .hc-bento { grid-template-columns: 1fr; } .hc-bento-tile { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; } .hc-bento-num { display: none; } .hc-bento-zone { padding: var(--space-4, 16px); } }

/* Cascade generique : les enfants directs apparaissent l'un apres l'autre quand le bloc entre dans l'ecran */
:is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-cascade > * { opacity: 0; }
.hc-cascade.hc-in-view > * { animation: hc-pop .6s cubic-bezier(.2,.8,.2,1) both; }
.hc-cascade.hc-in-view > *:nth-child(1) { animation-delay: .05s; } .hc-cascade.hc-in-view > *:nth-child(2) { animation-delay: .15s; } .hc-cascade.hc-in-view > *:nth-child(3) { animation-delay: .25s; }
.hc-cascade.hc-in-view > *:nth-child(4) { animation-delay: .35s; } .hc-cascade.hc-in-view > *:nth-child(5) { animation-delay: .45s; } .hc-cascade.hc-in-view > *:nth-child(6) { animation-delay: .55s; }
@media (prefers-reduced-motion: reduce) { :is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-cascade > * { opacity: 1; animation: none !important; } }

/* RGPD */
.hc-rg-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--hc-azure-100); color: var(--hc-azure-500); transition: transform .3s ease; }
.hc-rg-ico svg { width: 24px; height: 24px; }
.hc-rg-cards, .hc-rg-steps, .hc-rg-tiles { list-style: none; margin: 0; padding: 0; }
.hc-rg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-5, 24px); }
.hc-page .hc-rg-cards > li { padding: var(--space-5, 24px); }
.hc-rg-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4, 16px); min-height: 170px; background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-top: 4px solid var(--hc-azure-500); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); transition: transform .3s ease, box-shadow .3s ease; }
.hc-rg-card:nth-child(even) { border-top-color: var(--hc-signal-600); }
.hc-rg-card:nth-child(even) .hc-rg-ico { background: #e8f7fb; color: var(--hc-signal-600); }
.hc-rg-card:hover { transform: translateY(-4px); box-shadow: var(--hc-shadow-lg); }
.hc-rg-card:hover .hc-rg-ico { transform: rotate(-6deg) scale(1.08); }
.hc-rg-num { position: absolute; top: 18px; right: 20px; font-family: var(--pg-font-display); font-weight: 700; font-size: .85rem; color: var(--hc-ink-mute); }
.hc-rg-card p { margin: 0; font-family: var(--pg-font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.35; color: var(--hc-ink); }
.hc-rg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5, 24px) var(--space-4, 16px); margin-top: var(--space-5, 24px); counter-reset: none; }
.hc-page .hc-rg-steps > li { padding: var(--space-5, 24px); }
.hc-rg-step { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-md); transition: transform .3s ease, box-shadow .3s ease; }
.hc-rg-step:hover { transform: translateY(-4px); box-shadow: var(--hc-shadow-lg); }
.hc-rg-step:not(:nth-child(3n))::after { content: "→"; position: absolute; right: -16px; top: 50%; transform: translate(50%, -50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--hc-signal-600); color: #fff; font-weight: 700; font-size: .85rem; z-index: 2; }
.hc-rg-step-head { display: flex; align-items: center; justify-content: space-between; }
.hc-rg-step-num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--hc-signal-600), var(--hc-brand-cyan-soft, #5ec4dc)); color: #fff; font-family: var(--pg-font-display); font-weight: 700; }
.hc-rg-step h3 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.hc-rg-step-text p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--hc-ink-soft); }
.hc-rg-sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.hc-rg-sec-text { margin: var(--space-3, 12px) 0 0; font-size: 1.05rem; line-height: 1.65; color: var(--hc-ink-soft); }
.hc-rg-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3, 12px); }
.hc-page .hc-rg-tiles > li { padding: 14px 16px; }
.hc-rg-tile { display: flex; align-items: center; gap: 14px; background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius-sm); font-weight: 600; font-size: .95rem; line-height: 1.35; color: var(--hc-ink); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.hc-rg-tile .hc-rg-ico { width: 40px; height: 40px; background: #e6f7ee; color: var(--hc-success-500); }
.hc-rg-tile:hover { transform: translateX(4px); border-color: var(--hc-success-500); box-shadow: var(--hc-shadow-md); }
.hc-rg-tile:hover .hc-rg-ico { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) { .hc-rg-card, .hc-rg-step, .hc-rg-tile, .hc-rg-ico { transition: none; } .hc-rg-card:hover, .hc-rg-step:hover, .hc-rg-tile:hover { transform: none; } }
@media (max-width: 960px) { .hc-rg-cards, .hc-rg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hc-rg-step::after { display: none; } .hc-rg-sec { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .hc-rg-cards, .hc-rg-steps, .hc-rg-tiles { grid-template-columns: 1fr; } .hc-rg-card { min-height: 0; } }

/* RGPD etapes : espace de 44 px entre colonnes, fleche centree dans cet espace (aucun debordement sur les cartes) */
.hc-rg-steps { column-gap: 44px; }
.hc-rg-step:not(:nth-child(3n))::after { right: -22px; top: 50%; transform: translate(50%, -50%); width: 30px; height: 30px; font-size: 1rem; box-shadow: 0 0 0 5px var(--hc-paper, #f4f6fb); animation: hc-rg-nudge 2s ease-in-out infinite; }
@keyframes hc-rg-nudge { 0%, 100% { transform: translate(50%, -50%); } 50% { transform: translate(calc(50% + 4px), -50%); } }
.hc-rg-step:hover::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hc-rg-step::after { animation: none !important; } }
@media (max-width: 960px) { .hc-rg-steps { column-gap: var(--space-4, 16px); } .hc-rg-step::after { display: none !important; } }

/* Page DSI externalisee : typographie, frises, comparaison, listes a filets (peu de cartes) */
.hc-ds-label { margin: 0 0 var(--space-3, 12px); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hc-signal-600); }
.hc-ds-sub { margin: 0 0 var(--space-4, 16px); font-size: 1rem; line-height: 1.65; color: var(--hc-ink-soft); }
.hc-ds-big { margin: var(--space-4, 16px) 0 0; font-family: var(--pg-font-display); font-size: clamp(1.15rem, 2.1vw, 1.5rem); font-weight: 600; line-height: 1.5; color: var(--hc-ink); }
.hc-ds-big em { font-style: normal; color: var(--hc-signal-600); border-bottom: 3px solid rgba(0, 168, 201,.3); }
.hc-ds-def { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
/* frise verticale des situations */
.hc-ds-line { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; }
.hc-ds-line::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--hc-signal-600), var(--hc-azure-500)); }
.hc-page .hc-ds-line > li { position: relative; padding: 9px 0; font-size: 1rem; font-weight: 600; color: var(--hc-ink); }
.hc-ds-line li::before { content: ""; position: absolute; left: -28px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--hc-card); border: 3px solid var(--hc-signal-600); transition: background .2s ease, transform .2s ease; }
.hc-ds-line li:hover::before { background: var(--hc-signal-600); transform: scale(1.2); }
/* comparaison DSI != infogerance */
.hc-ds-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; margin-top: clamp(40px, 6vw, 64px); border-radius: var(--hc-radius-md); overflow: hidden; box-shadow: var(--hc-shadow-md); }
.hc-ds-vs-a { padding: var(--space-5, 24px) var(--space-6, 32px); background: var(--hc-navy-900); color: #fff; }
.hc-ds-vs-b { padding: var(--space-5, 24px) var(--space-6, 32px); background: var(--hc-card); border: 1px solid var(--hc-line-soft); border-left: 0; }
.hc-ds-vs-sep { display: grid; place-items: center; width: 56px; background: var(--hc-signal-600); color: #fff; font-size: 1.6rem; font-weight: 700; }
.hc-ds-vs-tag { margin: 0 0 4px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hc-brand-cyan-soft, #5ec4dc); }
.hc-ds-vs-b .hc-ds-vs-tag { color: var(--hc-ink-mute); }
.hc-ds-vs-title { margin: 0; font-family: var(--pg-font-display); font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.hc-ds-vs-links { margin: 10px 0 0; font-size: .9rem; color: var(--hc-ink-mute); }
.hc-ds-vs-links a { font-weight: 600; color: var(--hc-signal-600); }
.hc-ds-local { margin: var(--space-4, 16px) 0 0; font-size: .95rem; color: var(--hc-ink-soft); }
.hc-ds-local a { font-weight: 600; color: var(--hc-signal-600); }
/* sujets en grande typographie */
/* apports en frise horizontale */
/* au quotidien */
.hc-ds-day { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.hc-ds-day-pin { position: sticky; top: 100px; }
.hc-ds-day-body { display: grid; gap: clamp(36px, 5vw, 56px); }
.hc-ds-duties { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--space-6, 32px); }
.hc-page .hc-ds-duties > li { break-inside: avoid; padding: 11px 0 11px 26px; border-bottom: 1px solid var(--hc-line-soft); position: relative; font-weight: 600; color: var(--hc-ink); }
.hc-ds-duties li::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 3px; background: var(--hc-signal-600); transform: rotate(45deg) scale(.7); }
.hc-ds-note { margin: var(--space-3, 12px) 0 0; font-size: .92rem; color: var(--hc-ink-mute); }
.hc-ds-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hc-page .hc-ds-tags > li { padding: 8px 16px; border: 1.5px solid var(--hc-line); border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--hc-ink); background: var(--hc-card); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.hc-ds-tags li:hover { background: var(--hc-signal-600); border-color: var(--hc-signal-600); color: #fff; }
.hc-ds-crit { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hc-page .hc-ds-crit > li { display: flex; align-items: center; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--hc-line-soft); }
.hc-ds-crit li span { flex: none; width: 56px; font-family: var(--pg-font-display); font-size: 2.4rem; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--hc-signal-600); }
.hc-ds-crit li p { margin: 0; font-family: var(--pg-font-display); font-size: 1.1rem; font-weight: 600; line-height: 1.35; color: var(--hc-ink); }
/* liens */
@media (prefers-reduced-motion: reduce) {  .hc-ds-line li::before { transition: none; } }
@media (max-width: 960px) {
    .hc-ds-def, .hc-ds-day { grid-template-columns: 1fr; }
    .hc-ds-day-pin { position: static; }
    .hc-ds-vs { grid-template-columns: 1fr; }
    .hc-ds-vs-sep { width: auto; height: 40px; }
    .hc-ds-vs-b { border-left: 1px solid var(--hc-line-soft); border-top: 0; }
}
@media (max-width: 640px) { .hc-ds-duties { columns: 1; } .hc-ds-vs-a, .hc-ds-vs-b { padding: var(--space-4, 16px); } .hc-ds-crit li span { width: 44px; font-size: 2rem; } }

/* DSI v2 : sujets plus petits ; "Au quotidien" en 3 colonnes horizontales separees par des filets */
.hc-ds-day { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px); }
.hc-ds-day-pin { position: static; max-width: 760px; }
.hc-ds-day-body { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: start; }
.hc-ds-day-body > div { padding: 0 clamp(18px, 2.6vw, 36px); border-left: 1px solid var(--hc-line); }
.hc-ds-day-body > div:first-child { padding-left: 0; border-left: 0; }
.hc-ds-day-body > div:last-child { padding-right: 0; }
.hc-ds-day-body .hc-ds-label { min-height: 2.6em; }
.hc-ds-day-body .hc-ds-sub { font-size: .92rem; line-height: 1.55; margin-bottom: var(--space-3, 12px); }
.hc-ds-duties { columns: 1; }
.hc-page .hc-ds-duties > li { padding-top: 9px; padding-bottom: 9px; font-size: .92rem; }
.hc-ds-day-body .hc-ds-tags { gap: 6px; }
.hc-page .hc-ds-day-body .hc-ds-tags > li { padding: 6px 12px; font-size: .8rem; }
.hc-page .hc-ds-crit > li { gap: 14px; padding: 11px 0; }
.hc-ds-crit li span { width: 40px; font-size: 1.9rem; }
.hc-ds-crit li p { font-size: .98rem; }
@media (max-width: 960px) {
    .hc-ds-day-body { grid-template-columns: 1fr; gap: var(--space-6, 32px); }
    .hc-ds-day-body > div { padding: var(--space-5, 24px) 0 0; border-left: 0; border-top: 1px solid var(--hc-line); }
    .hc-ds-day-body > div:first-child { padding-top: 0; border-top: 0; }
    .hc-ds-day-body .hc-ds-label { min-height: 0; }
}

/* DSI v3 : "Pourquoi externaliser" = echelle de maturite + deux listes sobres cote a cote */
.hc-ds-scale { margin: clamp(28px, 4vw, 44px) 0 clamp(36px, 5vw, 56px); }
.hc-ds-scale-bar { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #c9d3e8 0%, var(--hc-signal-600) 50%, var(--hc-navy-900) 100%); }
.hc-ds-scale-mark { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #fff; border: 5px solid var(--hc-signal-600); box-shadow: 0 0 0 0 rgba(0, 168, 201,.5); animation: hc-scale-pulse 2.4s ease-out infinite; }
@keyframes hc-scale-pulse { 70% { box-shadow: 0 0 0 14px rgba(0, 168, 201,0); } 100% { box-shadow: 0 0 0 0 rgba(0, 168, 201,0); } }
:is(.hc-page.hc-js, html.hc-js-pre .hc-page) .hc-ds-scale-mark { left: 0; }
.hc-ds-scale.hc-in-view .hc-ds-scale-mark { left: 50%; transition: left 1.4s cubic-bezier(.3,.7,.2,1) .2s; }
.hc-ds-scale-stops { list-style: none; margin: var(--space-4, 16px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4, 16px); }
.hc-page .hc-ds-scale-stops > li { padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-ds-scale-stops li:nth-child(2) { text-align: center; align-items: center; }
.hc-ds-scale-stops li:nth-child(3) { text-align: right; align-items: flex-end; }
.hc-ds-scale-stops strong { font-family: var(--pg-font-display); font-size: 1rem; color: var(--hc-ink-mute); }
.hc-ds-scale-stops li.is-mid strong { font-size: 1.2rem; color: var(--hc-signal-600); }
.hc-ds-scale-stops span { font-size: .85rem; color: var(--hc-ink-mute); max-width: 240px; }
.hc-ds-scale-stops li.is-mid span { color: var(--hc-ink-soft); }
.hc-ds-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.hc-ds-subjects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5, 24px); }
.hc-page .hc-ds-subjects > li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--hc-line-soft); font-size: .95rem; font-weight: 600; color: var(--hc-ink); }
.hc-ds-subjects li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--hc-signal-600); }
.hc-ds-subjects li:nth-child(4n+2)::before, .hc-ds-subjects li:nth-child(4n+3)::before { background: var(--hc-azure-500); }
.hc-ds-brings { list-style: none; margin: 0; padding: 0; counter-reset: b; }
.hc-page .hc-ds-brings > li { counter-increment: b; display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hc-line-soft); font-size: .95rem; line-height: 1.45; color: var(--hc-ink); }
.hc-ds-brings li::before { content: counter(b); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--hc-signal-600); color: #fff; font-size: .75rem; font-weight: 700; margin-top: 1px; }
@media (prefers-reduced-motion: reduce) { .hc-ds-scale-mark { animation: none; } .hc-ds-scale.hc-in-view .hc-ds-scale-mark { transition: none; } }
@media (max-width: 860px) { .hc-ds-two { grid-template-columns: 1fr; } .hc-ds-scale-stops span { display: none; } .hc-ds-scale-stops strong { font-size: .88rem; } .hc-ds-scale-stops li.is-mid strong { font-size: 1rem; } }
@media (max-width: 520px) { .hc-ds-subjects { grid-template-columns: 1fr; } }

/* DSI : pont horizontal Direction -> PROGEDYS -> Terrain */
.hc-dsw { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.25fr) 72px minmax(0, 1.5fr); align-items: center; margin-top: clamp(28px, 4vw, 44px); }
.hc-dsw-tag { margin: 0 0 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hc-ink-mute); }
.hc-dsw-ico { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--hc-azure-100); color: var(--hc-azure-500); }
.hc-dsw-ico svg { width: 22px; height: 22px; }
.hc-dsw-ico--lg { width: 60px; height: 60px; border-radius: 16px; margin-bottom: 14px; }
.hc-dsw-ico--lg svg { width: 32px; height: 32px; }
.hc-dsw-side--dir { padding: var(--space-5, 24px) var(--space-4, 16px); text-align: center; display: flex; flex-direction: column; align-items: center; border: 2px solid var(--hc-line); border-radius: var(--hc-radius-md); background: var(--hc-card); }
.hc-dsw-side--dir strong { font-family: var(--pg-font-display); font-size: 1.15rem; line-height: 1.3; }
/* noyau PROGEDYS */
.hc-dsw-hub { position: relative; display: grid; place-items: center; padding: 16px 0; }
.hc-dsw-hub-ring { position: absolute; inset: 0; margin: auto; width: 100%; max-width: 330px; aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--hc-signal-600); opacity: .35; animation: hc-dsw-spin 40s linear infinite; }
@keyframes hc-dsw-spin { to { transform: rotate(360deg); } }
.hc-dsw-hub-core { position: relative; z-index: 1; width: min(100%, 270px); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px; text-align: center; color: #fff; background: radial-gradient(circle at 30% 25%, #2e4a8a, var(--hc-navy-900)); box-shadow: 0 0 0 10px rgba(0, 168, 201,.12), var(--hc-shadow-lg); }
.hc-dsw-hub-core .hc-dsw-tag { color: var(--hc-brand-cyan-soft, #5ec4dc); font-size: .62rem; margin: 0; }
.hc-dsw-hub-core strong { font-family: var(--pg-font-display); font-size: 1.15rem; line-height: 1.25; }
.hc-dsw-hub-core span { font-size: .78rem; line-height: 1.4; color: #c9d3e8; }
/* liens avec pastille en sequence */
.hc-dsw-link { position: relative; height: 24px; }
.hc-dsw-link::before { content: ""; position: absolute; left: 0; right: 7px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: linear-gradient(90deg, var(--hc-azure-500), var(--hc-signal-600)); }
.hc-dsw-link::after { content: ""; position: absolute; right: 0; top: 50%; margin-top: -7px; border-left: 10px solid var(--hc-signal-600); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.hc-dsw-dot { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--hc-signal-600); opacity: 0; }
.hc-dsw-link--1 .hc-dsw-dot { animation: hc-flow-seq-1 6s linear infinite; }
.hc-dsw-link--2 .hc-dsw-dot { animation: hc-flow-seq-2 6s linear infinite; }
/* terrain : 4 lignes reliees par un crochet */
.hc-dsw-side--field { position: relative; padding-left: 26px; }
.hc-dsw-side--field::before { content: ""; position: absolute; left: 0; top: 30px; bottom: 6px; width: 2px; background: linear-gradient(var(--hc-signal-600), var(--hc-azure-500)); border-radius: 2px; }
.hc-dsw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hc-page .hc-dsw-list > li { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.hc-dsw-list li::before { content: ""; position: absolute; left: -26px; top: 50%; width: 20px; height: 2px; background: var(--hc-line); }
.hc-dsw-list li:hover .hc-dsw-ico { background: var(--hc-signal-600); color: #fff; transform: scale(1.08); }
.hc-dsw-list .hc-dsw-ico { transition: background .2s ease, color .2s ease, transform .2s ease; }
.hc-dsw-txt { display: flex; flex-direction: column; line-height: 1.3; }
.hc-dsw-txt strong { font-size: 1rem; color: var(--hc-ink); }
.hc-dsw-txt span { font-size: .85rem; color: var(--hc-ink-soft); }
@media (prefers-reduced-motion: reduce) { .hc-dsw-hub-ring, .hc-dsw-dot { animation: none !important; } .hc-dsw-dot { opacity: 1; left: calc(50% - 4.5px); } .hc-dsw-list .hc-dsw-ico { transition: none; } }
@media (max-width: 960px) {
    .hc-dsw { grid-template-columns: 1fr; justify-items: center; row-gap: 0; }
    .hc-dsw-side--dir, .hc-dsw-side--field { width: 100%; max-width: 480px; }
    .hc-dsw-link { width: 24px; height: 44px; }
    .hc-dsw-link::before { left: 50%; right: auto; top: 0; bottom: 7px; width: 3px; height: auto; margin: 0 0 0 -1.5px; }
    .hc-dsw-link::after { right: auto; left: 50%; top: auto; bottom: 0; margin: 0 0 0 -7px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid var(--hc-signal-600); border-bottom: 0; }
    .hc-dsw-dot { left: 50%; top: 0; margin: 0 0 0 -4.5px; }
    .hc-dsw-link--1 .hc-dsw-dot { animation-name: hc-flow-seq-v1; } .hc-dsw-link--2 .hc-dsw-dot { animation-name: hc-flow-seq-v2; }
    .hc-dsw-hub { width: 100%; max-width: 300px; }
}

/* Intro tactile : 3 points cles en bandeau a separateurs verticaux */
.hc-tc { list-style: none; margin: clamp(24px, 4vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hc-line); border-bottom: 1px solid var(--hc-line); }
.hc-page .hc-tc > li { display: flex; flex-direction: column; gap: 6px; padding: var(--space-5, 24px) var(--space-5, 24px); border-left: 1px solid var(--hc-line); transition: background .25s ease; }
.hc-tc li:first-child { border-left: 0; padding-left: 0; }
.hc-tc li:hover { background: linear-gradient(180deg, transparent, rgba(0, 168, 201,.06)); }
.hc-tc-ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 8px; background: var(--hc-azure-100); color: var(--hc-azure-500); transition: transform .3s ease, background .3s ease, color .3s ease; }
.hc-tc li:nth-child(2) .hc-tc-ico { background: #e8f7fb; color: var(--hc-signal-600); }
.hc-tc li:nth-child(3) .hc-tc-ico { background: #e6f7ee; color: var(--hc-success-500); }
.hc-tc li:hover .hc-tc-ico { transform: rotate(-6deg) scale(1.08); }
.hc-tc-ico svg { width: 26px; height: 26px; }
.hc-tc li strong { font-family: var(--pg-font-display); font-size: 1.1rem; line-height: 1.3; color: var(--hc-ink); }
.hc-tc li > span:last-child { font-size: .95rem; line-height: 1.5; color: var(--hc-ink-soft); }
@media (prefers-reduced-motion: reduce) { .hc-tc li, .hc-tc-ico { transition: none; } .hc-tc li:hover .hc-tc-ico { transform: none; } }
@media (max-width: 800px) { .hc-tc { grid-template-columns: 1fr; } .hc-page .hc-tc > li { border-left: 0; border-top: 1px solid var(--hc-line); padding: var(--space-4, 16px) 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; } .hc-tc li:first-child { border-top: 0; } .hc-tc-ico { margin: 0; } .hc-tc li > span:last-child { flex-basis: 100%; padding-left: 64px; margin-top: -8px; } }

/* Borne tactile illustree + 3 phases */
.hc-kz { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: center; margin-top: clamp(24px, 4vw, 40px); }
.hc-kiosk { width: min(100%, 300px); margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.hc-kiosk-screen { position: relative; width: 100%; aspect-ratio: 3 / 4; padding: 12px; border-radius: 22px; background: linear-gradient(160deg, #1d2d52, var(--hc-navy-900)); box-shadow: var(--hc-shadow-lg), inset 0 0 0 3px rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.hc-kiosk-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; font-family: var(--pg-font-display); font-size: .78rem; font-weight: 700; }
.hc-kiosk-bar i { width: 8px; height: 8px; border-radius: 50%; background: #3ecf72; box-shadow: 0 0 0 4px rgba(62,207,114,.25); }
.hc-kiosk-grid { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; }
.hc-kiosk-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; background: rgba(255,255,255,.07); color: #dbe4f7; font-size: .78rem; font-weight: 700; animation: hc-kiosk-light 8s ease-in-out infinite; }
.hc-kiosk-tile b { width: 30px; height: 30px; border-radius: 9px; background: var(--hc-azure-500); }
.hc-kiosk-tile--2 b { background: var(--hc-signal-600); } .hc-kiosk-tile--3 b { background: var(--hc-success-500); } .hc-kiosk-tile--4 b { background: #7a5af8; }
.hc-kiosk-tile--2 { animation-delay: 2s; } .hc-kiosk-tile--3 { animation-delay: 4s; } .hc-kiosk-tile--4 { animation-delay: 6s; }
@keyframes hc-kiosk-light { 0%, 22%, 100% { background: rgba(255,255,255,.07); transform: none; } 6%, 16% { background: rgba(0, 168, 201,.45); transform: scale(.96); } }
.hc-kiosk-tap { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid #fff; opacity: 0; animation: hc-kiosk-tap 8s ease-in-out infinite; pointer-events: none; }
@keyframes hc-kiosk-tap {
    0%, 100% { left: 28%; top: 38%; opacity: 0; transform: scale(.4); } 4% { opacity: .9; transform: scale(1); } 14% { opacity: 0; transform: scale(1.6); left: 28%; top: 38%; }
    25% { left: 72%; top: 38%; opacity: 0; transform: scale(.4); } 29% { opacity: .9; transform: scale(1); } 39% { opacity: 0; transform: scale(1.6); left: 72%; top: 38%; }
    50% { left: 28%; top: 72%; opacity: 0; transform: scale(.4); } 54% { opacity: .9; transform: scale(1); } 64% { opacity: 0; transform: scale(1.6); left: 28%; top: 72%; }
    75% { left: 72%; top: 72%; opacity: 0; transform: scale(.4); } 79% { opacity: .9; transform: scale(1); } 89% { opacity: 0; transform: scale(1.6); left: 72%; top: 72%; }
}
.hc-kiosk-neck { width: 26%; height: 34px; background: linear-gradient(90deg, #aab5cc, #e1e7f3, #aab5cc); }
.hc-kiosk-base { width: 62%; height: 14px; border-radius: 8px; background: linear-gradient(#c3cce0, #96a3bd); box-shadow: 0 10px 18px rgba(7,26,58,.18); }
.hc-tp { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; display: grid; gap: var(--space-5, 24px); }
.hc-tp::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: linear-gradient(var(--hc-azure-500) 0%, var(--hc-azure-500) 30%, var(--hc-signal-600) 38%, var(--hc-signal-600) 62%, var(--hc-success-500) 70%, var(--hc-success-500) 100%); }
.hc-page .hc-tp > li { position: relative; padding: 0; }
.hc-tp-phase::before { content: ""; position: absolute; left: -28px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--hc-card); border: 4px solid var(--ph, var(--hc-azure-500)); }
.hc-tp-phase--1 { --ph: var(--hc-azure-500); } .hc-tp-phase--2 { --ph: var(--hc-signal-600); } .hc-tp-phase--3 { --ph: var(--hc-success-500); }
.hc-tp-title { margin: 0 0 var(--space-2, 8px); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ph); }
.hc-tp ul { list-style: none; margin: 0; padding: 0; }
.hc-page .hc-tp ul > li { display: flex; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--hc-line-soft); font-size: 1rem; line-height: 1.4; color: var(--hc-ink); transition: padding .2s ease, color .2s ease; }
.hc-tp ul li:hover { padding-left: 8px; color: var(--ph); }
.hc-tp-n { flex: none; font-family: var(--pg-font-display); font-weight: 700; font-size: .78rem; color: var(--ph); }
@media (prefers-reduced-motion: reduce) { .hc-kiosk-tile, .hc-kiosk-tap { animation: none; } .hc-tp ul li { transition: none; } }
@media (max-width: 860px) { .hc-kz { grid-template-columns: 1fr; } .hc-kiosk { width: min(100%, 250px); } }

/* Page sante (WLPG10) */
.hc-sa-info { margin: 0 auto; max-width: 760px; border-radius: var(--hc-radius-md); overflow: hidden; background: #fff; border: 1px solid var(--hc-line-soft); box-shadow: var(--hc-shadow-lg); }
.hc-sa-info img { display: block; width: 100%; height: auto; }
.hc-sa-concept { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.hc-sa-lead { margin: var(--space-3, 12px) 0 0; font-size: 1.02rem; line-height: 1.65; color: var(--hc-ink-soft); }
.hc-sa-label { margin: var(--space-5, 24px) 0 var(--space-3, 12px); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hc-signal-600); }
.hc-sa-devices { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hc-page .hc-sa-devices > li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hc-line); font-size: .95rem; font-weight: 600; color: var(--hc-ink); }
.hc-sa-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--hc-azure-100); color: var(--hc-azure-500); }
.hc-sa-ico svg { width: 21px; height: 21px; }
.hc-sa-ico--lg { width: 54px; height: 54px; border-radius: 14px; margin-bottom: 14px; }
.hc-sa-ico--lg svg { width: 28px; height: 28px; }
.hc-sa-ico--o { background: #e8f7fb; color: var(--hc-signal-600); }
/* maquette de worklist */
.hc-sa-mock { width: 100%; max-width: 460px; margin-inline: auto; background: var(--hc-card); border: 1px solid var(--hc-line); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-lg); overflow: hidden; font-size: .8rem; transition: transform .35s ease; }
.hc-sa-mock:hover { transform: translateY(-4px); }
.hc-sa-mock-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--hc-navy-900); }
.hc-sa-mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff6b5e; } .hc-sa-mock-bar i:nth-child(2) { background: #ffbd44; } .hc-sa-mock-bar i:nth-child(3) { background: #3ecf72; }
.hc-sa-mock-bar span { margin-left: 8px; font-size: .72rem; font-weight: 700; color: #c9d3e8; }
.hc-sa-mock-head, .hc-sa-mock-rows li { display: grid; grid-template-columns: 1.5fr 1fr 1fr .6fr; align-items: center; gap: 10px; padding: 0 14px; }
.hc-sa-mock-head { padding-top: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--hc-line-soft); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hc-ink-mute); }
.hc-sa-mock-rows { list-style: none; margin: 0; padding: 4px 0 8px; }
.hc-page .hc-sa-mock-rows > li { padding-top: 9px; padding-bottom: 9px; position: relative; transition: background .2s ease; }
.hc-sa-mock-rows li:hover { background: var(--hc-paper); }
.hc-sa-mock-rows li:nth-child(2) { background: rgba(0, 168, 201,.08); }
.hc-sa-mock-rows li:nth-child(2)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hc-signal-600); }
.hc-sa-av { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; font-size: .66rem; font-weight: 700; justify-self: start; }
.hc-sa-mock-rows li { grid-template-columns: 28px 1fr .9fr 1fr .6fr; }
.hc-sa-mock-head { grid-template-columns: 1.6fr .9fr 1fr .6fr; }
.hc-sa-bar { display: block; height: 8px; border-radius: 4px; background: var(--hc-line); }
.hc-sa-bar--l { width: 85%; } .hc-sa-bar--s { width: 70%; }
.hc-sa-exam { justify-self: start; padding: 3px 9px; border-radius: 999px; background: var(--hc-azure-100); color: var(--hc-azure-500); font-size: .68rem; font-weight: 700; }
.hc-sa-hour { font-weight: 700; color: var(--hc-ink); text-align: right; }
/* fiabilite / tracabilite */
.hc-sa-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hc-sa-col { padding: 0 clamp(20px, 4vw, 56px); }
.hc-sa-col:first-child { padding-left: 0; border-right: 1px solid var(--hc-line); }
.hc-sa-col:last-child { padding-right: 0; }
.hc-sa-col h3 { margin: 0 0 var(--space-4, 16px); font-size: 1.2rem; line-height: 1.3; }
.hc-sa-lines { list-style: none; margin: 0; padding: 0; }
.hc-page .hc-sa-lines > li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hc-line-soft); font-size: .95rem; line-height: 1.45; color: var(--hc-ink-soft); }
.hc-sa-lines li svg { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--hc-success-500); }
/* usages */
.hc-sa-uses { list-style: none; margin: var(--space-5, 24px) 0 0; padding: 0; max-width: 860px; }
.hc-page .hc-sa-uses > li { display: flex; align-items: center; gap: 22px; padding: 16px 0; border-bottom: 1px solid var(--hc-line); }
.hc-sa-uses li span { flex: none; width: 62px; font-family: var(--pg-font-display); font-size: 2.4rem; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--hc-signal-600); transition: color .25s ease; }
.hc-sa-uses li:hover span { color: var(--hc-signal-600); }
.hc-sa-uses li p { margin: 0; font-family: var(--pg-font-display); font-size: 1.12rem; font-weight: 600; line-height: 1.4; color: var(--hc-ink); }
/* gains (fond marine) */
.hc-sa-gains { list-style: none; margin: var(--space-5, 24px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px clamp(24px, 5vw, 64px); }
.hc-page .hc-sa-gains > li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 1.02rem; line-height: 1.4; color: #fff; }
.hc-sa-tick { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--hc-success-500); color: #fff; }
.hc-sa-tick svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .hc-sa-mock { transition: none; } .hc-sa-mock:hover { transform: none; } .hc-sa-uses li span { transition: none; } }
@media (max-width: 900px) {
    .hc-sa-concept { grid-template-columns: 1fr; }
    .hc-sa-two { grid-template-columns: 1fr; gap: var(--space-6, 32px); }
    .hc-sa-col { padding: 0; }
    .hc-sa-col:first-child { border-right: 0; border-bottom: 1px solid var(--hc-line); padding-bottom: var(--space-6, 32px); }
    .hc-sa-gains { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .hc-sa-uses li span { width: 44px; font-size: 1.9rem; } .hc-sa-uses li p { font-size: 1rem; } .hc-sa-mock-head span:nth-child(2) { display: none; } .hc-sa-mock-head { grid-template-columns: 1.6fr 1fr .6fr; } }
/* worklist : en-tete aligne sur les colonnes des lignes */
.hc-sa-mock-head { grid-template-columns: 28px 1fr .9fr 1fr .6fr; }
.hc-sa-mock-head span:first-child { grid-column: span 2; }
.hc-sa-mock-head span:last-child { text-align: right; }
@media (max-width: 520px) { .hc-sa-mock-head, .hc-sa-mock-rows li { grid-template-columns: 28px 1fr 1fr .6fr; } .hc-sa-bar--s { display: none; } }

/* Page A propos */
.hc-ap-lead { margin: var(--space-3, 12px) 0 0; font-size: 1.05rem; line-height: 1.7; color: var(--hc-ink-soft); }
.hc-ap-who { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.hc-ap-duo { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 28px); }
.hc-ap-person { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; max-width: 190px; }
.hc-ap-person strong { font-family: var(--pg-font-display); font-size: 1.05rem; line-height: 1.25; margin-top: 8px; }
.hc-ap-person span:last-child { font-size: .85rem; color: var(--hc-ink-soft); line-height: 1.35; }
.hc-ap-avatar { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--hc-navy-900), #2e4a8a); color: #fff; font-family: var(--pg-font-display); font-size: 1.8rem; font-weight: 700; box-shadow: 0 0 0 6px var(--hc-azure-100), var(--hc-shadow-md); transition: transform .3s ease; }
.hc-ap-person:nth-child(3) .hc-ap-avatar { background: linear-gradient(135deg, var(--hc-signal-600), var(--hc-brand-cyan-soft, #5ec4dc)); box-shadow: 0 0 0 6px #e8f7fb, var(--hc-shadow-md); }
.hc-ap-person:hover .hc-ap-avatar { transform: scale(1.06); }
.hc-ap-plus { font-size: 1.8rem; font-weight: 700; color: var(--hc-signal-600); }
.hc-ap-facts { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hc-line); border-bottom: 1px solid var(--hc-line); }
.hc-page .hc-ap-facts > li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-5, 24px) var(--space-4, 16px); border-left: 1px solid var(--hc-line); }
.hc-ap-facts li:first-child { border-left: 0; padding-left: 0; }
.hc-ap-facts strong { font-family: var(--pg-font-display); font-size: 1.8rem; line-height: 1.1; color: var(--hc-signal-600); }
.hc-ap-facts span { font-size: .88rem; color: var(--hc-ink-soft); }
/* zones en escalier */
.hc-ap-zones { list-style: none; margin: var(--space-5, 24px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; }
.hc-page .hc-ap-zones > li { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: var(--space-4, 16px); border-radius: var(--hc-radius-md) var(--hc-radius-md) 0 0; color: #fff; }
.hc-ap-zone strong { font-family: var(--pg-font-display); font-size: 1.05rem; line-height: 1.25; }
.hc-ap-zone span { font-size: .85rem; line-height: 1.35; opacity: .9; }
.hc-ap-zone--1 { min-height: 130px; background: var(--hc-navy-900); } .hc-ap-zone--2 { min-height: 170px; background: #1f3a73; } .hc-ap-zone--3 { min-height: 210px; background: var(--hc-azure-500); } .hc-ap-zone--4 { min-height: 250px; background: var(--hc-signal-600); }
.hc-ap-zone-ico { width: 30px; height: 30px; margin-bottom: 4px; } .hc-ap-zone-ico svg { width: 100%; height: 100%; color: var(--hc-brand-cyan-soft, #5ec4dc); }
.hc-ap-notes { list-style: none; margin: var(--space-5, 24px) 0 0; padding: 0; display: grid; gap: 6px; font-size: .95rem; color: var(--hc-ink-soft); }
.hc-page .hc-ap-notes > li { padding: 0; }
.hc-ap-notes a { font-weight: 600; color: var(--hc-signal-600); }
/* expertise */
.hc-ap-svc { list-style: none; margin: var(--space-5, 24px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 64px); }
.hc-page .hc-ap-svc > li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hc-line); }
.hc-ap-svc-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--hc-azure-100); color: var(--hc-azure-500); transition: transform .3s ease, background .3s ease, color .3s ease; }
.hc-ap-svc li:nth-child(even) .hc-ap-svc-ico { background: #e8f7fb; color: var(--hc-signal-600); }
.hc-ap-svc li:hover .hc-ap-svc-ico { transform: rotate(-6deg) scale(1.08); }
.hc-ap-svc-ico svg { width: 24px; height: 24px; }
.hc-ap-svc-txt { font-family: var(--pg-font-display); font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--hc-ink); }
.hc-ap-global { margin: var(--space-5, 24px) 0 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px; background: var(--hc-navy-900); color: #fff; font-weight: 600; font-size: .95rem; }
.hc-ap-global__mark { flex: none; position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--hc-signal-600); font-size: 0; line-height: 0; color: transparent; }
.hc-ap-global__mark::before, .hc-ap-global__mark::after { content: ""; position: absolute; top: 50%; left: 50%; background: #fff; border-radius: 1px; transform: translate(-50%, -50%); }
.hc-ap-global__mark::before { width: 10px; height: 2px; }
.hc-ap-global__mark::after { width: 2px; height: 10px; }
.hc-ap-global__text { flex: 1 1 auto; min-width: 0; font-weight: 600; }
/* progedev */
.hc-ap-dev { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6, 32px); flex-wrap: wrap; }
.hc-ap-dev > div { max-width: 720px; flex: 1 1 420px; }
/* secteurs */
.hc-ap-sectors { list-style: none; margin: var(--space-5, 24px) 0 0; padding: 0; }
.hc-page .hc-ap-sectors > li { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: var(--space-5, 24px); align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--hc-line); transition: padding .2s ease; }
.hc-ap-sectors li:first-child { border-top: 1px solid var(--hc-line); }
.hc-ap-sectors li strong { font-family: var(--pg-font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--hc-signal-600); }
.hc-ap-sectors li span { font-size: .98rem; line-height: 1.55; color: var(--hc-ink-soft); }
.hc-ap-sectors li:hover { padding-left: 10px; }
/* approche : frise horizontale */
.hc-ap-steps { list-style: none; margin: var(--space-6, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--space-4, 16px); position: relative; }
.hc-ap-steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 20px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--hc-azure-500), var(--hc-signal-600)); }
.hc-page .hc-ap-steps > li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 4px; text-align: center; }
.hc-ap-steps li > span { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--hc-card); border: 3px solid var(--hc-signal-600); color: var(--hc-signal-600); font-family: var(--pg-font-display); font-weight: 700; box-shadow: 0 0 0 6px var(--hc-card, #fff); transition: background .25s ease, color .25s ease, transform .25s ease; }
.hc-ap-steps li:hover > span { background: var(--hc-signal-600); color: #fff; transform: scale(1.12); }
.hc-ap-steps h3 { margin: 4px 0 0; font-size: 1.05rem; }
.hc-ap-steps p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--hc-ink-soft); }
@media (prefers-reduced-motion: reduce) { .hc-ap-avatar, .hc-ap-svc-ico, .hc-ap-steps li > span, .hc-ap-sectors li { transition: none; } .hc-ap-sectors li:hover { padding-left: 0; } }
@media (max-width: 960px) {
    .hc-ap-who { grid-template-columns: 1fr; }
    .hc-ap-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hc-page .hc-ap-facts > li:nth-child(3) { border-left: 0; padding-left: 0; }
    .hc-ap-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hc-ap-zone--1, .hc-ap-zone--2, .hc-ap-zone--3, .hc-ap-zone--4 { min-height: 0; border-radius: var(--hc-radius-md); }
    .hc-ap-svc { grid-template-columns: 1fr; }
    .hc-ap-steps { grid-template-columns: 1fr; gap: var(--space-4, 16px); }
    .hc-ap-steps::before { left: 20px; right: auto; top: 20px; bottom: 20px; width: 3px; height: auto; background: linear-gradient(var(--hc-azure-500), var(--hc-signal-600)); }
    .hc-page .hc-ap-steps > li { display: grid; grid-template-columns: 42px 1fr; column-gap: 16px; row-gap: 2px; text-align: left; align-items: start; padding: 0; }
    .hc-ap-steps li > span { grid-row: span 2; }
}
@media (max-width: 640px) { .hc-page .hc-ap-sectors > li { grid-template-columns: 1fr; gap: 4px; } .hc-ap-zones { grid-template-columns: 1fr; } .hc-ap-avatar { width: 76px; height: 76px; font-size: 1.4rem; } .hc-ap-facts strong { font-size: 1.4rem; } }

/* Page contact : hero, panneau de coordonnees marine, formulaire, sujets */
.hc-ct-sub { margin: var(--space-3, 12px) 0 0; max-width: 640px; font-size: .98rem; line-height: 1.6; color: #c9d3e8; }
.hc-ct-sub a { color: var(--hc-brand-cyan-soft, #5ec4dc); font-weight: 600; }
.hc-ct-quick { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--space-5, 24px) 0 0; }
.hc-ct-ghost { border-color: rgba(255,255,255,.4) !important; color: #fff !important; background: transparent !important; }
.hc-ct-ghost:hover { background: rgba(255,255,255,.12) !important; }
.hc-ct { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.hc-ct-aside { position: sticky; top: 100px; padding: var(--space-6, 32px); border-radius: var(--hc-radius-md); background: linear-gradient(160deg, #1a2d5c, var(--hc-navy-900)); color: #fff; box-shadow: var(--hc-shadow-lg); overflow: hidden; }
.hc-ct-aside::before { content: ""; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 168, 201,.35), transparent 70%); pointer-events: none; }
.hc-ct-aside > * { position: relative; }
.hc-ct-aside h2 { margin: 0 0 var(--space-4, 16px); color: #fff; font-size: 1.4rem; }
.hc-ct-aside .hc-contact-info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hc-page .hc-ct-aside .hc-contact-info-list > li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.hc-ct-aside .hc-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: var(--hc-brand-cyan-soft, #5ec4dc); }
.hc-ct-aside .hc-ic svg { width: 22px; height: 22px; }
.hc-ct-aside .hc-contact-info-list strong { display: block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hc-brand-cyan-soft, #5ec4dc); margin-bottom: 2px; }
.hc-ct-aside .hc-contact-info-list span, .hc-ct-aside .hc-contact-info-list a { color: #fff; font-size: .98rem; line-height: 1.5; text-decoration: none; }
.hc-ct-aside .hc-contact-info-list a:hover { text-decoration: underline; }
.hc-ct-zone { margin-top: var(--space-5, 24px); }
.hc-ct-zone-tag { margin: 0 0 var(--space-3, 12px); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #c9d3e8; }
.hc-ct-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hc-page .hc-ct-chips > li { padding: 6px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; font-size: .85rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.06); }
.hc-page .hc-ct .hc-form-card { padding: clamp(24px, 4vw, 44px); border-top: 4px solid var(--hc-signal-600); }
.hc-ct .hc-form-card h2 { font-size: 1.5rem; }
.hc-ct-note { margin: var(--space-3, 12px) 0 0; text-align: center; font-size: .82rem; color: var(--hc-ink-mute); }
.hc-ct-label { margin: 0 0 var(--space-4, 16px); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hc-signal-600); }
.hc-ct-topics { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hc-page .hc-ct-topics > li { padding: 0; }
.hc-ct-topics a { display: inline-block; padding: 10px 20px; border: 1.5px solid var(--hc-line); border-radius: 999px; background: var(--hc-card); font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--hc-ink); transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.hc-ct-topics a:hover { background: var(--hc-signal-600); border-color: var(--hc-signal-600); color: #fff; transform: translateY(-2px); }
.hc-ct-topics a:focus-visible { outline: 2px solid var(--hc-signal-600); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hc-ct-topics a { transition: none; } .hc-ct-topics a:hover { transform: none; } }
@media (max-width: 960px) { .hc-ct { grid-template-columns: 1fr; } .hc-ct-aside { position: static; } }
@media (max-width: 520px) { .hc-ct-aside { padding: var(--space-4, 16px); } .hc-ct-quick .hc-btn { width: 100%; justify-content: center; } }
/* e-mail (image a texte sombre) : pastille blanche sur le panneau marine */
.hc-ct-aside .pg-email-copy--contact { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 10px; background: #fff; border: 0; cursor: pointer; }
.hc-ct-aside .pg-email-copy--contact:hover { background: #e8f7fb; }
.hc-ct-aside .pg-email-copy--contact:focus-visible { outline: 2px solid var(--hc-brand-cyan-soft, #5ec4dc); outline-offset: 3px; }

/* ===== Lisibilite : textes qui devenaient (quasi) invisibles faute de contraste ===== */
/* vert "succes" utilise en texte : version plus foncee (>= 4,5:1 sur fond clair) */
.hc-page { --hc-success-500: #137a49; }
/* numeros editoriaux : gris tres pale (1,2:1) -> orange lisible */
.hc-page .hc-editorial-num { color: var(--hc-signal-600); opacity: 1; }
/* accents orange sur fond marine / hero : orange clair */
.hc-hero2 .has-luminous-vivid-amber-color, .hc-corp-hero .has-luminous-vivid-amber-color, .hc-page-hero .has-luminous-vivid-amber-color, .hc-corp-section--navy .has-luminous-vivid-amber-color { color: var(--hc-brand-cyan-soft, #5ec4dc) !important; }
.hc-hero2 .hc-num-eyebrow, .hc-corp-hero .hc-num-eyebrow, .hc-page-hero .hc-num-eyebrow, .hc-corp-section--navy .hc-num-eyebrow { color: var(--hc-brand-cyan-soft, #5ec4dc); }
.hc-hero2 .hc-chip-outline, .hc-corp-hero .hc-chip-outline, .hc-page-hero .hc-chip-outline { color: #dfe6f6; border-color: rgba(255,255,255,.4); }
/* tuile CTA orange : libelle blanc */
/* bloc Approfondir (blog) : textes clairs sur marine */
.hc-page .hc-blog-deepen .hc-blog-deepen__service { color: #fff; }
.hc-page .hc-blog-deepen .hc-blog-deepen__text { color: #c9d3e8; }