/* S33D HOSTING : feuille commune (vitrine, configurateur, commande).
   Style hébergeur : fond blanc, densité, tableaux, chiffres alignés.
   Aucune ressource externe ; Manrope auto-hébergée ; icônes SVG inline.
   Classes partagées avec l'espace client et l'administration (même sens) :
   .bandeau-test .entete .large .logo .marque .nav .compte .bouton(.petit .secondaire
   .danger .plein) .carte .champ .message(.erreur .info) .badge.<etat> .progression
   .mono .pied .section .cache */

@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --fond: #ffffff;
  --fond-doux: #f5f7fa;
  --fond-appui: #eaeff5;
  --trait: #e2e7ee;
  --trait-fort: #c8d2de;
  --encre: #0f1f33;
  --texte: #36475a;
  --texte-doux: #637386;
  --accent: #2563eb;
  --accent-fonce: #1d4ed8;
  --accent-doux: #eaf0fd;
  --degrade: #2563eb;
  --ok: #15803d;
  --ok-vif: #16a34a;
  --ok-doux: #e7f5ec;
  --alerte: #b45309;
  --alerte-vif: #f59e0b;
  --alerte-doux: #fdf3e2;
  --refus: #dc2626;
  --refus-doux: #fdecec;
  --prochain: #9aa7b6;
  --nvme: #7c3aed;
  --ssd: #2563eb;
  --sata: #0d9488;
  --rayon: 8px;
  --ombre: 0 1px 2px rgba(15, 31, 51, .06);
  --ombre-forte: 0 12px 32px rgba(15, 31, 51, .14);
  --large: 1200px;
  --haut-entete: 60px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--haut-entete) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.55 "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.large { width: min(100% - 2rem, var(--large)); margin-inline: auto; }
a { color: var(--accent-fonce); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4 { color: var(--encre); line-height: 1.25; }
h1 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin: 0 0 .5rem; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); margin: 0 0 .4rem; font-weight: 800; }
h3 { font-size: 1.02rem; margin: 0 0 .4rem; font-weight: 750; }
h4 { font-size: .88rem; margin: 0 0 .3rem; font-weight: 750; }
p { margin: 0 0 .8rem; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: var(--fond-appui); padding: .05em .35em; border-radius: 4px; }
.chapo { font-size: 1rem; color: var(--texte-doux); max-width: 70ch; }
.centre { text-align: center; }
.doux { color: var(--texte-doux); }
.petit { font-size: .82rem; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .88rem; }
.cache { display: none !important; }
.lecteur { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icone { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* --- bandeau mode test --- */
.bandeau-test { background: #fff7e6; color: #7a4a06; border-bottom: 1px solid #f3dfb5; font-size: .8rem; text-align: center; padding: .35rem .8rem; }
.bandeau-test strong { color: #5c3703; }

/* --- en-tête --- */
.entete { background: #fff; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--trait); }
.entete .large { display: flex; align-items: center; gap: 1.6rem; min-height: var(--haut-entete); }
.logo { display: flex; align-items: center; gap: .55rem; color: var(--encre); font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo .marque { width: 30px; height: 30px; border-radius: 7px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.logo .marque .icone, .logo .marque svg { width: 18px; height: 18px; }
.logo small { color: var(--accent-fonce); font-weight: 800; letter-spacing: .06em; font-size: .72em; }
.nav { display: flex; align-items: center; gap: .2rem; font-weight: 650; font-size: .9rem; }
.nav a { color: var(--texte); padding: .45rem .7rem; border-radius: 6px; }
.nav a:hover { color: var(--encre); background: var(--fond-doux); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--accent-fonce); }
.compte { margin-left: auto; display: flex; align-items: center; gap: .5rem; min-height: 34px; }
@media (max-width: 760px) {
  .entete .large { flex-wrap: wrap; gap: .3rem .8rem; padding: .45rem 0; }
  .nav { order: 3; width: 100%; overflow-x: auto; margin: 0 -.5rem; }
  .nav a { padding: .35rem .5rem; white-space: nowrap; }
}

/* menu du compte (vitrine) */
.menu-compte { position: relative; }
.menu-compte > summary { list-style: none; display: flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .3rem .55rem .3rem .3rem; border: 1px solid var(--trait); border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--encre); }
.menu-compte > summary::-webkit-details-marker { display: none; }
.menu-compte > summary:hover { border-color: var(--trait-fort); }
.menu-compte .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-doux); color: var(--accent-fonce);
  display: grid; place-items: center; font-size: .72rem; font-weight: 800; }
.menu-compte .nom { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-compte .fleche { width: 14px; height: 14px; }
.menu-compte[open] .fleche { transform: rotate(180deg); }
.menu-compte .menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: #fff; border: 1px solid var(--trait);
  border-radius: var(--rayon); box-shadow: var(--ombre-forte); padding: .35rem; z-index: 60; display: grid; }
.menu-compte .menu .qui { padding: .45rem .6rem .55rem; border-bottom: 1px solid var(--trait); margin-bottom: .3rem; font-size: .8rem; color: var(--texte-doux); overflow-wrap: anywhere; }
.menu-compte .menu a, .menu-compte .menu button { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border-radius: 6px;
  color: var(--encre); font: inherit; font-size: .88rem; font-weight: 650; background: none; border: 0; text-align: left; cursor: pointer; }
.menu-compte .menu a:hover, .menu-compte .menu button:hover { background: var(--fond-doux); text-decoration: none; }
.menu-compte .menu .icone { width: 16px; height: 16px; color: var(--texte-doux); }
@media (max-width: 480px) { .menu-compte .nom { display: none; } }

/* --- boutons --- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border: 1px solid var(--accent); border-radius: 6px; padding: .62rem 1.1rem; font: inherit; font-weight: 750; font-size: .92rem;
  cursor: pointer; background: var(--accent); color: #fff; transition: background .15s, border-color .15s; text-decoration: none; line-height: 1.2; }
.bouton:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); text-decoration: none; }
.bouton:disabled, .bouton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.bouton .icone { width: 17px; height: 17px; }
.bouton.secondaire { background: #fff; color: var(--accent-fonce); border-color: var(--trait-fort); }
.bouton.secondaire:hover { border-color: var(--accent); background: var(--accent-doux); }
.bouton.petit { padding: .4rem .75rem; font-size: .84rem; }
.bouton.danger { background: #fff; color: var(--refus); border-color: #f3c1c1; }
.bouton.danger:hover { background: var(--refus-doux); }
.bouton.plein { width: 100%; }

/* --- structure --- */
.section { padding: clamp(2rem, 4.5vw, 3rem) 0; }
.section.douce { background: var(--fond-doux); }
.section + .section:not(.douce) { border-top: 1px solid var(--trait); }
.entete-section { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.entete-section p { margin: 0; color: var(--texte-doux); }
.carte { background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.2rem; box-shadow: var(--ombre); }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 880px) { .grille-3 { grid-template-columns: 1fr; } }
.deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 640px) { .deux-col { grid-template-columns: 1fr; } }
.fil { font-size: .8rem; color: var(--texte-doux); margin-bottom: .6rem; }
.fil a { color: var(--texte-doux); }
.fil span[aria-hidden] { margin: 0 .35rem; }

/* --- formulaires --- */
.champ { display: grid; gap: .3rem; margin-bottom: 1rem; }
.champ label { font-weight: 700; color: var(--encre); font-size: .88rem; }
.champ .aide { font-size: .8rem; color: var(--texte-doux); }
.champ input, .champ select, .champ textarea { font: inherit; font-size: .92rem; border: 1px solid var(--trait-fort); border-radius: 6px;
  padding: .55rem .7rem; background: #fff; color: var(--encre); width: 100%; }
.champ textarea { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; min-height: 88px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: var(--refus); }
.champ .etat-champ { font-size: .8rem; min-height: 1.2em; display: flex; gap: .35rem; align-items: center; }
.champ .etat-champ.ok { color: var(--ok); }
.champ .etat-champ.ko { color: #991b1b; }
.champ .etat-champ .icone { width: 14px; height: 14px; }
.case { display: flex; gap: .6rem; align-items: flex-start; margin: .3rem 0 1rem; font-size: .88rem; cursor: pointer; }
.case input { width: 17px; height: 17px; margin-top: .15rem; flex: none; accent-color: var(--accent); }

.message { border-radius: 6px; padding: .65rem .85rem; font-size: .88rem; margin-bottom: 1rem; border: 1px solid transparent; }
.message.erreur { background: var(--refus-doux); color: #991b1b; border-color: #f6caca; }
.message.info { background: var(--accent-doux); color: var(--accent-fonce); border-color: #cddcfb; }
.message.avertissement { background: var(--alerte-doux); color: #7a4a06; border-color: #f3dfb5; }
.message.ligne { display: flex; gap: .6rem; align-items: flex-start; }
.message.ligne .icone { width: 18px; height: 18px; margin-top: .1rem; }

/* --- états --- */
.badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 750; padding: .15rem .55rem;
  border-radius: 999px; white-space: nowrap; background: var(--fond-appui); color: var(--texte); }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.active, .badge.actif, .badge.fait, .badge.ouvert { background: var(--ok-doux); color: var(--ok); }
.badge.provisionnement, .badge.en_cours, .badge.suppression { background: var(--accent-doux); color: var(--accent-fonce); }
.badge.annonce { background: var(--accent-doux); color: var(--accent-fonce); }
.badge.en_file, .badge.prochain { background: var(--fond-appui); color: var(--texte-doux); }
.badge.arretee, .badge.drain { background: var(--fond-appui); color: var(--texte); }
.badge.en_attente_capacite, .badge.maintenance { background: var(--alerte-doux); color: var(--alerte); }
.badge.erreur, .badge.echec { background: var(--refus-doux); color: var(--refus); }
.badge.en_cours::before, .badge.provisionnement::before { animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

.progression { height: 6px; background: var(--fond-appui); border-radius: 999px; overflow: hidden; }
.progression > i { display: block; height: 100%; background: var(--accent); transition: width .4s; }

.etiquette { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 750; padding: .12rem .45rem; border-radius: 4px;
  background: var(--ok-doux); color: var(--ok); white-space: nowrap; }
.etiquette .icone { width: 13px; height: 13px; }
.etiquette.bleue { background: var(--accent-doux); color: var(--accent-fonce); }

/* --- pied --- */
.pied { background: var(--fond-doux); border-top: 1px solid var(--trait); color: var(--texte-doux); padding: 1.6rem 0; font-size: .82rem; margin-top: 0; }
.pied .large { display: flex; justify-content: space-between; gap: .8rem 1.5rem; flex-wrap: wrap; align-items: center; }
.pied nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.pied a { color: var(--texte); }
.pied strong { color: var(--encre); }

/* ======================================================= accueil */
.produit { background: linear-gradient(180deg, var(--fond-doux), #fff); border-bottom: 1px solid var(--trait); padding: 1.6rem 0 1.4rem; }
.produit .grille { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem 2rem; align-items: center; }
.produit h1 { margin-bottom: .2rem; }
.produit .apartir { margin: 0 0 .9rem; color: var(--texte-doux); }
.produit .apartir strong { color: var(--encre); font-size: 1.35rem; font-weight: 800; }
.faits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .9rem; color: var(--encre); font-weight: 600; }
.faits li { display: flex; align-items: center; gap: .4rem; }
.faits .icone { width: 17px; height: 17px; color: var(--accent); }
.produit .actions { display: flex; flex-direction: column; gap: .4rem; align-items: stretch; min-width: 220px; }
.produit .actions .petit { text-align: center; margin: 0; }
@media (max-width: 760px) { .produit .grille { grid-template-columns: 1fr; } .produit .actions { min-width: 0; } }

.sous-nav { border-bottom: 1px solid var(--trait); background: #fff; position: sticky; top: var(--haut-entete); z-index: 40; }
.sous-nav .large { display: flex; gap: .2rem; overflow-x: auto; }
.sous-nav a { padding: .7rem .8rem; font-size: .86rem; font-weight: 700; color: var(--texte); border-bottom: 2px solid transparent; white-space: nowrap; }
.sous-nav a:hover { color: var(--accent-fonce); border-bottom-color: var(--accent); text-decoration: none; }
@media (max-width: 760px) { .sous-nav { position: static; } }

.alerte-connexion { margin: 1rem auto 0; }

/* tableau comparatif */
.comparatif-cadre { border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; background: #fff; }
table.comparatif { width: 100%; border-collapse: collapse; font-size: .9rem; table-layout: fixed; }
.comparatif th, .comparatif td { padding: .7rem 1rem; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: middle; }
.comparatif tbody tr:last-child th, .comparatif tbody tr:last-child td { border-bottom: 0; }
.comparatif thead th { background: var(--fond-doux); font-size: 1.05rem; color: var(--encre); font-weight: 800; }
.comparatif thead th:first-child { font-size: .78rem; font-weight: 700; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .05em; }
.comparatif tbody th { font-weight: 650; color: var(--texte-doux); font-size: .84rem; width: 24%; }
.comparatif td { color: var(--encre); font-weight: 600; }
.comparatif td + td, .comparatif th + th { border-left: 1px solid var(--trait); }
.comparatif .chiffre { font-variant-numeric: tabular-nums; }
.comparatif .fort, .offre-carte .fort { font-size: 1.05rem; font-weight: 800; }
.comparatif tr.prix td { background: #fbfcfe; }
.comparatif .prix-principal, .offre-carte .prix-principal { font-size: 1.35rem; font-weight: 800; color: var(--encre); font-variant-numeric: tabular-nums; }
.comparatif .unite, .offre-carte .unite { font-size: .78rem; font-weight: 650; color: var(--texte-doux); }
.comparatif .ttc, .offre-carte .ttc { display: block; font-size: .76rem; color: var(--texte-doux); font-weight: 600; }
.comparatif .remise, .offre-carte .remise { color: var(--ok); font-weight: 750; font-size: .76rem; }
.comparatif tfoot td { padding: .8rem 1rem; border-top: 1px solid var(--trait); background: #fff; }
.comparatif tfoot td:first-child { border-left: 0; }
.cartes-offres { display: none; }
@media (max-width: 760px) {
  .comparatif-cadre { display: none; }
  .cartes-offres { display: grid; gap: .8rem; }
}
.offre-carte { border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff; }
.offre-carte h3 { margin: 0; padding: .7rem 1rem; background: var(--fond-doux); border-bottom: 1px solid var(--trait); display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.offre-carte h3 .prix-principal { font-size: 1.1rem; }
.offre-carte h3 .unite { font-size: .72rem; color: var(--texte-doux); font-weight: 650; }
.offre-carte dl { margin: 0; padding: .3rem 1rem; }
.offre-carte dl div { display: grid; grid-template-columns: 40% 1fr; gap: .6rem; padding: .42rem 0; border-bottom: 1px solid var(--trait); font-size: .86rem; }
.offre-carte dl div:last-child { border-bottom: 0; }
.offre-carte dt { color: var(--texte-doux); font-weight: 650; }
.offre-carte dd { margin: 0; color: var(--encre); font-weight: 650; }
.offre-carte .pied-carte { padding: .8rem 1rem 1rem; }
.note-tableau { font-size: .8rem; color: var(--texte-doux); margin: .7rem 0 0; }

/* disponibilité */
.compteurs { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .86rem; color: var(--texte); }
.compteurs strong { color: var(--encre); font-variant-numeric: tabular-nums; }
.legende { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .82rem; color: var(--texte); margin: .8rem 0 0; padding: 0; list-style: none; }
.legende li { display: flex; align-items: center; gap: .4rem; }
.point-etat { width: 10px; height: 10px; border-radius: 50%; background: var(--prochain); flex: none; display: inline-block; }
.point-etat.ouvert { background: var(--ok-vif); }
.point-etat.maintenance { background: var(--alerte-vif); }
.point-etat.annonce { background: var(--accent); }
.carte-monde { background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); overflow: auto hidden; }
.carte-cadre { position: relative; aspect-ratio: 1000 / 361; min-width: 680px; }
.carte-cadre > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
/* épingles-drapeaux : taille liée à la carte (2,2 %, bornée 16-26 px) pour que DECALAGES_CARTE reste valable à toute largeur */
.carte-monde .pin { position: absolute; width: 2.2%; min-width: 16px; max-width: 26px; z-index: 2; cursor: default;
  transform: translate(calc((var(--dx, 0) - .5) * 100%), calc((var(--dy, 0) - .5) * 100%)); }
.carte-monde .pin .drapeau { display: block; aspect-ratio: 3 / 2; border-radius: 3px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1.5px #fff, 0 2px 7px rgba(15, 31, 51, .28); transition: transform .15s; }
.carte-monde .pin .drapeau img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carte-monde .pin::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--prochain); box-shadow: 0 0 0 1.5px #fff; }
.carte-monde .pin.ouvert::after { background: var(--ok-vif); }
.carte-monde .pin.maintenance::after { background: var(--alerte-vif); }
.carte-monde .pin.annonce::after { background: var(--accent); }
.carte-monde .pin.prochain { z-index: 1; }
.carte-monde .pin.prochain .drapeau img { opacity: .5; filter: grayscale(.6); }
.carte-monde .pin:hover, .carte-monde .pin.actif { z-index: 4; }
.carte-monde .pin:hover .drapeau, .carte-monde .pin.actif .drapeau { transform: scale(1.18); }
.carte-monde .pin:hover .drapeau img, .carte-monde .pin.actif .drapeau img { opacity: 1; filter: none; }
.bulle { position: absolute; z-index: 5; background: var(--encre); color: #fff; font-size: .8rem; padding: .45rem .65rem; border-radius: 6px;
  pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); white-space: nowrap; box-shadow: var(--ombre-forte); }
.bulle strong { display: block; font-size: .86rem; }
.bulle span { color: #c7d3e0; }
@media (max-width: 560px) { .carte-monde .pin::after { width: 7px; height: 7px; } }

.continents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; }
@media (max-width: 980px) { .continents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .continents { grid-template-columns: 1fr; } }
.continent { background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); padding: .9rem 1rem; }
.continent > header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; border-bottom: 1px solid var(--trait); padding-bottom: .55rem; margin-bottom: .5rem; }
.continent h3 { margin: 0; font-size: .98rem; }
.continent h4 { margin: .7rem 0 .2rem; color: var(--texte-doux); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.liste-pays { list-style: none; margin: 0; padding: 0; }
.liste-pays li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: .1rem .55rem; align-items: baseline; padding: .32rem 0; font-size: .86rem; }
.liste-pays li .point-etat { align-self: center; }
.liste-pays .nom-pays { color: var(--encre); font-weight: 700; display: flex; justify-content: space-between; gap: .5rem; }
.liste-pays .nom-pays small { font-weight: 650; color: var(--texte-doux); font-size: .74rem; white-space: nowrap; }
.liste-pays .villes { grid-column: 2; font-size: .8rem; color: var(--texte-doux); }
.liste-pays li.maintenance .nom-pays small { color: var(--alerte); }
.liste-pays li.ouvert .nom-pays small { color: var(--ok); }
.liste-pays li.annonce .nom-pays small { color: var(--accent-fonce); }
.annonce-pays { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: 1rem 0 0; padding: .7rem .9rem;
  background: var(--accent-doux); border-radius: var(--rayon); font-size: .9rem; color: var(--encre); }
.annonce-pays a { font-weight: 700; }
.liste-pays li.survol { background: var(--fond-doux); border-radius: 4px; }

/* images */
.images { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 980px) { .images { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .images { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.image-os { border: 1px solid var(--trait); border-radius: var(--rayon); padding: .9rem; background: #fff; }
.image-os .tete { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; }
.image-os h3 { margin: 0; font-size: .95rem; }
.pastille-os { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .8rem; flex: none; }
.pastille-os.petite { width: 22px; height: 22px; font-size: .7rem; border-radius: 5px; }
.versions-os { display: flex; flex-wrap: wrap; gap: .3rem; }
.versions-os span { font-size: .76rem; font-weight: 700; padding: .12rem .45rem; border-radius: 4px; background: var(--fond-appui); color: var(--encre); }

/* inclus */
.inclus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem 1.4rem; }
.inclus li { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; color: var(--encre); font-weight: 600; padding: .5rem 0; border-bottom: 1px solid var(--trait); }
.inclus .icone { width: 18px; height: 18px; color: var(--ok); margin-top: .1rem; }
.option-ligne { margin: 1rem 0 0; font-size: .88rem; }
.option-ligne .etiquette { margin-right: .4rem; }

/* ======================================================= tunnel de commande */
.tunnel { padding: 1.4rem 0 2.5rem; background: var(--fond-doux); min-height: 70vh; }
.tunnel-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.4rem; align-items: start; }
.tunnel-grille > * { min-width: 0; }
@media (max-width: 980px) { .tunnel-grille { grid-template-columns: 1fr; } }

.etapes-fil { display: flex; gap: 0; margin: 0 0 1.2rem; padding: 0; list-style: none; font-size: .82rem; font-weight: 700; color: var(--texte-doux); flex-wrap: wrap; }
.etapes-fil li { display: flex; align-items: center; gap: .45rem; padding-right: 1rem; }
.etapes-fil li + li::before { content: ""; width: 24px; height: 1px; background: var(--trait-fort); margin-right: .6rem; }
.etapes-fil .rond { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--trait-fort); display: grid; place-items: center; font-size: .72rem; background: #fff; }
.etapes-fil .en-cours { color: var(--encre); }
.etapes-fil .en-cours .rond { border-color: var(--accent); background: var(--accent); color: #fff; }
.etapes-fil .fait .rond { border-color: var(--ok-vif); background: var(--ok-vif); color: #fff; }
.etapes-fil .fait .rond .icone { width: 12px; height: 12px; stroke-width: 3; }

.etape { background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); margin-bottom: .9rem; }
.etape > header { display: flex; align-items: center; gap: .7rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--trait); flex-wrap: wrap; }
.etape > header h2 { font-size: 1.02rem; margin: 0; }
.etape > header .aide { font-size: .8rem; color: var(--texte-doux); margin-left: auto; }
.etape .num { width: 26px; height: 26px; border-radius: 50%; background: var(--encre); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 800; flex: none; }
.etape .corps { padding: 1rem 1.1rem 1.1rem; }

.tuiles { display: grid; gap: .6rem; }
.tuiles.col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tuiles.col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .tuiles.col-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tuiles.col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tuiles.pays { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.tuiles.os { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
@media (max-width: 640px) { .tuiles.col-4, .tuiles.col-3, .tuiles.col-2 { grid-template-columns: 1fr; } }
.tuile { position: relative; display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  padding: .75rem .85rem; cursor: pointer; background: #fff; transition: border-color .12s, box-shadow .12s; min-width: 0; }
.tuile:hover { border-color: var(--accent); }
.tuile input { position: absolute; opacity: 0; pointer-events: none; }
.tuile .radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--trait-fort); flex: none; margin-top: .18rem; background: #fff; }
.tuile:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #f8faff; }
.tuile:has(input:checked) .radio { border: 5px solid var(--accent); }
.tuile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tuile:has(input:disabled) { cursor: not-allowed; background: var(--fond-doux); border-color: var(--trait); }
.tuile:has(input:disabled) .titre { color: var(--texte-doux); }
.tuile .pile { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.tuile .titre { font-weight: 800; color: var(--encre); font-size: .95rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.tuile .sous { font-size: .8rem; color: var(--texte-doux); overflow-wrap: anywhere; }
.tuile .prix-tuile { font-weight: 800; color: var(--encre); font-size: .95rem; font-variant-numeric: tabular-nums; margin-top: .25rem; }
.tuile .prix-tuile small { font-weight: 650; color: var(--texte-doux); font-size: .74rem; }
.tuile .droite { margin-left: auto; text-align: right; font-weight: 800; color: var(--encre); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tuile .droite small { display: block; font-weight: 650; color: var(--texte-doux); font-size: .74rem; }
.tuile .iso { font-family: ui-monospace, Consolas, monospace; font-size: .7rem; color: var(--texte-doux); font-weight: 600; }
.specs { list-style: none; padding: 0; margin: .3rem 0 0; font-size: .82rem; color: var(--texte); display: grid; gap: .05rem; }
.specs strong { color: var(--encre); }

.onglets { display: flex; flex-wrap: wrap; gap: .2rem; border-bottom: 1px solid var(--trait); margin-bottom: .9rem; }
.onglets button { font: inherit; font-size: .86rem; font-weight: 700; background: none; border: 0; border-bottom: 2px solid transparent; padding: .55rem .8rem;
  color: var(--texte); cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.onglets button:hover { color: var(--accent-fonce); }
.onglets button[aria-selected="true"] { color: var(--accent-fonce); border-bottom-color: var(--accent); }
.onglets button .compte-onglet { font-size: .72rem; color: var(--texte-doux); font-weight: 650; margin-left: .25rem; }
.panneau-note { font-size: .82rem; margin: 0 0 .7rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; color: var(--texte-doux); }
.sous-region { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-doux); margin: .9rem 0 .45rem; font-weight: 750; }
.sous-region:first-of-type { margin-top: 0; }

.segments { display: flex; flex-wrap: wrap; gap: .5rem; }
.segment { position: relative; display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--trait-fort); border-radius: 6px; padding: .45rem .75rem;
  cursor: pointer; font-size: .86rem; font-weight: 700; color: var(--encre); background: #fff; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); color: var(--accent-fonce); }
.segment:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.segment small { color: var(--texte-doux); font-weight: 650; }
.segment .teinte { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.bloc-versions { margin-top: .9rem; }
.bloc-versions .libelle { font-size: .82rem; font-weight: 700; color: var(--encre); margin: 0 0 .4rem; }

.stockage-reglage { margin-top: 1rem; border: 1px solid var(--trait); border-radius: var(--rayon); padding: .9rem 1rem; background: var(--fond-doux); }
.stockage-reglage .ligne { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: space-between; }
.stockage-reglage .valeur { display: flex; align-items: center; gap: .4rem; }
.stockage-reglage .valeur input { width: 6.5rem; font: inherit; font-size: 1.1rem; font-weight: 800; text-align: right; border: 1px solid var(--trait-fort); border-radius: 6px; padding: .35rem .5rem; color: var(--encre); font-variant-numeric: tabular-nums; }
.stockage-reglage .valeur input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.stockage-reglage .cout { font-weight: 800; color: var(--encre); font-variant-numeric: tabular-nums; }
.curseur { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; margin: 1rem 0 .3rem;
  background: linear-gradient(90deg, var(--teinte, var(--accent)) 0 var(--rempli, 0%), var(--trait-fort) var(--rempli, 0%) 100%); cursor: pointer; }
.curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--teinte, var(--accent)); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.curseur::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--teinte, var(--accent)); }
.curseur:disabled { opacity: .5; cursor: not-allowed; }
.graduations { display: flex; justify-content: space-between; font-size: .72rem; color: var(--texte-doux); font-variant-numeric: tabular-nums; }

.interrupteur { display: flex; align-items: center; gap: .8rem; cursor: pointer; }
.interrupteur input { position: absolute; opacity: 0; pointer-events: none; }
.interrupteur .piste { width: 40px; height: 22px; border-radius: 999px; background: var(--trait-fort); position: relative; flex: none; transition: background .15s; }
.interrupteur .piste::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.interrupteur input:checked + .piste { background: var(--accent); }
.interrupteur input:checked + .piste::after { transform: translateX(18px); }
.interrupteur input:focus-visible + .piste { outline: 2px solid var(--accent); outline-offset: 2px; }
.interrupteur .texte { font-weight: 700; color: var(--encre); font-size: .92rem; }
.interrupteur .droite { margin-left: auto; font-weight: 800; color: var(--encre); white-space: nowrap; }
@media (max-width: 480px) { .interrupteur { flex-wrap: wrap; } .interrupteur .droite { margin-left: 52px; } }

/* récapitulatif */
.recap { position: sticky; top: calc(var(--haut-entete) + 14px); padding: 0; overflow: hidden; }
.recap > h2 { font-size: 1rem; margin: 0; padding: .85rem 1.1rem; border-bottom: 1px solid var(--trait); background: var(--fond-doux); }
.recap .contenu { padding: .8rem 1.1rem 1.1rem; }
.recap dl { margin: 0 0 .6rem; }
.recap dl div { display: flex; justify-content: space-between; gap: .8rem; padding: .42rem 0; border-bottom: 1px dashed var(--trait); font-size: .84rem; }
.recap dt { color: var(--texte); min-width: 0; }
.recap dt small { display: block; color: var(--texte-doux); font-size: .76rem; }
.recap dd { margin: 0; font-weight: 750; color: var(--encre); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.recap dd.remise-ligne { color: var(--ok); }
.recap .total { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .6rem 0 .1rem; }
.recap .total span { font-weight: 750; color: var(--encre); }
.recap .total strong { font-size: 1.5rem; font-weight: 800; color: var(--encre); font-variant-numeric: tabular-nums; }
.recap .ttc { text-align: right; font-size: .8rem; color: var(--texte-doux); margin: 0 0 .6rem; font-variant-numeric: tabular-nums; }
.recap .facturation { font-size: .8rem; background: var(--fond-doux); border-radius: 6px; padding: .5rem .65rem; margin: 0 0 .9rem; color: var(--texte); }
.recap .modifier { display: inline-block; margin-top: .7rem; font-size: .84rem; font-weight: 700; }
@media (max-width: 980px) { .recap { position: static; } }

.barre-mobile { display: none; }
@media (max-width: 980px) {
  .barre-mobile { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: #fff; border-top: 1px solid var(--trait);
    box-shadow: 0 -6px 20px rgba(15,31,51,.08); padding: .6rem 1rem; align-items: center; gap: .8rem; justify-content: space-between; }
  .barre-mobile strong { font-size: 1.1rem; color: var(--encre); font-variant-numeric: tabular-nums; }
  .barre-mobile small { display: block; color: var(--texte-doux); font-size: .74rem; }
  body.avec-barre { padding-bottom: 68px; }
}

/* page commande */
.formulaire h2 { font-size: 1.05rem; margin-bottom: .8rem; }
.titulaire { display: flex; gap: .7rem; align-items: center; padding: .7rem .85rem; background: var(--fond-doux); border-radius: 6px; margin-bottom: 1rem; font-size: .9rem; }
.titulaire .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-doux); color: var(--accent-fonce); display: grid; place-items: center; font-weight: 800; font-size: .8rem; flex: none; }
.titulaire strong { color: var(--encre); }
.connexion-requise { text-align: center; padding: 2rem 1.2rem; }
.connexion-requise .icone { width: 36px; height: 36px; color: var(--accent); margin-bottom: .5rem; }
.connexion-requise p { max-width: 44ch; margin: 0 auto 1rem; }

/* ======================================================= porte d'accès */
.porte { min-height: 100vh; display: grid; place-items: center; background: var(--fond-doux); padding: 1rem; }
.porte .carte { width: min(100%, 380px); padding: 1.8rem 1.6rem; text-align: center; box-shadow: var(--ombre-forte); }
.porte .cadenas { width: 52px; height: 52px; border-radius: 12px; background: var(--accent-doux); color: var(--accent-fonce); display: grid; place-items: center; margin: 0 auto 1rem; }
.porte .cadenas .icone { width: 26px; height: 26px; }
.porte h1 { font-size: 1.25rem; }
.porte .champ { text-align: left; margin-top: 1.2rem; }
.porte .champ input { font-size: 1.2rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.porte .message { text-align: left; }
.porte .logo { justify-content: center; margin-bottom: 1.2rem; }
.connexion-requise h2 { font-size: 1.15rem; }

/* ================================================================== offres en cartes
   Présentation reprise de S33D VPN (retour de Sam, 26/09) : trois cartes, un gros prix,
   la variante annuelle avec son économie, seulement ce qui distingue chaque gabarit.
   Le commun est dit une fois (.communs), les options dans leur encart. */
.titre-centre { text-align: center; max-width: 680px; margin: 0 auto 2.2rem; }
.titre-centre h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: .5rem; }
.titre-centre p { color: var(--texte-doux); margin: 0; }

.formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; align-items: stretch; }
@media (max-width: 860px) { .formules { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; gap: 1.6rem; } }
.formule { position: relative; display: flex; flex-direction: column; background: var(--fond);
  border: 1px solid var(--trait); border-radius: 16px; padding: 1.75rem 1.6rem 1.6rem; box-shadow: var(--ombre); }
.formule.vedette { border: 2px solid var(--accent); box-shadow: 0 14px 36px rgba(37, 99, 235, .14); }
.formule-etiquette { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: .3rem .8rem; border-radius: 999px; }
.formule-nom { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte-doux); margin: 0 0 .6rem; }
.formule-prix { margin: 0; color: var(--encre); line-height: 1; }
.formule-prix .montant { font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; }
.formule-prix .unite { font-size: .95rem; color: var(--texte-doux); font-weight: 600; }
.formule-sous { margin: .45rem 0 0; font-size: .88rem; color: var(--texte-doux); }
.formule-an { margin: 1rem 0 0; padding: .7rem .85rem; border-radius: 10px; background: var(--fond-doux);
  font-size: .95rem; color: var(--texte); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.formule-an strong { color: var(--encre); }
.pastille-eco { background: var(--ok-doux); color: var(--ok); font-weight: 800; font-size: .8rem;
  padding: .15rem .55rem; border-radius: 999px; }
.formule-specs { list-style: none; margin: 1.3rem 0 1.5rem; padding: 0; display: grid; gap: 0; }
.formule-specs li { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; border-top: 1px solid var(--trait); }
.formule-specs li:first-child { border-top: 0; }
.formule-specs .icone { color: var(--ok-vif); width: 18px; height: 18px; flex: none; }
.formule-specs strong { color: var(--encre); }
.formule .bouton { margin-top: auto; }

.communs { margin-top: 1.5rem; padding: 1.2rem 1.4rem; border: 1px solid var(--trait); border-radius: 16px; background: var(--fond-doux); }
.communs h3 { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); margin: 0 0 .8rem; }
.communs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem 1.2rem; }
.communs li { display: flex; align-items: flex-start; gap: .5rem; color: var(--texte); font-size: .95rem; }
.communs .icone { color: var(--ok-vif); width: 18px; height: 18px; flex: none; margin-top: .15rem; }

.germaine-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 1100px) { .germaine-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .germaine-cartes { grid-template-columns: 1fr; } }
.germaine-carte { display: flex; flex-direction: column; gap: .5rem; border: 1px solid var(--trait); border-radius: 16px; padding: 1.3rem 1.4rem; background: var(--fond); }
.germaine-carte h3 { margin: 0; font-size: 1.05rem; color: var(--encre); }
.germaine-carte p { margin: 0; color: var(--texte); font-size: .92rem; }
.germaine-carte .germaine-exemple { margin-top: auto; padding-top: .6rem; color: var(--accent-fonce); font-weight: 600; }

.options-offre { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.option-carte { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.2rem;
  border: 1px solid var(--trait); border-radius: 16px; padding: 1.3rem 1.4rem; background: var(--fond); }
.option-carte h3 { margin: 0 0 .35rem; font-size: 1.1rem; color: var(--encre); }
.option-carte p { margin: 0; color: var(--texte); font-size: .92rem; }
.option-type { font-size: .75rem !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux) !important; margin-bottom: .3rem !important; }
.option-prix { text-align: right; flex: none; display: flex; flex-direction: column; }
.option-prix .montant { font-size: 1.6rem; font-weight: 800; color: var(--accent-fonce); white-space: nowrap; }
.option-prix span:last-child { font-size: .82rem; color: var(--texte-doux); }

@media (max-width: 900px) {
  .communs ul { grid-template-columns: 1fr; }
  .options-offre { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .formules { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .option-carte { flex-direction: column; align-items: flex-start; }
  .option-prix { text-align: left; }
}

/* ======================================================= accueil : délai et disponibilité */
.produit .faits { margin: 0 0 .35rem; }
.produit .faits a { color: var(--encre); }
.note-faits { margin: 0; }

/* ======================================================= pied : liens légaux */
.pied .pied-legal { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--trait); justify-content: flex-start; }
.pied .pied-legal nav { gap: .4rem 1.2rem; }
.pied .lien-abus { color: var(--refus); font-weight: 700; }

/* ======================================================= pages légales */
.page-legale { padding: clamp(1.6rem, 4vw, 2.6rem) 0 3rem; }
.page-legale .large { max-width: 780px; }
.page-legale h1 { margin-bottom: .3rem; }
.page-legale .maj { color: var(--texte-doux); font-size: .85rem; margin-bottom: 1.6rem; }
.page-legale h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; scroll-margin-top: calc(var(--haut-entete) + 12px); }
.page-legale h3 { margin-top: 1.2rem; }
.page-legale ul, .page-legale ol { padding-left: 1.3rem; margin: 0 0 .9rem; }
.page-legale li { margin-bottom: .3rem; }
.page-legale .sommaire { background: var(--fond-doux); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .9rem 1.1rem; font-size: .9rem; }
.page-legale .sommaire ol { margin: 0; columns: 2; column-gap: 2rem; }
.page-legale .a-completer { background: #fff3cd; color: #7a4a06; padding: 0 .25em; border-radius: 3px; font-weight: 700; }
.page-legale .encadre { border-left: 3px solid var(--accent); background: var(--accent-doux); padding: .8rem 1rem; border-radius: 0 var(--rayon) var(--rayon) 0; margin: 1rem 0; }
.page-legale .encadre.alerte { border-left-color: var(--refus); background: var(--refus-doux); }
.page-legale .adresse-abus { font-size: 1.3rem; font-weight: 800; }
.page-legale table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 0 0 1rem; }
.page-legale th, .page-legale td { text-align: left; border-bottom: 1px solid var(--trait); padding: .45rem .5rem; vertical-align: top; }
.page-legale th { color: var(--encre); background: var(--fond-doux); }
@media (max-width: 640px) {
  .page-legale .sommaire ol { columns: 1; }
  .page-legale table { display: block; overflow-x: auto; }
}