/* ===== CBR-CLOUD — SOLUTIONS ENTREPRISE / SAAS SUR MESURE =====
   Refonte d'après la maquette « Page Entreprise CBR-Cloud ».
   Le header (nav) et le footer sont fournis par layouts/app.blade.php :
   cette feuille ne stylise que le contenu de la page (.ssm-page). */

:root {
    --ssm-accent: #2563eb;
    --ssm-accent-dark: #1a56db;
    --ssm-accent-soft: #60a5fa;
    --ssm-accent-tint: rgba(59, 130, 246, 0.14);
    --ssm-canvas: #0e0e10;
    --ssm-surface: #1a1a1d;
    --ssm-surface-2: #242427;
    --ssm-deep: #0a0a0c;
    --ssm-text: #f4f4f5;
    --ssm-muted: rgba(244, 244, 245, 0.60);
    --ssm-line: rgba(255, 255, 255, 0.09);
    --ssm-line-2: rgba(255, 255, 255, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }

/* Fond global de la page (chargé uniquement sur cette page) */
body {
    background-color: var(--ssm-canvas) !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1.1px, transparent 1.1px) !important;
    background-size: 22px 22px !important;
}

.ssm-page {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    color: var(--ssm-text);
    -webkit-font-smoothing: antialiased;
}

.ssm-page ::selection { background: rgba(59, 130, 246, 0.4); }

/* Pas de bleu par défaut du navigateur : focus/clic/tap en rouge sur cette page */
.ssm-page { -webkit-tap-highlight-color: rgba(59, 130, 246, 0.25); }
.ssm-page a:focus-visible,
.ssm-page button:focus-visible,
.ssm-btn:focus-visible,
.ssm-plan-cta:focus-visible {
    outline: 2px solid var(--ssm-accent);
    outline-offset: 3px;
    border-radius: 12px;
}
.ssm-page a:focus:not(:focus-visible) { outline: none; }

.ssm-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Réservé aux lecteurs d'écran : retiré du flux visuel sans être retiré de
   l'arbre d'accessibilité (contrairement à display:none). Sert aux libellés de
   colonnes du tableau comparatif et à son <caption>. */
.ssm-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ssm-page section { scroll-margin-top: 90px; }

/* ===== TYPOGRAPHIE ===== */
.ssm-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ssm-accent-soft);
    margin: 0;
}

.ssm-h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin: 14px 0 0;
    color: var(--ssm-text);
}

.ssm-lead {
    margin: 16px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ssm-muted);
}

/* ===== BOUTONS ===== */
.ssm-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 52px;
    padding: 0 26px;
    border-radius: 13px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
}
.ssm-btn svg { width: 18px; height: 18px; }

.ssm-btn-primary {
    background: var(--ssm-accent);
    color: #fff;
    box-shadow: 0 12px 30px -10px rgba(59, 130, 246, .7);
}
.ssm-btn-primary:hover { background: var(--ssm-accent-dark); transform: translateY(-2px); }

.ssm-btn-outline {
    background: var(--ssm-surface);
    color: var(--ssm-text);
    font-weight: 600;
    border-color: var(--ssm-line);
}
.ssm-btn-outline:hover { background: var(--ssm-surface-2); border-color: var(--ssm-line-2); }

/* ===== HERO ===== */
/* ===== BANNIÈRE (desktop) vs HERO PHOTO (mobile) =====
   La bannière porte son texte en pixels. Elle est donc affichée en <img> pour ne
   jamais être recadrée, et masquée en mobile où son texte gravé deviendrait
   illisible (~7px à 375px de large). Sous 861px, c'est le hero photo qui prend le
   relais, avec des textes en vrai HTML.

   max-width figée à sa largeur native : au-delà, elle se centre au lieu d'être
   agrandie — on ne fabrique pas de pixels absents. */
/* Le <picture> est `inline` par défaut : sans ce bloc, `margin:0 auto` sur
   l'<img> n'a aucun effet et la bannière restait collée à gauche au-delà de
   2110px de viewport. */

.ssm-hero {
    background: radial-gradient(120% 95% at 50% -12%, rgba(59, 130, 246, .18) 0%, transparent 56%);
    border-bottom: 1px solid var(--ssm-line);
}
/* La photo de fond et son overlay n'existent QUE sous 861px. En desktop la
   bannière fait le travail visuel : y superposer la photo doublerait les visages
   et alourdirait le haut de page. */
@media (max-width: 860px) {
    .ssm-hero {
        background-image: var(--ssm-hero-img);
        background-size: cover;
        background-position: center 22%;
        background-repeat: no-repeat;
    }
}
/* Le hero n'a pas de hauteur propre : elle découle de ce padding. Avec une photo
   de PORTRAIT en fond, 359px n'en montraient qu'une bande de 38 %. On donne un
   peu d'air à partir de 861px pour que le cadrage respire, sans toucher à la
   structure ni au contenu. En mobile on garde le padding serré : la hauteur y est
   déjà proportionnellement plus généreuse. */
.ssm-accent { color: var(--ssm-accent-soft); }
/* Même raison : libellés des chips statistiques, posés sur la même photo. */

/* ===== STAT CHIPS ===== */
/* La chip « Disponibilité visée » est un <a> vers la page de statut : on annule
   le style de lien pour qu'elle reste visuellement identique aux deux autres,
   tout en restant focusable et cliquable. */

/* ===== SECTIONS GÉNÉRIQUES ===== */
.ssm-section { padding: 96px 0; }
/* Première section (forfaits) : on rapproche pour voir les prix presque tout de suite */
.ssm-section-first { padding-top: 22px; }
.ssm-section-first .ssm-dev-banner { margin-top: 18px; }
.ssm-section-head { max-width: 620px; }
.ssm-section-head.is-center { max-width: 640px; margin: 0 auto; text-align: center; }

/* ===== CE QU'ON LIVRE (cartes) ===== */
.ssm-cards-3 {
    display: grid;
    /* min(…, 100%) : cf. .ssm-plans. Sans lui la piste restait bloquée à 300px et
       débordait sous 348px de fenêtre (300 + 2×24px de gouttière). */
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 20px;
    margin-top: 48px;
}
.ssm-card {
    border: 1px solid var(--ssm-line);
    /* 18px, la MÊME valeur que le calque de bordure lumineuse posé au survol
       (.ssm-constat-cards .ssm-card::after). Sans rayon ici, la carte était
       carrée au repos et s'arrondissait sous le curseur : la forme changeait
       au survol. Toute modification doit donc porter sur les deux endroits. */
    border-radius: 18px;
    padding: 30px;
    background: var(--ssm-surface);
    box-shadow: 0 12px 30px -22px rgba(0, 0, 0, .7);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ssm-card:hover {
    border-color: rgba(59, 130, 246, .4);
    box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .8);
    transform: translateY(-3px);
}
.ssm-card-icon {
    width: 50px; height: 50px;
    border-radius: 13px;
    background: var(--ssm-accent-tint);
    color: var(--ssm-accent-soft);
    display: flex; align-items: center; justify-content: center;
}
.ssm-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 21px;
    letter-spacing: -0.01em;
    margin: 20px 0 0;
    color: var(--ssm-text);
}
.ssm-card p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--ssm-muted); }
.ssm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ssm-chip {
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: 8px;
    background: var(--ssm-surface-2);
    color: var(--ssm-text);
    border: 1px solid var(--ssm-line);
}

/* ===== LE CONSTAT (problèmes PME) — version premium animée ===== */
@property --ssm-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.ssm-constat { position: relative; overflow: hidden; }

/* Halo d'ambiance animé en fond de section */
.ssm-constat-aura { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ssm-constat-aura::before,
.ssm-constat-aura::after {
    content: ""; position: absolute; border-radius: 50%;
    filter: blur(90px); opacity: .55;
}
.ssm-constat-aura::before {
    width: 440px; height: 440px; top: -140px; left: -80px;
    background: radial-gradient(circle, rgba(59, 130, 246, .42), transparent 70%);
    animation: ssm-float-a 16s ease-in-out infinite;
}
.ssm-constat-aura::after {
    width: 380px; height: 380px; bottom: -160px; right: -70px;
    /* Bleu clair (#60a5fa), et non plus le corail #ff6a5f de l'ancienne palette :
       ce halo était le dernier rouge de la page. Il avait échappé au passage au
       bleu parce qu'il est écrit en rgba décimal et non en hexadécimal. Le second
       halo reste en #3b82f6 : deux bleus distincts, aucune teinte chaude. */
    background: radial-gradient(circle, rgba(96, 165, 250, .28), transparent 70%);
    animation: ssm-float-b 20s ease-in-out infinite;
}
@keyframes ssm-float-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.12); } }
@keyframes ssm-float-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, -30px) scale(1.1); } }

/* Le contenu passe au-dessus du halo */
.ssm-constat .ssm-wrap { position: relative; z-index: 1; }

/* Eyebrow « live » avec point pulsé */
.ssm-eyebrow-live { display: inline-flex; align-items: center; gap: 9px; }
.ssm-eyebrow-live::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--ssm-accent);
    animation: ssm-pulse 2s ease-out infinite;
}
@keyframes ssm-pulse {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, .5); }
    70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* Cartes du constat : cluster d'outils épars (Excel, courriel, agenda…) + bordure conique au survol */
.ssm-constat-cards .ssm-card { position: relative; overflow: hidden; }
.ssm-tool-cluster {
    position: absolute; top: 24px; right: 26px;
    width: 116px; height: 52px; pointer-events: none; z-index: 1;
}
.ssm-tool {
    position: absolute; top: 0;
    width: 40px; height: 40px;
    filter: drop-shadow(0 9px 15px rgba(0, 0, 0, .55));
    transform: rotate(var(--r));
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.ssm-tool svg { display: block; width: 40px; height: 40px; }
.ssm-tool:nth-child(1) { right: 0;   top: 0;  --r: 7deg;  z-index: 3; animation: ssm-tool-float 5s ease-in-out infinite; }
.ssm-tool:nth-child(2) { right: 30px; top: 10px; --r: -6deg; z-index: 2; opacity: .95; animation: ssm-tool-float 5s ease-in-out .4s infinite; }
.ssm-tool:nth-child(3) { right: 60px; top: 3px;  --r: 5deg;  z-index: 1; opacity: .82; animation: ssm-tool-float 5s ease-in-out .8s infinite; }
@keyframes ssm-tool-float {
    0%, 100% { transform: translateY(0) rotate(var(--r)); }
    50% { transform: translateY(-5px) rotate(var(--r)); }
}
/* Au survol de la carte : les tuiles s'écartent en éventail */
.ssm-constat-cards .ssm-card:hover .ssm-tool { animation: none; }
.ssm-constat-cards .ssm-card:hover .ssm-tool:nth-child(1) { transform: translateY(-2px) rotate(12deg); }
.ssm-constat-cards .ssm-card:hover .ssm-tool:nth-child(2) { transform: translate(5px, -4px) rotate(-10deg); }
.ssm-constat-cards .ssm-card:hover .ssm-tool:nth-child(3) { transform: translate(9px, -2px) rotate(9deg); opacity: 1; }

/* Bordure conique lumineuse qui tourne au survol */
.ssm-constat-cards .ssm-card::after {
    content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 1px;
    background: conic-gradient(from var(--ssm-ang), transparent 0 62%, var(--ssm-accent-soft) 78%, var(--ssm-accent) 85%, transparent 92% 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.ssm-constat-cards .ssm-card:hover::after { opacity: 1; animation: ssm-spin 4s linear infinite; }
@keyframes ssm-spin { to { --ssm-ang: 360deg; } }

/* Icône : anneau pulsé + micro-animation au survol */
.ssm-constat-cards .ssm-card-icon {
    position: relative;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .3s, color .3s;
}
.ssm-constat-cards .ssm-card-icon::before {
    content: ""; position: absolute; inset: 0; border-radius: 13px;
    animation: ssm-icon-pulse 2.8s ease-out infinite;
}
@keyframes ssm-icon-pulse {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, .30); }
    70% { box-shadow: 0 0 0 14px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.ssm-constat-cards .ssm-card:hover .ssm-card-icon {
    transform: translateY(-3px) rotate(-5deg) scale(1.08);
    background: var(--ssm-accent); color: #fff;
}

/* Callout mission — bordure dégradée + reflet qui balaie */
.ssm-constat-note {
    position: relative; overflow: hidden;
    max-width: 820px; margin: 44px auto 0;
    padding: 24px 30px; border-radius: 16px;
    border: 1px solid rgba(59, 130, 246, .28);
    background: linear-gradient(180deg, rgba(59, 130, 246, .08), rgba(59, 130, 246, .02));
    font-size: 16.5px; line-height: 1.6; color: var(--ssm-muted); text-align: center;
}
.ssm-constat-note::before {
    content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07), transparent);
    transform: skewX(-18deg); animation: ssm-shine 5.5s ease-in-out infinite;
}
@keyframes ssm-shine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
.ssm-constat-note strong { color: var(--ssm-text); font-weight: 700; }
.ssm-constat-note > * { position: relative; z-index: 1; }

/* Révélation au scroll (cascade) */
.ssm-constat [data-reveal] {
    opacity: 0; transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--d, 0s);
}
.ssm-constat [data-reveal].is-in { opacity: 1; transform: none; }

/* Accessibilité : on coupe le mouvement si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
    .ssm-constat-aura::before, .ssm-constat-aura::after,
    .ssm-eyebrow-live::before, .ssm-constat-cards .ssm-card-icon::before,
    .ssm-constat-note::before, .ssm-constat-cards .ssm-card:hover::after, .ssm-tool { animation: none; }
    .ssm-constat [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ===== MÉTHODE ===== */
.ssm-methode {
    background: #141416;
    border-top: 1px solid var(--ssm-line);
    border-bottom: 1px solid var(--ssm-line);
}
.ssm-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 20px;
    margin-top: 48px;
}
.ssm-step {
    background: var(--ssm-surface);
    border: 1px solid var(--ssm-line);
    border-radius: 18px;   /* même rayon que .ssm-card : ce sont des cartes aussi */
    padding: 28px;
}
.ssm-step-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--ssm-accent-tint);
    color: var(--ssm-accent-soft);
    display: flex; align-items: center; justify-content: center;
}
.ssm-step h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 18px;
    margin: 20px 0 0;
    color: var(--ssm-text);
}
.ssm-step p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ssm-muted); }

/* ===== FORFAIT ===== */
.ssm-dev-banner {
    margin-top: 44px;
    border: 1px solid var(--ssm-line);
    border-radius: 18px;   /* même rayon que .ssm-card, cf. le commentaire là-bas */
    padding: 30px;
    background: var(--ssm-surface);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.ssm-dev-banner-txt { max-width: 560px; }
.ssm-dev-banner-txt h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 20px; margin: 0; color: var(--ssm-text); }
.ssm-dev-banner-txt p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--ssm-muted); }
.ssm-dev-banner-price { text-align: right; }
.ssm-dev-banner-price .ssm-dev-amount {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 4vw, 38px);
    letter-spacing: -0.02em;
    color: var(--ssm-text);
}
.ssm-dev-banner-price .ssm-dev-sub { font-size: 13px; color: var(--ssm-muted); font-weight: 600; }

.ssm-toggle-wrap { display: flex; justify-content: center; margin-top: 48px; }
.ssm-toggle {
    display: inline-flex;
    padding: 4px;
    background: var(--ssm-surface);
    border: 1px solid var(--ssm-line);
    border-radius: 12px;
    gap: 4px;
}
.ssm-toggle-btn {
    border: none;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 9px;
    background: transparent;
    color: var(--ssm-muted);
    transition: background .15s, color .15s;
}
.ssm-toggle-btn.active {
    background: var(--ssm-surface-2);
    color: var(--ssm-text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

/* Bande tablette où `auto-fit` ne fait tenir que 2 colonnes : la 3e carte
   restait orpheline, alignée à gauche. On l'étend sur les deux colonnes puis on
   la recentre à sa largeur normale, pour que la grille reste équilibrée.
   Bornes recalées sur le minimum de 330px : 2 colonnes de ~680px à ~1029px de
   conteneur, soit environ 728px à 1077px de fenêtre. */
@media (min-width: 728px) and (max-width: 1077px) {
    .ssm-plans > .ssm-plan:nth-child(3):last-child {
        grid-column: 1 / -1;
        justify-self: center;
        /* max() et non calc() seul : à 50 % la carte descendait sous les 330px
           nécessaires, ses libellés repassaient sur deux lignes et le désalignement
           revenait par cette porte. */
        max-width: max(330px, calc(50% - 10px));
    }
}
.ssm-plans {
    display: grid;
    /* 330px n'est pas un chiffre choisi au hasard : c'est la largeur de colonne
       minimale pour qu'AUCUN libellé de fonctionnalité ne passe sur deux lignes.
       Mesuré : le libellé le plus long fait 233px, et une carte perd 94px en
       marges internes, icône et gouttière — soit 327px, arrondis à 330.

       C'est ce qui garantit l'alignement des trois forfaits. Avec l'ancien
       minimum de 270px, trois colonnes se formaient dès 850px de conteneur : les
       colonnes tombaient alors à 270-327px, plusieurs libellés passaient sur deux
       lignes, et chaque retour décalait de 19px toutes les lignes suivantes de la
       carte concernée. La grille passe donc à deux colonnes, puis à une, plutôt
       que de rétrécir sous ce seuil.

       Tout nouveau libellé plus long que 233px demande de relever ce minimum —
       ou d'être raccourci. Le test PlansAlignementTest le vérifie.

       min(330px, 100%) et non 330px sec : le minimum d'un minmax() l'emporte sur
       la largeur du conteneur, la piste refusait donc de descendre sous 330px et
       débordait dès que .ssm-wrap passait en dessous — soit sous 378px de fenêtre
       (330 + les 2×24px de gouttière). À 375px la carte crevait la gouttière de
       3px, à 360px de 18px, et à 320px c'était la page entière qui partait en
       défilement horizontal. Avec min(), le plancher de 330px tient tant qu'il y
       a la place — l'alignement des trois forfaits est donc intact — et la piste
       se rabat sur 100 % en dessous, là où une seule colonne s'affiche de toute
       façon et où il n'y a plus rien à aligner. */
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    gap: 20px;
    margin-top: 28px;
    align-items: stretch;
}

/* ── Forfaits en carrousel sous 728px ────────────────────────────────────────
   Empilées, les trois cartes faisaient 5 033px — 6,2 hauteurs d'écran à 375px,
   rien que pour comparer trois forfaits. En rail horizontal on retombe à un peu
   plus d'un écran. Borne à 727px : au-dessus, la bande tablette forme déjà deux
   colonnes (voir la règle nth-child(3) plus haut) et le rail n'a plus d'objet.

   La largeur de carte est dictée par le TEXTE, pas par l'esthétique. Mesuré dans
   le navigateur : le plus long libellé fait 233px (« Sauvegardes quotidiennes +
   hors site »), l'icône et sa gouttière en prennent 24. Avec le padding desktop
   de 34px il faudrait donc 325px de carte, et il ne resterait que 6px de la
   suivante en vue — autant dire rien. Le padding descend à 20px sur ce rail : il
   ne faut plus que 297px, arrondis à 300 pour garder 3px de marge (même slack que
   le plancher de 330px plus haut). Il reste alors 31px de la carte suivante.

   Un premier essai à 85 % donnait des cartes de 278px, soit 163px de texte : 17
   libellés sur 57 repassaient sur deux lignes et les listes partaient en dents de
   scie. Toute réduction de cette largeur ramène ce défaut.

   min(300px, 100%) : sous ~372px de fenêtre, 300px ne tiendrait plus dans le rail
   et la carte ne serait jamais entièrement visible. En dessous elle se rabat donc
   sur la largeur disponible — les libellés y reviennent sur deux lignes, ce qui
   reste préférable à une carte qu'on ne peut pas voir en entier.

   Les marges négatives font toucher le rail aux deux bords de l'écran, tandis
   que le padding garde la première carte alignée sur la gouttière de 24px du
   reste de la page. La boîte fait donc exactement la largeur de la fenêtre :
   elle défile en interne, sans jamais déborder la page.

   scroll-padding-inline-start est indispensable, pas décoratif : le snapport part
   du bord du PADDING BOX, donc en `mandatory` le navigateur décalait le rail de
   24px dès le chargement pour y aligner la première carte — qui se retrouvait
   collée au bord de l'écran, seule à ne pas respecter la gouttière de la page. */
@media (max-width: 727px) {
    .ssm-plans {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: min(300px, 100%);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: 24px;
        margin-inline: -24px;
        padding-inline: 24px;

        /* Ces deux paddings ne sont pas de la décoration, ils réparent un
           rognage. `overflow-x: auto` force le navigateur à calculer overflow-y
           en `auto` : on ne peut PAS faire défiler un axe et laisser l'autre
           visible. Tout ce qui sortait de la carte se faisait donc couper.
             - .ssm-plan-badge est en absolute top:-12px et dépassait de 11px
               vers le haut : « Populaire » se retrouvait tranché.
             - l'ombre du forfait mis en avant (0 30px 60px -38px) porte environ
               22px sous la carte.
           margin-top passe de 28 à 12px pour compenser exactement le
           padding-top : 12 + 16 = 28, la carte reste donc à la même place
           qu'avant, et la pastille dépasse à l'intérieur du rail. */
        margin-top: 12px;
        padding-top: 16px;
        padding-bottom: 24px;
        -webkit-overflow-scrolling: touch;
        /* La barre de défilement ne dit rien de plus que la carte qui dépasse,
           et elle mange 8px sous la dernière ligne de chaque carte. */
        scrollbar-width: none;
    }
    .ssm-plans::-webkit-scrollbar { display: none; }
    /* start et non center : la première carte reste alignée sur la gouttière,
       comme les titres et les paragraphes au-dessus d'elle. */
    .ssm-plan { scroll-snap-align: start; }

    /* `.ssm-plans >` n'est pas décoratif : la règle de base .ssm-plan est plus
       BAS dans ce fichier, et à spécificité égale (0-1-0) c'est elle qui gagne —
       le padding restait donc à 34px malgré ce media query. Le sélecteur
       descendant (0-2-0) l'emporte quel que soit l'ordre.

       34px sur une carte de 300px, c'est 23 % de sa largeur mangée par du vide :
       il ne restait que 208px de texte pour un libellé de 233px. À 20px il en
       reste 236, les libellés tiennent tous sur une ligne. */
    .ssm-plans > .ssm-plan { padding: 26px 20px; }
}

/* Même calibrage que .ssm-compare-hint : 12px à .62 d'opacité. .38 y donnait
   3,55:1, un échec AA qui n'apparaissait qu'en mobile. */
.ssm-plans-hint { margin: 12px 0 0; font-size: 12px; color: rgba(255, 255, 255, .62); }
@media (min-width: 728px) { .ssm-plans-hint { display: none; } }

.ssm-plan {
    border: 1px solid var(--ssm-line);
    border-radius: 20px;
    padding: 34px;
    background: var(--ssm-surface);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ssm-plan-featured {
    border: 1.5px solid var(--ssm-accent);
    box-shadow: 0 30px 60px -38px rgba(59, 130, 246, .8);
}
.ssm-plan-badge {
    position: absolute;
    top: -12px; left: 34px;
    background: var(--ssm-accent);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
}
.ssm-plan-top { display: flex; align-items: center; gap: 10px; }
.ssm-plan-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ssm-accent-tint);
    color: var(--ssm-accent-soft);
}
.ssm-plan-icon.is-solid { background: var(--ssm-accent); color: #fff; }
.ssm-plan-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 20px; margin: 0; color: var(--ssm-text); }
/* min-height = 2 lignes (3em à 14px pour line-height 1.5). La description
   d'Enterprise tient sur 1 ligne alors que celles d'Essentiel et Business en
   font 2 : sans plancher, tout le contenu situé dessous — prix, règle, blocs
   « HÉBERGEMENT & INFRA » — était décalé de 21px sur une carte sur trois. */
.ssm-plan-tagline { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--ssm-muted); min-height: 3em; }
.ssm-plan-price {
    margin: 18px 0 4px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 44px;
    letter-spacing: -0.03em;
    color: var(--ssm-text);
}
.ssm-plan-price .ssm-plan-per { font-size: 17px; color: var(--ssm-muted); font-weight: 600; }
.ssm-plan-note { font-size: 13.5px; color: var(--ssm-muted); font-weight: 500; }
.ssm-plan-rule { height: 1px; background: var(--ssm-line); margin: 24px 0; }
.ssm-plan-features { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 13px; }
.ssm-plan-features li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--ssm-text); }
.ssm-plan-features li svg { flex: none; margin-top: 1px; width: 19px; height: 19px; }
.ssm-plan-cta {
    display: flex; align-items: center; justify-content: center;
    height: 48px; flex: none; margin-top: auto;
    border-radius: 12px; font-weight: 600; font-size: 15px;
    text-decoration: none;
    border: 1px solid var(--ssm-line); color: var(--ssm-text);
    transition: border-color .15s, background .15s;
}
.ssm-plan-cta:hover { border-color: var(--ssm-accent); color: var(--ssm-accent-soft); background: var(--ssm-accent-tint); }
.ssm-plan-cta.is-solid { background: var(--ssm-accent); color: #fff; font-weight: 700; border-color: transparent; }
.ssm-plan-cta.is-solid:hover { background: var(--ssm-accent-dark); color: #fff; }
.ssm-tax-note { text-align: center; margin: 28px auto 0; max-width: 680px; font-size: 13px; line-height: 1.5; color: var(--ssm-muted); }

/* ===== ILS NOUS FONT CONFIANCE (rangée de cartes-logos, comme CBR-Cloud Entreprise.html) ===== */
.ssm-trust-logos-wrap { max-width: 1180px; margin: 0 auto; padding: 80px 24px 0; text-align: center; }
.ssm-trust-eyebrow { color: var(--ssm-muted); letter-spacing: .18em; }
.ssm-trust-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
}
.ssm-logo-card {
    width: 184px;
    height: 78px;
    border: 1px solid var(--ssm-line);
    border-radius: 12px;
    background: var(--ssm-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    transition: border-color .15s;
}
.ssm-logo-card.is-link { cursor: pointer; }
.ssm-logo-card.is-link:hover { border-color: var(--ssm-line-2); }
.ssm-logo-card a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.ssm-logo-card img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; display: block; }
.ssm-trust-note {
    margin: 22px auto 0;
    max-width: 520px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ssm-muted);
}

/* ===== PORTFOLIO ===== */
.ssm-pf { max-width: 1280px; margin: 0 auto; padding: 72px 24px 96px; }
.ssm-pf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
/* h2 : titre de section au même rang que « Trois types de projets » ou
   « Quatre étapes » — un h3 rompait la hiérarchie. */
.ssm-pf-head h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.1; letter-spacing: -0.025em; margin: 12px 0 0; color: var(--ssm-text); }
.ssm-pf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 14px;
    margin-top: 36px;
}

/* Grille adaptée au NOMBRE de projets. `auto-fill` créait des pistes vides :
   avec un seul projet, deux tiers de la section restaient blancs, ce qui
   soulignait le manque. Les modificateurs sont posés par la vue. */
.ssm-pf-grid.is-duo { grid-template-columns: repeat(2, 1fr); }

/* Un seul projet → carte large horizontale pleine largeur. */
.ssm-pf-grid.is-solo { grid-template-columns: 1fr; }
.ssm-pf-grid.is-solo .ssm-pf-card { flex-direction: row; align-items: stretch; }
.ssm-pf-grid.is-solo .ssm-pf-img { width: 55%; flex: none; height: auto; min-height: 280px; }
.ssm-pf-grid.is-solo .ssm-pf-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 32px; }
.ssm-pf-grid.is-solo .ssm-pf-name { font-size: 22px; }
/* Sous 760px la carte large repasse en vertical, sinon l'image devient illisible. */
@media (max-width: 760px) {
    .ssm-pf-grid.is-solo .ssm-pf-card { flex-direction: column; }
    .ssm-pf-grid.is-solo .ssm-pf-img { width: 100%; height: 160px; min-height: 0; }
    .ssm-pf-grid.is-solo .ssm-pf-body { padding: 16px; }
    .ssm-pf-grid.is-duo { grid-template-columns: 1fr; }
}
.ssm-pf-card {
    border: 1px solid var(--ssm-line);
    border-radius: 14px;
    background: var(--ssm-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: border-color .15s, box-shadow .18s, transform .18s;
}
.ssm-pf-card:hover {
    border-color: rgba(59, 130, 246, .5);
    box-shadow: 0 16px 36px -20px rgba(0, 0, 0, .9);
    transform: translateY(-4px);
}

/* Image principale */
.ssm-pf-img { position: relative; width: 100%; height: 160px; overflow: hidden; }
.ssm-pf-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.ssm-pf-card:hover .ssm-pf-img img { transform: scale(1.04); }
.ssm-pf-img-placeholder { width: 100%; height: 100%; }

/* Badge nombre de photos */
.ssm-pf-img-badge {
    position: absolute; top: 9px; right: 9px;
    display: flex; align-items: center; gap: 5px;
    background: rgba(8, 12, 10, .68); backdrop-filter: blur(5px);
    color: #fff; font-size: 11px; font-weight: 700;
    padding: 4px 8px; border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, .18);
}

/* Bande de miniatures */
.ssm-pf-thumbs {
    display: flex; gap: 2px;
    background: var(--ssm-canvas);
    border-top: 1px solid var(--ssm-line);
}
.ssm-pf-thumb {
    flex: 1; height: 54px; overflow: hidden; position: relative;
}
.ssm-pf-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .3s ease;
}
.ssm-pf-card:hover .ssm-pf-thumb img { transform: scale(1.06); }
.ssm-pf-thumb-more {
    display: flex; align-items: center; justify-content: center;
    background: var(--ssm-surface-2); color: var(--ssm-accent-soft);
    font-size: 13px; font-weight: 800;
}

/* Corps de carte */
.ssm-pf-body { padding: 16px 18px 20px; }
.ssm-pf-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ssm-accent-soft); }
.ssm-pf-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16px; margin: 8px 0 0; color: var(--ssm-text); line-height: 1.25; }
.ssm-pf-desc { display: none; }
.ssm-pf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ssm-pf-tags span {
    font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px;
    background: var(--ssm-surface-2); color: var(--ssm-muted); border: 1px solid var(--ssm-line);
}
.ssm-pf-link { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--ssm-accent-soft); }

/* ===== MODALE PORTFOLIO ===== */
.ssm-pf-modal {
    display: none;
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(8, 12, 10, .78);
    backdrop-filter: blur(6px);
    align-items: center; justify-content: center;
    padding: 24px;
}
.ssm-pf-modal.open { display: flex; }
.ssm-pf-modal-box {
    width: 100%; max-width: 1040px; max-height: 90vh;
    background: var(--ssm-surface);
    border: 1px solid var(--ssm-line-2);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
    position: relative;
    display: flex; flex-direction: column;
}
.ssm-pf-modal-close {
    position: absolute; top: 16px; right: 16px; z-index: 2;
    width: 40px; height: 40px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(8, 12, 10, .55);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; backdrop-filter: blur(4px);
}
.ssm-pf-modal-close svg { width: 20px; height: 20px; }
.ssm-pf-modal-img { width: 100%; height: 300px; }
.ssm-pf-modal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ssm-pf-modal-content { flex: 1 1 44%; min-width: 0; overflow-y: auto; padding: 32px clamp(22px, 3vw, 36px) 36px; }
.ssm-pf-modal-cat { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ssm-accent-soft); }
.ssm-pf-modal-who {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 12px; padding: 6px 12px;
    border-radius: 999px; border: 1px solid var(--ssm-line); background: var(--ssm-surface-2);
    font-size: 13px; font-weight: 600; color: var(--ssm-text);
}
.ssm-pf-modal-content h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 3.2vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 14px 0 0;
    color: var(--ssm-text);
}
.ssm-pf-modal-content > p { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--ssm-text); opacity: .86; }
.ssm-pf-modal-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ssm-pf-modal-tags span {
    font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px;
    background: var(--ssm-accent-tint); color: var(--ssm-accent-soft); border: 1px solid rgba(59, 130, 246, .28);
}
.ssm-pf-modal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 16px; margin-top: 28px; }
.ssm-pf-modal-stat { background: var(--ssm-surface-2); border: 1px solid var(--ssm-line); border-radius: 12px; padding: 16px; }
.ssm-pf-modal-stat strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 24px; color: var(--ssm-accent-soft); }
.ssm-pf-modal-stat span { font-size: 12.5px; color: var(--ssm-muted); }

/* Défi / Solution / Fonctionnalités / CTA (modale, fidèle à la maquette) */
.ssm-pf-modal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; margin-top: 28px; }
.ssm-pf-modal-blabel { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ssm-muted); }
.ssm-pf-modal-blabel.is-accent { color: var(--ssm-accent-soft); }
.ssm-pf-modal-block p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ssm-text); opacity: .86; }
.ssm-pf-modal-feat { margin-top: 30px; }
.ssm-pf-modal-flabel { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ssm-muted); }
.ssm-pf-modal-features { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 11px; }
.ssm-pf-modal-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--ssm-text); }
.ssm-pf-modal-features li svg { flex: none; margin-top: 1px; width: 18px; height: 18px; }
.ssm-pf-modal-cta {
    display: inline-flex; align-items: center; gap: 9px;
    height: 50px; margin-top: 32px; padding: 0 24px;
    border-radius: 13px; background: var(--ssm-accent); color: #fff;
    font-weight: 700; font-size: 15px; text-decoration: none;
    transition: background .15s;
}
.ssm-pf-modal-cta:hover { background: var(--ssm-accent-dark); }
.ssm-pf-modal-cta svg { width: 17px; height: 17px; }

/* ===== GALERIE MODALE (media contain + miniatures) ===== */
#ssmPfModalBody { flex: 1; min-height: 0; display: flex; }
.ssm-pf-modal-layout { flex: 1; display: flex; min-height: 0; }
.ssm-pf-gallery { flex: 1 1 56%; min-width: 0; display: flex; flex-direction: column; background: #0a0f0c; }
.ssm-pf-stage { position: relative; flex: 1; min-height: 300px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ssm-pf-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.ssm-pf-stage-ph { width: 100%; height: 100%; }
.ssm-pf-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(8, 12, 10, .6); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    backdrop-filter: blur(4px); z-index: 2;
}
.ssm-pf-nav:hover { background: rgba(8, 12, 10, .88); }
.ssm-pf-nav svg { width: 20px; height: 20px; }
.ssm-pf-nav-prev { left: 14px; }
.ssm-pf-nav-next { right: 14px; }
.ssm-pf-counter {
    position: absolute; top: 14px; left: 14px;
    padding: 5px 10px; border-radius: 8px;
    background: rgba(8, 12, 10, .6); color: #fff; font-size: 12px; font-weight: 600;
    backdrop-filter: blur(4px);
}
.ssm-pf-zoom {
    position: absolute; bottom: 14px; right: 14px;
    padding: 5px 9px; border-radius: 8px;
    background: rgba(8, 12, 10, .6); color: #fff; font-size: 11px; font-weight: 600;
    display: inline-flex; gap: 5px; align-items: center; backdrop-filter: blur(4px); pointer-events: none;
}
.ssm-pf-zoom svg { width: 13px; height: 13px; }
.ssm-pf-thumbstrip {
    display: flex; gap: 8px; padding: 10px; overflow-x: auto;
    background: var(--ssm-surface-2); border-top: 1px solid var(--ssm-line);
    scrollbar-width: thin;
}
.ssm-pf-thumbstrip::-webkit-scrollbar { height: 6px; }
.ssm-pf-thumbstrip::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 3px; }
.ssm-pf-tn {
    flex: 0 0 auto; width: 84px; height: 58px; border-radius: 8px; overflow: hidden;
    border: 2px solid transparent; cursor: pointer; opacity: .55; padding: 0; background: none;
    transition: opacity .2s, border-color .2s;
}
.ssm-pf-tn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ssm-pf-tn:hover { opacity: .85; }
.ssm-pf-tn.active { opacity: 1; border-color: var(--ssm-accent); }
@media (max-width: 860px) {
    .ssm-pf-modal-layout { flex-direction: column; }
    .ssm-pf-gallery { flex: none; }
    .ssm-pf-stage { min-height: 0; height: 40vh; }
    .ssm-pf-modal-content { flex: 1 1 auto; }
}

/* ===== LIGHTBOX PLEIN ÉCRAN ===== */
.ssm-pf-lightbox {
    display: none; position: fixed; inset: 0; z-index: 1400;
    background: rgba(0, 0, 0, .93); align-items: center; justify-content: center; padding: 40px;
}
.ssm-pf-lightbox.open { display: flex; }
.ssm-pf-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ssm-pf-lb-close {
    position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ssm-pf-lb-close svg { width: 22px; height: 22px; }
.ssm-pf-lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ssm-pf-lb-nav:hover { background: rgba(255, 255, 255, .16); }
.ssm-pf-lb-nav svg { width: 26px; height: 26px; }
.ssm-pf-lb-prev { left: 24px; }
.ssm-pf-lb-next { right: 24px; }
.ssm-pf-lb-counter {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    padding: 6px 14px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 13px; font-weight: 600;
}

/* ===== CTA FINAL ===== */
.ssm-cta-section { max-width: 1180px; margin: 0 auto; padding: 80px 24px 96px; }
.ssm-cta-box {
    background: var(--ssm-deep);
    border: 1px solid rgba(59, 130, 246, .28);
    border-radius: 26px;
    /* 72px de rembourrage laissaient un cadre presque vide autour d'un contenu
       centré sur 520px : la carte mesurait 448px de haut pour 302px de texte.
       Le plafond descend à 56px, le cadre suit le contenu de plus près.
       Le plancher reste à 36px pour rejoindre l'override mobile (≤640px). */
    padding: clamp(36px, 4.4vw, 56px);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ssm-cta-glow {
    position: absolute; inset: 0;
    background: radial-gradient(90% 130% at 50% -20%, rgba(59, 130, 246, .32) 0%, transparent 60%);
    pointer-events: none;
}
.ssm-cta-inner { position: relative; }
.ssm-cta-inner h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 5vw, 50px);
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0;
}
.ssm-cta-inner > p { max-width: 520px; margin: 18px auto 0; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .66); }
.ssm-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
/* Sélecteur aligné sur `.ssm-cta-inner > p` ci-dessus : à `.ssm-cta-mail` seul
   (0-1-0) la règle perdait contre lui (0-1-1) et la ligne du courriel sortait
   en 17px, soit exactement le poids de l'accroche — aucune hiérarchie. */
.ssm-cta-inner > p.ssm-cta-mail { max-width: none; margin: 20px 0 0; font-size: 15px; color: rgba(255, 255, 255, .7); }
.ssm-cta-mail strong { color: var(--ssm-accent-soft); font-weight: 600; }
.ssm-cta-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 24px; font-size: 13.5px; color: rgba(255, 255, 255, .5); font-weight: 500; }
.ssm-cta-meta .ssm-dot { opacity: 1; }

/* ===== FIL D'ARIANE =========================================================
   Partagé par « Nos réalisations » et les fiches projet : les deux sont des
   pages de second niveau atteintes depuis Solutions Entreprise ou depuis une
   recherche, et le visiteur doit pouvoir remonter sans le bouton Retour du
   navigateur. Ces règles vivaient dans le <style> de la seule fiche projet ;
   l'index n'avait donc aucun fil visible, alors que son JSON-LD en déclarait
   un — la donnée structurée promettait un repère absent de l'écran. */
.ssm-fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 13px; }
.ssm-fil a { color: rgba(255, 255, 255, .62); text-decoration: none; }
.ssm-fil a:hover { color: var(--ssm-accent-soft); text-decoration: underline; }
.ssm-fil a:focus-visible { outline: 2px solid var(--ssm-accent); outline-offset: 2px; border-radius: 4px; }
.ssm-fil svg { width: 13px; height: 13px; color: rgba(255, 255, 255, .3); }
.ssm-fil [aria-current] { color: rgba(255, 255, 255, .5); }

/* ===== DIFFÉRENCIATEUR (bande 3 arguments, sous le hero) ===== */
.ssm-usp {
    border-bottom: 1px solid var(--ssm-line);
    background: linear-gradient(180deg, rgba(59, 130, 246, .05), transparent);
    padding: 26px 0;
}
.ssm-usp-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.ssm-usp-item { display: flex; align-items: flex-start; gap: 14px; }
.ssm-usp-ico {
    flex: none;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--ssm-accent-tint);
    color: var(--ssm-accent-soft);
    display: flex; align-items: center; justify-content: center;
}
/* h2 : ces trois arguments suivent directement le h1, un h3 créait un saut de
   niveau H1→H3. Le sélecteur suit la balise pour garder le rendu identique. */
.ssm-usp-txt h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 16px;
    margin: 2px 0 0;
    color: var(--ssm-text);
}
.ssm-usp-txt p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ssm-muted); }

/* Phrase de réassurance sous la grille de forfaits */
.ssm-plan-reassure {
    text-align: center;
    margin: 26px auto 0;
    max-width: 760px;
    padding: 16px 24px;
    border: 1px solid rgba(59, 130, 246, .22);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(59, 130, 246, .06), rgba(59, 130, 246, .015));
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ssm-text);
}

/* ===== TÉMOIGNAGES CLIENTS ===== */
.ssm-tm-grid {
    display: grid;
    /* min(…, 100%) : cf. .ssm-plans. */
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 20px;
    margin-top: 48px;
}
.ssm-tm-card {
    border: 1px solid var(--ssm-line);
    padding: 28px;
    margin: 0;
    background: var(--ssm-surface);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ssm-tm-stars { display: flex; gap: 3px; }
.ssm-tm-star { width: 18px; height: 18px; fill: var(--ssm-line-2); }
.ssm-tm-star.is-on { fill: var(--ssm-accent-soft); }
.ssm-tm-quote {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ssm-text);
    quotes: "\201C" "\201D";
}
.ssm-tm-quote::before { content: open-quote; color: var(--ssm-accent-soft); }
.ssm-tm-quote::after { content: close-quote; color: var(--ssm-accent-soft); }
.ssm-tm-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.ssm-tm-avatar {
    flex: none;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--ssm-accent-tint);
    color: var(--ssm-accent-soft);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 17px;
}
.ssm-tm-meta { display: flex; flex-direction: column; }
.ssm-tm-name { font-weight: 700; font-size: 14.5px; color: var(--ssm-text); }
.ssm-tm-role { font-size: 13px; color: var(--ssm-muted); margin-top: 2px; }

/* État vide (aucun témoignage publié) */
.ssm-tm-empty {
    margin-top: 44px;
    border: 1px dashed var(--ssm-line-2);
    padding: 44px 28px;
    text-align: center;
    background: rgba(26, 26, 29, 0.4);
}
.ssm-tm-empty-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 58px; height: 58px;
    border-radius: 15px;
    background: var(--ssm-accent-tint);
    color: var(--ssm-accent-soft);
}
.ssm-tm-empty-txt {
    max-width: 520px;
    margin: 20px auto 24px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ssm-muted);
}

/* Ligne moyenne (note globale) sous le titre témoignages */
.ssm-tm-avg { display: inline-flex; align-items: center; gap: 9px; margin: 16px 0 0; font-size: 15px; color: var(--ssm-muted); flex-wrap: wrap; justify-content: center; }
.ssm-tm-avg .ssm-tm-stars { display: inline-flex; gap: 2px; }
.ssm-tm-avg strong { color: var(--ssm-text); font-weight: 700; }
.ssm-tm-avg-count { font-size: 13.5px; }

/* CTA « laisser un avis » + état en attente */
.ssm-tm-cta { text-align: center; margin-top: 36px; }
.ssm-tm-cta .ssm-btn { cursor: pointer; }
.ssm-tm-pending {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0; font-size: 14px; color: var(--ssm-muted);
    padding: 12px 20px; border: 1px solid var(--ssm-line); border-radius: 12px; background: var(--ssm-surface);
}
.ssm-tm-pending svg { width: 17px; height: 17px; color: var(--ssm-accent-soft); flex: none; }

/* ===== MODALE « LAISSER UN AVIS » ===== */
.ssm-avis-modal {
    display: none; position: fixed; inset: 0; z-index: 1500;
    align-items: center; justify-content: center; padding: 24px;
    background: rgba(8, 6, 8, .82); backdrop-filter: blur(6px);
}
.ssm-avis-box {
    position: relative;
    width: 100%; max-width: 500px;
    background: var(--ssm-surface);
    border: 1px solid var(--ssm-line-2);
    border-radius: 20px;
    padding: 34px 30px;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
}
.ssm-avis-box-sm { max-width: 400px; text-align: center; }
.ssm-avis-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--ssm-line); background: rgba(255, 255, 255, .05);
    color: var(--ssm-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ssm-avis-close:hover { color: var(--ssm-text); border-color: var(--ssm-line-2); }
.ssm-avis-close svg { width: 16px; height: 16px; }
.ssm-avis-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; margin: 0 0 5px; color: var(--ssm-text); }
.ssm-avis-sub { margin: 0 0 22px; font-size: 12.5px; color: var(--ssm-muted); }
.ssm-avis-field { margin-bottom: 18px; }
.ssm-avis-field label { display: block; font-size: 12px; font-weight: 600; color: var(--ssm-muted); margin-bottom: 8px; }
.ssm-avis-count, .ssm-avis-opt { color: rgba(244, 244, 245, .35); font-weight: 400; }
.ssm-avis-stars { display: flex; gap: 6px; }
.ssm-avis-starbtn {
    background: none; border: none; cursor: pointer; padding: 0;
    font-size: 27px; line-height: 1; color: rgba(255, 255, 255, .18);
    transition: color .15s;
}
.ssm-avis-starbtn.is-on { color: var(--ssm-accent-soft); }
.ssm-avis-field textarea, .ssm-avis-field input[type="text"] {
    width: 100%; box-sizing: border-box;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--ssm-line);
    border-radius: 10px; padding: 11px 13px;
    color: var(--ssm-text); font-size: 13.5px; font-family: inherit; outline: none;
    transition: border-color .15s;
}
.ssm-avis-field textarea { resize: vertical; }
.ssm-avis-field textarea:focus, .ssm-avis-field input[type="text"]:focus { border-color: var(--ssm-accent); }
.ssm-avis-retour { padding: 9px 13px; border-radius: 8px; font-size: 12.5px; margin-bottom: 14px; }
.ssm-avis-retour.is-ok { background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .22); color: #86efac; }
.ssm-avis-retour.is-err { background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .22); color: #bfdbfe; }
.ssm-avis-submit { width: 100%; justify-content: center; margin-top: 4px; height: 48px; border: none; cursor: pointer; }
.ssm-avis-lock {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; margin-bottom: 8px;
    border-radius: 14px; background: var(--ssm-accent-tint); color: var(--ssm-accent-soft);
}
.ssm-avis-lock svg { width: 26px; height: 26px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
    .ssm-usp-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 640px) {
    /* Les retours à la ligne décoratifs des titres ne s'appliquent qu'en desktop */
    .ssm-br-desktop { display: none; }
    /* On garde les 3 chips sur une ligne pour un hero compact (voir les forfaits vite) */
    /* 10px passait sous le seuil de lisibilité en mobile. Les libellés
       wrappaient déjà sur 2 lignes à 320px et les chips ont des hauteurs
       égalisées par la grille : on peut donc remonter la taille sans casser
       la mise en page compacte à 3 colonnes voulue ici. */
    .ssm-section { padding: 64px 0; }
    .ssm-section-first { padding-top: 18px; }
    .ssm-dev-banner-price { text-align: left; }
    /* CTA final : boîte moins rembourrée pour que le bouton tienne sur une ligne */
    .ssm-cta-box { padding: 36px 20px; }
    .ssm-btn { font-size: 15px; padding: 0 20px; white-space: nowrap; }
    /* Méta du CTA : liste empilée centrée, sans points séparateurs orphelins */
    .ssm-cta-meta { flex-direction: column; gap: 6px; }
    .ssm-cta-meta .ssm-dot { display: none; }
}

/* ============================================================================
   HERO « Propulsez votre entreprise » — d'après la maquette.

   Palette reprise TELLE QUELLE de l'accueil (home.blade.php) : #1a56db,
   #3b82f6, #60a5fa. La page Entreprise était la seule du site en rouge ; ce
   hero l'aligne enfin sur le reste.

   Tout le texte est en HTML : rien n'est incrusté dans une image, donc tout
   reste lisible, indexable et traduisible à n'importe quelle largeur.
   ========================================================================== */
.ent-hero {
    --ent-blue: #1a56db;
    --ent-blue-l: #3b82f6;
    --ent-blue-ll: #60a5fa;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #00030a 0%, #020818 46%, #030d20 74%, #020814 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* ── Fond du hero : la maquette elle-même ────────────────────────────────────
   À partir de 981px, le fond n'est plus un dégradé mais l'image de la maquette
   (2059×764) dont on a retiré le texte gravé. Les co-dirigeants, la skyline, le
   halo et la trame de points en font donc partie, et il n'existe plus AUCUN
   raccord : c'est la seule façon d'avoir exactement le fond de la maquette.

   Deux cadrages, parce que les deux bandes n'ont pas la même forme :

   • 981–1199px — mise en page fluide, hero haut et étroit. L'image occupe toute
     la LARGEUR (100% auto) et se pose en haut ; en dessous, la couleur de fond
     prend le relais. Elle vaut #00050e, la couleur moyenne exacte de la dernière
     ligne de l'image (0,5,14) : la jonction est donc invisible, là où le dégradé
     d'origine (2,10,26 à cette hauteur) laissait un trait horizontal.

   • ≥ 1200px — scène proportionnelle. Voir le bloc dédié plus bas. */
@media (min-width: 981px) {
    .ent-hero {
        background-image: var(--ent-hero-fond, none);
        background-position: right top;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-color: #00050e;
    }
}

/* Contact rapide en haut à droite. Masqué sous 1100px : il chevaucherait la
   colonne visuelle, et l'information est reprise dans la barre de chiffres. */

.ent-hero-grid {
    position: relative; z-index: 2;
    max-width: 1560px; margin: 0 auto;
    padding: 40px 24px 0;
    display: grid; grid-template-columns: 1fr; gap: 32px;
    align-items: center;
}
@media (min-width: 981px) {
    .ent-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; padding-top: 56px; }
}

/* ── Sujets du hero en MOBILE ────────────────────────────────────────────────
   Sous 981px, le hero n'avait plus que son dégradé : ni dirigeants, ni halo, ni
   skyline, ni trame de points. La page de téléphone ne ressemblait donc pas du
   tout à celle du bureau. Les sujets reviennent ici, en bande sous le texte —
   le montage côte à côte du desktop devient un empilement, seule la mise en
   page change, pas le contenu.

   Un ::after de la grille plutôt qu'un élément dans le HTML : à une colonne la
   pseudo-élément forme une seconde ligne, exactement là où il faut. Le media
   query est borné à 980px, complémentaire de celui du dessus — au-delà, la
   grille passe à deux colonnes et le ::after irait remplir la colonne droite,
   par-dessus le fond de maquette.

   LE PLEINE LARGEUR N'EST PAS UN CHOIX ESTHÉTIQUE. Une image encadrée a déjà été
   tentée et retirée d'ici (voir le commentaire de la colonne visuelle plus bas) :
   son rectangle se voyait toujours. Mesure des bords du recadrage contre le
   dégradé du hero, qui explique enfin pourquoi :
     - haut  #01030a  contre #00030a  → 1 unité d'écart
     - bas   #01060f  contre #00050e  → invisible
     - gauche #030b19 contre #020818  → 1 à 3 unités
     - DROITE #0d1d37                 → la skyline, franchement plus claire
   Le seul bord réellement visible est le droit, et aucun fondu ne dissimule une
   skyline. En pleine largeur, les deux bords verticaux sortent de l'écran : il ne
   reste que les raccords haut et bas, à une unité près.

   calc(50% - 50vw) et non -24px : la gouttière de cette grille N'EST PAS
   constante — elle vaut 24px, mais 20px sous 640px (voir plus bas). Un -24px
   codé en dur donnait une bande de 383px pour 375px de fenêtre, sauvée de
   justesse par l'overflow: hidden du hero. Cette formule vaut toujours l'opposé
   exact de la gouttière, quelle qu'elle soit : 50 % de la boîte de contenu moins
   la moitié de la fenêtre.

   Les deux fondus courts du masque effacent ce qu'il reste de ces raccords. 34px
   en haut : le sommet de l'arc du halo se trouve à 4 % de la hauteur, un fondu
   plus long l'éteindrait. 56px en bas, là où l'image n'a que du fond sombre.

   La hauteur est pilotée directement, PAS par aspect-ratio. Un aspect-ratio de
   890/764 plafonné par max-height se retourne contre nous : la hauteur bloquée à
   340px, le ratio rétrécit aussi la LARGEUR, et à 760px de fenêtre la bande
   tombait à 396px — un rectangle flottant, skyline à nu, précisément le défaut
   décrit plus haut. min(86vw, 340px) donne l'inverse : 86vw vaut 100/1,165, soit
   le ratio naturel du recadrage — rien n'est rogné sur un téléphone — et le
   plafond de 340px n'entame que la hauteur sur les tablettes en portrait, où
   `cover` recadre alors par le bas en gardant les visages. */
@media (max-width: 980px) {
    .ent-hero-grid::after {
        content: "";
        width: 100vw;
        margin-inline: calc(50% - 50vw);
        height: min(86vw, 340px);
        background-image: var(--ent-hero-fond-mobile, none);
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34px, #000 calc(100% - 56px), transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 34px, #000 calc(100% - 56px), transparent 100%);
    }
}

/* ── Colonne texte ─────────────────────────────────────────────────────── */
.ent-h1 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(34px, 5.2vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: #fff;
}
.ent-accent { color: var(--ent-blue-l); }

/* ── Mot tournant du titre ──────────────────────────────────────────────────
   Même mouvement que le titre de l'accueil : le mot sortant monte en
   s'effaçant, le suivant arrive du bas. Les durées et la courbe sont reprises
   telles quelles pour que les deux pages bougent à l'identique.

   Le conteneur est inline-block avec une largeur minimale : sans elle, l'espace
   d'un mot vide ferait sauter le point final pendant le remplacement. */
.ent-rot { display: inline-block; min-width: 1ch; }
.ent-rot-mot {
    display: inline-block;
    animation: ent-mot-entre .45s cubic-bezier(.16, 1, .3, 1) both;
}
.ent-rot-mot.sort { animation: ent-mot-sort .35s ease both; }
@keyframes ent-mot-entre { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
@keyframes ent-mot-sort  { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-14px); } }
/* Le JS n'enclenche pas la rotation en mouvement réduit ; on neutralise aussi
   l'animation d'entrée du premier mot, qui sinon jouerait au chargement. */
@media (prefers-reduced-motion: reduce) {
    .ent-rot-mot, .ent-rot-mot.sort { animation: none; }
}

/* Mots-clés séparés par des puces générées en ::before, pour qu'un lecteur
   d'écran n'annonce pas une ponctuation parasite. */
.ent-kw {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px 14px;
    margin: 18px 0 0;
    font-size: 12.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
}
.ent-kw span { display: inline-flex; align-items: center; }
.ent-kw span + span::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--ent-blue-l); margin-right: 14px;
}

.ent-lead {
    max-width: 46ch;
    margin: 20px 0 0;
    font-size: clamp(14.5px, 1.5vw, 16.5px);
    line-height: 1.65;
    color: rgba(255, 255, 255, .68);
}
.ent-lead strong { color: var(--ent-blue-ll); font-weight: 600; }

.ent-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ent-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 24px;
    border-radius: 12px;
    font-size: 15px; font-weight: 600;
    text-decoration: none;
    transition: background .18s, border-color .18s, transform .18s;
}
.ent-btn svg { width: 18px; height: 18px; flex: none; }
.ent-btn:focus-visible { outline: 2px solid var(--ent-blue-ll); outline-offset: 3px; }
.ent-btn-primary {
    color: #fff; border: 1px solid transparent;
    background: linear-gradient(135deg, #2563eb 0%, var(--ent-blue) 100%);
    box-shadow: 0 10px 26px rgba(26, 86, 219, .32);
}
.ent-btn-primary:hover { transform: translateY(-1px); background: linear-gradient(135deg, #2f6ff0 0%, #1650cf 100%); }
.ent-btn-ghost {
    color: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .17);
    background: rgba(255, 255, 255, .03);
}
.ent-btn-ghost:hover { border-color: rgba(96, 165, 250, .5); background: rgba(59, 130, 246, .10); }

.ent-trust {
    display: flex; flex-wrap: wrap; gap: 12px 26px;
    list-style: none; margin: 30px 0 0; padding: 0;
    font-size: 13.5px; color: rgba(255, 255, 255, .62);
}
.ent-trust li { display: inline-flex; align-items: center; gap: 9px; }
.ent-trust svg { width: 17px; height: 17px; color: var(--ent-blue-ll); flex: none; }

/* Il n'y a plus de colonne visuelle : les sujets sont dans le FOND du hero (voir
   plus haut). L'<img> de 999×626 qui vivait ici, et le masque en dégradé qui
   tentait d'en cacher les bords, ont été retirés — quelle que soit la finesse du
   fondu, son propre fond (qui porte le halo radial) restait plus clair que le
   dégradé du hero, donc son rectangle se voyait toujours. */

/* ── Barre de chiffres ─────────────────────────────────────────────────── */
.ent-stats {
    position: relative; z-index: 2;
    max-width: 1280px; margin: 44px auto 0;
    padding: 0 24px 40px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
}
@media (min-width: 761px) { .ent-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ent-stats li {
    display: flex; align-items: center; gap: 13px;
    padding: 18px 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
}
.ent-stat-ico {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none;
    border-radius: 11px;
    border: 1px solid rgba(96, 165, 250, .22);
    background: rgba(59, 130, 246, .10);
}
.ent-stat-ico svg { width: 19px; height: 19px; color: var(--ent-blue-ll); }
.ent-stat-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ent-stat-txt strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(17px, 1.9vw, 21px); font-weight: 700; color: #fff;
}
.ent-stat-txt, .ent-stat-txt a { font-size: 12.5px; color: rgba(255, 255, 255, .60); }
.ent-stat-txt a { text-decoration: underline; text-underline-offset: 2px; }
.ent-stat-txt a:hover { color: var(--ent-blue-ll); }

@media (max-width: 640px) {
    .ent-hero-grid { padding: 40px 20px 0; }
    .ent-stats { margin-top: 32px; padding: 0 20px 32px; gap: 10px; }
    .ent-stats li { padding: 14px 12px; gap: 10px; }
    .ent-stat-ico { width: 34px; height: 34px; border-radius: 9px; }
    .ent-stat-ico svg { width: 16px; height: 16px; }
}

/* ── Ajustements pour coller à la maquette ─────────────────────────────── */


/* Le logo occupant le haut du hero, on descend le contenu pour ne pas le
   chevaucher — la maquette laisse cet espace. */

/* Trame de points bleus, à gauche du sujet. */


/* Barre de chiffres : la maquette montre un seul bandeau continu avec des
   séparateurs verticaux, pas quatre cartes distinctes. */
.ent-stats {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    background: rgba(255, 255, 255, .022);
    gap: 0;
    padding: 0;
    margin-left: 24px; margin-right: 24px;
    max-width: calc(1280px - 48px);
    overflow: hidden;
}
.ent-stats li {
    border: none; border-radius: 0;
    background: none;
    padding: 22px 18px;
    justify-content: center;
}
/* Séparateurs : uniquement entre colonnes, jamais en bord de ligne. */
.ent-stats li + li { border-left: 1px solid rgba(255, 255, 255, .08); }

/* La statistique « projets réalisés » est masquée quand le portfolio est vide :
   le bandeau ne contient alors que 3 items. Avec un gabarit figé à 4 colonnes,
   le dernier quart restait VIDE — une case fantôme bien visible sur un bandeau
   à fond continu. grid-auto-flow: column produit donc autant de colonnes qu'il
   y a d'items, quel qu'en soit le nombre. */
@media (min-width: 761px) {
    .ent-stats {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
}
@media (max-width: 760px) {
    /* En 2 colonnes, le 3e item ouvre une nouvelle ligne : pas de bordure à
       gauche, mais une bordure en haut pour séparer les deux rangées. */
    .ent-stats li:nth-child(odd) { border-left: none; }
    .ent-stats li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .08); }
    /* Nombre impair d'items : le dernier occupe la ligne entière plutôt que de
       laisser une demi-case vide à sa droite. */
    .ent-stats li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Contact rapide du coin supérieur droit — VRAI lien, plus un calque transparent
   posé sur des pixels. Position et tailles reprises de la maquette : le bloc y
   occupe x 1796..1991 et y 50..91 sur 2059×764, soit 3,3 % depuis le bord droit
   et 6,5 % depuis le haut ; la première ligne fait 19px et la seconde 16px. */
.ent-contact {
    position: absolute;
    right: 3.3%; top: 6.5%;
    z-index: 3;
    display: none;
    align-items: center;
    gap: clamp(8px, 0.58vw, 12px);
    padding: 8px 10px;
    margin: -8px -10px 0 0;      /* la zone cliquable dépasse le texte sans le décaler */
    border-radius: 10px;
    text-decoration: none;
    transition: background-color .18s ease, box-shadow .18s ease;
}
@media (min-width: 981px) { .ent-contact { display: inline-flex; } }
.ent-contact svg {
    width: clamp(20px, 1.36vw, 28px);
    height: clamp(20px, 1.36vw, 28px);
    color: var(--ent-blue-l);
    flex: none;
}
.ent-contact-txt {
    display: flex; flex-direction: column;
    line-height: 1.25;
    font-size: clamp(12px, 0.78vw, 16px);
    color: rgba(255, 255, 255, .72);
    text-align: right;
}
.ent-contact-txt strong {
    font-weight: 700;
    font-size: clamp(14px, 0.92vw, 19px);
    color: #fff;
}
.ent-contact:hover {
    background: rgba(96, 165, 250, .12);
    box-shadow: 0 0 0 1px rgba(96, 165, 250, .35);
}
.ent-contact:hover .ent-contact-txt { color: rgba(255, 255, 255, .9); }
.ent-contact:focus-visible { outline: 2px solid var(--ent-blue-ll); outline-offset: 2px; }

/* ============================================================================
   HERO PROPORTIONNEL À LA MAQUETTE (≥ 1200px)

   La maquette fait 2059×764, soit un ratio de 2,695. Tant que le hero se
   laissait dimensionner par son contenu, il faisait 840px de haut au lieu des
   ~710px proportionnels : le titre passait sur deux lignes, le bandeau de
   chiffres tombait SOUS le hero, et la composition n'avait plus rien de la
   maquette.

   On en fait donc une SCÈNE à ratio fixe, dans laquelle chaque bloc est placé
   aux coordonnées mesurées sur la maquette, et où les tailles de texte sont
   exprimées en vw — elles suivent la largeur exactement comme les pixels de
   l'image. Chaque valeur vw vaut la mesure de la maquette divisée par 20,59
   (2059px / 100), et chaque plafond de clamp() est la mesure de la maquette
   elle-même : à 2059px de large, le rendu est donc au pixel celui du fichier.

   Le rendu est donc au pixel celui de la maquette entre 1400px et 2059px de
   large. En dehors de cette plage, trois bornes volontaires :

   - au-dessus de 2059px la HAUTEUR et la PHOTO plafonnent (764px et 999px, ses
     dimensions natives) : au-delà, on ne ferait qu'agrandir l'image, donc la
     flouter. Le texte et le bandeau, eux, continuent de suivre la largeur.
   - en dessous de ~1400px les planchers de clamp() prennent le relais. À la
     proportion pure, le corps de texte tomberait à 11px sur un écran de
     1200px : illisible. min-height compense en gardant 500px de hauteur, ce
     qui laisse la place au texte agrandi ; la photo n'occupe alors plus 82 %
     mais 73 % de la hauteur. Sa base fond déjà en quasi-noir (luminance 5,2
     pour un fond à 7), l'espace sombre gagné en dessous ne se voit pas.
   - sous 1200px on retombe sur la mise en page fluide d'origine, la seule qui
     tienne quand la scène ne fait plus que 445px de haut.
   ========================================================================== */
@media (min-width: 1200px) {

    /* width explicite : sans elle, aspect-ratio résout le ratio À L'ENVERS dès
       qu'une contrainte de hauteur l'emporte, et impose la LARGEUR (620px de
       haut × 2,695 = 1671px de large, donc un débordement horizontal). */
    /* LE FOND EST LA MAQUETTE ELLE-MÊME (2059×764), texte gravé retiré et
       reconstruit par diffusion. Avant, on composait la photo découpée par-dessus
       un dégradé CSS : comme le dégradé est purement vertical alors que la maquette
       a un halo radial derrière les sujets, le rectangle de la photo se voyait. Ici
       il n'y a plus aucun raccord — le fond, le halo, les sujets et la skyline sont
       une seule image, et tout le texte reste en HTML par-dessus.

       background-size: auto 100% tient les trois régimes sans jamais déformer :
         • 1400–2059px : hauteur = ratio, donc largeur = celle du hero, ajustement exact
         • > 2059px    : la hauteur plafonne à 764, l'image garde 2059 de large et reste
                         collée à droite ; la bande découverte à gauche montre le
                         dégradé de repli, que la colonne x=0 de l'image (#010207)
                         rend indiscernable
         • < 1400px    : min-height rend le hero plus haut que le ratio, l'image
                         devient plus large que lui et se recadre par la gauche —
                         là où il n'y a que du dégradé, jamais sur les sujets */
    .ent-hero {
        position: relative;
        width: 100%;
        aspect-ratio: 2059 / 764;
        min-height: 500px;
        max-height: 764px;
        overflow: hidden;
        /* Cadrage par la HAUTEUR ici (auto 100%), contrairement à la bande fluide :
           la scène a le ratio de l'image, donc l'ajustement est exact. La couleur de
           repli passe à #010207, la couleur de la colonne x=0 de l'image : c'est elle
           qui apparaît dans la bande découverte à gauche au-delà de 2059px. */
        background-size: auto 100%;
        background-color: #010207;
    }

    /* La grille devient un simple calque : les enfants sont positionnés. */
    .ent-hero-grid {
        position: absolute;
        inset: 0;
        margin: 0;
        max-width: none;
        display: block;
        padding: 0;
    }

    /* Colonne texte — mesurée sur la maquette : marge gauche 4,5 %, largeur 47 %. */
    .ent-hero-left {
        position: absolute;
        left: 4.5%;
        top: 13.5%;
        width: 47%;
    }

    /* Bandeau de chiffres — DANS le hero, en bas. Sa géométrie n'est pas choisie :
       elle RECOUVRE l'empreinte du bandeau effacé du fond, mesurée à x 89..1971 et
       y 628..751 sur 2059×764, soit 4,32 % / 4,32 % / 1,70 % et 123px de haut. On
       prend 4,2 % / 1,5 % / 16,6 % pour couvrir avec 2 à 3px de marge : le cadre
       d'origine, plus clair, ne doit dépasser d'aucun côté. */
    .ent-stats {
        position: absolute;
        left: 4.1%;
        /* Au-delà de 2059px le fond ne grandit plus : il reste collé à droite à sa
           taille natale, donc l'empreinte effacée se trouve à 88px FIXES du bord
           (2059 − 1971). Un décalage en pourcentage deviendrait plus grand que
           cela et découvrirait une bande de 13px de zone reconstruite là où la
           skyline doit reprendre. min() prend le pourcentage tant qu'il est plus
           petit, et se verrouille à 85px ensuite — 3px en deçà de 88, pour
           recouvrir plutôt qu'affleurer. */
        right: min(4.1%, 85px);
        bottom: 1.2%;      /* l'empreinte s'arrête à 1,70 % : 1,2 % la dépasse par le bas */
        min-height: 17.2%;   /* 131px sur 764 : l'empreinte fait 123px de haut */
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
        /* le nombre de colonnes suit le nombre d'items — voir grid-auto-flow ci-dessus */
    }

    /* ── Tailles proportionnelles à la largeur ──────────────────────────────
       clamp(plancher lisibilité, mesure ÷ 20,59 en vw, mesure de la maquette) */
    /* 43px n'est pas un chiffre rond par hasard. Le titre doit tenir sur UNE
       ligne à 1200px, où la colonne fait 564px, sinon il descend sur le bandeau
       de chiffres. Le mot tournant le plus long est « croissance » : à 45px la
       ligne mesurait 563px, soit 1px de marge — de quoi passer sur deux lignes
       au moindre changement de police de substitution. À 43px elle fait 538px et
       laisse 26px de jeu. Un plancher plus haut est donc à proscrire, et tout
       nouveau mot doit être mesuré (voir entreprise.h1_mots_rotatifs). */
    .ent-h1      { font-size: clamp(43px, 3.42vw, 70px); line-height: 1.04; }
    .ent-kw      { font-size: clamp(12px, 0.9vw, 18.5px); margin-top: clamp(13px, 1vw, 21px); gap: 0.5em 0.9em; }
    .ent-kw span + span::before { margin-right: 0.9em; }
    /* 80 % de la colonne, en pourcentage et non en ch : la police suit la largeur
       en vw, donc une largeur relative garde EXACTEMENT les mêmes retours à la
       ligne à toutes les largeurs de la bande. Deux lignes comme dans la maquette
       demandent au moins 735px sur 968 (76 %) — l'écart avec les 657px du fichier
       vient du mot « numérique », plus long que le « digital » de la maquette, que
       l'on garde en français correct. 80 % laisse 5 % de marge avant le retour
       à la ligne, de quoi absorber une police de substitution. */
    .ent-lead    { font-size: clamp(14.5px, 1.07vw, 22px); margin-top: clamp(13px, 1vw, 21px); max-width: 80%; }
    .ent-cta     { margin-top: clamp(20px, 1.5vw, 31px); gap: clamp(9.5px, 0.7vw, 14px); }
    .ent-btn     { min-height: clamp(39px, 2.9vw, 60px); padding: 0 clamp(19px, 1.4vw, 29px); font-size: clamp(13px, 0.97vw, 20px); border-radius: clamp(8px, 0.6vw, 12px); }
    .ent-btn svg { width: clamp(13.5px, 1vw, 21px); height: clamp(13.5px, 1vw, 21px); }
    .ent-trust   { margin-top: clamp(20px, 1.5vw, 31px); font-size: clamp(12.5px, 0.92vw, 19px); gap: 0.6em 1.6em; }
    .ent-trust svg { width: clamp(13px, 0.95vw, 20px); height: clamp(13px, 0.95vw, 20px); }

    .ent-stats li      { padding: clamp(13px, 1.1vw, 23px) clamp(11px, 0.9vw, 18.5px); gap: clamp(10px, 0.75vw, 15px); }
    .ent-stat-ico      { width: clamp(28px, 2.1vw, 43px); height: clamp(28px, 2.1vw, 43px); border-radius: clamp(7px, 0.55vw, 11px); }
    .ent-stat-ico svg  { width: clamp(14px, 1vw, 21px); height: clamp(14px, 1vw, 21px); }
    .ent-stat-txt strong { font-size: clamp(22.5px, 1.65vw, 34px); }
    .ent-stats .ent-stat-txt,
    .ent-stats .ent-stat-txt a { font-size: clamp(12.5px, 0.92vw, 19px); }
}