/* Pages de contenu d'oparia.eu (tools/seo/build_pages.py) — charte du site. */
@font-face{font-family:Lexend;font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/lexend-latin.woff2) format('woff2-variations')}
:root{color-scheme:light;--paper:#EDF0F6;--ink:#0E1628;--ink2:#343B4B;--ink3:#676E80;--line:#E3E9F2;--brand:#1873BF;--deep:#0B4F82;--sky:#3AAEEF;--soft:#E1F0FD}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--paper);color:var(--ink2);font:17px/1.75 Lexend,system-ui,sans-serif}
a{color:var(--brand);text-decoration:underline;text-decoration-color:rgba(24,115,191,.3);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:8px}
.wrap{max-width:52rem;margin:0 auto;padding:0 16px}
@media (min-width:640px){.wrap{padding:0 28px}}

.bar{position:sticky;top:0;z-index:10;display:flex;justify-content:center;padding:12px 12px 0}
.capsule{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;max-width:52rem;padding:6px 8px 6px 14px;border-radius:999px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 6px 20px -10px rgba(14,22,40,.18)}
.logo{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);font-weight:700;font-size:1.25rem;line-height:1;flex:none}
.logo svg{width:30px;height:30px}
.eu{font-weight:500;background:linear-gradient(90deg,#3AAEEF,#0B6EC0);-webkit-background-clip:text;background-clip:text;color:transparent}
.capsule nav{display:flex;min-width:0;overflow-x:auto;scrollbar-width:none}
.capsule nav a{padding:7px 11px;border-radius:999px;color:var(--ink2);text-decoration:none;font-size:.88rem;white-space:nowrap}
.capsule nav a:hover{background:rgba(14,22,40,.05)}
.capsule nav a[aria-current=page]{background:var(--soft);color:var(--deep)}
@media (max-width:560px){.logo span{display:none}}

.crumb{margin:28px 0 0;font-size:.85rem;color:var(--ink3)}
.crumb a{color:var(--ink3)}
.hero{padding:18px 0 28px}
.tag{display:inline-flex;border-radius:999px;background:var(--soft);padding:6px 12px;font-size:.85rem}
h1{margin:16px 0 0;font-weight:700;font-size:clamp(2rem,5.6vw,3rem);line-height:1.15;padding-bottom:4px;background:linear-gradient(180deg,#0E2A5A,#0B4F82 55%,#1A8FC0);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin:16px 0 0;font-size:clamp(1.05rem,2.3vw,1.2rem);font-weight:500;line-height:1.65}
.lead b{color:var(--brand)}
.btns{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:999px;padding:14px 26px;font:500 1rem/1 Lexend,system-ui,sans-serif;text-decoration:none;border:1px solid transparent;transition:transform .3s,background-color .3s,border-color .3s,color .3s,filter .3s}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:linear-gradient(90deg,#3AAEEF 0%,#0B6EC0 100%);background-origin:border-box;color:#fff}
.btn-primary:hover{filter:brightness(1.1)}
.btn-line{border-color:#C0C6D5;color:var(--ink2)}
.btn-line:hover{border-color:var(--deep);background:var(--deep);color:#fff}
@media (max-width:440px){.btns .btn{flex:1 1 100%}}

.card{background:#fff;border-radius:1.25rem;padding:24px;margin-top:18px;box-shadow:0 1px 2px rgba(14,22,40,.04),0 8px 24px -14px rgba(14,22,40,.14)}
@media (min-width:640px){.card{padding:30px 36px}}
h2{margin:0 0 10px;color:var(--ink);font-weight:500;font-size:1.45rem;line-height:1.3}
.card p{margin:0 0 12px}
.card p:last-child{margin-bottom:0}
.card b{color:var(--ink);font-weight:600}
.note{font-size:.9rem;color:var(--ink3)}
table{width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:.95rem}
th,td{text-align:left;vertical-align:top;padding:11px 10px;border-bottom:1px solid var(--line)}
thead th{color:var(--ink3);font-weight:500;font-size:.85rem}
tbody th{color:var(--ink);font-weight:500}
@media (max-width:560px){table,thead,tbody,tr,th,td{display:block}thead{display:none}tr{padding:10px 0;border-bottom:1px solid var(--line)}th,td{border:0;padding:2px 0}}
.checks,.crosses,.steps{margin:0;padding-left:0;list-style:none;display:grid;gap:10px}
.checks li,.crosses li{position:relative;padding-left:30px}
.checks li::before,.crosses li::before{content:'';position:absolute;left:0;top:.42em;width:18px;height:18px;border-radius:6px;background:var(--soft)}
.checks li::after{content:'';position:absolute;left:6px;top:.62em;width:6px;height:9px;border:solid var(--deep);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.crosses li::before{background:#FCEBEA}
.crosses li::after{content:'×';position:absolute;left:5px;top:.05em;color:#B3402F;font-weight:700}
.steps{counter-reset:s}
.steps li{position:relative;padding-left:44px;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:.05em;width:30px;height:30px;border-radius:10px;background:linear-gradient(90deg,#3AAEEF,#0B6EC0);color:#fff;font-weight:600;display:grid;place-items:center;font-size:.9rem}
.servers{display:grid;gap:12px;margin-top:16px}
@media (min-width:640px){.servers{grid-template-columns:1fr 1fr}}
.server{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;background:var(--paper);border-radius:1rem;padding:12px 14px;transition:transform .3s}
.server:hover{transform:translateY(-3px)}
.server.solo{max-width:26rem}
.server img{width:48px;height:48px;border-radius:28%;flex:none}
.server b{display:block;line-height:1.3}
.server span span{display:block;font-size:.85rem;color:var(--ink3);line-height:1.4}
.server .go{margin-left:auto;color:var(--brand)}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:10px 0;color:var(--ink);font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:12px;
  -webkit-user-select:none;user-select:none} /* plier/déplier vite ne surligne pas la question (double-clic) */
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--brand);font-size:1.3rem;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 12px;color:var(--ink2)}
.more ul{margin:0;padding-left:20px}
.more li{margin:6px 0}
.foot{margin-top:48px;padding:24px 0 36px;border-top:1px solid #D5DFF0;font-size:.9rem;color:var(--ink3)}
.foot a{color:var(--ink3)}
.foot p{margin:0 0 4px}
.foot .small{font-size:.8rem}

/* Thème sombre : classe `dark` posée sur <html> par le petit script de chaque page (choix fait
   avec le bouton soleil/lune du site, sinon réglage de l'appareil). Mêmes teintes que le site. */
html.dark{color-scheme:dark;--paper:#0B0F18;--ink:#EEF2F9;--ink2:#BEC7D6;--ink3:#8B94A6;--line:#283246;--brand:#5EB2F0;--deep:#78BEF5;--soft:#192D48}
html.dark a{text-decoration-color:rgba(94,178,240,.35)}
html.dark .capsule{background:rgba(35,47,70,.78);box-shadow:0 10px 30px -12px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06)}
html.dark .capsule nav a:hover{background:rgba(255,255,255,.06)}
html.dark .logo svg rect:first-child{stroke:#2F72CF}
html.dark h1{background-image:linear-gradient(180deg,#FFFFFF,#D6ECFC 50%,#5EB8F2)}
html.dark .btn-line{border-color:#404D66}
html.dark .btn-line:hover{border-color:#fff;background:#fff;color:#0E1628}
html.dark .card{background:#151B28;box-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -16px rgba(0,0,0,.6)}
html.dark .crosses li::before{background:#3A1F24}
html.dark .crosses li::after{color:#F2907F}
html.dark .foot{border-top-color:#283246}
/* sel-fix */ /* Sélection de texte (Cmd/Ctrl + A) propre : Safari colorait aussi les espaces autour du texte jusqu'aux bords des blocs. Même correctif que src/index.css et akona.oparia.eu (utils/selectionFix.js du bot). */
::selection{background:rgb(58 174 239 / .3)!important}
:root.dark ::selection,:root[data-theme="dark"] ::selection{background:rgb(94 178 240 / .35)!important}
:root:root:root::selection,:root:root:root :is(body,div,section,main,header,footer,nav,ul,ol,article,aside,form,figure,table,thead,tbody,tr,label,details)::selection{background:transparent!important}
:is(h1,h2,h3,h4,h5,p,li,dt,dd,blockquote,figcaption){position:relative;width:fit-content;max-width:100%}