/* Page Swiiptel (layouts/_default/swiiptel.html), chargée par cette page
seule (paramètre « css »). Couleurs du logo : ardoise #49616e, bleu
#5997b0. Contrastes WCAG AA vérifiés en modes clair et sombre
(scripts/audit-accessibilite.mjs). */
:root {
--sw-nuit: #142630;
--sw-ardoise: #213945;
--sw-bleu: #5997b0;
--sw-ciel: #8fd3ec;
--sw-texte: #1f2328;
--sw-doux: #4a5560;
--sw-carte: #ffffff;
--sw-fond: #f1f5f7;
--sw-bord: #d9e3e8;
--sw-titre: #1d4a5c;
--sw-lien: #1f6680;
}
[data-bs-theme="dark"] {
--sw-texte: #e3e8eb;
--sw-doux: #b3bfc7;
--sw-carte: #1d2c34;
--sw-fond: #16232a;
--sw-bord: #2e434e;
--sw-titre: #9fd8ee;
--sw-lien: #8fd3ec;
}
/* En-tête */
.sw-hero {
color: #fff;
background:
radial-gradient(circle at 80% 30%, rgba(89, 151, 176, .35), transparent 50%),
radial-gradient(circle at 10% 90%, rgba(143, 211, 236, .12), transparent 40%),
linear-gradient(140deg, var(--sw-nuit) 0%, var(--sw-ardoise) 100%);
padding: 4.5rem 0 4rem;
overflow: hidden;
}
.sw-logo { margin-bottom: 1.4rem; }
.sw-logo img {
height: 46px; width: auto; padding: .55rem .9rem; border-radius: 10px;
background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.sw-kicker {
display: inline-block; margin-bottom: 1rem; padding: .3rem .8rem;
border: 1px solid rgba(143, 211, 236, .6); border-radius: 999px;
color: #cdeaf5; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.sw-kicker-sombre { border-color: var(--sw-bleu); color: var(--sw-titre); }
.sw-titre { font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff; margin-bottom: 1rem; }
.sw-accroche { font-size: 1.2rem; line-height: 1.55; color: #dce9ee; max-width: 38rem; }
.sw-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.sw-btn-principal { background: var(--sw-ciel); color: var(--sw-nuit); font-weight: 700; border: 0; }
.sw-btn-principal:hover, .sw-btn-principal:focus { background: #b5e4f5; color: var(--sw-nuit); }
.sw-btn-clair { border: 2px solid rgba(255, 255, 255, .75); color: #fff; font-weight: 600; background: transparent; }
.sw-btn-clair:hover, .sw-btn-clair:focus { background: #fff; color: var(--sw-nuit); }
/* Schéma des deux datacenters */
.sw-carte { margin: 0; text-align: center; }
.sw-carte svg { width: 100%; max-width: 380px; height: auto; }
.sw-france { fill: rgba(255, 255, 255, .06); stroke: rgba(143, 211, 236, .55); stroke-width: 2; stroke-linejoin: round; }
.sw-lien { fill: none; stroke: var(--sw-ciel); stroke-width: 3; stroke-dasharray: 8 7; animation: sw-flux 1.6s linear infinite; }
.sw-dc circle { fill: var(--sw-ciel); }
.sw-dc .sw-halo { fill: rgba(143, 211, 236, .22); animation: sw-pouls 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.sw-ville { fill: #fff; font-size: 17px; font-weight: 700; }
.sw-replication { fill: #cdeaf5; font-size: 13px; font-style: italic; }
.sw-carte figcaption { color: #cdeaf5; font-size: .9rem; margin-top: .4rem; }
@keyframes sw-flux { to { stroke-dashoffset: -30; } }
@keyframes sw-pouls { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
/* Chiffres clés */
.sw-chiffres { background: var(--sw-carte); border-bottom: 1px solid var(--sw-bord); }
.sw-chiffres-liste { list-style: none; margin: 0; padding: 1.8rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
.sw-chiffre { display: block; font-size: 2.2rem; font-weight: 800; color: var(--sw-titre); line-height: 1.1; }
.sw-chiffre-texte { color: var(--sw-doux); font-size: .95rem; }
/* Sections */
.sw-section { padding: 4rem 0; background: var(--bs-body-bg); color: var(--sw-texte); }
.sw-fond { background: var(--sw-fond); }
.sw-h2 { font-size: 2rem; font-weight: 750; color: var(--sw-titre); margin-bottom: .8rem; }
.sw-intro { font-size: 1.1rem; color: var(--sw-doux); max-width: 46rem; margin-bottom: 2rem; }
.sw-atout { height: 100%; padding: 1.6rem; border-radius: 14px; background: var(--sw-carte); border: 1px solid var(--sw-bord); }
.sw-icone {
display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem;
border-radius: 12px; background: var(--sw-ardoise); color: var(--sw-ciel); font-size: 1.3rem;
}
[data-bs-theme="dark"] .sw-icone, [data-bs-theme="dark"] .sw-palier-num { background: #2f5566; }
.sw-atout h3 { font-size: 1.15rem; font-weight: 700; color: var(--sw-texte); }
.sw-atout p { color: var(--sw-doux); margin: 0; }
/* Offres */
.sw-offre {
position: relative; height: 100%; padding: 1.8rem 1.6rem; border-radius: 14px;
background: var(--sw-carte); border: 1px solid var(--sw-bord); border-top: 5px solid var(--sw-bleu);
transition: transform .2s, box-shadow .2s;
}
.sw-offre:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .12); }
.sw-offre-nouvelle { border-top-color: var(--sw-ciel); box-shadow: 0 0 0 2px var(--sw-bleu); }
.sw-badge {
position: absolute; top: -.85rem; right: 1.2rem; margin: 0; padding: .2rem .7rem; border-radius: 999px;
background: var(--sw-ardoise); color: #fff; font-size: .8rem; font-weight: 700;
}
.sw-offre h3 { font-size: 1.35rem; font-weight: 750; margin-bottom: .3rem; }
.sw-offre h3 a { color: var(--sw-lien); text-decoration: none; }
.sw-offre h3 a:hover, .sw-offre h3 a:focus { text-decoration: underline; }
.sw-offre-accroche { color: var(--sw-doux); margin-bottom: 1rem; }
.sw-offre ul { list-style: none; padding: 0; margin: 0; }
.sw-offre li { padding: .3rem 0; color: var(--sw-texte); }
.sw-offre li i { color: var(--sw-lien); margin-right: .4rem; }
/* Akilao : quatre paliers */
.sw-paliers { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: end; }
.sw-palier { position: relative; padding: 1.4rem 1.2rem; border-radius: 14px 14px 6px 6px; background: var(--sw-carte); border: 1px solid var(--sw-bord); }
.sw-n1 { border-bottom: 6px solid #a9d6e6; }
.sw-n2 { border-bottom: 6px solid #6fb0c9; padding-top: 2.2rem; }
.sw-n3 { border-bottom: 6px solid #3f88a5; padding-top: 3rem; }
.sw-n4 { border-bottom: 6px solid var(--sw-ardoise); padding-top: 3.8rem; }
.sw-palier-num {
position: absolute; top: -1rem; left: 1.2rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
border-radius: 50%; background: var(--sw-ardoise); color: #fff; font-weight: 800;
}
.sw-palier h3 { font-size: 1.05rem; font-weight: 700; color: var(--sw-texte); margin-bottom: .4rem; }
.sw-palier p { font-size: .95rem; color: var(--sw-doux); margin: 0; }
.sw-socle { color: var(--sw-texte); margin-bottom: .6rem; }
.sw-socle-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.sw-socle-liste li {
display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 999px;
background: var(--sw-fond); border: 1px solid var(--sw-bord); color: var(--sw-texte);
}
.sw-socle-liste i { color: var(--sw-lien); }
/* Histoire */
.sw-frise { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; position: relative; }
.sw-frise::before { content: ""; position: absolute; left: 0; right: 0; top: 1.1rem; height: 3px; background: var(--sw-bord); }
.sw-frise li { position: relative; padding-top: 2.8rem; }
.sw-frise li::before {
content: ""; position: absolute; top: .55rem; left: 0; width: 1.2rem; height: 1.2rem; border-radius: 50%;
background: var(--sw-bleu); border: 3px solid var(--bs-body-bg);
}
.sw-annee { display: block; font-size: 1.5rem; font-weight: 800; color: var(--sw-titre); }
.sw-frise p { color: var(--sw-doux); margin: .2rem 0 0; }
/* Appel final */
.sw-fin { padding: 3.5rem 0; background: linear-gradient(140deg, var(--sw-ardoise), var(--sw-nuit)); color: #fff; }
.sw-fin h2 { font-weight: 800; color: #fff; }
.sw-fin p { color: #dce9ee; font-size: 1.1rem; }
@media (max-width: 991.98px) {
.sw-paliers, .sw-frise { grid-template-columns: repeat(2, 1fr); }
.sw-paliers { align-items: stretch; }
.sw-n2, .sw-n3, .sw-n4 { padding-top: 2.2rem; }
.sw-frise::before { display: none; }
.sw-chiffres-liste { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
.sw-hero { padding: 3rem 0; }
.sw-carte svg { max-width: 260px; }
.sw-paliers, .sw-frise { grid-template-columns: 1fr; }
.sw-section { padding: 3rem 0; }
}
@media (prefers-reduced-motion: reduce) {
.sw-lien, .sw-dc .sw-halo { animation: none; }
.sw-offre, .sw-offre:hover { transition: none; transform: none; }
}