/* Accueil QDNA (01/10/2026). Feuille autonome : l'accueil ne charge ni styles.css ni blog.css.
   Les jetons reprennent les valeurs de styles.css, clair et sombre. */
:root{
  --bg:#FAFAFB;--panel:#FFFFFF;--line:#E4E4E7;--line2:#D4D4D8;
  --text:#18181B;--muted:#52525B;--muted2:#6E6E78;
  --purple:#6842ED;--purple-h:#8E70FF;--purple-a:#6240E6;--purple-d:#4F0DCD;
  --chip:#F4F4F5;--glass:rgba(250,250,251,.85);
  --ff:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0F0F15;--panel:#181821;--line:#2A2A37;--line2:#3A3A49;
  --text:#ECECF1;--muted:#A8A8B6;--muted2:#9A9AA6;
  --purple:#9D85FF;--chip:#232331;--glass:rgba(15,15,21,.82);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ff);font-size:17px;line-height:1.6;overflow-x:hidden}
a{color:var(--purple);text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}

.tswitch{width:38px;height:38px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:0;flex:0 0 auto}
.tswitch:hover{color:var(--purple);border-color:var(--purple)}
.tswitch svg{width:18px;height:18px;display:block}
.tswitch .sun{display:none}
html[data-theme="dark"] .tswitch .sun{display:block}
html[data-theme="dark"] .tswitch .moon{display:none}

.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.accroche,.strates,.reperes{max-width:1680px;margin:0 auto;padding-left:clamp(16px,3vw,56px);padding-right:clamp(16px,3vw,56px)}
body .top .wrap{max-width:1680px;padding-left:clamp(14px,3vw,56px);padding-right:clamp(14px,3vw,56px)}
.accroche{padding-top:clamp(16px,2.6vh,30px);padding-bottom:clamp(12px,2vh,22px)}
.accroche h1{font-size:clamp(23px,2.1vw,40px);line-height:1.18;letter-spacing:-.01em;font-weight:700;margin:0 0 8px}
.accroche p{font-size:clamp(16px,1vw,19px);line-height:1.5;color:var(--muted);margin:0}

.strate{position:relative;border-radius:18px;overflow:hidden}
.strate h2{font-size:clamp(20px,1.6vw,30px);line-height:1.2;letter-spacing:-.005em;margin:0 0 8px}
.strate p{margin:0 0 12px;font-size:clamp(15px,.95vw,17.5px);line-height:1.5}
.strate-lien{font-weight:600;font-size:clamp(15px,.95vw,17px);text-decoration:underline}
.strate-lien::after{content:"";position:absolute;inset:0;z-index:2}
.strate:has(.strate-lien:focus-visible){outline:3px solid var(--purple);outline-offset:4px}
.strate-lien:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.puces{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.puces li{font-size:clamp(13px,.8vw,15px);line-height:1.3;padding:5px 11px;border:1px solid var(--line2);border-radius:999px;color:var(--text);background:var(--bg)}

.strate-logiciel{display:grid;grid-template-columns:minmax(0,37fr) minmax(0,63fr);align-items:center;gap:clamp(20px,2.4vw,44px);padding:clamp(16px,2vw,32px) clamp(18px,2vw,34px);background:var(--panel);border:1px solid var(--line)}
.strate-logiciel p{color:var(--muted)}
.strate-logiciel .strate-lien{color:var(--purple)}
.cadre{margin:0;border:1px solid #E4E4E7;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(24,24,27,.10);display:flex;flex-direction:column;min-height:0}
.cadre-barre{display:flex;align-items:center;gap:10px;padding:6px 12px;background:#F4F4F5;border-bottom:1px solid #E4E4E7;font-size:12.5px;line-height:1.3;color:#52525B;flex:none}
.cadre-barre .points{display:flex;gap:5px;flex:none}
.cadre-barre .points span{width:9px;height:9px;border-radius:50%;background:#D4D4D8}
.zoom{position:relative;z-index:3;display:flex;flex-direction:column;color:#18181B;text-decoration:none;cursor:zoom-in;min-height:0}
.zoom picture{display:block;height:100%}
.zoom img{display:block;width:100%;height:auto}
.zoom-etiquette{display:flex;flex:none;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:6px 14px;background:#18181B;color:#fff;font-size:14px;font-weight:600}
.zoom:hover .zoom-etiquette{background:#6240E6}
.zoom:focus-visible{outline:3px solid #6240E6;outline-offset:-3px}

.liaison{display:flex;flex-direction:column;align-items:center;flex:none}
.liaison::before,.liaison::after{content:"";width:2px;height:6px;background:var(--line2)}
.liaison span{font-size:11px;line-height:1.2;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:3px 12px;border:1px solid var(--line2);border-radius:999px}

.strate-materiel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;background:#000;color:#F4F4F5}
.strate-materiel .strate-texte{padding:clamp(18px,2vw,32px) clamp(18px,2vw,34px);align-self:center}
.strate-materiel h2{color:#fff}
.strate-materiel p{color:#D4D4D8}
.strate-materiel .strate-lien{color:#fff}
.strate-materiel:has(.strate-lien:focus-visible){outline-color:#B9A8FF}
.strate-materiel .puces li{border-color:#52525B;color:#F4F4F5;background:#000}
.strate-photo{display:block;position:relative;min-height:220px}
.strate-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.strate-materiel p.credit{margin:12px 0 0;font-size:12px;color:#A1A1AA}

@media (min-width:901px){
  .premier-ecran{display:flex;flex-direction:column;min-height:calc(100svh - 65px)}
  .strates{flex:1 1 auto;display:flex;flex-direction:column;width:100%;padding-bottom:clamp(14px,2vh,28px)}
  .strate-logiciel{flex:55 1 0;min-height:330px;max-height:720px}
  .strate-materiel{flex:45 1 0;min-height:270px;max-height:600px}
  .strate-logiciel{align-items:stretch}
  .strate-logiciel .strate-texte{align-self:center}
  .strate-logiciel .cadre{align-self:center;height:auto;max-height:100%}
  .strate-logiciel .zoom{flex:0 1 auto;min-height:0;overflow:hidden}
  .strate-logiciel .zoom picture{display:block;width:100%;aspect-ratio:1200/423;flex:0 1 auto;min-height:0;background:#fff}
  .strate-logiciel .zoom img{width:100%;height:100%;object-fit:contain;object-position:center;background:#fff}
}

.zoom-dialogue{width:min(1280px,96vw);max-height:94vh;padding:0;border:0;border-radius:14px;background:#fff;color:#18181B;overflow:auto}
.zoom-dialogue::backdrop{background:rgba(9,9,11,.78)}
.zoom-tete{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;background:#fff;border-bottom:1px solid #E4E4E7}
.zoom-tete h2{font-size:16px;margin:0}
.zoom-fermer{min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid #D4D4D8;background:#fff;color:#18181B;font:600 14px/1 var(--ff);cursor:pointer}
.zoom-fermer:hover{border-color:#6240E6;color:#6240E6}
.zoom-fermer:focus-visible{outline:3px solid #6240E6;outline-offset:2px}
.zoom-dialogue img{width:100%;height:auto}

.reperes{margin:0 auto;padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 44px}
.reperes h2{font-size:13px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 12px}
.reperes ul{list-style:none;margin:0;padding:0}
.reperes li{padding:12px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.45}
.reperes li a{color:var(--text);font-weight:600;text-decoration-color:var(--line2)}
.reperes li a:hover{color:var(--purple);text-decoration-color:currentColor}
.reperes .detail{display:block;font-size:14px;color:var(--muted)}
.reperes .tous{display:inline-block;margin-top:12px;font-weight:600;color:var(--purple)}

footer{border-top:1px solid var(--line);color:var(--muted2);font-size:13.5px}
footer .wrap{max-width:1180px;margin:0 auto;padding:26px 22px;display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:space-between}
footer a{color:var(--muted)}

@media (min-width:901px) and (max-height:800px){
  .accroche{padding-top:12px;padding-bottom:10px}
  .strate-logiciel{min-height:296px}
  .strate-materiel{min-height:236px}
  .strates{padding-bottom:6px}
  .strate-materiel p.credit{margin-top:6px}
  .strate p{margin-bottom:8px}
  .puces{margin-bottom:10px}
  .puces li{padding:4px 10px}
}
@media (max-width:900px){
  .reperes{grid-template-columns:minmax(0,1fr)}
  .strate-logiciel{grid-template-columns:minmax(0,1fr)}
  .strate-materiel{grid-template-columns:minmax(0,1fr)}
  .strate-materiel .strate-photo{order:-1;min-height:0;aspect-ratio:1.5}
  .strate-materiel .strate-photo{max-height:320px}
  .strate-materiel .strate-texte{padding:8px 18px 20px}
  .strates{padding-bottom:8px}
}
@media (max-width:600px){
  .strate-logiciel{padding:16px}
  .strate{border-radius:14px}
  .strate-materiel .strate-photo{aspect-ratio:1.4}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Variantes du premier écran (?v=a|b|c), comparaison du 01/10/2026 */
body[data-variante="a"] .strate-logiciel{background:#14112A;border-color:#2C2650;color:#fff}
body[data-variante="a"] .strate-logiciel h2{color:#fff}
body[data-variante="a"] .strate-logiciel p{color:#CFC9EA}
body[data-variante="a"] .strate-logiciel .strate-lien{color:#C4B5FF}
body[data-variante="a"] .strate-logiciel .puces li{background:transparent;border-color:#4A4373;color:#F1EFFB}
body[data-variante="a"] .strate-logiciel .cadre{border-color:#3B3466;box-shadow:0 0 0 1px rgba(157,133,255,.35),0 18px 60px rgba(104,66,237,.40)}
body[data-variante="a"] .strate-logiciel:has(.strate-lien:focus-visible){outline-color:#C4B5FF}

body[data-variante="b"] .strate-logiciel{background:#F4F1FF;border:2px solid #D9D0FF;box-shadow:0 22px 50px rgba(104,66,237,.14)}
body[data-variante="b"] .strate-logiciel h2{color:#0F0D1A;font-weight:800;font-size:clamp(21px,1.7vw,31px)}
body[data-variante="b"] .strate-logiciel p{color:#2E2A45}
body[data-variante="b"] .strate-logiciel .strate-lien{color:#5A35E0}
body[data-variante="b"] .strate-logiciel .puces li{background:#fff;border-color:#CFC6F5;color:#0F0D1A}
body[data-variante="b"] .strate-materiel{border:1px solid #6842ED;box-shadow:0 0 0 1px rgba(104,66,237,.25),0 0 36px rgba(104,66,237,.30)}
body[data-variante="b"] .strate-materiel h2{font-weight:800;font-size:clamp(21px,1.7vw,31px)}

body[data-variante="c"] .strates{max-width:none;padding-left:0;padding-right:0}
body[data-variante="c"] .strate{border-radius:0}
body[data-variante="c"] .strate-logiciel{border-left:0;border-right:0;padding-left:max(clamp(16px,3vw,56px),calc((100vw - 1680px) / 2 + 56px));padding-right:clamp(16px,3vw,56px)}
body[data-variante="c"] .strate-materiel .strate-texte{padding-left:max(clamp(16px,3vw,56px),calc((100vw - 1680px) / 2 + 56px))}
body[data-variante="c"] .strate h2{font-size:clamp(24px,2.1vw,44px);line-height:1.08;letter-spacing:-.02em;font-weight:800}
body[data-variante="c"] .strate-materiel h2{font-size:clamp(26px,2.6vw,52px)}
body[data-variante="c"] .puces li{border:0;background:none;padding:2px 0;margin-right:14px;font-weight:600}
body[data-variante="c"] .cadre{border-radius:6px;box-shadow:none}
body[data-variante="c"] .liaison span{border:0}
@media (max-width:900px){body[data-variante="c"] .strate-logiciel,body[data-variante="c"] .strate-materiel .strate-texte{padding-left:18px;padding-right:18px}}
@media (min-width:901px) and (max-height:800px){body[data-variante="c"] .strate h2{font-size:26px}}
@media (min-width:901px){body[data-variante="c"] .strate-logiciel{grid-template-columns:minmax(0,38fr) minmax(0,62fr)}}
.strate-logiciel h2{font-size:clamp(19px,1.4vw,28px)}
body[data-variante="b"] .strate-logiciel h2{font-size:clamp(20px,1.5vw,29px)}
body[data-variante="c"] .strate-logiciel h2{font-size:clamp(22px,1.75vw,38px)}
@media (min-width:901px) and (max-height:800px){body[data-variante="c"] .strate-logiciel h2{font-size:23px}}
@media (min-width:901px) and (max-height:800px){body[data-variante="b"] .strate-logiciel h2{font-size:19px}.strate-logiciel p{font-size:14.5px}}