/* ════════════════════════════════════════════════════
   CBR-CLOUD — Hébergement Web
   Transcription de la maquette « Hébergement Web CBR-Cloud ».
   Accent : cyan #06b6d4 / #0891b2
   Thème CLAIR : la page passe sur fond #eceff1, comme celle des noms de
   domaine et comme le dessine la maquette. Le fond sombre du gabarit est donc
   neutralisé ici. Seuls le hero et le bloc d'appel final restent marine.
════════════════════════════════════════════════════ */

/* ── Fond global (identique à la maquette) ── */
body {
    background-color: #eceff1 !important;
    background-image: none !important;
    color: #0f172a;
}

.navigation-bar,.sticky-wrapper { z-index:9999!important;transition:all .3s ease!important; }
.header-top-area { z-index:1!important;position:relative!important; }

/* Toutes les sections partagent la même gouttière que la maquette. */
.wh-hero,
.wh-technos-wrap,
.wh-offres,
.wh-engagements-wrap,
.wh-cta-wrap {
    max-width: 1240px;
    margin: 0 auto;
    font-family: 'Montserrat', system-ui, sans-serif;
}

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
/* Le haut de la page reprend le bleu marine #0b1e33 du header et du hero de la
   page domaines. Le marine descend jusqu'à la note « Installés en un clic… » :
   le hero, la bande des technologies et cette note sont dans la même zone bleue,
   comme la maquette. Le fondu vers le fond clair ne vient qu'après, dans les
   130 px de padding-bottom — les mêmes que le raccord du pied de page, à
   l'envers : la page s'ouvre et se referme sur le même fondu.

   DEUX COUCHES, et non un seul dégradé en pourcentages. La couche du fondu est
   calée sur le bas du bloc et mesure 130 px quelle que soit la hauteur du hero
   — deux colonnes sur un écran large, une seule et bien plus haute sur un
   téléphone. Un dégradé en pourcentages, lui, remonterait sur la note dès que
   le hero grandit, et la note y redeviendrait illisible.
   La couche marine s'aplatit sur #16304b avant le fondu (72 %, alors que le
   fondu ne commence jamais avant ~85 %) : les deux se rejoignent ainsi sur la
   même teinte, sans liseré. */
.wh-hero-fond {
    padding-bottom: 130px;
    background-color: #eceff1;
    background-image:
        linear-gradient(180deg,
            #16304b 0%, #26445f 13%, #476479 29%, #71889b 45%,
            #a8b7c2 63%, #d5dce1 82%, #eceff1 100%),
        linear-gradient(180deg,
            #0b1e33 0%, #0e2339 44%, #16304b 72%, #16304b 100%);
    background-repeat: no-repeat;
    background-position: bottom, top;
    background-size: 100% 130px, 100% 100%;
}

/* Le haut vaut 140px et non 72px comme la maquette : la barre de navigation
   du site est fixe et la maquette, elle, n'en a pas. Le bas reprend les 110px
   de la maquette : l'écart entre le contenu du hero et la bande des
   technologies, toutes deux sur le marine. */
.wh-hero {
    padding: 140px 40px 110px;
    display: grid;
    /* min(420px,100%) et non 420px seul : une piste minmax() ne descend jamais
       sous son minimum, et la maquette — dessinée pour 1280px — poussait donc
       la page à défiler latéralement sur un téléphone. Au-dessus de 936px le
       rendu est identique à la maquette : deux colonnes. */
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: 56px;
    align-items: center;
}

.wh-title {
    font-size: clamp(26px, 2.7vw, 38px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.03em;
    margin: 0 0 18px;
    color: #f1f5f9;
    font-family: 'Montserrat', sans-serif;
}
.wh-hl { color: #38bdf8; }

.wh-sub {
    font-size: 17.5px;
    line-height: 1.7;
    color: #94a3b8;
    max-width: 500px;
    margin: 0 0 26px;
    text-wrap: pretty;
}

.wh-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.wh-btn-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #0369a1, #0284c7 60%, #06b6d4);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 15px 30px;
    border-radius: 9px;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(6,182,212,.28);
    transition: transform .18s, box-shadow .18s;
}
.wh-btn-main:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(6,182,212,.4);
}
.wh-btn-arrow { font-weight: 800; }

/* Trois repères, séparés par la grille elle-même (gap 1px sur fond clair). */
.wh-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    overflow: hidden;
    max-width: 460px;
}
.wh-stat     { background: rgba(255,255,255,.02); padding: 16px 18px; }
.wh-stat-val { font-size: 21px; font-weight: 800; letter-spacing: -.025em; color: #f1f5f9; line-height: 1; }
.wh-stat-cyan{ color: #06b6d4; }
.wh-stat-lbl {
    font-size: 10.5px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: rgba(255,255,255,.32); margin-top: 7px;
}

/* ── Colonne droite : le navigateur ── */
.wh-hero-right { position: relative; min-width: 0; }
.wh-browser-glow {
    position: absolute;
    inset: -30px -20px;
    background: radial-gradient(ellipse at 60% 40%, rgba(6,182,212,.16), transparent 65%);
    filter: blur(10px);
    pointer-events: none;
}
.wh-browser {
    position: relative;
    background: #1e2022;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}

.wh-browser-chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: #252829;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.wh-chrome-dots { display: flex; gap: 6px; }
.wh-dot-r,.wh-dot-y,.wh-dot-g { width: 9px; height: 9px; border-radius: 50%; opacity: .7; display: block; }
.wh-dot-r { background: #ef4444; }
.wh-dot-y { background: #fbbf24; }
.wh-dot-g { background: #22c55e; }
.wh-chrome-url {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255,255,255,.5);
}
.wh-chrome-lock { color: #34d399; display: inline-flex; }

/* ── Le site affiché dans le navigateur ── */
.wh-browser-body { background: #fff; font-family: 'Inter', system-ui, sans-serif; }

.wh-site-topbar {
    background: #153B69;
    color: #C9DBEF;
    font-size: 9.5px;
    padding: 7px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.wh-site-topbar-cta { color: #fff; font-weight: 600; }

.wh-site-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid #E3E8EF;
}
.wh-site-mark {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: #1D4E89; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800; font-size: 9px; letter-spacing: -.02em;
    flex-shrink: 0;
}
.wh-site-brand   { min-width: 0; }
.wh-site-name    { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 12.5px; color: #0F1B2D; letter-spacing: -.02em; line-height: 1.2; }
.wh-site-tagline { font-size: 8px; color: #7A879B; letter-spacing: .05em; text-transform: uppercase; font-weight: 500; }
.wh-site-spacer  { flex: 1; }
.wh-site-link    { font-size: 10px; color: #526074; font-weight: 500; }
.wh-site-cta {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px; font-weight: 700; color: #fff;
    background: #E07A2F; padding: 7px 12px; border-radius: 7px; white-space: nowrap;
}

.wh-site-hero {
    background: linear-gradient(180deg, #F8FAFC, #fff);
    padding: 22px 18px 20px;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 18px;
    align-items: center;
}
.wh-site-eyebrow {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700; font-size: 8px; letter-spacing: .13em;
    text-transform: uppercase; color: #1D4E89; margin-bottom: 8px;
}
.wh-site-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800; font-size: 19px; line-height: 1.15;
    letter-spacing: -.02em; color: #0F1B2D; margin-bottom: 10px;
}
.wh-site-mark-hl { color: #1D4E89; background: linear-gradient(transparent 68%, rgba(224,122,47,.24) 68%); }
.wh-site-text    { font-size: 10.5px; line-height: 1.6; color: #526074; margin-bottom: 14px; }
.wh-site-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wh-site-btn-p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px; font-weight: 700; color: #fff; background: #E07A2F;
    padding: 9px 13px; border-radius: 8px; box-shadow: 0 6px 16px -8px rgba(224,122,47,.7);
}
.wh-site-btn-g {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px; font-weight: 700; color: #1D4E89; background: #fff;
    border: 1.5px solid #E3E8EF; padding: 8px 12px; border-radius: 8px;
}

.wh-site-visual { position: relative; }
.wh-site-photo {
    aspect-ratio: 4 / 3.35;
    border-radius: 12px;
    background: repeating-linear-gradient(135deg, #dde5ee 0 8px, #eef2f7 8px 16px);
    box-shadow: 0 10px 26px -12px rgba(15,27,45,.3);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 10px;
}
.wh-site-photo-lbl {
    font-family: ui-monospace, monospace; font-size: 8px; color: #7A879B;
    background: rgba(255,255,255,.85); padding: 3px 7px; border-radius: 4px;
}
.wh-site-badge {
    position: absolute; left: -10px; bottom: 14px;
    background: #fff; border: 1px solid #E3E8EF; border-radius: 10px;
    padding: 8px 11px; box-shadow: 0 8px 22px -12px rgba(15,27,45,.35);
    display: flex; align-items: center; gap: 9px;
}
.wh-site-badge-val { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 15px; color: #1D4E89; line-height: 1; }
.wh-site-badge-txt { font-size: 8.5px; line-height: 1.3; color: #526074; }

.wh-site-foot { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #E3E8EF; }
.wh-site-foot-cell { padding: 12px 10px; border-right: 1px solid #E3E8EF; }
.wh-site-foot-cell:last-child { border-right: 0; }
.wh-site-foot-t { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 9.5px; font-weight: 800; color: #0F1B2D; margin-bottom: 3px; }
.wh-site-foot-s { font-size: 8.5px; line-height: 1.4; color: #7A879B; }

/* ════════════════════════════════════════
   TECHNOLOGIES
════════════════════════════════════════ */
/* 18px en bas : sans eux, la note tombait pile sur la première ligne du fondu.
   Elle garde ainsi un peu de marine franc sous elle, comme dans la maquette. */
.wh-technos-wrap { padding: 8px 40px 18px; }
.wh-technos {
    border: 1px solid rgba(15,23,42,.13);
    border-radius: 16px;
    background: #ffffff;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
    overflow: hidden;
}
.wh-techno      { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wh-techno-icon {
    width: 19px; height: 19px; display: block; flex-shrink: 0; opacity: .9;
    background-repeat: no-repeat; background-position: center; background-size: contain;
}
.wh-techno-nom  { font-size: 13px; font-weight: 600; color: rgba(15,23,42,.7); white-space: nowrap; }
/* Gris clair comme la maquette, puisque la note est restée sur le marine : .55
   et non .5, ce qui la fait passer de 4,3:1 à 4,8:1 sur ce bleu — le minimum
   lisible est 4,5:1, et ce sont 11 px en capitales. */
.wh-technos-note {
    text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 1.8px;
    text-transform: uppercase; color: rgba(241,245,249,.55); margin-top: 14px;
}

/* ════════════════════════════════════════
   OFFRES
════════════════════════════════════════ */
.wh-offres { padding: 80px 40px 0; }

.wh-offres-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}
.wh-offres-intro { max-width: 560px; }
/* Le cyan descend d'un cran sur fond clair — #0891b2 au lieu de #06b6d4 : c'est
   la valeur que la maquette elle-même emploie ici, et elle passe de 2,3:1 à
   3,2:1. Assez pour le grand titre (3:1 suffit à cette taille) et pour cet
   intertitre, que le h2 juste en dessous répète en toutes lettres. Le cyan vif
   reste là où le fond est resté marine : le bloc d'appel final. */
.wh-lbl {
    font-size: 11px; font-weight: 700; letter-spacing: 2.4px;
    text-transform: uppercase; color: #0891b2; margin: 0 0 12px;
}
.wh-offres-intro h2 {
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 800; letter-spacing: -.03em; line-height: 1.14;
    margin: 0 0 12px; color: #0f172a;
    font-family: 'Montserrat', sans-serif;
}
.wh-offres-intro h2 em { font-style: normal; color: #0891b2; }
.wh-offres-sub { font-size: 15px; line-height: 1.7; color: rgba(15,23,42,.52); margin: 0; text-wrap: pretty; }

/* Sélecteur Mensuel / Annuel */
.wh-periode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(15,23,42,.14);
    border-radius: 10px;
    background: #ffffff;
}
.wh-periode-opt {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    background: transparent;
    color: rgba(15,23,42,.5);
    transition: background .2s, color .2s;
}
.wh-periode-opt:hover { color: rgba(15,23,42,.8); text-decoration: none; }
.wh-periode-on,
.wh-periode-on:hover { background: rgba(6,182,212,.14); color: #0e7490; }
.wh-periode-remise { font-weight: 700; color: #0f9d76; }

/* Avis affiché tant que la caisse ne facture pas encore à l'année. */
.wh-periode-avis {
    margin: 16px 0 0;
    padding: 12px 16px;
    border: 1px solid rgba(180,120,10,.28);
    border-radius: 10px;
    background: rgba(251,191,36,.14);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(15,23,42,.62);
}
.wh-periode-avis a { color: #0e7490; }

.wh-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 14px;
    align-items: stretch;
}
.wh-plan {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.14);
    border-radius: 14px;
    padding: 22px 18px 18px;
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 26px -18px rgba(15,23,42,.22);
    display: flex;
    flex-direction: column;
    transition: transform .2s, border-color .2s;
}
.wh-plan:hover { transform: translateY(-4px); border-color: rgba(6,182,212,.3); }

.wh-plan-ring {
    position: absolute; inset: -1px;
    border: 1.5px solid rgba(6,182,212,.5);
    border-radius: 16px;
    pointer-events: none;
    box-shadow: 0 0 40px rgba(6,182,212,.12) inset;
}
.wh-plan-badge {
    position: absolute; top: -11px; left: 24px;
    display: inline-flex; align-items: center; gap: 6px;
    background: #06b6d4; color: #08191d;
    font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; padding: 5px 12px; border-radius: 100px;
}

.wh-plan-nom   { font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 5px; color: #0f172a; }
.wh-plan-cible { font-size: 12.5px; line-height: 1.5; color: rgba(15,23,42,.52); margin: 0 0 18px; min-height: 38px; }

.wh-plan-prix { display: flex; align-items: flex-end; gap: 4px; }
.wh-prix-val  { font-size: 34px; font-weight: 800; letter-spacing: -.045em; line-height: .95; color: #0f172a; }
.wh-prix-sym  { font-size: 14px; font-weight: 700; color: rgba(15,23,42,.55); margin-bottom: 3px; }
.wh-prix-per  { font-size: 12px; font-weight: 500; color: rgba(15,23,42,.48); margin-bottom: 4px; }
.wh-plan-note { font-size: 11.5px; font-weight: 500; color: rgba(15,23,42,.45); margin-top: 7px; min-height: 32px; line-height: 1.45; }

.wh-plan-btn {
    display: flex; align-items: center; justify-content: center;
    margin: 14px 0 18px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13.5px; font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    background: rgba(6,182,212,.1);
    color: #0e7490;
    border: 1px solid rgba(6,182,212,.25);
    transition: opacity .2s;
    width: 100%;
}
.wh-plan-btn:hover { opacity: .9; }
.wh-plan-pop .wh-plan-btn {
    background: linear-gradient(135deg, #0369a1, #0284c7 60%, #06b6d4);
    color: #fff;
    border-color: rgba(6,182,212,.4);
}
/* Bouton neutralisé : la maquette n'en dessine pas — elle ignore les ruptures
   de stock et le « bientôt ». Même traitement que sur la page domaines, à ceci
   près que le texte est plus appuyé (.55, soit 4:1) : « Bientôt disponible »
   et « Victime de son succès » sont des informations à lire, pas un décor. Le
   fond blanc et la bordure grise suffisent à dire que le bouton est inerte. */
.wh-plan-btn-off,
.wh-plan-pop .wh-plan-btn-off {
    background: #ffffff;
    color: rgba(15,23,42,.55);
    border-color: rgba(15,23,42,.13);
    cursor: default;
}
.wh-plan-btn-off:hover { opacity: 1; }

.wh-plan-specs { display: flex; flex-direction: column; font-size: 12.5px; border-top: 1px solid rgba(15,23,42,.1); }
.wh-spec {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(15,23,42,.08);
}
.wh-spec:last-child { border-bottom: 0; }
.wh-spec span { color: rgba(15,23,42,.5); }
.wh-spec b    { color: #0f172a; font-weight: 700; text-align: right; }

.wh-plan-plus {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid rgba(15,23,42,.1);
    font-size: 11.5px; font-weight: 600; color: rgba(15,23,42,.45); line-height: 1.5;
}

/* ── Inclus partout ── */
.wh-inclus {
    margin-top: 22px;
    padding: 22px 26px;
    border: 1px solid rgba(15,23,42,.13);
    border-radius: 14px;
    background: #ffffff;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 26px;
    align-items: center;
}
.wh-inclus-lbl {
    font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
    text-transform: uppercase; color: rgba(15,23,42,.42);
    max-width: 110px; line-height: 1.5;
}
.wh-inclus-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px 26px; }
.wh-inclus-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: rgba(15,23,42,.62); }
.wh-check { color: #0f9d76; font-weight: 800; font-size: 12px; }

/* ── Repères de prix ── */
.wh-reperes {
    margin-top: 14px;
    display: flex; align-items: baseline;
    gap: 10px 22px; flex-wrap: wrap;
    font-size: 12px; color: rgba(15,23,42,.45); line-height: 1.6;
}
.wh-reperes-lbl {
    font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    font-size: 10.5px; color: rgba(15,23,42,.4);
}

/* ════════════════════════════════════════
   ENGAGEMENTS
════════════════════════════════════════ */
.wh-engagements-wrap { padding: 26px 40px 0; }
.wh-engagements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 18px 40px;
    padding: 24px 26px;
    border: 1px solid rgba(15,23,42,.13);
    border-radius: 14px;
    background: #ffffff;
}
.wh-eng-t { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 6px; letter-spacing: -.01em; }
.wh-eng-s { font-size: 13px; line-height: 1.6; color: rgba(15,23,42,.52); }

/* ════════════════════════════════════════
   CTA FINAL
════════════════════════════════════════ */
.wh-cta-wrap { padding: 56px 40px 80px; }
/* Le seul bloc du corps qui reste marine, comme la maquette : il portait
   jusqu'ici un simple voile blanc qui comptait sur le fond sombre de la page.
   Sur fond clair, ce voile l'aurait rendu blanc — et son texte blanc,
   invisible. On lui pose donc le #0b1e33 en dur. */
.wh-cta {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(6,182,212,.22);
    border-radius: 20px;
    background:
        radial-gradient(ellipse 70% 120% at 50% 0%, rgba(6,182,212,.18), transparent 70%),
        #0b1e33;
    padding: 56px 48px 48px;
    text-align: center;
}
.wh-cta-line {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 180px; height: 2px;
    background: linear-gradient(90deg, transparent, #06b6d4, transparent);
}
/* Le fond est resté marine ici : l'accent y garde le cyan vif de la maquette. */
.wh-cta .wh-lbl { margin: 0 0 14px; color: #06b6d4; }
.wh-cta h2 {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 800; letter-spacing: -.03em; line-height: 1.14;
    margin: 0 auto 14px; max-width: 620px; color: #f1f5f9;
    font-family: 'Montserrat', sans-serif;
}
.wh-cta-sub {
    font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.55);
    margin: 0 auto 26px; max-width: 560px; text-wrap: pretty;
}
.wh-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 24px; }
.wh-cta-p {
    display: inline-flex; align-items: center; gap: 9px;
    background: #06b6d4; color: #08191d;
    font-size: 15px; font-weight: 800;
    padding: 15px 30px; border-radius: 9px; text-decoration: none;
    box-shadow: 0 10px 30px -10px rgba(6,182,212,.6);
    transition: background .2s, transform .18s;
}
.wh-cta-p:hover { background: #22d3ee; color: #08191d; text-decoration: none; transform: translateY(-2px); }
.wh-cta-s {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.72);
    font-size: 15px; font-weight: 700;
    padding: 15px 30px; border-radius: 9px; text-decoration: none;
    transition: background .2s, color .2s;
}
.wh-cta-s:hover { background: rgba(255,255,255,.09); color: #fff; text-decoration: none; }
.wh-cta-foot {
    display: flex; gap: 10px 26px; flex-wrap: wrap; justify-content: center;
    font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.4);
}
.wh-cta-sep { color: rgba(255,255,255,.15); }

/* ════════════════════════════════════════
   RACCORD VERS LE PIED DE PAGE
════════════════════════════════════════ */
/* Même geste que sur la page domaines, et exactement le même dégradé : la page
   se referme sur le marine qu'elle ouvre. Le pied de page du site est en
   `background: transparent` avec du texte blanc (voir layouts/app.blade.php) —
   sur ce thème clair il tomberait à 1,15:1, illisible. On lui rend un fond
   sombre, et ce dégradé de 130px l'amène sans marche d'escalier.
   `body .footer-…` et non `.footer-…` seul : le gabarit pose
   `background: transparent !important` dans un <style> de fin de page, et à
   spécificité égale c'est le dernier déclaré qui gagne. */
.wh-fondu-bas {
    height: 130px;
    background: linear-gradient(180deg,
        #eceff1 0%, #d5dce1 14%, #a8b7c2 30%, #71889b 46%,
        #476479 60%, #26445f 74%, #16304b 85%, #0b1e33 100%);
}
body .footer-ultra-modern {
    background: #0b1e33 !important;
    border-top: 0 !important;
}

/* ════════════════════════════════════════
   RESPONSIVE
   La maquette n'a qu'une largeur (1280) ; ces règles ne font que l'empêcher
   de déborder plus bas — aucune ne change le rendu au-dessus de 1100px.
════════════════════════════════════════ */
@media (max-width: 1100px) {
    /* La bande des technologies rognait ses derniers logos (nowrap). */
    .wh-technos { flex-wrap: wrap; justify-content: flex-start; gap: 14px 26px; }
}
@media (max-width: 960px) {
    /* Le fondu vit dans le padding-bottom de .wh-hero-fond, pas ici : ces 64px
       ne sont que l'écart avant la bande des technologies, resserré comme le
       reste de la page à cette largeur. */
    .wh-hero { padding: 100px 24px 64px; gap: 40px; }
    .wh-technos-wrap,
    .wh-engagements-wrap { padding-left: 24px; padding-right: 24px; }
    .wh-offres { padding: 64px 24px 0; }
    .wh-cta-wrap { padding: 48px 24px 64px; }
    .wh-cta { padding: 44px 28px 40px; }
}
@media (max-width: 700px) {
    .wh-inclus { grid-template-columns: 1fr; gap: 16px; }
    .wh-inclus-lbl { max-width: none; }
    .wh-site-hero { grid-template-columns: 1fr; }
    .wh-site-badge { left: auto; right: 10px; }
    .wh-site-foot { grid-template-columns: repeat(2, 1fr); }
    .wh-site-foot-cell:nth-child(2) { border-right: 0; }
}
@media (max-width: 560px) {
    .wh-hero { padding-top: 90px; }
    .wh-stats { grid-template-columns: 1fr; }
    .wh-site-nav .wh-site-link { display: none; }
}
/* Pas de palier au-delà : la maquette est cadrée à 1240px, et l'aperçu du
   navigateur est dessiné en pixels pour cette largeur de colonne. L'élargir
   sur grand écran rapetisserait le faux site à l'intérieur de son cadre. */