/* Groupe ARA — pages des solutions métiers ARA (générées par _dev/build_produits.py). */

.prod-kicker {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
}
.prod-kicker > span:not(.m-marque):not(.m-app) { width: 7px; height: 7px; border-radius: 50px; }

.prod-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.ara-glass .prod-h1 { margin-top: 18px; font-size: 88px; letter-spacing: -0.045em; }
.prod-sous-titre {
	margin: 14px 0 0; max-width: 620px;
	font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; color: var(--ara-navy-900);
}
.prod-sous-titre em { font-style: normal; color: var(--em, var(--ara-coral-500)); }

.prod-bref { position: relative; overflow: hidden; padding: 40px 36px; }
.prod-bar { position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.prod-statut { margin-left: 6px; }
.prod-bref-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.prod-bref-liste li { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 1.45; color: var(--ara-navy-800); }

.prod-besoin { padding: 52px 56px; }

.prod-row { display: grid; grid-template-columns: auto 1fr; gap: 36px; padding: 32px 8px; align-items: start; }
.prod-num { font-family: var(--font-display); font-weight: 700; font-size: 50px; line-height: 0.9; letter-spacing: -0.04em; opacity: 0.9; }
.prod-texte { font-size: 15.5px; line-height: 1.6; color: var(--ara-navy-700); margin: 10px 0 0; max-width: 760px; }

.prod-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.prod-carte { padding: 36px; }
.prod-integrations, .prod-pourqui { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.prod-integrations li { display: flex; flex-direction: column; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--glass-hairline); }
.prod-integrations li:last-child { border-bottom: none; padding-bottom: 0; }
.prod-integrations strong { font-size: 15.5px; color: var(--ara-navy-900); }
.prod-integrations span { font-size: 14.5px; line-height: 1.55; color: var(--ara-navy-700); }
.prod-pourqui li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ara-navy-700); }
.prod-pourqui svg { flex: none; margin-top: 3px; color: var(--ara-coral-500); }
.prod-deploiement { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--glass-hairline); }
.prod-deploiement p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ara-navy-700); }

@media (max-width: 1024px) {
	.prod-hero, .prod-duo { grid-template-columns: 1fr; gap: 32px; }
	.ara-glass .prod-h1 { font-size: 64px; }
}
@media (max-width: 680px) {
	.ara-glass .prod-h1 { font-size: 52px; }
	.prod-sous-titre { font-size: 24px; }
	.prod-besoin, .prod-bref, .prod-carte { padding: 28px 22px; }
	.prod-row { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
	.prod-num { font-size: 38px; }
}

/* ---------- Galerie de captures ---------- */
.prod-galerie { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; align-items: center; }
.prod-capture { margin: 0; }
.prod-capture-cadre {
	position: relative; overflow: hidden; border-radius: 16px; background: #fff;
	border: 1px solid rgba(46,58,83,0.12); box-shadow: var(--glass-shadow);
}
.prod-capture-cadre img { display: block; width: 100%; height: auto; }
.prod-capture-barre { display: flex; gap: 6px; padding: 10px 14px; background: var(--ara-gray-50); border-bottom: 1px solid rgba(46,58,83,0.08); }
.prod-capture-barre i { width: 9px; height: 9px; border-radius: 50%; background: var(--ara-gray-300); }
.prod-capture.is-mobile .prod-capture-cadre { border-radius: 30px; border: 8px solid var(--ara-navy-900); max-width: 320px; margin: 0 auto; }
.prod-capture figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ara-navy-700); text-align: center; }
@media (max-width: 1024px) {
	.prod-capture { grid-column: span 12 !important; }
	.prod-capture.is-mobile { grid-column: span 6 !important; }
}
@media (max-width: 560px) {
	.prod-capture.is-mobile { grid-column: span 12 !important; }
}

/* ---------- Pages éditoriales (IA, sur mesure) ---------- */
.ia-mission { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--ara-navy-900); }
.ia-mission em { font-style: normal; color: var(--ara-coral-500); }
.ia-verbes { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.ia-verbes span { padding: 7px 14px; border-radius: var(--radius-full); background: var(--ara-coral-50); color: var(--ara-coral-700); font-weight: 600; font-size: 14px; }
.ia-risques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ia-risque { padding: 28px; }
.ia-risque .h-card { font-size: 19px; margin-top: 16px; }
.ia-risque p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ara-navy-700); }
.ia-etapes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ia-etape { padding: 36px 40px; }
.ia-etape-tete { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.ia-etape .h-card { font-size: 23px; }
.ia-modeles, .ia-solutions { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ia-modeles li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--ara-navy-700); }
.ia-modeles svg { color: var(--ara-coral-500); flex: none; }
.ia-modeles strong { color: var(--ara-navy-900); }
.ia-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--glass-hairline); font-size: 14.5px; color: var(--ara-navy-700); }
.ia-note a { color: var(--ara-coral-600); }
.ia-solutions a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; text-decoration: none; background: rgba(255,255,255,0.55); border: 1px solid var(--glass-hairline); transition: background var(--dur-2) var(--ease-standard); }
.ia-solutions a:hover { background: var(--ara-coral-50); }
.ia-solutions strong { font-family: var(--font-display); font-size: 17px; color: var(--ara-navy-900); }
.ia-solutions span { font-size: 14px; color: var(--ara-navy-700); }
.ia-assistants { margin-top: 14px; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--ara-coral-50); color: var(--ara-coral-700); font-size: 14.5px; }
.ia-assistants svg { flex: none; }
.ia-engagements { margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ia-engagements div { display: flex; flex-direction: column; gap: 14px; }
.ia-engagements p { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 500; color: var(--ara-navy-900); }
.arc-bloc { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; }
.arc-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.arc-points li { display: flex; gap: 16px; align-items: center; }
.arc-points div { display: flex; flex-direction: column; }
.arc-points strong { font-family: var(--font-display); font-size: 18px; color: var(--ara-navy-900); }
.arc-points span { font-size: 14.5px; color: var(--ara-navy-700); }
.arc-cas { text-decoration: none; display: block; transition: transform var(--dur-3) var(--ease-standard); }
.arc-cas:hover { transform: translateY(-3px); }
.arc-cas p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ara-navy-700); }
@media (max-width: 1024px) {
	.ia-risques, .ia-engagements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ia-etapes, .arc-bloc { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.ia-risques, .ia-engagements { grid-template-columns: 1fr; }
	.ia-etape { padding: 28px 22px; }
}

/* ---------- Pages secteur ---------- */
.sect-photo { aspect-ratio: 4 / 3; }
.sect-solutions { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 24px; }
.sect-solution { position: relative; overflow: hidden; padding: 40px; }
.sect-solution-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sect-solution-nom { margin: 0; font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: -0.04em; color: var(--ara-navy-900); }
.sect-solution .prod-pourqui { margin-top: 20px; }
.sect-ara-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.sect-ara { display: flex; flex-direction: column; gap: 8px; padding: 26px 28px; text-decoration: none; transition: transform var(--dur-3) var(--ease-standard); }
.sect-ara:hover { transform: translateY(-3px); }
.sect-ara strong { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; color: var(--ara-navy-900); }
.sect-ara span { font-size: 14.5px; line-height: 1.55; color: var(--ara-navy-700); }
.sect-temoignage { margin: 0; padding: 52px 56px; }
.sect-temoignage blockquote { margin: 22px 0 0; font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.4; letter-spacing: -0.015em; color: var(--ara-navy-900); }
.sect-temoignage figcaption { margin-top: 26px; display: flex; flex-direction: column; gap: 4px; }
.sect-temoignage figcaption strong { font-size: 16px; color: var(--ara-navy-900); }
.sect-temoignage figcaption span { font-size: 14px; color: var(--ara-gray-600); }
.sect-logos { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
@media (max-width: 1024px) { .sect-solutions { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
	.sect-solution, .sect-temoignage { padding: 28px 22px; }
	.sect-temoignage blockquote { font-size: 19px; }
	.sect-solution-nom { font-size: 36px; }
}
.logo-tile.logo-texte { font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ara-gray-600); }

/* ---------- Page ESAT ---------- */
.esat-enjeux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.esat-liste li { font-size: 15px; }
.esat-table-cadre { padding: 8px 12px; overflow-x: auto; }
.esat-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.esat-table th, .esat-table td { text-align: left; padding: 18px 20px; vertical-align: top; border-bottom: 1px solid var(--glass-hairline); line-height: 1.5; }
.esat-table thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--ara-amber-700); }
.esat-table tbody th { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ara-navy-900); width: 26%; }
.esat-table td { color: var(--ara-navy-700); }
.esat-table tbody tr:last-child th, .esat-table tbody tr:last-child td { border-bottom: none; }
.esat-flux { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.esat-flux-etape { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; flex: 1 1 140px; }
.esat-flux-etape strong { font-family: var(--font-display); font-size: 17px; color: var(--ara-navy-900); }
.esat-flux-etape > span:last-child { font-size: 13.5px; color: var(--ara-gray-600); }
.esat-flux-fleche { color: var(--ara-amber-500); }
@media (max-width: 1024px) { .esat-enjeux { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
	.esat-flux { flex-direction: column; }
	.esat-flux-fleche { transform: rotate(90deg); }
	.esat-table th, .esat-table td { padding: 14px 10px; }
}

/* ---------- IA : section « Vos équipes & l'IA » (mise en évidence) ---------- */
.ia-rh { position: relative; overflow: hidden; padding: 56px; background: linear-gradient(150deg, rgba(255,241,241,0.92), rgba(255,255,255,0.78)) !important; }
.ia-rh-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.ia-rh .h-section em { font-style: normal; color: var(--ara-coral-500); }
.ara-glass .ia-rh-icone { width: 84px; height: 84px; border-radius: 24px; flex: none; }
.ia-rh-grille { margin-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ia-rh-note { margin: 26px 0 0; display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ara-navy-800); }
.ia-rh-note svg { color: var(--ara-coral-500); flex: none; }
.ia-etape .prod-pourqui a { color: inherit; text-decoration: underline; text-decoration-color: var(--ara-coral-300); text-underline-offset: 3px; }
@media (max-width: 1024px) { .ia-rh-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ara-glass .ia-rh-icone { display: none; } }
@media (max-width: 560px) { .ia-rh { padding: 28px 22px; } .ia-rh-grille { grid-template-columns: 1fr; } }

/* ---------- Page ERP & gestion d'entreprise ---------- */
.erp-bref { display: flex; flex-direction: column; gap: 14px; }
.erp-bref-ligne { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 16px; row-gap: 4px; padding: 16px 18px; border-radius: 16px; text-decoration: none; background: rgba(255,255,255,0.6); border: 1px solid var(--glass-hairline); transition: background var(--dur-2) var(--ease-standard); }
.erp-bref-ligne:hover { background: #fff; }
.erp-bref-ligne strong { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.035em; color: var(--ara-navy-900); grid-row: span 2; }
.erp-bref-ligne > span { font-size: 15px; font-weight: 600; color: var(--ara-navy-900); }
.erp-bref-ligne .erp-bref-sect { font-size: 13.5px; font-weight: 400; color: var(--ara-gray-600); }
.erp-secteurs { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--glass-hairline); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.erp-secteurs .meta { margin-right: 6px; }
.erp-secteurs a { padding: 5px 12px; border-radius: var(--radius-full); background: rgba(255,255,255,0.7); border: 1px solid var(--glass-border); font-size: 13px; font-weight: 500; color: var(--ara-navy-800); text-decoration: none; }
.erp-secteurs a:hover { color: var(--ara-coral-600); }
.erp-table tbody th { width: 22%; }
.erp-etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1024px) { .erp-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .erp-etapes { grid-template-columns: 1fr; } }

/* ---------- Page Divalto : focus sur les 3 gammes ---------- */
.gammes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gamme { position: relative; overflow: hidden; padding: 36px 32px; display: flex; flex-direction: column; }
.gamme-nom { margin: 20px 0 0; font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; color: var(--ara-navy-900); }
.gamme-nom span { color: var(--ara-amber-500); }
.gamme-cible { margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--ara-amber-700); }
.gamme-pourqui { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--ara-navy-700); }
.gamme .prod-pourqui { flex: 1; }
.gamme-liens { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--glass-hairline); display: flex; gap: 10px; flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1024px) { .gammes { grid-template-columns: 1fr; } }

/* ---------- Page Divalto : partenaire certifié ---------- */
.partenaire { position: relative; overflow: hidden; padding: 48px 52px; display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: center; }
.partenaire-logo { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px; border-radius: 20px; background: #fff; border: 1px solid var(--glass-hairline); }
.partenaire-logo img { width: 200px; height: auto; }
.partenaire-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--radius-full); background: var(--ara-amber-50); border: 1px solid rgba(246,146,53,0.3); font-size: 12.5px; font-weight: 600; color: var(--ara-amber-700); text-align: center; }
.partenaire-citation { margin: 18px 0 0; font-family: var(--font-display); font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; color: var(--ara-navy-900); }
.partenaire-faits { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.partenaire-faits span { padding: 5px 12px; border-radius: var(--radius-full); background: rgba(255,255,255,0.7); border: 1px solid var(--glass-border); font-size: 13px; color: var(--ara-navy-800); }
@media (max-width: 1024px) { .partenaire { grid-template-columns: 1fr; padding: 32px 24px; } .partenaire-citation { font-size: 24px; } }
.partenaire-niveau { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--ara-amber-400), var(--ara-amber-500)); color: #fff; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; box-shadow: 0 8px 20px rgba(246,146,53,0.28); }
.partenaire-logo { gap: 12px; }
.partenaire-titre { margin: 16px 0 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ara-navy-800); }
.partenaire-titre strong { color: var(--ara-amber-600); }
.partenaire-citation { margin-top: 10px; }
.erp-perf { background: var(--ara-amber-50) !important; color: var(--ara-amber-700) !important; border-color: rgba(246,146,53,0.3) !important; font-weight: 600; }

/* ---------- Page CRM : zooms Weavy / arSales ---------- */
.crm-zoom { position: relative; overflow: hidden; padding: 48px 52px; }
.crm-zoom-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.crm-zoom-badges { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
.crm-fonctions { margin-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.crm-fonctions.crm-fonctions-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crm-fonctions > div { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 18px; background: rgba(255,255,255,0.62); border: 1px solid var(--glass-hairline); }
.crm-fonctions .ic-box { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 4px; }
.crm-fonctions strong { font-family: var(--font-display); font-size: 16.5px; letter-spacing: -0.01em; color: var(--ara-navy-900); }
.crm-fonctions span:last-child { font-size: 14px; line-height: 1.5; color: var(--ara-navy-700); }
.crm-zoom-pied { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--glass-hairline); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.crm-zoom-pied p { margin: 0; max-width: 640px; font-size: 15px; line-height: 1.55; color: var(--ara-navy-700); }
.crm-zoom-pied p a { color: var(--ara-coral-600); }
@media (max-width: 1024px) { .crm-fonctions, .crm-fonctions.crm-fonctions-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-zoom-tete { flex-direction: column; } }
@media (max-width: 560px) { .crm-zoom { padding: 28px 22px; } .crm-fonctions, .crm-fonctions.crm-fonctions-3 { grid-template-columns: 1fr; } }

/* ---------- Accueil : grosse mise en avant ARALINK ---------- */
.hl-aralink { position: relative; overflow: hidden; border-radius: 28px; background: var(--ara-navy-900); box-shadow: var(--glass-shadow-strong); isolation: isolate; }
.hl-aralink-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; z-index: -2; }
.hl-aralink::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(22,29,43,0.97) 0%, rgba(22,29,43,0.88) 45%, rgba(22,29,43,0.35) 100%); }
.hl-aralink-contenu { padding: 64px 64px 60px; max-width: 820px; }
.hl-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ara-coral-300); }
.hl-kicker span { width: 7px; height: 7px; border-radius: 50%; background: var(--ara-coral-500); box-shadow: 0 0 10px var(--ara-coral-500); }
.ara-glass .hl-titre { margin: 18px 0 0; font-family: var(--font-display); font-size: clamp(64px, 10vw, 128px); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; color: #fff; }
.hl-titre em { font-style: normal; color: var(--ara-coral-500); }
.hl-titre i { font-style: normal; color: var(--ara-coral-500); }
.hl-accroche { margin: 22px 0 0; max-width: 620px; font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.82); }
.hl-chips { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.hl-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--radius-full); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background var(--dur-2) var(--ease-standard), border-color var(--dur-2); }
.hl-chip svg { color: var(--ara-coral-300); }
.hl-chip:hover { background: rgba(240,92,93,0.22); border-color: rgba(240,92,93,0.5); color: #fff; }
.hl-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.hl-ghost { display: inline-flex; align-items: center; height: 52px; padding: 0 24px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.hl-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }
.hl-chip:focus-visible, .hl-ghost:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
@media (max-width: 680px) { .hl-aralink-contenu { padding: 36px 24px; } .hl-aralink::before { background: rgba(22,29,43,0.9); } }

/* ---------- Encart « Votre interlocuteur » ---------- */
.referent { position: relative; overflow: hidden; padding: 44px 48px; display: grid; grid-template-columns: 180px 1fr; gap: 40px; align-items: center; }
.referent-photo { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: var(--glass-shadow); }
.referent-nom { margin-top: 14px; font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.025em; color: var(--ara-navy-900); }
.referent-fonction { margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--ara-navy-700); }
.referent-message { margin: 10px 0 0; max-width: 640px; font-size: 15.5px; line-height: 1.6; color: var(--ara-navy-700); }
.referent-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 680px) {
	.referent { grid-template-columns: 1fr; padding: 28px 22px; gap: 20px; justify-items: start; }
	.referent-photo { width: 120px; height: 120px; }
	.referent-nom { font-size: 24px; }
}

/* ---------- Bloc final fusionné : appel à l'action + interlocuteur ---------- */
.cta-duo { position: relative; overflow: hidden; padding: 56px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; align-items: center; }
.cta-duo-action { padding-right: 48px; }
.cta-duo-referent { padding-left: 48px; border-left: 1px solid var(--glass-hairline); }
.cta-duo-referent .referent-photo { width: 104px; height: 104px; }
.cta-duo-referent .referent-nom { margin-top: 6px; font-size: 24px; }
.cta-duo-referent .referent-fonction { font-size: 15px; }
.cta-duo-referent .referent-message { font-size: 14.5px; }
.cta-duo-referent .referent-actions { margin-top: 18px; }
@media (max-width: 1024px) {
	.cta-duo { grid-template-columns: 1fr; padding: 40px 32px; }
	.cta-duo-action { padding-right: 0; }
	.cta-duo-referent { padding-left: 0; border-left: none; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--glass-hairline); }
}
@media (max-width: 560px) { .cta-duo { padding: 30px 22px; } .ara-glass .cta-duo .h-section { font-size: 32px !important; } }

/* ---------- Analyse d'éligibilité (formulaire) ---------- */
.eligib { position: relative; overflow: hidden; padding: 48px 52px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.ara-glass .eligib-icone { width: 64px; height: 64px; border-radius: 18px; margin-bottom: 20px; }
.eligib-note { margin: 18px 0 0; font-size: 13.5px; }
.eligib-arcep { display: inline-flex; align-items: center; gap: 6px; color: var(--ara-navy-700); text-decoration: underline; text-decoration-color: var(--ara-coral-300); text-underline-offset: 3px; }
.eligib-arcep:hover { color: var(--ara-coral-600); }
.eligib-form { display: flex; flex-direction: column; gap: 18px; }
.eligib-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.eligib-plein { grid-column: 1 / -1; }
.eligib-form .cta-pill { align-self: flex-start; }
.consent { position: relative; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 13.5px; line-height: 1.55; color: var(--ara-navy-700); }
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent .check { margin-top: 1px; }
.consent input:checked + .check { background: var(--glass-cta); border-color: transparent; color: #fff; }
.consent input:focus-visible + .check { box-shadow: var(--shadow-focus); }
.consent .check svg { display: none; }
.consent input:checked + .check svg { display: block; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-retour { margin: 0; padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; background: var(--status-danger-50); color: var(--status-danger-700); }
.prod-duo.is-seul { grid-template-columns: 1fr; }
@media (max-width: 1024px) { .eligib { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; } }
@media (max-width: 560px) { .eligib-grille { grid-template-columns: 1fr; } }

/* ---------- Recherche d'entreprise (Annuaire des Entreprises) ---------- */
.ent-recherche { position: relative; }
.ent-liste { position: absolute; z-index: 20; top: 72px; left: 0; right: 0; margin: 0; padding: 6px; list-style: none; border-radius: 14px; background: #fff; border: 1px solid var(--glass-hairline); box-shadow: var(--glass-shadow-strong); max-height: 320px; overflow-y: auto; }
.ent-option { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.ent-option strong { font-size: 14.5px; color: var(--ara-navy-900); }
.ent-option span { font-size: 12.5px; color: var(--ara-gray-600); }
.ent-option:hover, .ent-option[aria-selected="true"] { background: var(--ara-coral-50); }
.ent-pied { margin-top: 6px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ara-gray-500); }
.ent-etat { color: var(--ara-navy-700); }
.ent-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Zone d'intervention (référencement local) ---------- */
.zone { padding: 48px 52px; display: grid; grid-template-columns: 1.1fr 0.7fr; grid-template-areas: "texte carte" "liste carte"; gap: 28px 48px; align-items: start; }
.zone-texte { grid-area: texte; }
.zone-liste { grid-area: liste; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.zone-liste li { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 2px solid var(--glass-hairline); }
.zone-liste strong { font-family: var(--font-display); font-size: 16px; color: var(--ara-navy-900); }
.zone-liste span { font-size: 13.5px; line-height: 1.5; color: var(--ara-navy-700); }
.zone-carte { grid-area: carte; position: relative; aspect-ratio: 1; align-self: center; }
.zone-cercle { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--ton) 45%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--ton) 14%, transparent), transparent 70%); }
.zone-cercle--2 { inset: 28%; border-style: solid; border-width: 1px; background: color-mix(in srgb, var(--ton) 10%, transparent); }
.zone-centre { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; box-shadow: 0 0 0 6px rgba(255,255,255,0.8), 0 0 18px rgba(240,92,93,0.5); }
.zone-ville { position: absolute; left: 50%; top: calc(50% + 16px); transform: translateX(-50%); font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ara-navy-900); }
.zone-rayon { position: absolute; right: 2%; top: 46%; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--ara-navy-700); background: rgba(255,255,255,0.85); padding: 3px 8px; border-radius: 99px; }
@media (max-width: 1024px) {
	.zone { grid-template-columns: 1fr; grid-template-areas: "texte" "carte" "liste"; padding: 32px 24px; }
	.zone-carte { max-width: 260px; justify-self: center; width: 100%; }
}
@media (max-width: 560px) { .zone-liste { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { padding: 8px 40px; }
.faq-item { border-top: 1px solid var(--glass-hairline); }
.faq-item:first-child { border-top: none; }
/* Bloc et non flex : les noms de marque colorés (build_marques.py) restent dans le fil du texte */
.faq-question { list-style: none; cursor: pointer; display: block; position: relative; padding: 22px 48px 22px 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ara-navy-900); }
.faq-question::-webkit-details-marker { display: none; }
.faq-question:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 8px; }
.faq-plus { position: absolute; right: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--ara-coral-50); }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--ara-coral-600); border-radius: 2px; transition: transform var(--dur-2) var(--ease-standard); }
.faq-plus::after { transform: rotate(90deg); }
.faq-item[open] .faq-plus::after { transform: rotate(0deg); }
.faq-reponse p { margin: 0 0 22px; max-width: 820px; font-size: 15.5px; line-height: 1.65; color: var(--ara-navy-700); }
@media (max-width: 560px) { .faq { padding: 4px 20px; } .faq-question { font-size: 16px; } }

/* ---------- Logos officiels des marques (images/marques/) ---------- */
.logo-marque { display: block; max-width: 100%; }
.blk-logo { margin: 8px 0 0; line-height: 0; }
.blk-logo img { height: clamp(56px, 7vw, 96px) !important; width: auto; max-width: 100%; }
.ara-glass .prod-logo { display: block; margin-top: 18px; height: 84px; width: auto; max-width: 100%; }
.ara-glass .hl-titre { line-height: 0; }
.hl-titre img { height: clamp(64px, 9vw, 104px); width: auto; max-width: 100%; }
@media (max-width: 680px) { .ara-glass .prod-logo { height: 56px; } }
.logo-marque { align-self: flex-start; }

/* Captures cliquables (js/zoom-capture.js) */
a.capture-zoom { display: block; position: relative; cursor: zoom-in; }
a.capture-zoom::after { content: "Agrandir"; position: absolute; right: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(15,23,42,0.72); color: #fff; font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .2s; }
a.capture-zoom:hover::after, a.capture-zoom:focus-visible::after { opacity: 1; }
.capture-dialog { border: 0; padding: 0; background: transparent; max-width: min(1400px, 94vw); max-height: 92vh; overflow: visible; cursor: zoom-out; }
.capture-dialog::backdrop { background: rgba(15,23,42,0.78); backdrop-filter: blur(4px); }
.capture-dialog img { display: block; max-width: 100%; max-height: 92vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.capture-fermer { position: absolute; top: -16px; right: -16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: var(--ara-navy-900); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }

/* Encarts compacts « Autour d'ACE » */
.zooms-ace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.zoom-ace { padding: 28px; border-radius: 22px; display: flex; flex-direction: column; gap: 14px; }
.zoom-ace-tete { display: flex; align-items: center; gap: 14px; }
.zoom-ace-tete .ic-box { width: 44px; height: 44px; border-radius: 13px; flex: none; }
.zoom-ace-tete .meta { color: var(--ara-coral-600); }
.zoom-ace h3 { margin: 2px 0 0; font-family: var(--font-display); font-size: 22px; letter-spacing: -0.015em; color: var(--ara-navy-900); }
.zoom-ace > p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ara-navy-700); }
.zoom-ace-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zoom-ace-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ara-navy-700); }
.zoom-ace-points svg { color: var(--ara-coral-500); flex: none; margin-top: 2px; }
.zoom-ace-lien { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; color: var(--ara-coral-600); text-decoration: none; }
.zoom-ace-lien:hover { text-decoration: underline; }
.zoom-vignettes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.zoom-vignette { border-radius: 10px; overflow: hidden; border: 1px solid var(--glass-hairline); background: #fff; }
.zoom-vignette img { display: block; width: 100%; height: 92px; object-fit: cover; object-position: left top; }
.zoom-vignette::after { right: 6px !important; bottom: 6px !important; font-size: 11px !important; padding: 3px 8px !important; }
.zoom-note { margin: -4px 0 0 !important; font-size: 12px !important; color: var(--ara-gray-500) !important; }
@media (max-width: 900px) { .zooms-ace { grid-template-columns: 1fr; } }

/* ACE : interface 100 % web */
.interface-web { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.atouts-web { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.atout-web { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 18px; background: rgba(255,255,255,0.62); border: 1px solid var(--glass-hairline); }
.atout-web .ic-box { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.atout-web strong { display: block; font-family: var(--font-display); font-size: 16px; letter-spacing: -0.01em; color: var(--ara-navy-900); margin-bottom: 4px; }
.atout-web span:last-child { display: block; font-size: 14px; line-height: 1.5; color: var(--ara-navy-700); }
@media (max-width: 1024px) { .interface-web { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 560px) { .atouts-web { grid-template-columns: 1fr; } }
.crm-fonctions .gescom-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.crm-fonctions > div > span:not(.ic-box):not(.gescom-pills):not(.etape-num) { font-size: 14px; line-height: 1.5; color: var(--ara-navy-700); }
.crm-fonctions .gescom-pills .pill { font-size: 11.5px; line-height: 1.2; color: var(--ara-navy-800); }
.zoom-ace .zoom-vignettes + .zoom-ace-lien { margin-top: 4px; }

/* Page « Notre approche métier » (metiers-secteurs.html) */
.langage { padding: 8px 36px; }
.langage-ligne { display: grid; grid-template-columns: 200px 1.2fr 1fr; gap: 24px; align-items: center; padding: 22px 0; border-top: 1px solid var(--glass-hairline); }
.langage-ligne:first-child { border-top: none; }
.langage-entete { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ara-gray-500); padding: 18px 0 10px; }
.langage-secteur { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ara-navy-900); }
.langage-dit { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ara-navy-800); font-style: italic; }
.langage-compris { display: flex; flex-wrap: wrap; gap: 6px; }
.secteurs-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.secteur-carte { text-decoration: none; color: inherit; transition: transform .2s; }
.secteur-carte:hover { transform: translateY(-2px); }
.secteur-lien { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; color: var(--ara-amber-700); }
.etapes-metier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.etapes-metier .etape-num { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--ara-amber-500); }
.temoignages-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.temoignage-court { padding: 36px 40px; }
.temoignage-court blockquote { font-size: 17px; line-height: 1.6; }
@media (max-width: 1024px) { .secteurs-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .temoignages-duo { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
	.langage { padding: 4px 22px; }
	.langage-ligne { grid-template-columns: 1fr; gap: 10px; }
	.langage-entete { display: none; }
	.langage-entete + .langage-ligne { border-top: none; }
	.secteurs-grille { grid-template-columns: 1fr; }
	.temoignage-court { padding: 28px 24px; }
}

/* Accueil : bloc Infrastructure aux marques ARACloud / ARACare / ARALink */
.blk-marques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.blk-marque { display: flex; align-items: center; justify-content: center; padding: 22px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--glass-hairline); transition: transform .2s, box-shadow .2s; }
.blk-marque:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(46,58,83,0.10); }
.blk-marque img { height: 54px; width: auto; max-width: 100%; display: block; }
@media (max-width: 900px) { .blk-marques { grid-template-columns: 1fr; } .blk-marque img { height: 46px; } }
.blk-marques-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blk-marques-1 { grid-template-columns: minmax(0, 420px); }
@media (max-width: 900px) { .blk-marques-2, .blk-marques-1 { grid-template-columns: 1fr; } }

/* Page ARACloud (aracloud.html) */
.cloud-logo { display: block; height: 64px; width: auto; margin-top: 18px; }
.cloud-badges { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cloud-badges li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--ara-blue-50); color: var(--ara-blue-700); font-size: 13.5px; font-weight: 600; }
.cloud-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cloud-service-tete { display: flex; align-items: center; gap: 14px; }
.cloud-code { font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: .06em; color: var(--ara-blue-700); }
.cloud-code-sub { font-size: 12.5px; color: var(--ara-gray-500); }
.cloud-archi.is-reco { outline: 2px solid var(--ara-blue-500); outline-offset: 2px; }
.cloud-reco { position: absolute; top: 18px; right: 18px; padding: 4px 10px; border-radius: 999px; background: var(--ara-blue-500); color: #fff; font-size: 12px; font-weight: 600; }
.cloud-compar { margin-top: 20px; padding: 8px 32px; overflow-x: auto; }
.cloud-compar table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cloud-compar th, .cloud-compar td { text-align: left; padding: 16px 12px; border-top: 1px solid var(--glass-hairline); color: var(--ara-navy-700); }
.cloud-compar thead th { border-top: none; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ara-gray-500); }
.cloud-compar tbody th { font-weight: 600; color: var(--ara-navy-900); }
.cloud-compar td strong { color: var(--ara-blue-700); }
.cloud-def-outil { font-family: var(--font-mono); font-size: 12px !important; color: var(--ara-blue-700) !important; }
.diag { padding: 36px 40px; }
.diag-questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.diag-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.diag-q legend { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ara-navy-900); padding: 0; }
.diag-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ara-blue-500); color: #fff; font-size: 13px; flex: none; }
.diag-aide { margin: 6px 0 12px; font-size: 13.5px; color: var(--ara-gray-600); }
.diag-choix-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.diag-choix { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--glass-hairline); background: rgba(255,255,255,0.7); cursor: pointer; min-height: 44px; }
.diag-choix:has(input:checked) { border-color: var(--ara-blue-500); background: var(--ara-blue-50); }
.diag-choix input { margin-top: 3px; accent-color: var(--ara-blue-500); }
.diag-choix strong { display: block; font-size: 14.5px; color: var(--ara-navy-900); }
.diag-choix small { display: block; font-size: 12.5px; color: var(--ara-gray-600); }
.diag-actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.diag-erreur { margin: 18px 0 0; color: var(--ara-coral-700); font-weight: 600; }
.diag-resultat { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--glass-hairline); outline: none; }
.diag-archi { margin: 8px 0 0; font-family: var(--font-display); font-size: 28px; color: var(--ara-navy-900); }
.diag-pourquoi { margin: 8px 0 0; color: var(--ara-navy-700); max-width: 760px; }
.diag-blocs { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.diag-blocs ul { margin: 8px 0 0; padding-left: 18px; color: var(--ara-navy-700); line-height: 1.7; }
.diag-note { margin: 16px 0 0; font-size: 12.5px; color: var(--ara-gray-500); }
@media (max-width: 1024px) { .cloud-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .diag-questions { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .cloud-grille, .diag-choix-grille, .diag-blocs { grid-template-columns: 1fr; } .diag { padding: 26px 20px; } .cloud-compar { padding: 4px 14px; } .cloud-logo { height: 48px; } }
#services .gamme-nom span, #architectures .gamme-nom span { color: var(--ara-blue-500); }
#services .prod-pourqui svg, #architectures .prod-pourqui svg { color: var(--ara-blue-500); }

/* ARACloud : diagnostic pas à pas + récapitulatif */
.diag-duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: start; }
.diag-progres { margin-bottom: 22px; }
.diag-etape { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--ara-blue-700); }
.diag-barre { margin-top: 10px; height: 5px; border-radius: 99px; background: var(--ara-gray-100); overflow: hidden; }
.diag-barre i { display: block; height: 100%; width: 25%; border-radius: 99px; background: linear-gradient(90deg, var(--ara-amber-400), var(--ara-blue-500)); transition: width .35s; }
.diag-questions { display: block; }
.js-diag .diag-q:not(.is-active) { display: none; }
.diag-titre { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -0.015em; color: var(--ara-navy-900); padding: 0; }
.diag-choix { position: relative; align-items: center; padding: 14px 16px; }
.diag-choix input { position: absolute; top: 12px; right: 12px; margin: 0; }
.diag-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--glass-hairline); color: var(--ara-amber-600); }
.diag-lib strong { font-size: 15.5px; }
.diag-nav { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--glass-hairline); display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.diag-prec svg { transform: rotate(180deg); }
.diag-prec, .diag-modifier { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.diag-recap { position: relative; overflow: hidden; border-radius: 24px; padding: 30px 30px 24px; color: #E8ECF4; background: linear-gradient(160deg, #26314A, #1B2335); box-shadow: 0 30px 60px rgba(30,40,60,0.22); }
.diag-recap::before { content: ""; position: absolute; inset: auto -30% -40% auto; width: 80%; height: 80%; background: radial-gradient(closest-side, rgba(246,146,53,0.28), transparent); pointer-events: none; }
.diag-recap .meta { color: #F8A24A; }
.diag-recap-titre { margin: 10px 0 18px; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.2; color: #fff; }
.diag-recap dl { margin: 0; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.diag-recap dl div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 14.5px; }
.diag-recap dt { color: #A9B3C6; } .diag-recap dd { margin: 0; text-align: right; color: #fff; font-weight: 600; }
.diag-recap-badges { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: #CFD6E4; }
.diag-recap-badges span { display: inline-flex; align-items: center; gap: 6px; } .diag-recap-badges svg { color: #F8A24A; }
.diag-recap .diag-note { color: #A9B3C6; position: relative; }
/* La différence ARA : deux colonnes */
.cloud-diff { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; }
.cloud-diff-points { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.cloud-diff-points li { display: flex; gap: 14px; align-items: flex-start; }
.cloud-diff-points .ic-box { width: 42px; height: 42px; border-radius: 12px; flex: none; }
.cloud-diff-points strong { display: block; font-family: var(--font-display); font-size: 16.5px; color: var(--ara-navy-900); margin-bottom: 3px; }
.cloud-diff-points span:last-child { font-size: 14.5px; line-height: 1.5; color: var(--ara-navy-700); }
.cloud-diff .cloud-compar { margin-top: 0; padding: 0; overflow: hidden; }
.cloud-compar thead th { padding: 18px 16px; }
.cloud-compar tbody th, .cloud-compar td { padding: 15px 16px; vertical-align: top; }
.cloud-compar .cmp-ara { color: var(--ara-blue-700); display: table-cell; }
.cloud-compar .cmp-ara img { vertical-align: -5px; margin-right: 6px; }
.cloud-compar th:last-child, .cloud-compar td:last-child { background: rgba(98,123,164,0.08); }
.cmp-non { display: inline-flex; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--ara-gray-100); color: var(--ara-gray-500); align-items: center; justify-content: center; font-size: 12px; vertical-align: -3px; }
.cmp-oui { display: inline-flex; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--ara-blue-500); color: #fff; align-items: center; justify-content: center; vertical-align: -3px; }
.cloud-compar td:last-child { color: var(--ara-navy-900); font-weight: 600; }
/* Six lignes de défense : couches imbriquées */
.cloud-def { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.def-schema { padding: 14px; border-radius: 24px; }
.def-couche { padding: 8px 10px 10px; border-radius: 18px; border: 1px solid rgba(98,123,164,0.35); background: rgba(98,123,164,0.06); }
.def-couche .def-couche { margin-top: 6px; }
.def-lbl { display: block; padding: 2px 6px 6px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ara-navy-800); }
.def-lbl b { color: var(--ara-amber-600); margin-right: 4px; }
.def-coeur { margin-top: 6px; padding: 30px 16px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff;
	background: radial-gradient(circle at 50% 0%, rgba(246,146,53,0.35), transparent 60%), linear-gradient(160deg, #26314A, #1B2335); box-shadow: 0 16px 30px rgba(30,40,60,0.25); }
.def-coeur svg { color: #F8A24A; } .def-coeur strong { font-family: var(--font-display); font-size: 18px; }
.def-liste { list-style: none; margin: 0; padding: 0; }
.def-liste li { display: grid; grid-template-columns: 30px 40px 1fr; gap: 12px; align-items: start; padding: 16px 0; border-top: 1px solid var(--glass-hairline); }
.def-liste li:first-child { border-top: none; }
.def-num { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--ara-amber-600); padding-top: 10px; }
.def-liste .ic-box { width: 40px; height: 40px; border-radius: 12px; }
.def-liste strong { display: block; font-family: var(--font-display); font-size: 16.5px; color: var(--ara-navy-900); margin-bottom: 3px; }
.def-liste em { font-style: normal; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--ara-blue-50); color: var(--ara-blue-700); font-family: var(--font-body, inherit); font-size: 12px; font-weight: 600; white-space: nowrap; }
.def-liste li > span:last-child { font-size: 14.5px; line-height: 1.5; color: var(--ara-navy-700); }
/* Appel final avec photo */
.cloud-final { display: grid; grid-template-columns: 0.9fr 1.1fr; overflow: hidden; padding: 0; border-radius: 28px; max-width: 1100px; margin: 0 auto; position: relative; }
.cloud-final-photo img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 320px; }
.cloud-final-texte { position: relative; padding: 52px 48px; }
@media (max-width: 1024px) { .diag-duo, .cloud-diff, .cloud-def { grid-template-columns: 1fr; } .cloud-final { grid-template-columns: 1fr; } .cloud-final-photo img { min-height: 0; aspect-ratio: 16 / 9; } }
@media (max-width: 560px) { .cloud-final-texte { padding: 32px 22px; } .diag-titre { font-size: 21px; } .def-liste em { display: inline-block; margin: 4px 0 0; } .cloud-compar { overflow-x: auto; } }
/* Migration ARACloud : chemin pointillé (esprit frise « Notre histoire ») */
.chemin-carte { padding: 40px 36px 34px; border-radius: 28px; }
.chemin { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; }
.chemin::before { content: ""; position: absolute; left: 4%; right: 4%; top: 9px; border-top: 2px dashed var(--ara-blue-400); }
.chemin li { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.chemin-point { width: 18px; height: 18px; border-radius: 50%; background: var(--ara-amber-500); box-shadow: 0 0 0 6px rgba(246,146,53,0.22), 0 0 14px rgba(246,146,53,0.5); margin-bottom: 14px; position: relative; z-index: 1; }
.chemin li:last-child .chemin-point { background: var(--ara-blue-500); box-shadow: 0 0 0 6px rgba(98,123,164,0.22), 0 0 14px rgba(98,123,164,0.5); }
.chemin-num { font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--ara-navy-900); }
.chemin strong { font-family: var(--font-display); font-size: 18px; color: var(--ara-navy-900); }
.chemin li > span:last-child { font-size: 14px; line-height: 1.5; color: var(--ara-navy-700); max-width: 260px; }
@media (max-width: 760px) {
	.chemin { grid-template-columns: 1fr; gap: 22px; }
	.chemin::before { left: 8px; right: auto; top: 6px; bottom: 6px; border-top: 0; border-left: 2px dashed var(--ara-blue-400); }
	.chemin li { text-align: left; align-items: flex-start; padding-left: 36px; }
	.chemin-point { position: absolute; left: 0; top: 2px; margin: 0; }
}

/* ARACloud : en-tête chaleureux et panneau de supervision (illustration) */
.cloud-hero { position: relative; }
.cloud-hero::before { content: ""; position: absolute; top: -10%; right: -5%; width: 70%; height: 120%; pointer-events: none; z-index: 0;
	background: radial-gradient(closest-side at 70% 40%, rgba(246,146,53,0.20), transparent 70%), radial-gradient(closest-side at 35% 75%, rgba(240,92,93,0.12), transparent 70%); }
.cloud-panneau { position: relative; border-radius: 24px; padding: 18px 20px 16px; background: linear-gradient(160deg, #26314A, #1B2335); color: #E8ECF4;
	box-shadow: 0 30px 60px rgba(30,40,60,0.28), inset 0 0 0 1px rgba(255,255,255,0.06); }
.cp-tete { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14.5px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.cp-points { display: inline-flex; gap: 6px; }
.cp-points i { width: 10px; height: 10px; border-radius: 50%; background: #F05C5D; }
.cp-points i:nth-child(2) { background: #F6B23A; }
.cp-points i:nth-child(3) { background: #3CC37A; }
.cp-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #CFE9DA; }
.cp-live i { width: 8px; height: 8px; border-radius: 50%; background: #3CC37A; box-shadow: 0 0 0 4px rgba(60,195,122,0.18); }
.cp-lignes { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cp-lignes li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }
.cp-ic { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: rgba(246,146,53,0.14); color: #F8A24A; flex: none; }
.cp-txt { display: flex; flex-direction: column; min-width: 0; }
.cp-txt strong { font-size: 15px; color: #fff; }
.cp-txt small { font-size: 12.5px; color: #A9B3C6; }
.cp-etat { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: rgba(60,195,122,0.16); color: #7FDCA8; font-size: 12px; font-weight: 600; white-space: nowrap; }
.cp-etat::before { content: "● "; font-size: 9px; }
.cp-jauges { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); font-size: 13px; color: #A9B3C6; }
.cp-jauges div { display: grid; grid-template-columns: 1fr auto; row-gap: 8px; }
.cp-jauges b { color: #fff; }
.cp-jauges i { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: linear-gradient(90deg, #F8A24A var(--v), rgba(255,255,255,0.1) var(--v)); }
.cp-pied { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #A9B3C6; }
.diag-prec[hidden], .diag-nav[hidden] { display: none !important; }
.diag-titre { font-size: 26px !important; }
@media (max-width: 560px) { .cp-jauges { grid-template-columns: 1fr; } .cp-etat { display: none; } .diag-titre { font-size: 21px !important; } }

/* Page Assistance */
.ass-contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ass-contacts li { display: flex; gap: 14px; align-items: center; }
.ass-contacts .ic-box { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.ass-contacts small { display: block; font-size: 12px; color: var(--ara-gray-500); }
.ass-contacts a, .ass-contacts strong { font-size: 16px; font-weight: 600; color: var(--ara-navy-900); text-decoration: none; }
.ass-contacts a:hover { color: var(--ara-amber-700); }
.ass-outils { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ass-etapes { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ara-navy-700); }
.ass-etapes li { display: flex; gap: 10px; align-items: flex-start; }
.ass-num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ara-amber-100); color: var(--ara-amber-800); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ass-securite { margin-top: 20px; display: flex; gap: 8px; align-items: flex-start; color: var(--ara-gray-600); text-transform: none; letter-spacing: 0; font-family: inherit; font-size: 13.5px; }
@media (max-width: 1024px) { .ass-outils { grid-template-columns: 1fr; } }
.chemin-carte { position: relative; }
.chemin-flux { position: absolute !important; left: calc(36px + 4%); right: calc(36px + 4%); top: 49px; height: 2px; z-index: 2; pointer-events: none; }
@media (max-width: 760px) { .chemin-flux { display: none; } }
/* ARACloud : fin de page aux logos ARACare / ARALink */
.marques-suite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.marque-suite { text-decoration: none; color: inherit; transition: transform .2s; }
.marque-suite:hover { transform: translateY(-2px); }
.marque-suite-logo { height: 56px; width: auto; max-width: 100%; display: block; margin-bottom: 6px; }
.marque-suite:first-child .prod-pourqui svg { color: var(--ara-amber-600); }
.marque-suite:last-child .prod-pourqui svg { color: var(--ara-coral-500); }
.marque-suite-lien { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; }
.marque-suite:first-child .marque-suite-lien { color: var(--ara-amber-700); }
.marque-suite:last-child .marque-suite-lien { color: var(--ara-coral-600); }
@media (max-width: 760px) { .marques-suite { grid-template-columns: 1fr; } .marque-suite-logo { height: 46px; } }
.marque-suite-logo { align-self: flex-start; margin-left: 0; }
.chemin-carte .chemin::before { display: none; }
@media (max-width: 760px) { .chemin-carte .chemin::before { display: block; } }
/* Migration : puces bleues numérotées, trait plus épais */
.chemin-carte { padding-top: 34px; }
.chemin-flux { top: 54px; height: 3px; }
.chemin-flux::before { height: 3px; background: repeating-linear-gradient(90deg, var(--ara-blue-400) 0 9px, transparent 9px 16px); opacity: 1; }
.chemin-flux .spark { width: 11px; height: 11px; }
.chemin-point { width: 42px; height: 42px; margin-bottom: 12px; display: inline-flex; align-items: center; justify-content: center;
	background: var(--ara-blue-500); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 17px;
	box-shadow: 0 0 0 7px rgba(98,123,164,0.18), 0 8px 18px rgba(98,123,164,0.35); }
.chemin li:last-child .chemin-point { background: var(--ara-blue-500); box-shadow: 0 0 0 7px rgba(98,123,164,0.18), 0 8px 18px rgba(98,123,164,0.35); }
@media (max-width: 760px) {
	.chemin::before { left: 20px; border-left-width: 3px; border-left-color: var(--ara-blue-400); }
	.chemin li { padding-left: 60px; }
	.chemin-point { top: -6px; }
}
.chemin-point { position: relative; z-index: 3; }
/* « Nos autres services » : cartes aux logos de la famille ARA */
.sect-ara-marque { gap: 12px; }
.sect-ara-logo { height: 46px; width: auto; max-width: 100%; align-self: flex-start; display: block; margin-bottom: 4px; }
.sect-ara .sect-ara-lien { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--marque, var(--ara-coral-600)); }

/* ARACloud v2 : catalogue plus contrasté, bandeau « Nos datacenters », « différence » en bandeau sombre,
   sécurité en profondeur aux couleurs du fichier ARA-CLOUD-v2 (rouge ARA #D92719 et ses nuances) */
.cloud-grille .gamme { transition: transform .2s, box-shadow .2s; }
.cloud-grille .gamme:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(46,58,83,0.14); }
.cloud-grille .gamme[data-code]::after { content: attr(data-code); position: absolute; right: 16px; bottom: -16px; z-index: -1; pointer-events: none;
	font-family: var(--font-display); font-weight: 800; font-size: 96px; line-height: 1; letter-spacing: -0.05em; color: rgba(98,123,164,0.08); }
.cloud-grille .cloud-service-tete .ic-box { background: linear-gradient(150deg, var(--ara-blue-400), var(--ara-blue-600)); color: #fff; box-shadow: 0 8px 18px rgba(79,101,137,0.3); }

.dc-bandeau { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); min-height: 560px; border-radius: 30px;
	background: #1B2335; box-shadow: 0 30px 60px rgba(30,40,60,0.28); }
.dc-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; height: 100%; object-fit: cover; object-position: 50% 50%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%); mask-image: linear-gradient(90deg, transparent 0%, #000 32%); }
.dc-bandeau::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, rgba(20,26,40,0.6) 0%, rgba(20,26,40,0.25) 45%, transparent 70%),
		radial-gradient(60% 70% at 0% 100%, rgba(98,123,164,0.35), transparent 70%); }
.dc-contenu { position: relative; z-index: 2; padding: 52px 48px; color: #E8ECF4; }
.dc-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ara-blue-200); }
.dc-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--ara-blue-300); box-shadow: 0 0 8px var(--ara-blue-300); }
.ara-glass .dc-contenu .h-section { margin-top: 18px; color: #fff; }
.dc-lead { margin: 16px 0 0; max-width: 520px; font-size: 17.5px; line-height: 1.6; color: #C9D1E0; }
.dc-garanties { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
.dc-garanties li { display: flex; gap: 12px; align-items: flex-start; }
.dc-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff;
	background: linear-gradient(150deg, var(--ara-blue-400), var(--ara-blue-600)); box-shadow: 0 6px 14px rgba(0,0,0,0.25); }
.dc-garanties strong { display: block; font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: #fff; }
.dc-garanties span:last-child { font-size: 13.5px; line-height: 1.45; color: #A9B3C6; }
.dc-reseau { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.12); font-family: var(--font-display); font-size: 15px; font-weight: 600; color: #fff; }
.dc-reseau span { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--ara-blue-200); }
.dc-actions { margin-top: 28px; }

.cloud-diff--sombre { position: relative; overflow: hidden; padding: 44px 46px; border-radius: 30px; box-shadow: 0 30px 60px rgba(30,40,60,0.25);
	background: radial-gradient(60% 80% at 0% 0%, rgba(98,123,164,0.4), transparent 70%), linear-gradient(160deg, #26314A, #1B2335); }
.cloud-diff--sombre .lead { color: #CFD6E4; }
.cloud-diff--sombre .cloud-diff-points span:last-child { color: #A9B3C6; }
.cloud-diff--sombre .cloud-diff-points strong { color: #fff; }
.ara-glass .cloud-diff--sombre .cloud-compar { background: rgba(255,255,255,0.97); }

.cloud-def .def-couche { padding: 6px 10px 10px; border: 1.5px solid rgba(217,39,25, calc(0.14 + var(--depth, 0) * 0.09)); border-radius: calc(26px - var(--depth, 0) * 3px); background: rgba(217,39,25,0.035); }
.cloud-def .def-schema > .def-couche { background: linear-gradient(180deg, #FDF3F2, #fff); box-shadow: 0 18px 40px rgba(165,28,17,0.10); }
.cloud-def .def-lbl { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: .1em; color: #1A1E36; }
.cloud-def .def-lbl b { color: #A51C11; }
.cloud-def .def-coeur { background: radial-gradient(12rem 8rem at 50% 0%, rgba(217,39,25,0.35), transparent 70%), #111427; box-shadow: 0 20px 40px -18px rgba(217,39,25,0.55); }
.cloud-def .def-coeur svg { color: #FF7A66; }
.cloud-def .def-num { color: #D92719; }
.cloud-def .def-ic { background: #FDF3F2; border: 1px solid #FBE3E0; color: #C42215; box-shadow: none; }
.cloud-def .def-liste em { background: #FDF3F2; border: 1px solid #FBE3E0; color: #A51C11; }

@media (max-width: 1024px) { .cloud-diff--sombre { padding: 32px 26px; } }
@media (max-width: 1024px) { .dc-bandeau { grid-template-columns: 1fr; min-height: 0; } .dc-photo { position: relative; width: 100%; height: 260px; object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }
	.dc-bandeau::before { background: linear-gradient(180deg, rgba(20,26,40,0) 120px, rgba(20,26,40,0.96) 280px); } .dc-contenu { padding: 32px 26px 34px; } }
@media (max-width: 640px) { .dc-garanties { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cloud-diff--sombre { padding: 26px 18px; border-radius: 24px; } .cloud-grille .gamme[data-code]::after { font-size: 72px; } }