/* ==========================================================================
   VisionCloud — page Assistance
   Migration de visioncloud.fr/help (Divi). Valeurs relevées dans la feuille
   et sur le rendu réel de la page de référence :
     hero  : image VC-CLOUD-03 pleine largeur, sans voile, texte en bas,
             séparateur en vague ; repli #4F4AEF
     bandeaux : hauteur 251px, dégradé radial #0052BA -> #000, Fredoka 42-60px
     icônes du parcours : #0052BA, #FF236C, #FFC259, #FF7F59
     corps : interlignage 2em, cartes blanches rayon 22px
   Feuille chargée uniquement sur cette page (Fredoka One ne doit pas se
   répandre sur le reste du site).
   ========================================================================== */

.vch {
    --h-indigo:  #4F4AEF;
    --h-blue:    #0052BA;
    --h-blue-d:  #002CBD;
    --h-pink:    #FF236C;
    --h-amber:   #FFC259;
    --h-orange:  #FF7F59;
    --h-ink:     #2D3940;
    --h-body:    #4E4E4E;
    --h-line:    #E6ECF5;
    --h-soft:    #F4F6F9;
    --h-radius:  22px;
    --h-display: "Fredoka One", "Trebuchet MS", sans-serif;
    --h-sans:    "Poppins", "Open Sans", system-ui, sans-serif;
    font-family: var(--h-sans);
    color: var(--h-body);
}
.vch *, .vch *::before, .vch *::after { box-sizing: border-box; }
.vch-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- HERO */
.vch-hero {
    position: relative;
    background-color: var(--h-indigo);
    background-image: url("/wp-content/uploads/2026/10/VC-CLOUD-03.webp");
    background-size: cover;
    background-position: center center;
    /* l'originale réserve 26vw au-dessus du titre, qui tombe donc bas */
    padding: clamp(230px, 32vw, 470px) 0 clamp(120px, 13vw, 190px);
    text-align: center;
}
.vch-hero__inner { position: relative; }
.vch-hero h1 {
    font-family: var(--h-display); font-weight: 400;
    font-size: clamp(40px, 5.6vw, 60px); line-height: 1.2;
    color: #fff; margin: 0 0 6px; letter-spacing: 1px;
}
.vch-hero__sub {
    font-family: var(--h-display); font-weight: 400;
    font-size: clamp(19px, 2.9vw, 37px); letter-spacing: 5px;
    color: #fff; margin: 0;
}
.vch-hero__divider { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 2; }
.vch-hero__divider svg { display: block; width: 100%; height: clamp(44px, 6.5vw, 100px); }

/* ------------------------------------------------------------ SECTIONS */
.vch-section { padding: clamp(48px, 6vw, 86px) 0; background: #fff; }
.vch-section--soft { background: var(--h-soft); }
.vch-head { text-align: center; max-width: 820px; margin: 0 auto clamp(30px, 3.6vw, 52px); }
.vch-head h2 {
    /* la référence met Fredoka One sur tous les titres, pas seulement le hero :
       première cause de l'écart « plat / chaleureux » */
    font-family: var(--h-display); font-weight: 400;
    font-size: clamp(25px, 2.9vw, 34px); line-height: 1.3;
    color: var(--h-ink); margin: 0 0 10px; letter-spacing: .3px;
}
.vch-head p { font-size: 14.5px; font-weight: 600; color: var(--h-blue); margin: 0; }

/* bandeau de rupture : « GUIDES EN DETAILS », « FAQ » */
.vch-banner {
    min-height: 251px; display: grid; place-items: center; text-align: center;
    background-image: radial-gradient(circle at center, var(--h-blue) 0%, #000 100%);
    box-shadow: inset 0 100px 140px -40px rgba(0,0,0,.07);
    padding: 40px 24px;
}
.vch-banner h2 {
    font-family: var(--h-display); font-weight: 400;
    font-size: clamp(32px, 5.4vw, 60px); line-height: 1.2;
    color: rgba(255,255,255,.52); margin: 0; text-transform: uppercase; letter-spacing: 1px;
}
.vch-banner--sub h2 { font-size: clamp(26px, 3.6vw, 42px); text-transform: none; }

/* ------------------------------------------- CARTES DE CONTACT (3 cartes) */
.vch-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vch-card {
    background: #fff; border-radius: var(--h-radius); border: 0;
    min-height: 300px;
    padding: 46px 30px 40px; text-align: center;
    display: flex; flex-direction: column; align-items: center;
    /* ombre relevée sur la référence : large, très diffuse, teintée violet.
       Aucune bordure : l'ombre seule détache la carte du fond. */
    box-shadow: 0 10px 60px -10px rgba(91,36,161,.25);
    transition: transform .3s ease, box-shadow .3s ease;
}
.vch-card:hover { transform: translateY(-5px); box-shadow: 0 40px 150px -10px rgba(91,36,161,.30); }
.vch-card__icon {
    width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
    background: var(--h-blue); color: #fff; margin-bottom: 20px; flex: none;
}
.vch-card__icon svg { width: 27px; height: 27px; }
.vch-card h3 { font-family: var(--h-display); font-weight: 400; font-size: 21px; color: var(--h-ink); margin: 0 0 12px; letter-spacing: .3px; }
.vch-card p { font-size: 14.5px; line-height: 1.9; color: var(--h-body); margin: 0; }
.vch-card strong { color: var(--h-blue); font-weight: 600; }
.vch-card__foot { margin-top: auto; padding-top: 20px; }

/* ------------------------------------------------------------- BOUTONS */
.vch-btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--h-sans); font-size: 14px; font-weight: 600;
    padding: 13px 30px; border-radius: 50px; text-decoration: none;
    border: 2px solid transparent; transition: all .25s ease; cursor: pointer;
    box-shadow: 0 22px 64px -18px rgba(92,42,131,.45);
}
.vch-btn--solid { background: var(--h-blue); color: #fff; }
.vch-btn--solid:hover { background: var(--h-blue-d); color: #fff; }
.vch-btn--pink { background: var(--h-pink); color: #fff; }
.vch-btn--pink:hover { background: #d81356; color: #fff; }
.vch-btn--ghost { border-color: rgba(255,255,255,.45); color: #fff; }
.vch-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }
.vch-btn svg { width: 16px; height: 16px; }
/* gros bouton contourné de fin de page, comme « TELECHARGER » */
.vch-btn--big {
    font-family: var(--h-display); font-weight: 400; font-size: clamp(18px, 2.4vw, 26px);
    letter-spacing: 2px; text-transform: uppercase;
    padding: 18px 54px; border: 3px solid var(--h-blue); color: var(--h-blue); background: #fff;
}
.vch-btn--big:hover { background: var(--h-blue); color: #fff; }

/* ------------------------------- ÉTAPES EN PASTILLES BLEUES (Email / Chat) */
.vch-round { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 4px; }
.vch-round__item {
    width: 172px; height: 172px; border-radius: 50%; flex: none;
    background: linear-gradient(160deg, #1766d6, var(--h-blue));
    color: #fff; display: grid; place-items: center; text-align: center;
    padding: 22px 20px; box-shadow: 0 2px 18px 5px rgba(0,0,0,.3);
}
.vch-round__item p { margin: 0; font-size: 13px; line-height: 1.55; color: #fff; }
.vch-round__item a { color: #fff; text-decoration: underline; }
.vch-round__sep { color: var(--h-blue); flex: none; display: grid; place-items: center; width: 34px; }
.vch-round__sep svg { width: 22px; height: 22px; }

/* --------------------------------------------- TRAITEMENT D'UNE DEMANDE */
.vch-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.vch-step { text-align: center; }
.vch-step__icon {
    width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
}
.vch-step__icon svg { width: 28px; height: 28px; }
.vch-step:nth-child(1) .vch-step__icon { background: var(--h-blue); }
.vch-step:nth-child(2) .vch-step__icon { background: var(--h-pink); }
.vch-step:nth-child(3) .vch-step__icon { background: var(--h-amber); }
.vch-step:nth-child(4) .vch-step__icon { background: var(--h-orange); }
.vch-step h3 { font-family: var(--h-display); font-weight: 400; font-size: 19px; color: var(--h-ink); margin: 0 0 10px; letter-spacing: .2px; }
.vch-step p { font-size: 14px; line-height: 1.9; margin: 0; }
.vch-step a { color: var(--h-blue); font-weight: 600; }

/* ------------------------------------------------- PRISE EN MAIN / PANEL */
.vch-remote { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(26px, 4vw, 54px); align-items: center; }
.vch-remote p { font-size: 15.5px; line-height: 2em; color: rgba(255,255,255,.88); margin: 0 0 22px; }
.vch-remote__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.vch-remote img { width: 100%; max-width: 360px; height: auto; border-radius: 50px; display: block; margin-left: auto; box-shadow: 0 2px 63px 41px rgba(0,0,0,.3); }
.vch-dark {
    background-image: radial-gradient(circle at center, var(--h-blue) 0%, #000 100%);
    color: rgba(255,255,255,.88);
}
.vch-dark .vch-head h2 { color: #fff; }
.vch-dark .vch-head p { color: rgba(255,255,255,.75); }

/* ---------------------------------------------------------------- FAQ */
/* deux colonnes, réponses visibles : c'est la disposition de la référence */
.vch-faq { columns: 2; column-gap: 54px; max-width: 1040px; margin: 0 auto; }
.vch-faq__item { break-inside: avoid; margin: 0 0 26px; }
.vch-faq__q { font-size: 15px; font-weight: 700; color: var(--h-blue); margin: 0 0 8px; line-height: 1.5; }
.vch-faq__a { font-size: 14.5px; line-height: 1.95; margin: 0; color: var(--h-body); }
.vch-faq__a a { color: var(--h-blue); font-weight: 600; }

/* --------------------------------------------------------- RESPONSIVE */
@media (max-width: 1024px) {
    .vch-cards, .vch-steps { grid-template-columns: repeat(2, 1fr); gap: 26px; }
    .vch-remote { grid-template-columns: 1fr; }
    .vch-remote img { margin: 0 auto; }
    .vch-faq { columns: 1; }
}
@media (max-width: 700px) {
    .vch-wrap { padding: 0 18px; }
    .vch-cards, .vch-steps { grid-template-columns: 1fr; }
    .vch-hero__sub { letter-spacing: 3px; }
    .vch-round { flex-direction: column; }
    .vch-round__sep { transform: rotate(90deg); }
    .vch-remote__actions .vch-btn { flex: 1 1 100%; justify-content: center; }
    .vch-btn--big { padding: 15px 32px; letter-spacing: 1px; }
}
@media (prefers-reduced-motion: reduce) {
    .vch-card, .vch-btn { transition: none; }
    .vch-card:hover { transform: none; }
}
.vch a:focus-visible, .vch button:focus-visible { outline: 3px solid var(--h-pink); outline-offset: 3px; }

/* page.php encadre le contenu dans un .container : les sections de cette page
   doivent en sortir pour occuper toute la largeur, comme la référence. */
.vch-hero, .vch-section, .vch-banner {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Halo blanc de la référence (0 0 30px 2px #ffffff), sur l'image de la
   section « On s'occupe de tout ». */
.vch-halo { max-width: 460px; margin: 0 auto; }
.vch-halo img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 30px 2px #ffffff; }
/* Une vidéo 16/9 tient mal dans les 460 px prévus pour une capture presque
   carrée : on lui laisse de la place. Le halo blanc franc convient à une
   capture claire, pas à une vidéo dont les bords sont sombres. */
.vch-halo--video { max-width: 760px; }
.vch-halo video {
    display: block; width: 100%; height: auto;
    /* La place est réservée avant que les métadonnées n'arrivent : sans cela
       la page sursaute quand la vidéo annonce enfin ses dimensions. */
    aspect-ratio: 16 / 9;
    border-radius: 12px; background: #000;
    box-shadow: 0 0 34px 2px rgba(255, 255, 255, .42);
}
@media (max-width: 700px) {
    .vch-card { min-height: 0; padding: 36px 24px 30px; }
    .vch-remote img { border-radius: 30px; box-shadow: 0 2px 40px 20px rgba(0,0,0,.28); }
}

/* ---------------------------------------------------------------------
   Le chat 3CX s'ancre en bas à droite, au même endroit que le bouton
   « haut de page » du thème. Cette feuille n'étant chargée que sur la
   page Assistance, le décalage ne concerne qu'elle.
   --------------------------------------------------------------------- */
#back-top.to-top {
    bottom: 104px;
}
@media (max-width: 700px) {
    #back-top.to-top { bottom: 92px; }
}

/* L'adresse e-mail dépassait du cercle : on la laisse se couper proprement. */
.vch-round__item p { word-break: break-word; overflow-wrap: anywhere; hyphens: auto; }
.vch-round__item a { font-size: 12px; display: inline-block; max-width: 100%; }

/* ---------------------------------------------------------------------
   Vidéos de démonstration (e-mail et chat). Lecture manuelle, jamais
   d'autoplay ; preload limité aux métadonnées pour ne pas alourdir la page.
   --------------------------------------------------------------------- */
.vch-video { max-width: 760px; margin: 34px auto 0; }
.vch-video figure { margin: 0; }
/* Le bloc média d'une section accueille indifféremment une vidéo de
   démonstration ou une illustration fixe : même cadre dans les deux cas.
   Le fond noir ne se voit que derrière une vidéo au format différent. */
.vch-video video,
.vch-video img {
    display: block; width: 100%; height: auto;
    border-radius: 18px; background: #000;
    box-shadow: 0 10px 60px -10px rgba(91,36,161,.28);
}
.vch-video img { background: transparent; }
.vch-video figcaption {
    margin-top: 14px; text-align: center;
    font-size: 14px; line-height: 1.7; color: var(--h-body);
}
.vch-dark .vch-video figcaption { color: rgba(255,255,255,.78); }
.vch-video--etroit { max-width: 520px; }
@media (max-width: 700px) {
    .vch-video { margin-top: 26px; }
    .vch-video video,
    .vch-video img { border-radius: 14px; }
    .vch-video figcaption { font-size: 13.5px; }
}

/* ---------------------------------------------------------------------
   Sections Email et Chat en deux colonnes, comme le bloc Téléphone de la
   référence : le parcours d'un côté, la vidéo de l'autre, alternés.
   --------------------------------------------------------------------- */
.vch-duo { display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap: clamp(26px, 3vw, 44px); align-items: center; }
.vch-duo--inverse .vch-duo__media { order: -1; }

/* Les pastilles restent en ligne, comme sur la référence : trois cercles
   côte à côte dans la demi-colonne, simplement réduits pour y tenir. */
.vch-duo .vch-round { flex-wrap: nowrap; gap: 0; justify-content: flex-start; }
.vch-duo .vch-round__item { width: 145px; height: 145px; padding: 14px 12px; }
.vch-duo .vch-round__item p { font-size: 11.5px; line-height: 1.42; }
.vch-duo .vch-round__item a { font-size: 10.5px; word-break: break-all; }
.vch-duo .vch-round__sep { width: 16px; }
.vch-duo .vch-round__sep svg { width: 17px; height: 17px; }

.vch-duo .vch-video { margin: 0; max-width: 100%; }
/* plus de plafond en colonne : la vidéo occupe toute la largeur disponible */
.vch-duo .vch-video--etroit { max-width: 100%; margin-inline: 0; }

@media (max-width: 1024px) {
    .vch-duo { grid-template-columns: 1fr; }
    .vch-duo .vch-round__item { width: 168px; height: 168px; }
    .vch-duo .vch-round__item p { font-size: 13px; }
}
@media (max-width: 700px) {
    .vch-duo .vch-round { flex-direction: column; flex-wrap: wrap; }
    .vch-duo .vch-round__sep { transform: rotate(90deg); }
}

/* ---------------------------------------------------------------------
   Carte horaires. Remplace Panel-1.png, dont les horaires étaient
   incrustés dans l'image et ne correspondaient plus à l'amplitude réelle.
   Même composition que l'originale : logo, puis trois informations.
   --------------------------------------------------------------------- */
.vch-horaires {
    background: #fff; border-radius: 26px;
    padding: 30px 28px 26px; text-align: center;
    max-width: 330px; margin-left: auto;
    box-shadow: 0 2px 63px 41px rgba(0,0,0,.3);
}
.vch-horaires img {
    width: 190px; height: auto; margin: 0 auto 22px; display: block;
    /* .vch-remote img lui donnait le rayon de 50 px et l'ombre de 41 px
       d'étalement prévus pour la capture de prise en main : sur fond
       blanc, cela dessinait un halo qui faisait croire à une sélection. */
    border-radius: 0;
    box-shadow: none;
}
.vch-horaires dl { margin: 0; }
.vch-horaires dt {
    font-family: var(--h-sans); font-weight: 700; font-size: 15px;
    color: var(--h-ink); margin: 0;
}
.vch-horaires dd {
    margin: 2px 0 16px; font-size: 15px; font-weight: 600; color: var(--h-blue);
}
.vch-horaires dd:last-child { margin-bottom: 0; }
@media (max-width: 1024px) { .vch-horaires { margin-inline: auto; } }
@media (max-width: 700px) {
    .vch-horaires { padding: 24px 22px 20px; box-shadow: 0 2px 40px 20px rgba(0,0,0,.28); }
    .vch-horaires img { width: 150px; margin-bottom: 18px; }
}

/* Le thème met les <strong> dans son encre sombre (#1C1C25), ce qui est
   juste sur fond clair mais illisible dans la section Téléphone, en
   dégradé bleu : le numéro ressortait à 1,89:1 là où il en faut 4,5.
   Il passe en blanc, et les liens en cyan de la charte. */
.vch-dark strong,
.vch-dark b { color: #fff; }
.vch-dark p a:not(.vch-btn) { color: #7FE3F0; }
.vch-dark p a:not(.vch-btn):hover { color: #fff; }

/* --- carte « Via Chat » : le bouton qui ouvre la discussion ---------------
   Le script ne le démasque que si la bulle 3CX existe vraiment. Un bouton
   qui n'ouvrirait rien vaut moins que pas de bouton du tout. */
.vch-card__action {
    /* margin-top: auto le colle au bas de la carte, quelle que soit la
       longueur du texte au-dessus : les trois cartes gardent leur aplomb. */
    margin-top: auto;
    appearance: none;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    padding: 12px 24px;
    background: var(--h-blue);
    color: #fff;
    transition: background .2s ease, transform .2s ease;
}
.vch-card__action:hover { background: #0046a0; transform: translateY(-1px); }
.vch-card__action:focus-visible { outline: 3px solid #0052BA; outline-offset: 3px; }
.vch-card--chat p { margin-bottom: 22px; }