/* Compléments du site pro au style du v6 (même jetons : --surface, --line, --ink, --cf…, thème sombre compris). */

.pro-mot{ display: inline-block; margin-left: 8px; padding: 3px 11px; border-radius: 7px; background: var(--cf); color: #fff; font-size: 0.9em; font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; vertical-align: 0.05em; }

/* Carte « Joindre CloudFive Pro » du héros */
.pro-carte{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-media); padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 14px; box-shadow: 0 24px 60px -32px rgba(var(--ink-rgb), 0.28); }
.pro-carte h2{ font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.02em; margin: 0; }
.pro-lignes{ display: grid; }
.pro-ligne{ display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.pro-ligne:first-child{ border-top: 0; padding-top: 4px; }
.pro-ligne span{ color: var(--muted); font-size: 13.5px; }
.pro-ligne a, .pro-ligne b{ color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; text-align: right; overflow-wrap: anywhere; }
.pro-ligne a:hover{ color: var(--cf-dark); }
.pro-carte .btn{ justify-self: start; }

/* Offres du groupe CloudFive Pro */
.pro-offres{ display: grid; gap: 16px; margin-top: clamp(22px, 2.4vw, 32px); }
@media (min-width: 720px){ .pro-offres{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px){ .pro-offres{ grid-template-columns: repeat(3, 1fr); } }
.pro-offre{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-media); padding: 24px; display: flex; flex-direction: column; gap: 14px; transition: border-color 200ms ease; }
.pro-offre:hover{ border-color: rgba(249, 110, 30, 0.45); }
.pro-offre h3{ font-size: 19px; margin: 0; letter-spacing: -0.02em; }
.pro-prix{ font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.pro-prix small{ font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.pro-offre ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; flex: 1; }
.pro-offre li{ position: relative; padding-left: 20px; font-size: 14.5px; color: var(--muted); }
.pro-offre li::before{ content: ''; position: absolute; left: 0; top: 0.66em; width: 9px; height: 2px; border-radius: 2px; background: var(--cf); }
.pro-offre .btn{ align-self: flex-start; }
.pro-vide{ grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-media); padding: clamp(22px, 2.6vw, 32px); display: grid; gap: 12px; max-width: 760px; }
.pro-vide h3{ margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.pro-vide .btn{ justify-self: start; }
.pro-attente{ height: 220px; border-radius: var(--r-media); background: linear-gradient(90deg, var(--chip), var(--surface-2), var(--chip)); background-size: 200% 100%; animation: pro-luit 1.4s linear infinite; }
@keyframes pro-luit{ to{ background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce){ .pro-attente{ animation: none; } }

/* Formulaire de devis */
.pro-form{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-media); padding: clamp(20px, 2.6vw, 30px); display: grid; gap: 16px; }
.pro-duo{ display: grid; gap: 16px; }
@media (min-width: 640px){ .pro-duo{ grid-template-columns: 1fr 1fr; } }
.pro-form label{ display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
.pro-form label small{ font-weight: 400; color: var(--faint); }
.pro-form input, .pro-form select, .pro-form textarea{ width: 100%; font: 400 16px/1.4 inherit; font-family: inherit; color: var(--ink); background: var(--champ); border: 1px solid var(--line); border-radius: var(--r-btn); padding: 12px 14px; transition: border-color 150ms ease, box-shadow 150ms ease; }
.pro-form textarea{ min-height: 140px; resize: vertical; }
.pro-form input:focus, .pro-form select:focus, .pro-form textarea:focus{ outline: 0; border-color: var(--cf); box-shadow: 0 0 0 4px var(--ring, rgba(249, 110, 30, 0.18)); }
.pro-form .btn{ justify-self: start; }
.pro-form .btn[disabled]{ opacity: 0.6; cursor: default; }
.pro-piege{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pro-etat{ min-height: 1.4em; font-size: 14.5px; margin: 0; }
.pro-etat.ok{ color: var(--ok-ink); }
.pro-etat.ko{ color: #c0392b; }

/* Mentions légales */
.pro-doc{ max-width: 760px; }
.pro-doc h2{ font-size: 20px; margin: 34px 0 10px; letter-spacing: -0.02em; }
.pro-doc p{ color: var(--muted); }
.pro-doc p + p{ margin-top: 10px; }