/* ==========================================================================
   VisionCloud — système visuel de la page d'accueil (V2, 25/10/2026)
   Blocs autonomes injectés via des widgets HTML Elementor.
   Les widgets Tronix étant trop rigides pour la composition demandée,
   tout le rendu de ces sections passe par cette feuille.
   ========================================================================== */

:root {
    --vc-navy:        #061327;
    --vc-navy-2:      #0B2143;
    --vc-navy-3:      #122E59;
    --vc-blue:        #0E59F2;
    --vc-blue-600:    #0B48C6;
    --vc-cyan:        #25D8EE;
    --vc-cyan-dim:    #0E9BAE;
    --vc-ink:         #101828;
    --vc-body:        #576073;
    --vc-body-dim:    #828B9E;
    --vc-line:        #E4E9F2;
    --vc-line-dark:   rgba(255,255,255,.14);
    --vc-surface:     #F5F8FC;
    /* gamme de surfaces : le rythme des chapitres de l'accueil */
    --vc-s0:          #FFFFFF;   /* blanc            */
    --vc-s1:          #F2F6FC;   /* bleu-gris clair  */
    --vc-s2:          #E7F0FA;   /* bleu pâle, bande */
    --vc-s2-line:     #D5E3F3;
    --vc-white:       #fff;
    --vc-radius:      18px;
    --vc-radius-lg:   26px;
    --vc-ease:        cubic-bezier(.22,.61,.36,1);
}

/* ---------- socle ---------- */
.vc-section { position: relative; padding: clamp(62px, 7vw, 104px) 0; }
.vc-section--tight { padding: clamp(44px, 4.4vw, 68px) 0; }
/* même largeur utile que le conteneur du thème (1220px), pour que la
   section « Notes techniques » restée en widget Tronix s'aligne dessus. */
.vc-container { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 24px; }

.vc-dark { background: var(--vc-navy); color: #D6DEEC; }
.vc-dark h1, .vc-dark h2, .vc-dark h3, .vc-dark h4 { color: #fff; }
.vc-light { background: var(--vc-s0); color: var(--vc-body); }
.vc-tint  { background: var(--vc-s1); color: var(--vc-body); }
.vc-surface { background: var(--vc-s1); color: var(--vc-body); }
/* bande technologique : transition entre le clair et la rupture sombre */
.vc-band {
    background: var(--vc-s2); color: var(--vc-body);
    border-top: 1px solid var(--vc-s2-line);
    border-bottom: 1px solid var(--vc-s2-line);
}

.vc-kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--vc-blue); margin: 0 0 18px;
}
.vc-kicker::before {
    content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px;
}
.vc-dark .vc-kicker { color: var(--vc-cyan); }

.vc-h2 {
    font-size: clamp(30px, 3.5vw, 46px); line-height: 1.16; font-weight: 700;
    color: var(--vc-ink); margin: 0 0 20px; letter-spacing: -.015em;
}
.vc-dark .vc-h2 { color: #fff; }
.vc-h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; font-weight: 700; color: var(--vc-ink); margin: 0 0 14px; }
.vc-lead { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.75; color: var(--vc-body); margin: 0 0 16px; max-width: 62ch; }
.vc-dark .vc-lead { color: #AEBBD0; }

.vc-head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 58px); }
.vc-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.vc-head--center .vc-kicker { justify-content: center; }

/* ---------- boutons ---------- */
.vc-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 28px; border-radius: 999px; border: 1px solid transparent;
    font-size: 15.5px; font-weight: 600; line-height: 1.2; text-decoration: none;
    transition: background .25s var(--vc-ease), color .25s var(--vc-ease),
                border-color .25s var(--vc-ease), transform .25s var(--vc-ease);
}
.vc-btn svg { width: 17px; height: 17px; flex: none; transition: transform .25s var(--vc-ease); }
.vc-btn:hover svg { transform: translateX(3px); }
.vc-btn--primary { background: var(--vc-blue); color: #fff; }
.vc-btn--primary:hover { background: var(--vc-blue-600); color: #fff; transform: translateY(-2px); }
.vc-btn--ghost { border-color: rgba(255,255,255,.3); color: #fff; }
.vc-btn--ghost:hover { border-color: var(--vc-cyan); color: var(--vc-cyan); }
.vc-btn--line { border-color: var(--vc-line); color: var(--vc-ink); background: #fff; }
.vc-btn--line:hover { border-color: var(--vc-blue); color: var(--vc-blue); }

.vc-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 15px; color: var(--vc-blue); text-decoration: none;
}
.vc-link svg { width: 16px; height: 16px; transition: transform .25s var(--vc-ease); }
.vc-link:hover svg { transform: translateX(4px); }
.vc-dark .vc-link { color: var(--vc-cyan); }

/* ---------- apparition au défilement ---------- */
/* Le contenu est visible par défaut : il n'est masqué pour l'animation que si
   le JS s'est bien exécuté (classe vc-js posée dans le <head>). Sans JS, ou si
   le script échoue, la page reste entièrement lisible. */
.vc-reveal { opacity: 1; transform: none; }
.vc-js .vc-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--vc-ease), transform .7s var(--vc-ease); }
.vc-js .vc-reveal.is-in { opacity: 1; transform: none; }
.vc-reveal[data-vc-delay="1"] { transition-delay: .08s; }
.vc-reveal[data-vc-delay="2"] { transition-delay: .16s; }
.vc-reveal[data-vc-delay="3"] { transition-delay: .24s; }
.vc-reveal[data-vc-delay="4"] { transition-delay: .32s; }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.vc-hero {
    position: relative; overflow: hidden;
    background: radial-gradient(1200px 620px at 78% 18%, #10306A 0%, transparent 62%),
                linear-gradient(170deg, #071730 0%, #050F22 58%, #040B19 100%);
    padding: clamp(96px, 11vw, 158px) 0 clamp(72px, 8vw, 112px);
}
.vc-hero__grid-bg {
    position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(900px 520px at 70% 30%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(900px 520px at 70% 30%, #000 0%, transparent 78%);
}
.vc-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }

.vc-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 30px; padding: 0; list-style: none; }
.vc-eyebrow li {
    font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: #8FA5C6; display: flex; align-items: center; gap: 14px;
}
.vc-eyebrow li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--vc-cyan); opacity: .8; }
.vc-eyebrow li:first-child { color: var(--vc-cyan); }

.vc-hero__title {
    font-size: clamp(31px, 4.35vw, 61px); line-height: 1.08; font-weight: 700;
    letter-spacing: -.025em; color: #fff; margin: 0 0 22px;
}
.vc-hero__title em {
    font-style: normal; color: #fff;
    /* soulignement en fond : il suit les retours à la ligne, contrairement
       à un ::after positionné, et n'impose donc aucun white-space: nowrap. */
    background-image: linear-gradient(90deg, rgba(14,89,242,.6), rgba(37,216,238,.45));
    background-repeat: no-repeat;
    background-position: 0 92%;
    background-size: 0% .34em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    animation: vc-underline 1.1s .45s var(--vc-ease) forwards;
}
@keyframes vc-underline { to { background-size: 100% .34em; } }

.vc-hero__turn {
    font-size: clamp(18px, 1.95vw, 27px); line-height: 1.45; font-weight: 500;
    color: #C3D2E8; margin: 0 0 30px; max-width: 30ch;
}
.vc-hero__turn b { color: #fff; font-weight: 700; }
.vc-hero__turn .vc-accent { color: var(--vc-cyan); font-weight: 700; }

.vc-hero__meta {
    font-size: 16px; line-height: 1.75; color: #93A3BE; margin: 0 0 34px; max-width: 58ch;
    padding-left: 18px; border-left: 2px solid rgba(37,216,238,.45);
}
.vc-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.vc-hero__visual { position: relative; }
.vc-hero__visual svg { width: 100%; height: auto; display: block; }

/* ==========================================================================
   2. SITUATIONS — composition asymétrique, révélation au survol
   ========================================================================== */
.vc-doors {
    display: grid; gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
}
.vc-door {
    position: relative; display: flex; flex-direction: column;
    padding: 30px 30px 26px; border-radius: var(--vc-radius-lg);
    background: #fff; border: 1px solid var(--vc-line); text-decoration: none;
    overflow: hidden; isolation: isolate;
    transition: transform .35s var(--vc-ease), box-shadow .35s var(--vc-ease), border-color .35s var(--vc-ease);
}
.vc-door::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
    background: linear-gradient(155deg, #0B2143 0%, #061327 100%);
    transition: opacity .35s var(--vc-ease);
}
.vc-door:hover, .vc-door:focus-visible, .vc-door.is-open {
    transform: translateY(-4px); border-color: transparent;
    box-shadow: 0 22px 50px -24px rgba(6,19,39,.55);
}
.vc-door:hover::before, .vc-door:focus-visible::before, .vc-door.is-open::before { opacity: 1; }

.vc-door--lead { grid-column: 1; grid-row: 1 / span 2; }
.vc-door--a    { grid-column: 2; grid-row: 1; }
.vc-door--b    { grid-column: 3; grid-row: 1; }
.vc-door--wide { grid-column: 2 / span 2; grid-row: 2; }

.vc-door__icon {
    width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
    background: rgba(14,89,242,.09); color: var(--vc-blue); margin-bottom: 20px;
    transition: background .35s var(--vc-ease), color .35s var(--vc-ease);
}
.vc-door__icon svg { width: 24px; height: 24px; }
.vc-door:hover .vc-door__icon, .vc-door.is-open .vc-door__icon { background: rgba(37,216,238,.16); color: var(--vc-cyan); }

.vc-door__num {
    position: absolute; top: 24px; right: 28px; font-size: 13px; font-weight: 700;
    letter-spacing: .1em; color: var(--vc-line); transition: color .35s var(--vc-ease);
}
.vc-door:hover .vc-door__num, .vc-door.is-open .vc-door__num { color: rgba(255,255,255,.28); }

.vc-door__title {
    font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--vc-ink);
    margin: 0 0 10px; transition: color .35s var(--vc-ease);
}
.vc-door--lead .vc-door__title { font-size: clamp(22px, 2vw, 27px); }
.vc-door:hover .vc-door__title, .vc-door.is-open .vc-door__title { color: #fff; }

.vc-door__hint {
    font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: var(--vc-body-dim);
    margin: 0; transition: color .35s var(--vc-ease);
}
.vc-door:hover .vc-door__hint, .vc-door.is-open .vc-door__hint { color: var(--vc-cyan); }

.vc-door__reveal {
    display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows .4s var(--vc-ease), opacity .3s var(--vc-ease), margin .4s var(--vc-ease);
    margin-top: 0;
}
.vc-door__reveal > span { overflow: hidden; }
.vc-door:hover .vc-door__reveal, .vc-door:focus-visible .vc-door__reveal, .vc-door.is-open .vc-door__reveal {
    grid-template-rows: 1fr; opacity: 1; margin-top: 14px;
}
.vc-door__reveal p { font-size: 14.5px; line-height: 1.65; color: #A9B8D0; margin: 0; }

.vc-door__go {
    margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 600; color: var(--vc-blue); transition: color .35s var(--vc-ease);
}
.vc-door__go svg { width: 16px; height: 16px; transition: transform .3s var(--vc-ease); }
.vc-door:hover .vc-door__go { color: var(--vc-cyan); }
.vc-door:hover .vc-door__go svg { transform: translateX(4px); }

/* ==========================================================================
   3. EXIGENCE — conception → exploitation
   ========================================================================== */
.vc-exigence__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(36px, 5vw, 74px); align-items: center; }
.vc-exigence__visual svg { width: 100%; height: auto; display: block; }
.vc-note {
    margin: 26px 0 0; padding: 16px 20px; border-radius: 14px;
    background: #fff; border: 1px solid var(--vc-line); border-left: 3px solid var(--vc-blue);
    font-size: 14.5px; line-height: 1.65; color: var(--vc-body);
}

/* ==========================================================================
   4. TECHNOLOGIES
   ========================================================================== */
.vc-tech__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 36px; }
.vc-tech__head .vc-h3 { margin: 0; max-width: 20ch; }
.vc-tech__disclaimer { margin: 0; font-size: 14px; line-height: 1.6; color: var(--vc-body-dim); max-width: 42ch; }

.vc-marquee { position: relative; 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); }
.vc-marquee__track { display: flex; gap: 14px; width: max-content; animation: vc-scroll 46s linear infinite; }
.vc-marquee.is-paused .vc-marquee__track { animation-play-state: paused; }
@keyframes vc-scroll { to { transform: translateX(-50%); } }

.vc-tech__item {
    display: flex; align-items: center; gap: 12px; flex: none;
    padding: 16px 24px; border-radius: 14px; background: #fff;
    border: 1px solid var(--vc-line); transition: border-color .25s var(--vc-ease), transform .25s var(--vc-ease);
}
.vc-tech__item:hover { border-color: var(--vc-blue); transform: translateY(-2px); }
.vc-tech__item svg { width: 22px; height: 22px; color: var(--vc-blue); flex: none; }
.vc-tech__item b { font-size: 15.5px; font-weight: 650; color: var(--vc-ink); white-space: nowrap; }
.vc-tech__item span { font-size: 12.5px; color: var(--vc-body-dim); white-space: nowrap; }

.vc-marquee__toggle {
    margin: 22px auto 0; display: flex; align-items: center; gap: 8px;
    padding: 9px 18px; border-radius: 999px; border: 1px solid var(--vc-line);
    background: #fff; color: var(--vc-body); font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: border-color .25s var(--vc-ease), color .25s var(--vc-ease);
}
.vc-marquee__toggle:hover { border-color: var(--vc-blue); color: var(--vc-blue); }

/* ==========================================================================
   5. FRISE DU DISCERNEMENT
   ========================================================================== */
.vc-story__grid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.vc-story__steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 42px; }
.vc-story__rail { position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px; background: rgba(255,255,255,.12); border-radius: 2px; }
.vc-story__progress { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(180deg, var(--vc-cyan), var(--vc-blue)); border-radius: 2px; transition: height .6s var(--vc-ease); display: block; }

.vc-story__step { position: relative; padding: 16px 0 26px; cursor: pointer; border: 0; background: none; text-align: left; width: 100%; display: block; }
.vc-story__step::before {
    content: ""; position: absolute; left: -34px; top: 22px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--vc-navy); border: 2px solid rgba(255,255,255,.22);
    transition: background .3s var(--vc-ease), border-color .3s var(--vc-ease), transform .3s var(--vc-ease);
}
.vc-story__step.is-active::before { background: var(--vc-cyan); border-color: var(--vc-cyan); transform: scale(1.25); }
.vc-story__num { display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--vc-cyan); opacity: .6; margin-bottom: 6px; }
.vc-story__t { display: block; font-size: 18px; font-weight: 700; color: #7E8EA8; transition: color .3s var(--vc-ease); }
.vc-story__step.is-active .vc-story__t { color: #fff; }
.vc-story__d { display: block; font-size: 14.5px; line-height: 1.6; color: #6B7A93; margin-top: 5px; }
.vc-story__step.is-active .vc-story__d { color: #A9B8D0; }

.vc-story__panel {
    position: relative; padding: clamp(26px, 3vw, 40px); border-radius: var(--vc-radius-lg);
    background: linear-gradient(155deg, rgba(18,46,89,.75), rgba(8,22,44,.9));
    border: 1px solid var(--vc-line-dark); min-height: 280px;
}
.vc-story__pane { display: none; }
.vc-story__pane.is-active { display: block; animation: vc-fade .45s var(--vc-ease); }
@keyframes vc-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vc-story__quote { font-size: clamp(19px, 2vw, 25px); line-height: 1.4; font-weight: 600; color: #fff; margin: 0 0 18px; }
.vc-story__pane p { font-size: 15.5px; line-height: 1.75; color: #AEBBD0; margin: 0 0 14px; }
.vc-story__pane p:last-child { margin-bottom: 0; }
.vc-story__tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px; background: rgba(37,216,238,.12); color: var(--vc-cyan); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vc-story__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vc-story__list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.6; color: #AEBBD0; }
.vc-story__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: var(--vc-cyan); opacity: .75; }

/* ==========================================================================
   6. EXPERTISES
   ========================================================================== */
.vc-exp { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.vc-exp__card {
    display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--vc-radius-lg);
    background: #fff; border: 1px solid var(--vc-line); text-decoration: none;
    transition: transform .3s var(--vc-ease), box-shadow .3s var(--vc-ease), border-color .3s var(--vc-ease);
}
.vc-exp__card:hover { transform: translateY(-4px); border-color: rgba(14,89,242,.4); box-shadow: 0 20px 44px -26px rgba(6,19,39,.45); }
.vc-exp__icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(14,89,242,.08); color: var(--vc-blue); margin-bottom: 18px; }
.vc-exp__icon svg { width: 23px; height: 23px; }
.vc-exp__card h3 { font-size: 18.5px; font-weight: 700; color: var(--vc-ink); margin: 0 0 9px; }
.vc-exp__card p { font-size: 14.5px; line-height: 1.65; color: var(--vc-body); margin: 0 0 18px; }
.vc-exp__card .vc-link { margin-top: auto; }

.vc-exp__sub {
    margin-top: 18px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 26px; align-items: center;
    padding: 30px clamp(26px,3vw,38px); border-radius: var(--vc-radius-lg);
    background: linear-gradient(135deg, rgba(14,89,242,.06), rgba(37,216,238,.08));
    border: 1px solid rgba(14,89,242,.18);
}
.vc-exp__sub-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vc-blue); margin-bottom: 12px; }
.vc-exp__sub h3 { font-size: clamp(20px, 2vw, 25px); font-weight: 700; color: var(--vc-ink); margin: 0 0 10px; }
.vc-exp__sub p { font-size: 15px; line-height: 1.7; color: var(--vc-body); margin: 0; max-width: 72ch; }

/* ==========================================================================
   7. ADN / RELATION
   ========================================================================== */
.vc-adn__engagements { display: grid; gap: 0; margin: 10px 0 48px; border-top: 1px solid var(--vc-line-dark); }
.vc-adn__row {
    display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 24px; align-items: center;
    padding: 28px 0; border-bottom: 1px solid var(--vc-line-dark);
    transition: padding-left .35s var(--vc-ease);
}
.vc-adn__row:hover { padding-left: 12px; }
.vc-adn__row-n { font-size: 13px; font-weight: 700; letter-spacing: .16em; color: var(--vc-cyan); opacity: .7; }
.vc-adn__row p { margin: 0; font-size: clamp(18px, 1.9vw, 25px); line-height: 1.4; font-weight: 600; color: #E7EDF7; }
.vc-adn__row p b { color: #fff; font-weight: 700; }

.vc-adn__points { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.vc-adn__point { padding: 24px 22px; border-radius: var(--vc-radius); background: rgba(255,255,255,.04); border: 1px solid var(--vc-line-dark); }
.vc-adn__point svg { width: 22px; height: 22px; color: var(--vc-cyan); margin-bottom: 14px; }
.vc-adn__point h4 { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.vc-adn__point p { font-size: 14px; line-height: 1.6; color: #93A3BE; margin: 0; }

/* ==========================================================================
   8. CONSEIL + CTA
   ========================================================================== */
.vc-split { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.vc-panel { padding: clamp(28px,3vw,40px); border-radius: var(--vc-radius-lg); background: var(--vc-s1); border: 1px solid var(--vc-line); }
.vc-panel h3 { font-size: 20px; font-weight: 700; color: var(--vc-ink); margin: 0 0 12px; }
.vc-panel p { font-size: 15px; line-height: 1.7; color: var(--vc-body); margin: 0 0 20px; }

.vc-cta {
    position: relative; overflow: hidden; border-radius: var(--vc-radius-lg);
    padding: clamp(40px, 5vw, 68px) clamp(28px, 4vw, 62px);
    background: radial-gradient(760px 320px at 82% 12%, #14387C 0%, transparent 62%), linear-gradient(140deg, #0B2143, #061327);
    display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 30px; align-items: center;
}
.vc-cta h2 { font-size: clamp(25px, 2.8vw, 38px); line-height: 1.2; font-weight: 700; color: #fff; margin: 0 0 12px; letter-spacing: -.015em; }
.vc-cta p { font-size: 16px; line-height: 1.7; color: #A9B8D0; margin: 0; max-width: 56ch; }
.vc-cta__actions { display: flex; flex-direction: column; gap: 12px; }

/* ==========================================================================
   Adaptations tablette / mobile
   ========================================================================== */
@media (max-width: 1100px) {
    .vc-hero__inner { grid-template-columns: 1fr; gap: 42px; }
    .vc-hero__visual { max-width: 560px; margin: 0 auto; }
    .vc-exigence__grid, .vc-story__grid, .vc-split { grid-template-columns: 1fr; }
    .vc-story__panel { min-height: 0; }
    .vc-exp { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .vc-adn__points { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .vc-exp__sub { grid-template-columns: 1fr; }
    .vc-cta { grid-template-columns: 1fr; }
    .vc-cta__actions { flex-direction: row; flex-wrap: wrap; }

    .vc-doors { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .vc-door--lead { grid-column: 1 / span 2; grid-row: auto; }
    .vc-door--a, .vc-door--b, .vc-door--wide { grid-column: auto; grid-row: auto; }
}

@media (max-width: 720px) {
    .vc-container { padding: 0 18px; }
    .vc-doors, .vc-exp, .vc-adn__points { grid-template-columns: 1fr; }
    .vc-door--lead { grid-column: auto; }
    .vc-door { padding: 24px 22px 22px; }
    .vc-eyebrow li:nth-child(n+3) { display: none; }
    .vc-hero__meta { padding-left: 14px; font-size: 15px; }
    .vc-hero__cta .vc-btn { flex: 1 1 100%; justify-content: center; }
    .vc-tech__head { flex-direction: column; align-items: flex-start; }

    /* la frise devient une suite d'étapes empilées, panneau sous l'étape active */
    .vc-story__grid { gap: 22px; }
    .vc-story__steps { padding-left: 34px; }
    .vc-story__rail { left: 11px; }
    .vc-story__step::before { left: -28px; }
    .vc-story__panel { padding: 24px 20px; }

    .vc-adn__row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
    .vc-adn__row:hover { padding-left: 0; }
    .vc-cta__actions { flex-direction: column; }
    .vc-cta__actions .vc-btn { justify-content: center; }

    /* la bande technologique passe en grille statique, sans défilement */
    .vc-marquee { mask-image: none; -webkit-mask-image: none; }
    .vc-marquee__track { animation: none; width: 100%; flex-wrap: wrap; gap: 10px; }
    .vc-tech__item { flex: 1 1 calc(50% - 5px); padding: 13px 14px; }
    .vc-tech__item b { font-size: 14px; white-space: normal; }
    .vc-tech__item span { display: none; }
    .vc-marquee__toggle { display: none; }
    .vc-tech__dup { display: none; }
}

/* ==========================================================================
   Accessibilité : mouvement réduit
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .vc-js .vc-reveal { opacity: 1; transform: none; transition: none; }
    .vc-marquee__track { animation: none; }
    .vc-hero__title em { animation: none; background-size: 100% .34em; }
    .vc-story__progress { transition: none; }
    .vc-story__pane.is-active { animation: none; }
    .vc-btn, .vc-door, .vc-exp__card, .vc-adn__row { transition: none; }
}

:where(.vc-door, .vc-exp__card, .vc-btn, .vc-link, .vc-story__step, .vc-marquee__toggle):focus-visible {
    outline: 2px solid var(--vc-cyan); outline-offset: 3px;
}

/* ---------- animation discrète du schéma du premier écran ---------- */
.vc-hero-links path {
    stroke-dasharray: 5 9;
    animation: vc-flow 2.6s linear infinite;
}
@keyframes vc-flow { to { stroke-dashoffset: -28; } }

.vc-pulse { animation: vc-blip 2.8s var(--vc-ease) infinite; transform-origin: center; }
.vc-pulse--2 { animation-delay: .9s; }
.vc-pulse--3 { animation-delay: 1.8s; }
@keyframes vc-blip {
    0%, 100% { opacity: .25; r: 3.2; }
    50%      { opacity: 1;   r: 4.6; }
}

@media (prefers-reduced-motion: reduce) {
    .vc-hero-links path { animation: none; }
    .vc-pulse { animation: none; opacity: .8; }
}

/* Filet : aucune de ces sections ne doit provoquer de défilement horizontal. */
.vc-hero, .vc-section { max-width: 100vw; overflow-x: clip; }
.vc-hero__title, .vc-h2, .vc-story__quote { overflow-wrap: break-word; }

/* ==========================================================================
   Bande technologique compacte, intégrée sous les expertises (V3)
   Logo réel quand VisionCloud en dispose, sinon nom composé : la puce reste
   la même dans les deux cas, ce qui garde la bande homogène.
   ========================================================================== */
.vc-techstrip { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--vc-line); }
.vc-techstrip__head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 6px 20px; margin-bottom: 18px;
}
.vc-techstrip__head h3 {
    font-size: 15px; font-weight: 700; color: var(--vc-ink); margin: 0;
    letter-spacing: .01em;
}
.vc-techstrip__head p { margin: 0; font-size: 13px; color: var(--vc-body-dim); max-width: 54ch; }

.vc-techstrip__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vc-techstrip__list li {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 14px; border-radius: 9px;
    background: #fff; border: 1px solid var(--vc-line);
    font-size: 13.5px; font-weight: 600; color: var(--vc-ink); white-space: nowrap;
    transition: border-color .22s var(--vc-ease);
}
.vc-techstrip__list li:hover { border-color: var(--vc-blue); }
.vc-techstrip__list img {
    height: 17px; width: auto; display: block;
    filter: grayscale(1); opacity: .78;
    transition: filter .22s var(--vc-ease), opacity .22s var(--vc-ease);
}
.vc-techstrip__list li:hover img { filter: none; opacity: 1; }
.vc-techstrip__list svg { width: 16px; height: 16px; color: var(--vc-blue); flex: none; }
.vc-techstrip__list small { font-weight: 500; color: var(--vc-body-dim); font-size: 12px; }

/* ---------- appel à l'action : assistance nettement séparée ---------- */
.vc-cta__support {
    margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    font-size: 14.5px; color: #93A3BE;
}
.vc-cta__support a { color: var(--vc-cyan); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.vc-cta__support a svg { width: 15px; height: 15px; transition: transform .25s var(--vc-ease); }
.vc-cta__support a:hover svg { transform: translateX(3px); }

@media (max-width: 720px) {
    .vc-techstrip__list li { height: 36px; padding: 0 11px; font-size: 12.5px; }
    .vc-techstrip__list small { display: none; }
}

/* ==========================================================================
   Console d'architectures du premier écran (V3)
   Quatre vues dans un même cadre : réseau multisite, sécurité, infrastructure
   et Cloud, bâtiments connectés. Onglets, défilement lent, pause, clavier.
   ========================================================================== */
.vc-console { position: relative; }
.vc-console__tabs {
    display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none;
}
.vc-console__tab {
    appearance: none; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
    color: #9FB0CA; font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    transition: color .25s var(--vc-ease), border-color .25s var(--vc-ease), background .25s var(--vc-ease);
}
.vc-console__tab:hover { color: #fff; border-color: rgba(37,216,238,.5); }
.vc-console__tab[aria-selected="true"] {
    color: var(--vc-navy); background: var(--vc-cyan); border-color: var(--vc-cyan);
}
.vc-console__stage {
    /* Les vues sont masquées tant que le script n'a pas activé un onglet : le
       bandeau naissait vide puis grandissait d'une centaine de pixels, ce qui
       déplaçait tout le bloc et pesait l'essentiel du décalage visuel de la
       page. On réserve la hauteur dès le premier rendu, au rapport exact du
       viewBox des schémas (580 × 400). */
    aspect-ratio: 580 / 400;
    position: relative; border-radius: var(--vc-radius-lg);
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(155deg, rgba(18,46,89,.5), rgba(8,22,44,.72));
    overflow: hidden;
}
.vc-console__view { display: none; }
.vc-console__view.is-active { display: block; animation: vc-fade .5s var(--vc-ease); }
.vc-console__view svg { width: 100%; height: auto; display: block; }
.vc-console__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 14px; margin-top: 12px;
}
.vc-console__caption { font-size: 12px; color: #7E8EA8; margin: 0; }
.vc-console__pause {
    appearance: none; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--vc-cyan);
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px;
}
.vc-console__pause:hover { text-decoration: underline; }

/* tracés animés des flux, communs aux quatre vues */
.vc-flow { stroke-dasharray: 5 8; animation: vc-flow 2.4s linear infinite; }
.vc-node { fill: rgba(11,33,67,.92); stroke: rgba(255,255,255,.2); }
.vc-lbl  { fill: #A9BAD4; font-size: 11.5px; font-weight: 600; }
.vc-lbl--dim { fill: #71829C; font-size: 10.5px; font-weight: 500; }
.vc-accent { fill: var(--vc-cyan); }

@media (max-width: 720px) {
    .vc-console__tab { font-size: 11.5px; padding: 7px 11px; }
    .vc-console__tabs { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .vc-flow { animation: none; }
    .vc-console__view.is-active { animation: none; }
}

/* ==========================================================================
   Appel à l'action permanent (V3)
   Desktop : barre fine sous l'en-tête, après le premier écran.
   Mobile  : barre basse, masquable, qui ne recouvre jamais le contenu
             (le body reçoit une réserve de hauteur équivalente).
   Aucune popup : la barre n'interrompt rien et se ferme.
   ========================================================================== */
.vc-ctabar {
    position: fixed; left: 0; right: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center; gap: 10px 18px;
    padding: 10px max(18px, env(safe-area-inset-left, 0px)) 10px max(18px, env(safe-area-inset-right, 0px));
    background: rgba(6,19,39,.96); border-bottom: 1px solid rgba(255,255,255,.1);
    backdrop-filter: saturate(140%) blur(8px);
    top: env(safe-area-inset-top, 0px);
    transform: translateY(-100%); opacity: 0; pointer-events: none;
    transition: transform .32s var(--vc-ease), opacity .32s var(--vc-ease);
}
.vc-ctabar.is-on { transform: none; opacity: 1; pointer-events: auto; }
.vc-ctabar.is-hidden { display: none; }
.vc-ctabar__txt { font-size: 14px; font-weight: 600; color: #D6DEEC; margin: 0; }
.vc-ctabar__links { display: flex; align-items: center; gap: 10px; }
.vc-ctabar .vc-btn { padding: 9px 20px; font-size: 14px; }
.vc-ctabar__support {
    font-size: 13.5px; font-weight: 600; color: var(--vc-cyan); text-decoration: none;
    padding-left: 16px; border-left: 1px solid rgba(255,255,255,.18);
}
.vc-ctabar__support:hover { text-decoration: underline; color: var(--vc-cyan); }
.vc-ctabar__close {
    appearance: none; border: 0; background: none; cursor: pointer; color: #7E8EA8;
    font-size: 20px; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.vc-ctabar__close:hover { color: #fff; }

@media (max-width: 860px) {
    .vc-ctabar {
        top: auto; bottom: 0;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        border-bottom: 0; border-top: 1px solid rgba(255,255,255,.1);
        transform: translateY(100%);
        justify-content: space-between;
    }
    .vc-ctabar__txt { display: none; }
    .vc-ctabar__links { flex: 1; }
    .vc-ctabar .vc-btn { flex: 1; justify-content: center; }
    /* réserve de hauteur : la barre ne doit jamais recouvrir le pied de page */
    body:has(.vc-ctabar.is-on:not(.is-hidden)) { padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) { .vc-ctabar { transition: none; } }

/* ==========================================================================
   Page Contact — deux chemins distincts : commercial et assistance.
   ========================================================================== */
.vc-paths { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.vc-path {
    display: flex; flex-direction: column; padding: 32px 30px;
    border-radius: var(--vc-radius-lg); background: #fff;
    border: 1px solid var(--vc-line); text-decoration: none;
    transition: transform .3s var(--vc-ease), box-shadow .3s var(--vc-ease), border-color .3s var(--vc-ease);
}
.vc-path:hover { transform: translateY(-4px); border-color: rgba(14,89,242,.4); box-shadow: 0 22px 50px -28px rgba(6,19,39,.45); }
.vc-path--support { background: var(--vc-s1); }
.vc-path__tag {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--vc-blue); margin-bottom: 16px;
}
.vc-path__tag svg { width: 16px; height: 16px; }
.vc-path--support .vc-path__tag { color: var(--vc-cyan-dim, #0E9BAE); }
.vc-path h3 { font-size: 21px; font-weight: 700; color: var(--vc-ink); margin: 0 0 10px; }
.vc-path p { font-size: 15px; line-height: 1.7; color: var(--vc-body); margin: 0 0 20px; }
.vc-path__go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--vc-blue); }
.vc-path__go svg { width: 16px; height: 16px; transition: transform .25s var(--vc-ease); }
.vc-path:hover .vc-path__go svg { transform: translateX(4px); }
@media (max-width: 760px) { .vc-paths { grid-template-columns: 1fr; } }

/* ==========================================================================
   Page À propos (V6)
   ========================================================================== */

/* Badge : le nombre reste vide tant que la valeur exacte n'est pas fournie.
   Le <h2> du thème est rendu quoi qu'il arrive : on le replie. */
.tronix-award-number:empty { display: none; }
.tronix-awards-content .tronix-award-title { margin: 0; }

/* ---------- séquence « notre manière d'accompagner » ---------- */
.vc-seq { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(32px, 5vw, 70px); align-items: center; }
.vc-seq__visual svg { width: 100%; height: auto; display: block; }

.vc-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 62px; }
.vc-steps__rail {
    position: absolute; left: 23px; top: 20px; bottom: 24px; width: 2px;
    background: linear-gradient(180deg, var(--vc-blue), var(--vc-cyan)); border-radius: 2px; opacity: .35;
}
.vc-step2 { position: relative; padding: 0 0 30px; }
.vc-step2:last-child { padding-bottom: 0; }
.vc-step2__n {
    position: absolute; left: -62px; top: -2px;
    width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; border: 2px solid var(--vc-blue); color: var(--vc-blue);
    font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
    box-shadow: 0 8px 22px -12px rgba(14,89,242,.6);
}
.vc-step2 h3 { font-size: 19px; font-weight: 700; color: var(--vc-ink); margin: 0 0 7px; line-height: 1.3; }
.vc-step2 p { font-size: 15px; line-height: 1.7; color: var(--vc-body); margin: 0; max-width: 54ch; }

/* ---------- « ce que nous ne faisons pas » ---------- */
.vc-limites { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.vc-limite {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 24px 24px; border-radius: var(--vc-radius);
    background: rgba(255,255,255,.05); border: 1px solid var(--vc-line-dark);
}
.vc-limite__ic {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    display: grid; place-items: center;
    background: rgba(37,216,238,.12); color: var(--vc-cyan);
}
.vc-limite__ic svg { width: 21px; height: 21px; }
.vc-limite h3 { font-size: 16.5px; font-weight: 700; color: #fff; margin: 0 0 6px; line-height: 1.35; }
.vc-limite p { font-size: 14.5px; line-height: 1.65; color: #93A3BE; margin: 0; }
.vc-limites__note {
    margin: 24px 0 0; padding: 20px 24px; border-radius: var(--vc-radius);
    background: rgba(37,216,238,.08); border-left: 3px solid var(--vc-cyan);
    font-size: 16px; line-height: 1.7; color: #D6DEEC;
}

@media (max-width: 1024px) {
    .vc-seq { grid-template-columns: 1fr; }
    .vc-limites { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .vc-steps { padding-left: 52px; }
    .vc-step2__n { left: -52px; width: 40px; height: 40px; font-size: 14px; }
    .vc-steps__rail { left: 19px; }
}

/* Six limites : trois colonnes sur grand écran, deux puis une ensuite. */
.vc-limites--six { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1180px) { .vc-limites--six { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px)  { .vc-limites--six { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------
   Bande « Ce que nous administrons en production », version large.
   L'ancienne version mélangeait 3 vrais logos et 8 icônes génériques
   hautes de 17 px. Celle-ci présente 23 logos réels, groupés par
   domaine. Chaque logo est posé sur une tuile blanche de taille fixe :
   une partie des fichiers vient de montages découpés et porte un fond
   blanc opaque, qui tranchait sur le fond teinté de la section. La
   tuile règle ce défaut et donne à tous la même présence, quelles que
   soient leurs proportions.
   ------------------------------------------------------------------ */
.vc-techstrip--large { margin-top: 56px; }
.vc-techstrip--large .vc-techstrip__head { margin-bottom: 30px; }
.vc-techstrip--large .vc-techstrip__head h3 { font-size: 22px; }

.vc-techgroup + .vc-techgroup { margin-top: 24px; }
.vc-techgroup__label {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--vc-blue);
}
.vc-techgroup__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
    gap: 14px;
}
.vc-techgroup__list li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--vc-line);
    border-radius: var(--vc-radius);
    transition: border-color .25s var(--vc-ease), box-shadow .25s var(--vc-ease), transform .25s var(--vc-ease);
}
.vc-techgroup__list li:hover {
    border-color: rgba(14, 89, 242, .35);
    box-shadow: 0 16px 34px -22px rgba(6, 19, 39, .45);
    transform: translateY(-2px);
}
.vc-techgroup__list img {
    display: block;
    max-height: 46px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 860px) {
    .vc-techgroup__list { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; }
    .vc-techgroup__list li { height: 78px; padding: 12px 16px; }
    .vc-techgroup__list img { max-height: 38px; }
    .vc-techstrip--large .vc-techstrip__head h3 { font-size: 19px; }
}
@media (max-width: 520px) {
    .vc-techgroup__list { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
    .vc-techgroup__list li { height: 66px; padding: 10px 12px; }
    .vc-techgroup__list img { max-height: 32px; }
}

/* ------------------------------------------------------------------
   Page « Nos technologies et nos certifications ».
   Variante nommée de la bande : chaque tuile porte le nom sous le logo,
   parce que la page se lit, là où la bande de l'accueil se survole.
   ------------------------------------------------------------------ */
.vc-techpage .vc-techgroup { margin-top: 42px; }
.vc-techgroup__chapeau {
    margin: -8px 0 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--vc-body);
    max-width: 68ch;
}
.vc-techgroup__list--nommee { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.vc-techgroup__list--nommee li {
    flex-direction: column;
    gap: 12px;
    height: 128px;
    padding: 18px 14px;
}
.vc-techgroup__list--nommee img { max-height: 40px; }
.vc-techgroup__list--nommee span {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--vc-ink);
    text-align: center;
}

.vc-certifs { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--vc-line); }
/* En tête de page : pas de filet au-dessus, et un fond légèrement teinté
   pour que l'argument de crédibilité se détache de l'inventaire qui suit. */
.vc-certifs--haut {
    margin-top: 34px;
    padding: 28px;
    border-top: 0;
    background: var(--vc-s1);
    border-radius: var(--vc-radius-lg);
}
.vc-certifs--haut .vc-certif { border-color: transparent; box-shadow: 0 10px 26px -20px rgba(6,19,39,.4); }
.vc-certifs__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.vc-certif {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--vc-line);
    border-left: 3px solid var(--vc-blue);
    border-radius: var(--vc-radius);
}
.vc-certif img { width: 40px; height: 32px; object-fit: contain; flex: none; }
.vc-certif h3 { margin: 0 0 2px; font-size: 15.5px; font-weight: 700; color: var(--vc-ink); line-height: 1.3; }
.vc-certif p { margin: 0; font-size: 13px; color: var(--vc-body); }

@media (max-width: 860px) {
    .vc-techgroup__list--nommee { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
    .vc-techgroup__list--nommee li { height: 112px; }
    .vc-techgroup__list--nommee img { max-height: 32px; }
    .vc-certifs__list { grid-template-columns: 1fr; }
}

/* Bande courte de l'accueil : aperçu seulement, le détail est sur la page
   « Nos technologies et nos certifications ». Pas de noms sous les logos,
   pas de regroupement : on survole, on ne lit pas. */
.vc-techstrip--courte { margin-top: 56px; }
.vc-techstrip--courte .vc-techgroup__list {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.vc-techstrip--courte .vc-techgroup__list li { height: 84px; }
.vc-techstrip__lien { margin-top: 22px; }

/* Le lien vers Vision Home dans un chapeau de groupe doit se voir comme
   un lien : sans cela il passait pour du gras et personne ne cliquait. */
.vc-techgroup__chapeau a {
    color: var(--vc-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.vc-techgroup__chapeau a:hover { text-decoration-thickness: 2px; }

/* Deux niveaux de couverture du SOC, côte à côte sous les cartes. */
.vc-soc__niveaux {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}
.vc-soc__niveaux > div {
    padding: 24px 26px;
    background: var(--vc-s1);
    border: 1px solid var(--vc-line);
    border-left: 3px solid var(--vc-blue);
    border-radius: var(--vc-radius);
}
.vc-soc__niveaux h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--vc-ink); }
.vc-soc__niveaux p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--vc-body); }
@media (max-width: 760px) { .vc-soc__niveaux { grid-template-columns: 1fr; } }

/* La note de limites a été dessinée pour la section sombre de l'accueil :
   son texte clair devient illisible sur fond blanc. Variante claire. */
.vc-light .vc-limites__note,
.vc-tint .vc-limites__note {
    background: rgba(14, 89, 242, .06);
    border-left-color: var(--vc-blue);
    color: var(--vc-body);
}

/* ------------------------------------------------------------------
   Flèche d'appel vers les deux chemins (page Contact).
   Un mouvement court et lent : il doit attirer l'œil vers le choix
   juste en dessous, pas occuper le regard. Décoratif, donc masqué aux
   lecteurs d'écran — les deux liens sont immédiatement après.
   ------------------------------------------------------------------ */
.vc-fleche {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    margin: 6px auto 30px;
    color: var(--vc-blue);
}

/* Le halo donne l'impression que la flèche flotte au-dessus de la page.
   Il respire plus lentement qu'elle ne descend, pour que les deux
   mouvements ne se synchronisent pas en un clignotement. */
.vc-fleche__halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
                rgba(14, 89, 242, .22) 0%,
                rgba(14, 89, 242, .10) 42%,
                rgba(14, 89, 242, 0) 70%);
    animation: vc-halo 3.4s ease-in-out infinite;
}

.vc-fleche svg {
    position: relative;
    width: 52px; height: 52px;
    animation: vc-descend 2.1s var(--vc-ease, ease-in-out) infinite;
}

@keyframes vc-descend {
    0%, 100% { transform: translateY(-4px); opacity: .55; }
    50%      { transform: translateY(8px);  opacity: 1; }
}
@keyframes vc-halo {
    0%, 100% { transform: scale(.82); opacity: .55; }
    50%      { transform: scale(1);   opacity: 1; }
}

@media (max-width: 560px) {
    .vc-fleche { width: 74px; height: 74px; margin-bottom: 24px; }
    .vc-fleche svg { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .vc-fleche svg,
    .vc-fleche__halo { animation: none; }
    .vc-fleche svg { opacity: .9; transform: none; }
}

/* Logo du menu mobile : le logo vertical complet remplit sinon toute la
   largeur du panneau, bord à bord. On le ramène à une taille de logo.
   (Ici plutôt que dans style.css, servi avec une version fixe et donc
   gardé en cache un an par les navigateurs.) */
.tronix-menu-wrapper .mobile-logo img {
	width: 100%;
	max-width: 210px;
	height: auto;
}

/* ---------- appel à l'action de fin de page de service ----------
   Même carte que l'accueil (.vc-cta) pour que le site parle d'une seule
   voix ; seul le texte change d'une page à l'autre, et il reprend la
   promesse que la page vient de faire.
   Grille : texte et lien assistance à gauche, actions à droite. En une
   colonne, les actions passent avant le lien assistance : le visiteur
   qui a lu jusqu'ici doit trouver le bouton tout de suite. */
.vc-section--cta { padding-top: 8px; }
.vc-cta--service { grid-template-columns: minmax(0,1fr) minmax(250px, auto); row-gap: 0; }
.vc-cta--service .vc-cta__texte   { grid-column: 1; grid-row: 1; }
.vc-cta--service .vc-cta__actions { grid-column: 2; grid-row: 1; align-self: center; align-items: stretch; }
.vc-cta__etiquette {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0 0 14px !important; font-size: 12.5px !important; line-height: 1 !important;
    font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vc-cyan) !important;
}
.vc-cta__etiquette::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.vc-cta--service .vc-btn { justify-content: center; }
/* Téléphone et WhatsApp : deux canaux de même poids — même largeur, même
   hauteur, mêmes espacements, même fond. Le libellé reste toujours écrit. */
.vc-cta__canaux { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 10px; }
.vc-cta__canal {
    display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; column-gap: 12px; row-gap: 2px;
    min-height: 64px; padding: 11px 18px; border-radius: 16px;
    border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.05);
    color: #fff; text-decoration: none; transition: border-color .25s var(--vc-ease), background .25s var(--vc-ease);
}
.vc-cta__canal:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.09); color: #fff; }
.vc-cta__canal > svg, .vc-cta__canal > img { width: 24px; height: 24px; grid-row: 1 / span 2; }
.vc-cta__canal > svg { color: #fff; }
.vc-cta__canal-nom { font-size: 15px; font-weight: 700; line-height: 1.25; color: #fff; }
.vc-cta__canal-detail { font-size: 13px; line-height: 1.35; color: #C3CEDF; }
/* Être rappelé : vrai bouton secondaire, compact, toute la surface cliquable. */
.vc-cta__rappel {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 46px; padding: 10px 18px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.06);
    color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
    transition: border-color .25s var(--vc-ease), background .25s var(--vc-ease);
}
.vc-cta__rappel svg { width: 18px; height: 18px; flex: none; }
.vc-cta__rappel:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }
.vc-cta--service .vc-cta__actions { display: grid; gap: 12px; }
/* Sur fond bleu nuit, le contour de focus bleu du site ne se voit pas. */
.vc-cta--service a:focus-visible { outline: 3px solid #fff !important; outline-offset: 3px !important; border-radius: 16px; }
.vc-cta--service .vc-btn:focus-visible, .vc-cta--service .vc-cta__rappel:focus-visible { border-radius: 999px; }
/* Assistance : une ligne à part, plus discrète, sous tout le bloc commercial. */
.vc-cta--service .vc-cta__support {
    grid-column: 1 / -1; grid-row: 2; margin-top: 30px; padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.12); font-size: 13.5px; color: #93A3BE;
}
.vc-cta--service .vc-cta__support a { color: #C3CEDF; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.vc-cta--service .vc-cta__support a:hover { color: #fff; }
.vc-cta--service .vc-cta__support a svg { display: none; }
@media (max-width: 1100px) {
    .vc-cta--service { grid-template-columns: 1fr; row-gap: 26px; }
    .vc-cta--service .vc-cta__texte,
    .vc-cta--service .vc-cta__actions,
    .vc-cta--service .vc-cta__support { grid-column: 1; grid-row: auto; }
    .vc-cta--service .vc-cta__support { grid-column: 1; margin-top: 4px; }
    .vc-cta--service .vc-cta__actions { grid-template-columns: minmax(0,1fr); max-width: 560px; }
    .vc-cta__canaux { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
    .vc-cta__canaux { grid-template-columns: 1fr; }
}

/* Le bouton de ces cartes mène à /contact/?besoin=…#vc-nom : le champ
   arrive sous l'en-tête, avec son libellé visible au-dessus. */
.vc-form #vc-nom { scroll-margin-top: 160px; }

/* Un sujet choisi (ou arrivé présélectionné depuis une carte de service)
   doit se lire comme une valeur, pas comme le texte d'invite gris. */
.tronix-contact-from-one-wrappwr.vc-form .tronix-input-area select.wpcf7-form-control:has(option:checked:not([value=""])) { color: var(--black-color, #101828); }


/* ---------- page Contact : écrire un message ou être rappelé ---------- */
.vc-modes { margin: 0 0 22px; scroll-margin-top: 140px; }
.vc-modes__titre { font-size: 15px; font-weight: 600; color: var(--black-color, #101828); margin: 0 0 10px; }
.vc-modes__onglets { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid #dfe5ef; width: 100%; max-width: 440px; }
.vc-modes__onglets button {
    border: 0; border-radius: 999px; padding: 11px 16px; background: transparent;
    font-size: 15px; font-weight: 600; color: #576073; cursor: pointer; transition: background .2s, color .2s;
}
.vc-modes__onglets button[aria-selected="true"] { background: var(--vc-blue, #0E59F2); color: #fff; }
.vc-modes__sujet { margin: 12px 0 0; font-size: 14px; color: #576073; }
.vc-modes__sujet strong { color: var(--black-color, #101828); }
.vc-form .vc-form-aide { font-size: 13px; line-height: 1.5; color: var(--color-body); margin: 6px 0 0; }
.vc-mode-rappel[hidden], .vc-mode-message[hidden] { display: none !important; }