/* OutilsIT — thème clair moderne. Police Inter (OFL 1.1, servie en local : /inter-var-latin.woff2, licence /inter-OFL.txt). Aucun CDN. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/inter-var-latin.woff2) format("woff2-variations"),url(/inter-var-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}
:root{color-scheme:light;
--bg:#f7f8fc;--bg2:#ffffff;--card:#ffffff;--soft:#f1f3f9;--ink:#0f172a;--ink2:#334155;--muted:#5b6476;
--brand:#4f46e5;--brand-d:#4338ca;--brand2:#2563eb;--brand-soft:#eef2ff;--brand-line:#c7d2fe;
--line:#e5e8f0;--line2:#d5dae5;--ok:#047857;--warn-bg:#fffbeb;--warn-line:#fcd34d;--warn-ink:#78350f;
--r:16px;--r-sm:10px;
--sh1:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06);
--sh2:0 2px 4px rgba(15,23,42,.04),0 12px 28px -8px rgba(15,23,42,.12);
--sh-brand:0 8px 22px -8px rgba(79,70,229,.55);
--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;font:16px/1.65 var(--sans);font-feature-settings:"cv11","ss01";color:var(--ink2);background:var(--bg);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--brand);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{color:var(--brand-d)}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--sans);color:var(--ink);letter-spacing:-.025em;line-height:1.2;font-weight:750}
h2{font-size:clamp(1.35rem,2.4vw,1.7rem);margin:40px 0 14px}h3{font-weight:650}
code{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.88em;color:var(--ink)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.sr{position:absolute;left:-9999px}
.skip{position:absolute;left:-9999px;top:10px;background:var(--brand);color:#fff;padding:10px 14px;border-radius:10px;z-index:10;font-weight:600}.skip:focus{left:10px;color:#fff}
/* En-tête */
.site-header{background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:68px;flex-wrap:wrap}
.logo{font-weight:800;font-size:1.2rem;letter-spacing:-.03em;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:10px}
.logo:hover{color:var(--ink)}
.logo .mark{width:32px;height:32px;flex:none;display:block;filter:drop-shadow(0 4px 10px rgba(79,70,229,.35))}
.logo .it{background:linear-gradient(135deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nav nav a{text-decoration:none;color:var(--ink2);font-weight:550;font-size:.95rem;padding:8px 12px;border-radius:10px}
.nav nav a:hover{color:var(--ink);background:var(--soft)}
/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,var(--brand) 0%,var(--brand2) 100%);color:#fff!important;padding:13px 22px;border-radius:12px;text-decoration:none;font-weight:650;border:0;cursor:pointer;font-size:1rem;font-family:inherit;line-height:1.2;box-shadow:var(--sh-brand);transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 12px 26px -8px rgba(79,70,229,.6)}
.btn:active{transform:none}
.btn-small{padding:9px 16px;font-size:.9rem;border-radius:10px}
.nav nav a.btn{color:#fff;margin-left:6px}.nav nav a.btn:hover{background:linear-gradient(135deg,var(--brand),var(--brand2))}
.btn[aria-disabled=true]{background:var(--soft);color:var(--muted)!important;box-shadow:inset 0 0 0 1px var(--line2);cursor:default;transform:none;filter:none}
/* Hero */
.hero{position:relative;padding:76px 0 52px;background:radial-gradient(60% 80% at 15% 0%,rgba(99,102,241,.13),transparent 70%),radial-gradient(50% 70% at 95% 10%,rgba(37,99,235,.10),transparent 70%),linear-gradient(180deg,#fff 0%,var(--bg) 100%);border-bottom:1px solid var(--line);overflow:hidden}
.hero .kicker{display:inline-flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--brand-line);color:var(--brand-d);font-size:.85rem;font-weight:600;padding:6px 14px 6px 10px;border-radius:999px;margin:0 0 20px;box-shadow:var(--sh1)}
.hero .kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 0 0 4px rgba(79,70,229,.15)}
.hero h1{font-size:clamp(2.1rem,5vw,3.5rem);font-weight:800;letter-spacing:-.04em;line-height:1.08;margin:0 0 18px;max-width:880px}
.hero h1 .grad{background:linear-gradient(100deg,var(--brand) 10%,var(--brand2) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.15rem;line-height:1.65;color:var(--muted);max-width:760px}
.search{margin-top:26px}
.search input{width:100%;max-width:680px;padding:17px 20px 17px 52px;border-radius:14px;border:1px solid var(--line2);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%235b6476' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='6.5'/%3E%3Cpath d='M14 14l4.5 4.5'/%3E%3C/svg%3E") no-repeat 20px center;color:var(--ink);font:500 1.03rem var(--sans);box-shadow:var(--sh2);transition:border-color .15s,box-shadow .15s}
.search input::placeholder{color:#6b7385}
.search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(79,70,229,.18),var(--sh2)}
/* Filtres */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 10px}
.chip{border:1px solid var(--line2);background:#fff;border-radius:999px;padding:8px 15px;cursor:pointer;font:550 .88rem var(--sans);color:var(--ink2);transition:background .15s,border-color .15s,color .15s}
.chip:hover{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand-d)}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 4px 12px -4px rgba(79,70,229,.5)}
.muted{color:var(--muted);font-size:.93rem}
/* Cartes */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;margin:14px 0 40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;position:relative;box-shadow:var(--sh1);transition:border-color .2s,box-shadow .2s,transform .2s}
.card:hover,.card:focus-within{border-color:var(--brand-line);box-shadow:var(--sh2);transform:translateY(-3px)}
.card h3{margin:0 0 6px;font-size:1.12rem}.card h3 a{text-decoration:none;color:var(--ink)}.card:hover h3 a{color:var(--brand-d)}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.card .cat{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;color:var(--brand-d);background:var(--brand-soft);font-size:.76rem;font-weight:650;letter-spacing:.02em;padding:3px 10px;border-radius:999px}
.card p{margin:6px 0;color:var(--ink2);font-size:.96rem}
.price{font-size:.84rem;color:var(--muted)!important;padding-top:10px;margin-top:12px!important;border-top:1px solid var(--line)}.free{color:var(--ok);font-weight:600}
.card.sponsored{border-color:var(--brand-line);background:linear-gradient(180deg,#f5f6ff 0%,#fff 60%);box-shadow:0 0 0 1px var(--brand-line),var(--sh2)}
.card.promo{background:linear-gradient(140deg,#eef2ff 0%,#e0e7ff 55%,#dbeafe 100%);border:1px dashed #a5b4fc}
.card.promo a.btn{position:relative;z-index:1}
.badge-sponso{display:inline-block;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;font-weight:700;font-size:.7rem;padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
/* Pages */
.page{padding:36px 24px 56px}
.page>h1,.fiche h1,.topic h1,.legal h1{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-.035em;margin:10px 0 14px}
.crumbs{font-size:.86rem;color:var(--muted)}.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--brand);text-decoration:underline}
.facts{border-collapse:separate;border-spacing:0;margin:22px 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;width:100%;max-width:720px;box-shadow:var(--sh1)}
.facts th,.facts td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.facts tr:last-child th,.facts tr:last-child td{border-bottom:0}
.facts th{width:180px;background:var(--soft);font-weight:600;font-size:.88rem;color:var(--ink2)}
.tag{display:inline-block;background:var(--brand-soft);color:var(--brand-d);border:1px solid var(--brand-line);border-radius:999px;padding:1px 10px;font-size:.8rem;font-weight:550;margin:2px 0}
.pricing{display:flex;gap:24px;flex-wrap:wrap}
.plan{background:var(--card);border:1px solid var(--brand-line);border-radius:20px;padding:32px;max-width:560px;box-shadow:0 0 0 4px var(--brand-soft),var(--sh2);position:relative}
.plan .big{font-weight:800;font-size:2.8rem;letter-spacing:-.04em;margin:0;color:var(--ink)}.plan small{font-weight:500;font-size:1rem;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;padding:0}.plan li{margin:10px 0}
.warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);padding:12px 16px;border-radius:var(--r-sm);font-size:.93rem}
.form{display:grid;gap:16px;max-width:580px;background:var(--card);padding:28px;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh2)}
.form label{display:grid;gap:6px;font-weight:600;font-size:.94rem;color:var(--ink)}
.form input,.form select,.form textarea{padding:12px 14px;border:1px solid var(--line2);border-radius:var(--r-sm);font:inherit;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(79,70,229,.18)}
.form .check{display:flex;gap:10px;align-items:center;font-weight:500}.form .check input{accent-color:var(--brand);width:18px;height:18px}
.info{padding-bottom:36px}
/* Pied de page */
.site-footer{background:#fff;border-top:1px solid var(--line);color:var(--muted);padding:40px 0 34px;font-size:.9rem;margin-top:24px}
.site-footer a{color:var(--ink2);text-decoration:none}.site-footer a:hover{color:var(--brand);text-decoration:underline}.site-footer strong{color:var(--ink)}
.site-footer p{margin:10px 0}
/* Guides */
.guide-body{max-width:800px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:40px 44px;margin:10px 0 32px;box-shadow:var(--sh1)}
.guide-body h1{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:800;letter-spacing:-.035em;margin:0 0 12px}
.guide-body h2{margin:40px 0 12px;font-size:1.4rem;scroll-margin-top:84px;color:var(--ink)}.guide-body h3{margin:26px 0 8px;font-size:1.1rem}
.guide-body p,.guide-body li{font-size:1.04rem;line-height:1.75;color:var(--ink2)}.guide-body li{margin:6px 0}.guide-body ul,.guide-body ol{padding-left:22px}
.guide-body blockquote,.note{background:var(--brand-soft);border:1px solid var(--brand-line);border-left:4px solid var(--brand);border-radius:12px;padding:12px 18px;margin:20px 0;color:var(--ink2)}.note p{margin:6px 0}
.note.transp{background:var(--warn-bg);border-color:var(--warn-line);border-left-color:#d97706}
.toc{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:16px 22px;margin:22px 0}.toc p{margin:0 0 6px;font-weight:700;color:var(--ink)}.toc ol{margin:0;padding-left:20px}.toc li{margin:4px 0;font-size:.96rem}
.table-scroll{overflow-x:auto;margin:18px 0}.guide-table{max-width:none;min-width:520px;font-size:.93rem}.guide-table thead th{width:auto}
.guide-card{border-top:4px solid var(--brand)}
.checklist{list-style:none;padding-left:4px!important}.checklist li{padding-left:30px;position:relative}.checklist .box{position:absolute;left:0;top:0;font-size:1.15rem;color:var(--brand)}
.links-list{display:flex;flex-wrap:wrap;gap:10px}
.pill{border:1px solid var(--line2);background:#fff;border-radius:999px;padding:8px 16px;font-size:.9rem;font-weight:550;color:var(--ink2);text-decoration:none;box-shadow:var(--sh1);transition:border-color .15s,color .15s,background .15s}
.pill:hover{color:var(--brand-d);border-color:var(--brand-line);background:var(--brand-soft)}
.topic .note ul{margin:6px 0;padding-left:22px}
@media (max-width:640px){.wrap{padding:0 18px}.nav{min-height:60px}.nav nav a:not(.btn):not(.nav-keep){display:none}.nav nav a.btn{margin-left:0}.chips{flex-wrap:nowrap;overflow-x:auto;margin:24px -18px 8px;padding:4px 18px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.chips::-webkit-scrollbar{display:none}.chip{flex:none}.hero{padding:44px 0 36px}.hero h1{font-size:2rem}.lead{font-size:1.04rem}.search input{padding:15px 16px 15px 46px;background-position:16px center}.facts th{width:110px}.guide-body{padding:24px 20px;border-radius:16px}.page{padding:26px 18px 44px}.grid{gap:14px}.card{padding:18px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.card:hover,.card:focus-within,.btn:hover{transform:none}}