/* Polices locales (latin : couvre é è à ç œ ‘ ’ « » – …). Aucune connexion tierce. */ @font-face{font-family:"Crimson Pro";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/crimson-pro-latin-wght-normal.woff2) format("woff2")} @font-face{font-family:"Crimson Pro";font-style:italic;font-weight:200 900;font-display:swap;src:url(fonts/crimson-pro-latin-wght-italic.woff2) format("woff2")} @font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-wght-normal.woff2) format("woff2")} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")} /* Socle commun v2 — « Encre vive » : papier millimétré, grandes lettres vivantes, arrondis francs, le déclic. */ @property --w{syntax:"";inherits:true;initial-value:700} @property --wi{syntax:"";inherits:true;initial-value:700} @property --ws{syntax:"";inherits:true;initial-value:0} @property --enc{syntax:"";inherits:true;initial-value:0%} @property --ang{syntax:"";inherits:false;initial-value:0deg} :root{ /* ÉCHELLE DES FONDS (6 noms) : papier --bg · feuille --card · papier illustré --zone · bande --band · bleu pâle --soft · nuit */ --bg:#FBF8F1; --card:#ffffff; --zone:#FBF8F0; --band:#FBF8F0; --soft:#EEF1FB; --night:var(--encre,#0C1834); --paper2:var(--band); --fg:var(--encre,#0C1834); --muted:#414b69; --line:#cfd4e0; --bg-glass:rgba(251,248,241,.8); --field:#ffffff; --field-line:var(--encre,#0C1834); --surface-quiet:var(--soft); --surface-now:var(--soft); --surface-row:var(--card); --blue:#2C5BFF; --on-blue:#ffffff; --orange:#FF6B35; --orange-text:#b8431a; --cyan:#00D4FF; --cyan-text:#00718c; --grid:rgba(44,91,255,.06); --glow:rgba(255,196,140,.28); --shadow:var(--encre,#0C1834); --fshadow:#2C5BFF; --serif:"Crimson Pro",Georgia,serif; --titre:Inter,system-ui,-apple-system,sans-serif; --sans:Inter,system-ui,-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --r-s:12px; --r-m:22px; --r-l:34px; --gutter:clamp(16px,4vw,48px); --max:1160px; --bar:0px; --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1); --k:1; /* échelle des durées : 0 en mouvement réduit */ --d1:calc(.25s*var(--k)); --d2:calc(.45s*var(--k)); --d3:calc(.9s*var(--k)); --zone-grid:rgba(44,91,255,.09); --cshadow:var(--encre,#0C1834); /* jetons fixes (ne basculent pas en sombre) : une palette de kit.themes.css les redéfinit */ --blue-vif:#2C5BFF; --blue-fort:#2147D1; --cyan-fort:#00718c; --orange-fort:#b8431a; --paper-fixe:#FBF8F0; --muted-fixe:#414b69; --tint-bleu:#DCE6FF; --tint-orange:#FFDCCB; --night-rgb:12 24 52; --blue-vif-rgb:44 91 255; --edge-rgb:127 155 255; --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .2 0 0 0 0 .15 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --bg:var(--encre,#0C1834); --band:var(--encre,#0C1834); --fg:#EEF0F6; --muted:#b0b9d4; --line:#27345a; --card:#12224a; --soft:#16295c; --zone:#12224a; --bg-glass:rgba(12,24,52,.8); --field:#12224a; --field-line:#7f9bff; --blue:#8fa8ff; --on-blue:var(--encre,#0C1834); --orange-text:#ff9a72; --cyan-text:#00D4FF; --grid:rgba(127,155,255,.12); --glow:rgba(120,150,255,.22); --shadow:#02060f; --fshadow:#5b7fff; --zone-grid:rgba(127,155,255,.16); --cshadow:#3B5FA8; --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .1 0 0 0 0 .25 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); color-scheme:dark}} :root[data-theme="dark"]{ --bg:var(--encre,#0C1834); --band:var(--encre,#0C1834); --fg:#EEF0F6; --muted:#b0b9d4; --line:#27345a; --card:#12224a; --soft:#16295c; --zone:#12224a; --bg-glass:rgba(12,24,52,.8); --field:#12224a; --field-line:#7f9bff; --blue:#8fa8ff; --on-blue:var(--encre,#0C1834); --orange-text:#ff9a72; --cyan-text:#00D4FF; --grid:rgba(127,155,255,.12); --glow:rgba(120,150,255,.22); --shadow:#02060f; --fshadow:#5b7fff; --zone-grid:rgba(127,155,255,.16); --cshadow:#3B5FA8; --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .1 0 0 0 0 .25 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); color-scheme:dark} @view-transition{navigation:auto} *{box-sizing:border-box} html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:96px;scroll-padding-bottom:calc(24px + var(--bar))} body{margin:0;background:var(--bg);color:var(--fg);font:1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;padding-bottom:var(--bar); background-image:var(--grain)} @media (prefers-reduced-motion:reduce){:root{--k:0}html{scroll-behavior:auto}.reveal-bar:after,.reveal-tape:after,.ink:before{display:none}.torch__notes{opacity:.4!important;-webkit-mask-image:none!important;mask-image:none!important}.tilt{transform:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.001s!important}} h1,h2,h3{font-family:var(--serif);line-height:.98;margin:0;text-wrap:balance;letter-spacing:-.025em;overflow-wrap:anywhere} h1{--wi:800;--ws:0;--w:calc(var(--wi) + var(--ws));font-family:var(--titre);font-size:clamp(2rem,8.2vw,6rem);font-weight:var(--w);line-height:1.02;letter-spacing:-.035em} h2{font-family:var(--titre);font-size:clamp(1.7rem,5vw,3.4rem);font-weight:800;line-height:1.06;letter-spacing:-.03em} h3{font-size:1.5rem;font-weight:600;line-height:1.1} /* E1 : le titre s'encre au chargement (250 -> 700), repos 700. Durée 0 en mouvement réduit. */ @keyframes encre{from{--wi:450}} h1{animation:encre var(--d3) var(--ease) both} @media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){ h1{animation:encre var(--d3) var(--ease) both} }} p{margin:0 0 14px;max-width:62ch} a{color:inherit} img,svg{max-width:100%} .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)} .section{padding-block:clamp(56px,10vw,128px)} .mono{font:.9375rem/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} .muted{color:var(--muted)} .lead{font-size:clamp(1.15rem,2.2vw,1.4rem);color:var(--muted);max-width:52ch;line-height:1.5} /* papier millimétré : même grille que les vidéos */ .mm{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px;background-position:-1px -1px; -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)} .mm-wrap{position:relative;isolation:isolate} .mm-wrap>.mm{position:absolute;inset:0;z-index:-1;pointer-events:none} /* le trait qui se lève (signature) : barre orange posée sur un mot, qui se lève au défilement */ .ink{position:relative;display:inline-block;white-space:nowrap;padding-inline:.04em;isolation:isolate} /* trait sous le mot : dessiné en fond, sous la ligne des jambages (un soulignement de texte se coupe à « ç » et « p ») */ .ink{text-decoration:none;padding-bottom:.2em;margin-bottom:0;background:linear-gradient(var(--orange),var(--orange)) 0 100%/100% .07em no-repeat} .ink:before{content:"";position:absolute;z-index:-1;inset:.08em -.04em .22em;background:color-mix(in srgb,var(--orange) 16%,transparent);border-radius:.18em;transform-origin:100% 50%;transform:scaleX(0)} @media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){ .ink:before{transform:scaleX(1);animation:lift linear both;animation-timeline:view();animation-range:entry 20% entry 85%} @keyframes lift{to{transform:scaleX(0)}} }} .ink{text-decoration-skip-ink:auto} /* surligneur DERRIÈRE le texte (z-index -1) et léger : orange 16 % en clair (texte orange foncé 4,2 à 5,1:1), 30 % en sombre (texte clair 8,9:1) */ :root[data-theme="dark"] .ink:before{background:color-mix(in srgb,var(--orange) 30%,transparent)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ink:before{background:color-mix(in srgb,var(--orange) 30%,transparent)}} .mark{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--orange) 55%,transparent) 62%);border-radius:12px} /* GRAMMAIRE CB — un seul style de mot clé : titre en sans lourd, mot clé en serif italique sur surligneur. La couleur dit quelque chose : orange = la bascule (le mot qui change le regard, un seul par écran) · bleu = ce qui est choisi, la solution · gris barré = ce qui est dépassé. */ .kw{--kw-ink:var(--encre,#0C1834);font-family:var(--serif);font-style:italic;font-weight:600;letter-spacing:-.01em;line-height:1.1;color:var(--kw-ink);background:color-mix(in srgb,var(--orange) 80%,#fff);padding:.02em .16em .06em;margin-inline:-.02em;border-radius:.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone} .kw--bleu{background:color-mix(in srgb,var(--blue) 52%,#fff)} .kw--barre{font-style:normal;font-family:inherit;font-weight:inherit;color:var(--muted);background:none;text-decoration:line-through;text-decoration-thickness:.07em;padding:0} /* fiche : arrondie, ombre pleine décalée */ .fiche{position:relative;background:var(--card);border:1.5px solid var(--fg);border-radius:var(--r-m);box-shadow:4px 4px 0 var(--fshadow);min-width:0;overflow:hidden} .fiche>.fiche-head{font:.9375rem var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:12px 20px;border-bottom:1.5px solid var(--fg);background:var(--paper2);display:flex;gap:10px;align-items:center} .fiche>.fiche-head:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--orange)} .fiche>.fiche-body{padding:20px} .row{padding-block:12px;border-bottom:1px dashed var(--line)} .row:last-child{border-bottom:0} .tab{display:inline-block;font:.9375rem var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:6px 14px;background:var(--fg);color:var(--bg);border-radius:12px 12px 0 0} .grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))} /* lueur de papier qui suit le pointeur (ne tourne jamais au repos) */ .glow{position:relative} .glow:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity calc(.4s*var(--k));background:radial-gradient(260px circle at var(--x,50%) var(--y,50%),var(--glow),transparent 70%);mix-blend-mode:multiply} :root[data-theme="dark"] .glow:before{mix-blend-mode:screen} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .glow:before{mix-blend-mode:screen}} .glow:hover:before{opacity:1} /* boutons : pastille pleine, ombre décalée, le déclic à l'appui */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 26px;font:600 1.0625rem var(--sans);text-decoration:none;border:1.5px solid var(--fg);background:var(--blue);color:var(--on-blue);cursor:pointer;border-radius:999px;box-shadow:4px 4px 0 var(--shadow);transition:transform var(--d1) var(--spring),box-shadow var(--d1) var(--spring)} .btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--shadow)} .btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--shadow)} .btn.ghost{background:var(--card);color:var(--fg)} .btn.sm{min-height:44px;padding:8px 18px;font-size:1rem} a.sec{display:inline-flex;align-items:center;min-height:44px;font-weight:600} :focus-visible{outline:3px solid var(--fg);outline-offset:3px;box-shadow:0 0 0 7px var(--cyan);border-radius:var(--r-s)} .btn:focus-visible{border-radius:999px} summary{min-height:44px} /* en-tête : pastille flottante */ .kit-header{position:sticky;top:0;z-index:50;padding:10px 0 0;pointer-events:none} .kit-header .wrap{pointer-events:auto;display:flex;align-items:center;gap:16px;min-height:64px;flex-wrap:wrap;background:var(--bg-glass);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1.5px solid var(--fg);border-radius:999px;padding:6px 8px 6px 14px;max-width:calc(var(--max) - 40px);width:calc(100% - 2*var(--gutter) + 0px);box-shadow:0 18px 30px -24px var(--shadow)} .kit-logo{font:600 1.35rem var(--serif);text-decoration:none;display:flex;align-items:center;gap:10px;min-height:44px} .kit-logo .tile{width:40px;height:40px;flex:none;min-width:32px;border-radius:10px;background:#f1f4fa;border:0;box-shadow:inset 0 0 0 1.5px #2a5696;display:grid;place-items:center;overflow:hidden;transition:transform calc(.42s*var(--k)) var(--spring)} .kit-logo .tile img{width:40px;height:40px;flex:none;min-width:32px}.kit-logo .lg-n{display:none} :root[data-theme="dark"] .kit-logo .lg-c{display:none}:root[data-theme="dark"] .kit-logo .lg-n{display:block} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kit-logo .lg-c{display:none}:root:not([data-theme="light"]) .kit-logo .lg-n{display:block}} .kit-logo.declic .tile{transform:scale(1.18) rotate(-1deg)} .kit-nav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap} .kit-nav a{padding:8px 16px;text-decoration:none;font-weight:500;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;transition:background calc(.2s*var(--k))} .kit-nav a:hover{background:var(--soft)} .kit-nav a[aria-current="page"]{background:var(--fg);color:var(--bg)} /* onglet actif aussi sur Connexion (connexion, espace) et sur Rendez-vous (contact) */ .kit-actions .esp[aria-current="page"]{background:var(--fg);color:var(--bg)} /* Rendez-vous reste un bouton : allumé en sable, pour ne pas faire un second bouton plein à côté de celui de la page */ :root body .kit-actions .btn.sm[aria-current="page"]{background:#EADFC8;color:var(--encre,#2A2748);border-color:var(--encre,#2A2748)} /* actions de l'en-tête */ .kit-actions{display:flex;align-items:center;gap:8px} .kit-actions .esp{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:8px 14px;border-radius:999px;text-decoration:none;font-weight:500;color:var(--muted)} .kit-actions .esp:hover{background:var(--soft);color:var(--fg)} .kit-actions .btn{padding:8px 20px;min-height:44px;white-space:nowrap} .kit-menu{display:none;width:44px;height:44px;border:1.5px solid var(--fg);background:var(--card);color:var(--fg);border-radius:999px;cursor:pointer;padding:0;align-items:center;justify-content:center} .kit-menu span,.kit-menu span:before,.kit-menu span:after{display:block;width:18px;height:2px;background:currentColor;border-radius:999px;position:relative;content:""} .kit-menu span:before{position:absolute;top:-6px;left:0}.kit-menu span:after{position:absolute;top:6px;left:0} .kit-nav .only-m{display:none} @media (max-width:1240px) and (min-width:900px){.kit-actions .esp{display:none}.kit-nav .only-m{display:inline-flex}.kit-nav a{padding:8px 9px;font-size:.9375rem}.kit-header .wrap{gap:8px}} @media (max-width:899px){ .kit-header .wrap{flex-wrap:nowrap;gap:8px;min-height:56px;max-height:64px;position:relative;padding:6px 6px 6px 10px} .kit-logo{font-size:1.1rem;gap:8px;white-space:nowrap} .kit-actions{margin-left:auto;gap:6px} .kit-actions .esp{display:none} .kit-actions .btn{padding:6px 14px;font-size:.9375rem} .kit-menu{display:inline-flex} .kit-nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:10px;background:var(--bg);border:1.5px solid var(--fg);border-radius:var(--r-m);box-shadow:0 18px 30px -18px var(--shadow);flex-wrap:nowrap;max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain} .kit-nav>*{flex:none} .kit-header.open .kit-nav{display:flex} .kit-nav a{justify-content:flex-start;padding:10px 16px;font-size:1.0625rem} .kit-nav .only-m{display:inline-flex} } /* menu compact aussi de 900 à 1240 px : neuf liens et Réglages ne tiennent pas sur une ligne */ @media (min-width:900px) and (max-width:1300px){ .kit-header .wrap{flex-wrap:nowrap;gap:8px;min-height:56px;max-height:64px;position:relative;padding:6px 6px 6px 10px} .kit-logo{font-size:1.1rem;gap:8px;white-space:nowrap} .kit-actions{margin-left:auto;gap:6px} .kit-actions .esp{display:none} .kit-actions .btn{padding:6px 14px;font-size:.9375rem} .kit-menu{display:inline-flex} .kit-nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:10px;background:var(--bg);border:1.5px solid var(--fg);border-radius:var(--r-m);box-shadow:0 18px 30px -18px var(--shadow);flex-wrap:nowrap;max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain} .kit-nav>*{flex:none} .kit-header.open .kit-nav{display:flex} .kit-nav a{justify-content:flex-start;padding:10px 16px;font-size:1.0625rem} .kit-nav .only-m{display:inline-flex} } /* barre basse (téléphone et tablette, moins de 900 px) : UN geste, contextuel (voir kit.js) ; absente sur ordinateur */ .kit-bar{display:none} @media (max-width:899px){ :root.has-bar{--bar:84px} .kit-bar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;border-radius:999px;background:var(--fg);box-shadow:0 12px 30px -10px rgba(0,0,0,.45);transition:transform calc(.3s*var(--k)) var(--ease)} .kit-bar.is-off{transform:translateY(140%);opacity:0;visibility:hidden;pointer-events:none} .kit-bar a{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:8px 18px;border-radius:999px;color:var(--bg);text-decoration:none;font-weight:600;font-size:.9375rem;line-height:1.25} .kit-bar a b{font-size:1.4rem;line-height:1;font-weight:600} } @media (max-width:899px) and (max-height:499px){:root{--bar:0px}.kit-bar{display:none}} /* pied de page : même soin que l'en-tête. Bande bleu nuit fixe (var(--encre,#0C1834)), arrondie en haut */ .kit-footer{margin-top:clamp(56px,8vw,96px);background:var(--night);color:#EEF0F6;border-radius:34px 34px 0 0;padding:clamp(40px,6vw,64px) 0 26px;font-size:1rem} :root[data-theme="dark"] .kit-footer{border:1.5px solid rgb(var(--edge-rgb) / .35);border-bottom:0} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kit-footer{border:1.5px solid rgb(var(--edge-rgb) / .35);border-bottom:0}} .kit-footer .wrap{display:grid;gap:36px 40px;grid-template-columns:1fr} .kit-footer a{color:#EEF0F6;text-decoration:none} .kit-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#fff} .kit-footer :focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px var(--cyan)} .kit-footer__logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;font:600 1.5rem var(--serif)} .kit-footer__logo .tile{width:38px;height:38px;background:none;border:0;display:grid;place-items:center;overflow:visible} .kit-footer__logo .tile img{width:40px;height:40px} .kit-footer__tag{margin:10px 0 0;max-width:22ch;font:600 clamp(1.6rem,3.4vw,2.3rem)/1.1 var(--serif);letter-spacing:-.02em;color:#fff;text-wrap:balance} .kit-footer__tag em{font-style:italic;color:#ffb89c} .kit-footer__cols{display:grid;align-items:start;gap:28px 32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))} .kit-footer__h{margin:0 0 6px;font:.9375rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#b0b9d4} .kit-footer ul{list-style:none;margin:0;padding:0} .kit-footer li a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding-block:2px} .kit-footer__rule{height:4px;width:56px;border-radius:99px;background:rgba(238,240,246,.55);margin:0} .kit-footer__legal{margin:0;max-width:none;display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;color:#b0b9d4;font-size:.9375rem} .kit-footer__note{font:.9375rem var(--mono);color:#b0b9d4} @media (min-width:900px){.kit-footer .wrap{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.kit-footer__cols{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}.kit-footer__rule,.kit-footer__legal{grid-column:1/-1}} .proto-note{font:.9375rem var(--mono);color:var(--muted)} /* apparition douce au défilement : l'état final est l'état par défaut */ @media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){ .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%} @keyframes rise{from{transform:translateY(28px)}to{transform:none}} }} .btn:focus-visible{box-shadow:4px 4px 0 var(--shadow),0 0 0 7px var(--cyan)} .kit-bar :focus-visible{outline-color:var(--bg);box-shadow:none;outline-offset:-5px} /* lien d'évitement */ .skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--fg);color:var(--bg);padding:12px 20px;border-radius:999px;font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center} .skip:focus{top:12px} /* impression */ @media print{.kit-header,.kit-bar,.skip,.mm,.mm-wrap>.mm{display:none!important}body{background:#fff!important;background-image:none!important;color:#000;padding-bottom:0}:root{--bar:0px}} /* 320 px : le nom reste visible (police et marges réduites, bouton resserré) */ @media (max-width:340px){.kit-header .wrap{gap:4px;padding:6px 4px 6px 8px}.kit-logo{font-size:.875rem;gap:5px;min-width:0;flex:none}.kit-logo .tile{width:32px;height:32px;flex:none}.kit-logo .tile img{width:32px;height:32px}.kit-logo .wm{white-space:nowrap}.kit-actions{gap:4px}.kit-actions .btn{padding:6px 7px;font-size:.8125rem}.kit-menu{width:44px;flex:none}} /* ===== KIT V3 ===== */ .for-dark{display:none} :root[data-theme="dark"] .for-light{display:none}:root[data-theme="dark"] .for-dark{display:block} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .for-light{display:none}:root:not([data-theme="light"]) .for-dark{display:block}} /* E2 .reveal-bar : une barre couvre un mot puis se lève (texte réel présent). Sans prise en charge : pas de barre. */ .reveal-bar{position:relative;display:inline-block;--bar-c:var(--fg)} .reveal-bar:after{content:"";position:absolute;inset:.08em -.08em .02em;background:var(--bar-c);border-radius:.16em;transform:scaleX(0);transform-origin:100% 50%;pointer-events:none} @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ .reveal-bar:after{transform:scaleX(1);animation:barlift linear both;animation-timeline:view();animation-range:entry 30% cover 35%} } .reveal-bar.now:after{transform:scaleX(1);animation:barlift calc(.7s*var(--k)) 1.2s var(--ease) both;animation-timeline:auto} .reveal-bar.armed:after{transform:scaleX(1);animation:none;transition:transform .7s var(--ease)} .reveal-bar.armed.lu:after{transform:scaleX(0)} } @keyframes barlift{to{transform:scaleX(0)}} /* E2 .reveal-tape : bande de papier adhésif qui se décolle (~1,2 s, ou premier défilement / clic) */ .reveal-tape{position:relative;display:block} .reveal-tape:after{content:"";position:absolute;inset:-3px -10px;background:#F3E9D2;border-radius:3px;transform:rotate(-1.1deg);box-shadow:2px 3px 0 rgb(var(--night-rgb) / .35); -webkit-mask:radial-gradient(circle 4px at 0 50%,#0000 98%,#000) left/51% 12px repeat-y,radial-gradient(circle 4px at 100% 50%,#0000 98%,#000) right/51% 12px repeat-y; mask:radial-gradient(circle 4px at 0 50%,#0000 98%,#000) left/51% 12px repeat-y,radial-gradient(circle 4px at 100% 50%,#0000 98%,#000) right/51% 12px repeat-y; transform-origin:0 0;animation:peel .8s 1.2s var(--ease) both;pointer-events:none} .reveal-tape.lu:after{animation:peel .5s var(--ease) both} @keyframes peel{60%{transform:rotate(-1.1deg) translateY(-6px) skewX(-4deg)}to{transform:rotate(-14deg) translate(-8px,-130%);opacity:0;visibility:hidden}} /* E3 .torch : le pointeur éclaire des annotations décoratives (aria-hidden) */ .torch{position:relative} .torch__notes{position:absolute;inset:0;pointer-events:none;opacity:.4;font:600 1.25rem/1 var(--serif);font-style:italic;color:var(--cyan-text)} .torch__notes>*{position:absolute;white-space:nowrap} @media (pointer:fine) and (prefers-reduced-motion:no-preference){ .torch__notes{opacity:1;-webkit-mask-image:radial-gradient(circle 190px at var(--mx,-400px) var(--my,-400px),#000 0,rgba(0,0,0,.35) 55%,rgba(0,0,0,.12) 100%);mask-image:radial-gradient(circle 190px at var(--mx,-400px) var(--my,-400px),#000 0,rgba(0,0,0,.35) 55%,rgba(0,0,0,.12) 100%)} } /* E4 transitions entre pages : mêmes noms sur la page source et la page cible (un nom = un seul élément par page) */ .vt-card{view-transition-name:dossier}.vt-title{view-transition-name:titre}.vt-hero{view-transition-name:hero} @media (prefers-reduced-motion:no-preference){::view-transition-group(*){animation-duration:.45s;animation-timing-function:var(--ease)}} /* E8 .tilt : inclinaison douce au pointeur (±4°, souris seulement) */ @media (pointer:fine) and (prefers-reduced-motion:no-preference){ .tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--ease);will-change:transform} .tilt:focus-within{transform:none} } /* E9 (it. 8) : plus de liseré dégradé sur le bouton principal, voir le système commun en fin d'illus.css */ .btn.primary{border:1.5px solid var(--fg)} /* ===== SIGNATURE COMMUNE (.card-illu, .dossier, .quote, .portrait) ===== Un objet papier, toujours : fond papier clair, bord bleu nuit, ombre pleine, onglet N° bleu nuit, bande crème à papier millimétré, petit trait orange sous le titre. Identique en thème clair et sombre. */ .card-illu,.dossier,.quote,.portrait{ --p-paper:var(--paper-fixe); --p-band:var(--paper-fixe); /* = --zone, --band : même papier que la carte */ --p-grid:rgb(var(--blue-vif-rgb) / .09); --p-ink:var(--night); --p-muted:var(--muted-fixe); --p-line:#d9d2bf; --p-shadow:var(--cshadow); --ring:var(--blue-vif); position:relative;padding-top:6px;min-width:0;margin:0;color:var(--p-ink)} :root[data-theme="dark"] .card-illu,:root[data-theme="dark"] .dossier,:root[data-theme="dark"] .quote,:root[data-theme="dark"] .portrait{--ring:var(--cyan)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card-illu,:root:not([data-theme="light"]) .dossier,:root:not([data-theme="light"]) .quote,:root:not([data-theme="light"]) .portrait{--ring:var(--cyan)}} .card-illu>.tab,.dossier>.tab,.quote>.tab,.portrait>.tab{position:relative;z-index:3;margin-left:20px;margin-bottom:-1.5px;background:var(--night);color:#fff} :root[data-theme="dark"] .card-illu>.tab,:root[data-theme="dark"] .dossier>.tab,:root[data-theme="dark"] .quote>.tab,:root[data-theme="dark"] .portrait>.tab{box-shadow:0 0 0 1.5px rgb(var(--edge-rgb) / .55)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card-illu>.tab,:root:not([data-theme="light"]) .dossier>.tab,:root:not([data-theme="light"]) .quote>.tab,:root:not([data-theme="light"]) .portrait>.tab{box-shadow:0 0 0 1.5px rgb(var(--edge-rgb) / .55)}} .card-illu__frame,.dossier__sheet,.quote__paper,.portrait__frame{position:relative;background:var(--p-paper);color:var(--p-ink);border:2px solid var(--night);border-radius:var(--r-m);box-shadow:7px 7px 0 var(--p-shadow);transition:transform var(--d2) var(--spring),box-shadow var(--d2) var(--spring)} :root[data-theme="dark"] :is(.card-illu__frame,.dossier__sheet,.quote__paper,.portrait__frame){box-shadow:7px 7px 0 var(--p-shadow),0 0 0 1.5px rgb(var(--edge-rgb) / .55)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.card-illu__frame,.dossier__sheet,.quote__paper,.portrait__frame){box-shadow:7px 7px 0 var(--p-shadow),0 0 0 1.5px rgb(var(--edge-rgb) / .55)}} /* trait orange sous le titre : le « trait qui se lève » en miniature, il s'allonge au survol */ .card-illu__body h3:after,.dossier__q:after,.quote figcaption b:after,.portrait figcaption b:after{content:"";display:block;width:36px;height:4px;margin-top:10px;border-radius:99px;background:var(--p-ink,var(--night));transform-origin:0 50%;transition:width var(--d2) var(--spring)} .card-link:hover h3:after,.card-link:focus-within h3:after,.dossier summary:hover .dossier__q:after{width:64px} /* bande crème à papier millimétré, bord à bord */ .card-illu__zone,.portrait__band{position:relative;overflow:visible;aspect-ratio:16/10;min-height:140px;border-radius:calc(var(--r-m) - 1.5px) calc(var(--r-m) - 1.5px) 0 0;background-color:var(--p-band); background-image:linear-gradient(var(--p-grid) 1px,transparent 1px),linear-gradient(90deg,var(--p-grid) 1px,transparent 1px);background-size:24px 24px} /* RÈGLE D'INTÉGRATION DES IMAGES SUR LA BANDE (v10) - un OBJET = image détourée (alpha net, sans sol aquarelle ni frange claire) + .card-illu__obj : ombre portée douce du kit, petit sol dessiné par CSS sous l'objet (ellipse floue, crème assombri), débordement ≤ 24 px en haut ; - une SCÈNE (paysage, aquarelle pleine) = .card-illu__cover : pleine bande, bords coupés net, mêmes arrondis ; - jamais de tache à bord déchiré posée sur la bande. Les bustes (perso-*, cas-*) sont coupés au bas : pas de sol. */ .card-illu,.dossier,.portrait{--obj-shadow:drop-shadow(2px 5px 5px rgb(var(--night-rgb) / .18));--obj-sol:color-mix(in srgb,var(--p-band) 50%,#5b4526)} /* objet détouré : posé en bas de la bande, centré à droite de l'onglet, dépasse du haut de 24 px au plus */ .card-illu__obj{position:absolute;z-index:1;left:104px;bottom:12px;top:auto;right:auto;width:calc(100% - 118px)!important;max-width:none;height:calc(100% + 12px);max-height:none;object-fit:contain;object-position:center bottom;filter:var(--obj-shadow);transform:none;translate:none} /* le sol : une ombre ovale sous l'objet, dans la couleur de la bande assombrie (aucune tache colorée étrangère) */ .card-illu__zone:has(>.card-illu__obj:not(.is-cover):not([src*="perso-"]):not([src*="cas-"]))::before{content:"";position:absolute;z-index:0;left:104px;right:14px;bottom:3px;height:22px;pointer-events:none; background:radial-gradient(ellipse 34% 50% at 50% 50%,var(--obj-sol) 0%,color-mix(in srgb,var(--obj-sol) 40%,transparent) 45%,transparent 100%);opacity:.85} .card-illu .for-dark{display:none!important}.card-illu .for-light{display:block!important} /* couverture : l'image remplit la bande, sans débordement */ .card-illu__cover,.card-illu__obj.is-cover{position:absolute;inset:0;left:0;right:0;bottom:0;width:100%!important;height:100%;object-fit:cover;object-position:center;border-radius:inherit;filter:none;mix-blend-mode:multiply} .card-illu.is-contained .card-illu__zone{overflow:hidden} .card-illu.is-contained .card-illu__obj{height:calc(100% - 12px)} .card-illu__body{padding:20px 22px 22px} .card-illu__body h3{margin-bottom:8px} .card-illu__body p:last-child{margin-bottom:0} .card-illu__body p{color:var(--p-muted)} .card-illu__body small,.card-illu__body .small{color:var(--p-muted)} .card-illu__body h3{color:var(--p-ink)} /* « Tu repars avec : … » : une ligne visible, sans clic */ .card-illu__gain{margin:14px 0 0;padding-top:12px;border-top:1.5px dashed var(--p-line);font-size:1rem;line-height:1.45;color:var(--p-ink)!important;max-width:none} .card-illu__gain b{font-weight:600} .card-illu.has-hint{margin-bottom:0} /* carte entière cliquable : le titre porte le lien (étiré sur la carte), jamais souligné */ .card-link .card-link__a,.card-link h3 a{color:inherit;text-decoration:none} .card-link .card-link__a:after,.card-link h3 a:after{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--r-m)} .card-link .card-illu__body:after,.card-link .dossier__more:after{content:"\2192";display:flex;align-items:center;justify-content:flex-end;min-height:44px;margin-top:6px;font:600 1.5rem/1 var(--sans);color:var(--night);transition:transform var(--d2) var(--spring)} .card-link{cursor:pointer} .card-link:hover .card-illu__frame,.card-link:focus-within .card-illu__frame{transform:translateY(-4px);box-shadow:11px 11px 0 var(--p-shadow)} .card-link:hover .card-illu__body:after,.card-link:focus-within .card-illu__body:after{transform:translateX(6px)} .card-link .card-link__a:focus-visible,.card-link h3 a:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:6px} .card-link:has(.card-link__a:focus-visible,h3 a:focus-visible) .card-illu__frame{outline:3px solid var(--ring);outline-offset:4px} :root[data-theme="dark"] .card-link:hover .card-illu__frame{box-shadow:11px 11px 0 var(--p-shadow),0 0 0 1.5px rgb(var(--edge-rgb) / .55)} /* alias de l'ancien système : plus de coin corné, plus de pastille crème, plus de languette */ .fold{display:none!important} .on-cream{background:none;border-radius:0;padding:0;box-shadow:none;object-fit:contain;filter:var(--obj-shadow,drop-shadow(2px 5px 5px rgb(var(--night-rgb) / .18)))} .card-illu__obj.on-cream{box-sizing:border-box} .card-illu__hint{display:none} /* .dossier : carte « cas », même signature, s'ouvre au clic (details natif) */ .dossier__sheet{overflow:visible} .dossier summary{position:relative;list-style:none;cursor:pointer;display:block;padding:22px 64px 18px 22px;min-height:88px;border-radius:var(--r-m)} .dossier summary::-webkit-details-marker{display:none} .dossier summary:after{content:"+";position:absolute;right:16px;top:18px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--night);color:#fff;font:600 1.4rem/1 var(--sans);transition:transform var(--d2) var(--spring)} .dossier__sheet[open] summary:after{transform:rotate(45deg)} .dossier summary:focus-visible{outline:3px solid var(--ring);outline-offset:4px;box-shadow:none} .dossier__q{display:block;font:600 1.35rem/1.2 var(--serif);color:var(--p-ink)} .dossier__teaser{display:block;margin-top:10px;font:.9375rem/1.4 var(--mono);color:var(--p-muted)} .dossier__sheet[open] .dossier__teaser{display:none} .dossier__more{padding:0 22px 22px;color:var(--p-ink)} .kit-logo{min-width:44px} /* .portrait : cadre de portrait, onglet « Ton coach », emplacement neutre aquarelle si pas de photo */ .portrait__frame{overflow:visible;border-radius:var(--r-l)} .portrait__band{aspect-ratio:4/5;min-height:0;border-radius:calc(var(--r-l) - 1.5px) calc(var(--r-l) - 1.5px) 0 0;overflow:hidden;background-image:none;background-color:var(--p-band)} .portrait__band>picture{display:contents} .portrait__band>img,.portrait__band>picture>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top} .portrait__ph{position:absolute;inset:0;display:block; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3Cfilter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b)' fill='%231f6f78' opacity='.22'%3E%3Cellipse cx='200' cy='205' rx='78' ry='92'/%3E%3Cpath d='M40 520c0-120 70-190 160-190s160 70 160 190z'/%3E%3C/g%3E%3C/svg%3E") center bottom/cover no-repeat, radial-gradient(ellipse 70% 55% at 22% 18%,rgba(255,172,120,.42),transparent 70%), radial-gradient(ellipse 65% 60% at 85% 35%,rgb(var(--blue-vif-rgb) / .20),transparent 72%), radial-gradient(ellipse 80% 50% at 50% 100%,rgba(0,212,255,.18),transparent 70%)} .portrait__ph:after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .75 0 0 0 0 .62 0 0 0 0 .45 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")} .portrait figcaption{padding:18px 22px 22px;color:var(--p-muted)} .portrait figcaption b{display:block;font:600 1.35rem/1.15 var(--serif);color:var(--p-ink)} .portrait figcaption span{display:block;margin-top:2px} /* .quote : carte-témoignage papier, grand guillemet dans la bande millimétrée */ .quote__paper{padding:0 0 22px;overflow:visible;border-radius:var(--r-m)} .quote__paper:before{content:"\201C";display:block;height:64px;padding:6px 22px 0;border-radius:calc(var(--r-m) - 1.5px) calc(var(--r-m) - 1.5px) 0 0;background-color:var(--p-band);background-image:linear-gradient(var(--p-grid) 1px,transparent 1px),linear-gradient(90deg,var(--p-grid) 1px,transparent 1px);background-size:24px 24px;font:700 5.5rem/1 var(--serif);color:var(--blue-fort);overflow:hidden} .quote blockquote{margin:0;padding:18px 22px 0} .quote blockquote p{margin:0;max-width:none;font:500 1.25rem/1.4 var(--serif);color:var(--p-ink)} .quote figcaption{padding:16px 22px 0;color:var(--p-muted);font-size:1rem;line-height:1.4} .quote figcaption b{display:block;font-weight:600;color:var(--p-ink)} .quote figcaption span{display:block;margin-top:4px;font:1rem var(--mono);letter-spacing:.05em;text-transform:uppercase} .card-illu code,.quote code,.dossier code{background:#EEF1FB;color:var(--night)} /* ===== FONDS ADAPTATIFS (pour les pages : remplacent tout #fff / #EAEEFB écrit en dur) ===== */ .kit-field,input.kit-field,textarea.kit-field,select.kit-field{background:var(--field);color:var(--fg);border:1.5px solid var(--field-line);border-radius:var(--r-s);min-height:48px;padding:10px 14px;font:1rem var(--sans)} .surface-quiet{background:var(--surface-quiet);color:var(--fg)} .surface-now{background:var(--surface-now);color:var(--fg);box-shadow:inset 5px 0 0 var(--blue)} .surface-row{background:var(--surface-row);color:var(--fg)} .surface-quiet .muted,.surface-now .muted,.surface-quiet .mono,.surface-now .mono{color:var(--muted)} /* interrupteur « Ambiance sonore » (posé par kit.js, branché par ambiance.js) */ .amb-btn,.amb-btn-m{font:inherit;color:var(--fg);background:transparent;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent} .amb-btn{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;min-width:44px;height:44px;padding:0 12px 0 10px;border-radius:999px;font-size:.9375rem;font-weight:500;color:var(--muted);transition:background calc(.2s*var(--k,1)),color calc(.2s*var(--k,1))} .amb-btn:hover{background:var(--soft);color:var(--fg)} .amb-btn[aria-pressed="true"]{color:var(--fg);background:var(--soft)} .amb-onde{transform-origin:12px 12px;transform:scaleY(.3);transition:transform calc(.45s*var(--k,1)) var(--spring,ease)} [aria-pressed="true"] .amb-onde{transform:scaleY(1)} .amb-tip{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;font:500 .875rem/1.2 var(--sans);padding:8px 12px;border-radius:10px;background:var(--fg);color:var(--bg);opacity:0;visibility:hidden;pointer-events:none;transition:opacity calc(.15s*var(--k,1))} .amb-btn:hover .amb-tip,.amb-btn:focus-visible .amb-tip{opacity:1;visibility:visible} .amb-btn-m{display:none} @media (max-width:760px){ .amb-btn{display:none} .amb-btn-m{display:flex;align-items:center;gap:10px;min-height:44px;white-space:nowrap;padding:10px 16px;border-radius:999px;text-align:left;font-size:1.0625rem;font-weight:500;margin-top:9px;position:relative} .amb-btn-m:before{content:"";position:absolute;left:16px;right:16px;top:-5px;height:1px;background:var(--line)} .amb-btn-m:hover{background:var(--soft)} .amb-btn-m .amb-etat{margin-left:auto;flex:none;position:relative;width:38px;height:22px;border-radius:999px;border:1.5px solid var(--fg);background:var(--card);transition:background calc(.2s*var(--k,1))} .amb-btn-m .amb-etat:after{content:"";position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:var(--fg);transition:transform calc(.25s*var(--k,1)) var(--spring,ease)} .amb-btn-m[aria-pressed="true"] .amb-etat{background:var(--blue)} .amb-btn-m[aria-pressed="true"] .amb-etat:after{transform:translateX(16px);background:var(--on-blue)} } /* v15 : fond des illustrations = le papier de la carte + grille bleue légère + un disque (bleu pâle, orange pâle en alternance) derrière l'objet */ .card-illu__zone{--disc:var(--tint-bleu);border-bottom:1.5px solid rgb(var(--night-rgb) / .14);background-image:linear-gradient(var(--p-grid) 1px,transparent 1px),linear-gradient(90deg,var(--p-grid) 1px,transparent 1px);background-size:24px 24px,24px 24px} .card-illu__zone:has(.card-illu__obj:not(.is-cover)){background-image:radial-gradient(circle at 60% 58%,var(--disc) 0 31%,rgba(255,255,255,0) 31.4%),linear-gradient(var(--p-grid) 1px,transparent 1px),linear-gradient(90deg,var(--p-grid) 1px,transparent 1px);background-size:auto,24px 24px,24px 24px} .card-illu:nth-of-type(even) .card-illu__zone,*:nth-child(even)>.card-illu .card-illu__zone,.card-illu:nth-child(even) .card-illu__zone{--disc:var(--tint-orange)} .portrait__band{border-bottom:1.5px solid rgb(var(--night-rgb) / .14)} /* v15 · « Dans la durée » : le digital informe, l'humain transforme */ .du .lead{max-width:56ch;font-size:1.125rem;color:var(--muted);margin:10px 0 0} .du-grid{display:grid;gap:clamp(24px,4vw,48px);grid-template-columns:1fr;align-items:start;margin-top:clamp(24px,4vw,40px)} @media(min-width:960px){.du-grid{grid-template-columns:minmax(300px,.9fr) 1.6fr}} .du-venn{margin:0;position:relative;border:2px solid var(--night);border-radius:var(--r-m);background:var(--paper-fixe);box-shadow:7px 7px 0 var(--cshadow);padding:0 0 12px;overflow:hidden} .du-venn svg{display:block;width:100%;height:auto} .du-venn figcaption{padding:10px 16px 0;color:var(--muted-fixe);text-transform:uppercase;letter-spacing:.08em;font-size:.8125rem} .du-t{font:600 15px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;fill:#fff} .du-s{font:400 15px "JetBrains Mono",ui-monospace,monospace;letter-spacing:0;fill:#fff} .du-m{font:700 18px "Crimson Pro",Georgia,serif;fill:#fff} .du-t:nth-of-type(n+3),.du-s:nth-of-type(n+3){fill:var(--night)} .du-c{transition:transform .9s cubic-bezier(.2,.8,.2,1)} .du-c1{transform:translateX(-26px)}.du-c2{transform:translateX(26px)} .du-venn.is-in .du-c1,.du-venn.is-in .du-c2,.du-venn:hover .du-c1,.du-venn:hover .du-c2{transform:none} @media(prefers-reduced-motion:reduce){.du-c{transition:none}.du-c1,.du-c2{transform:none}} .du-cards{display:grid;gap:22px;grid-template-columns:1fr} @media(min-width:720px) and (max-width:959px){.du-cards{grid-template-columns:1fr 1fr 1fr}} @media(min-width:960px){.du-cards{grid-template-columns:1fr 1fr 1.2fr}} .du-cards .card-illu__body{padding:18px 20px 20px}.du-cards .card-illu__body h3{font-size:1.2rem} .du-us .card-illu__frame{border-width:3px;box-shadow:7px 7px 0 var(--blue-vif)} .du-us>.tab{background:var(--blue-vif)} .du-fin{margin:clamp(24px,4vw,40px) 0 0;max-width:40ch;font:600 clamp(1.4rem,2.6vw,1.9rem)/1.2 var(--serif);letter-spacing:-.01em;text-wrap:balance} .du-cards{align-items:stretch}.du-cards .card-illu{display:flex;flex-direction:column}.du-cards .card-illu__frame{flex:1} /* v15 · citation + fil de la durée (À propos) */ .du-quote{display:grid;gap:clamp(24px,5vw,56px);grid-template-columns:1fr;align-items:center} @media(min-width:900px){.du-quote{grid-template-columns:minmax(300px,420px) 1fr}} .du-pola{margin:0;background:#fff;padding:12px 12px 14px;border-radius:6px;box-shadow:0 14px 30px rgb(var(--night-rgb) / .22),0 2px 0 rgb(var(--night-rgb) / .08);transform:rotate(-2.2deg);max-width:420px;justify-self:center;transition:transform .5s var(--spring)} .du-pola:hover{transform:rotate(0)} .du-pola img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:2px} .du-pola figcaption{margin:10px 0 0;text-align:center;color:var(--muted-fixe);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase} .du-bq{margin:0}.du-q{margin:0;font:italic 700 clamp(1.8rem,4vw,2.9rem)/1.15 var(--serif);letter-spacing:-.01em;text-wrap:balance} .du-q:before{content:"";display:block;width:44px;height:6px;border-radius:99px;background:currentColor;margin-bottom:20px} .du-bq footer{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:4px}.du-bq footer b{font:600 1rem var(--sans)}.du-bq footer span{color:var(--muted);font-size:.9375rem} .du-fil{margin-top:clamp(36px,6vw,64px)} .du-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0;counter-reset:s;grid-template-columns:1fr;position:relative} .du-steps li{counter-increment:s;position:relative;padding:0 0 22px 56px;display:grid;gap:4px} .du-steps li:before{content:counter(s);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--night);color:#fff;display:grid;place-items:center;font:600 .95rem var(--mono);z-index:1} .du-steps li:not(:last-child):after{content:"";position:absolute;left:17px;top:36px;bottom:0;width:2px;background:repeating-linear-gradient(var(--blue-vif) 0 5px,transparent 5px 9px)} .du-steps li:last-child:before{background:var(--orange);color:var(--night)} .du-steps b{font:600 1.15rem var(--serif)}.du-steps span{color:var(--muted);max-width:60ch} @media(min-width:960px){.du-steps{grid-template-columns:repeat(5,1fr);grid-template-rows:auto 1fr;gap:0 18px}.du-steps li{grid-row:span 2;grid-template-rows:subgrid}.du-steps li{padding:56px 0 0}.du-steps li:not(:last-child):after{left:44px;right:-18px;top:17px;bottom:auto;width:auto;height:2px;background:repeating-linear-gradient(90deg,var(--blue-vif) 0 5px,transparent 5px 9px)}} :root[data-theme="dark"] .du-steps li:before{background:#EEF0F6;color:var(--night)}:root[data-theme="dark"] .du-steps li:last-child:before{background:var(--orange)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .du-steps li:before{background:#EEF0F6;color:var(--night)}:root:not([data-theme="light"]) .du-steps li:last-child:before{background:var(--orange)}} :root[data-theme="dark"] .du-venn svg .du-t,:root[data-theme="dark"] .du-venn svg .du-s{} /* v15b : le Venn en papier, cartes d'égale hauteur */ .du-t{font:600 15px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;fill:var(--night)!important}.du-s{fill:var(--muted-fixe)!important;font-size:13px} .du-m{font:700 17px "Crimson Pro",Georgia,serif;fill:var(--night)} .du-cards .tab{white-space:nowrap} .du-cta{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:22px}.du-cta a:not(.btn){font-weight:600;text-underline-offset:4px} .ac-fil{margin:10px 0 0;max-width:46ch;font:italic 500 1.05rem/1.4 var(--serif);color:var(--muted)} .du-eq{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:1fr} @media(min-width:800px){.du-eq{grid-template-columns:repeat(3,1fr)}} .du-eq li{border:2px solid var(--night);border-radius:var(--r-m);background:var(--paper-fixe);color:var(--night);padding:18px 20px;display:grid;gap:6px;box-shadow:5px 5px 0 var(--cshadow)} .du-eq b{font:600 1.15rem var(--serif)}.du-eq span{color:var(--muted-fixe)} .du-fil2{margin-top:clamp(28px,4vw,44px)} .du-rub{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(min-width:860px){.du-rub{grid-template-columns:repeat(6,1fr);gap:0;position:relative}.du-rub:before{content:"";position:absolute;left:8%;right:8%;top:17px;height:2px;background:repeating-linear-gradient(90deg,var(--blue-vif) 0 5px,transparent 5px 9px)}} .du-rub li{position:relative;display:grid;gap:3px;justify-items:start;padding:44px 8px 0 0} @media(max-width:859px){.du-rub{grid-template-columns:1fr;gap:0}.du-rub li{padding:6px 0 18px 48px;min-height:52px}.du-rub li:not(:last-child):after{content:"";position:absolute;left:16px;top:36px;bottom:2px;width:2px;background:repeating-linear-gradient(var(--blue-vif) 0 5px,transparent 5px 9px)}} .du-rub li:before{content:"";position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;border:2px dashed var(--blue-vif);background:var(--bg);box-sizing:border-box} .du-rub li.is-on:before{background:var(--blue-vif);border-style:solid;border-color:var(--blue-vif);box-shadow:inset 0 0 0 6px var(--bg)} .du-rub li.du-lu:before{border-color:var(--orange)} .du-rub b{font:600 1.05rem var(--serif)}.du-rub span{color:var(--muted);font-size:.9375rem}.du-rub a{color:inherit;text-underline-offset:4px} .du-rub .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* v16 · tour 3 design */ .sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .du-t{font-size:16px!important}.du-s{font-size:15px!important} .du-m{font:700 19px "Crimson Pro",Georgia,serif;fill:#fff!important} .du-lens{transition:opacity .9s .25s} .js .du-venn:not(.is-in):not(:hover) .du-lens,.js .du-venn:not(.is-in):not(:hover) .du-m{opacity:0} .du-m{transition:opacity .9s .25s} @media(prefers-reduced-motion:reduce){.du-lens,.du-m{transition:none}.js .du-venn .du-lens,.js .du-venn .du-m{opacity:1!important}} /* v16 · un seul gabarit : disque pâle + sujet fondu dans le disque (plus de bande à bords nets) */ .card-illu__zone:has(>.card-illu__cover,>.is-cover){background-image:radial-gradient(circle at 50% 52%,var(--disc) 0 29%,rgba(255,255,255,0) 29.4%),linear-gradient(var(--p-grid) 1px,transparent 1px),linear-gradient(90deg,var(--p-grid) 1px,transparent 1px);background-size:auto,24px 24px,24px 24px;overflow:hidden} .card-illu__cover,.card-illu__obj.is-cover{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 62%,transparent 100%)} .card-illu__cover,.card-illu__obj.is-cover{-webkit-mask-image:radial-gradient(ellipse 41% 50% at 50% 52%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 41% 50% at 50% 52%,#000 52%,transparent 100%)} .card-illu__zone{overflow:hidden} .card-illu__obj{height:calc(100% - 26px);bottom:12px} .card-illu__obj[src*="perso-"],.card-illu__obj[src*="cas-"],.card-illu__obj[src*="c-perso"]{height:calc(100% - 10px);bottom:0} /* le disque : un vrai rond (hauteur de la bande), jamais rogné, centré sur l'objet */ .card-illu__zone:has(>.card-illu__obj:not(.is-cover)),.card-illu__zone:has(>.card-illu__cover,>.is-cover){background-image:linear-gradient(var(--p-grid) 1px,transparent 1px),linear-gradient(90deg,var(--p-grid) 1px,transparent 1px);background-size:24px 24px,24px 24px} .card-illu__zone:has(>.card-illu__obj:not(.is-cover)):after,.card-illu__zone:has(>.card-illu__cover,>.is-cover):after{content:"";position:absolute;z-index:0;top:50%;left:calc(50% + 45px);height:90%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--disc);pointer-events:none} .card-illu__zone:has(>.card-illu__cover,>.is-cover):after{left:50%;height:84%} .kit-bar.is-typing{transform:translateY(140%);opacity:0;visibility:hidden;pointer-events:none} .kit-fige{font:600 .9375rem var(--sans);min-height:44px;padding:8px 18px;border-radius:999px;border:1.5px solid currentColor;background:transparent;color:inherit;cursor:pointer} .kit-fige:hover{background:rgba(255,255,255,.1)}.kit-fige[aria-pressed="true"]{background:#EEF0F6;color:var(--night)} .kit-fige:focus-visible{outline:3px solid var(--cyan);outline-offset:3px} html.decor-fige .amb-p{display:none!important} html.decor-fige *,html.decor-fige *:before,html.decor-fige *:after{animation-iteration-count:1!important;animation-duration:.01ms!important;animation-delay:0s!important} .du-ex .du-rub li:before,.du-ex .du-rub:before{opacity:.45;filter:grayscale(.6)}.du-ex .du-rub b{font-style:italic} .du-ex-n{margin:6px 0 0;color:var(--muted);font-size:1rem} .du-ex-b{display:inline-block;margin-left:6px;padding:1px 10px;border:1.5px dashed currentColor;border-radius:999px;font-size:.9375rem;letter-spacing:.04em} .du-j{color:var(--muted);font:.9375rem var(--sans)} .du-rub li{align-content:start} .en-strip{mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 44% 50% at 50% 52%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 44% 50% at 50% 52%,#000 55%,transparent 100%)} .du-venn .sr{color:var(--night)} .du-rub a{display:inline-flex;align-items:center;min-height:44px} /* v17 · gabarit : le disque est TOUJOURS derrière le sujet ; une scène pleine (sans fond transparent) = cadre plein, sans disque ; .no-disc = pas de disque */ .card-illu__cover,.card-illu__obj.is-cover{-webkit-mask-image:none;mask-image:none;mix-blend-mode:normal;z-index:1} .card-illu__zone:has(>.card-illu__cover,>.is-cover):after,.card-illu__zone.no-disc:after{display:none} .card-illu__zone:has(>.card-illu__obj:not(.is-cover)):after{aspect-ratio:1;width:auto;max-width:none;flex:none} .sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* v17 · Venn : lentille bleue franche, mot lisible même pendant le fondu (contour bleu foncé, contraste ≥ 4,5) */ .du-lens{fill:var(--blue-fort)} .du-m{font-size:16px!important;fill:#fff!important;stroke:#1A3FC4;stroke-width:3px;paint-order:stroke;stroke-linejoin:round} /* v17 · fil d'Ariane : le « › » ne reste jamais seul en début de ligne ; espacement régulier */ .fil li{flex-wrap:nowrap!important} .fil li+li:before{flex:none} .fil li>a{min-width:0!important;padding-inline:8px;margin-inline:-8px} .fil li:first-child>a{margin-left:-8px} .fil [aria-current]{min-width:0} @media (max-width:480px){.fil [aria-current]{flex:1 1 0;white-space:normal!important;overflow-wrap:anywhere}} /* v17 · pastille du bas : repère (aside), disparaît quand elle recouvre un lien */ .kit-bar.is-over{transform:translateY(140%);opacity:0;visibility:hidden;pointer-events:none} /* v17 · « Figer les décors » aussi dans l'en-tête (ordinateur) et dans le menu (téléphone) */ .fige-btn,.fige-btn-m{font:inherit;color:var(--fg);background:transparent;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent} .fige-btn{position:relative;flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;color:var(--muted)} .fige-btn:hover{background:var(--soft);color:var(--fg)} .fige-btn[aria-pressed="true"]{color:var(--fg);background:var(--soft)} .fige-btn-m{display:none} @media (max-width:760px){ .fige-btn{display:none} .fige-btn-m{display:flex;align-items:center;gap:10px;min-height:44px;white-space:nowrap;padding:10px 16px;border-radius:999px;text-align:left;font-size:1.0625rem;font-weight:500;width:100%} .fige-btn-m:hover{background:var(--soft)} .fige-btn-m .amb-etat{margin-left:auto;flex:none;position:relative;width:38px;height:22px;border-radius:999px;border:1.5px solid var(--fg);background:var(--card)} .fige-btn-m .amb-etat:after{content:"";position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:var(--fg);transition:transform calc(.25s*var(--k,1)) var(--spring,ease)} .fige-btn-m[aria-pressed="true"] .amb-etat{background:var(--blue)} .fige-btn-m[aria-pressed="true"] .amb-etat:after{transform:translateX(16px);background:var(--on-blue)} } .fige-btn:focus-visible,.fige-btn-m:focus-visible{outline:3px solid var(--ring,var(--blue-vif));outline-offset:2px} .card-illu__zone.no-disc{background-image:linear-gradient(var(--p-grid) 1px,transparent 1px),linear-gradient(90deg,var(--p-grid) 1px,transparent 1px)!important;background-size:24px 24px!important} .ot-revele{margin:10px 0 0;color:var(--muted)} .ot-revele span{display:inline-block;min-width:1.2em;padding:0 8px;border:1.5px dashed currentColor;border-radius:999px;color:var(--fg)} .ot-revele.is-ouvert span{border:0;padding:0;color:var(--fg);font-style:italic} /* v17 · téléphone : pied de page sur deux colonnes (plus court que l'écran : l'en-tête collant ne recouvre plus le dernier lien) */ @media (max-width:560px){.kit-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}.kit-footer__cols a{overflow-wrap:anywhere}} @media (max-width:899px){.kit-header{transition:transform calc(.25s*var(--k,1)) var(--ease)}html.at-end .kit-header:not(.open){transform:translateY(-140%);visibility:hidden}} /* v18 · Venn : l'état de départ est l'état final (lentille bleue et mot déjà là, ordinateur et mobile, animation jouée ou non) ; le défilement ne fait que souligner la lentille */ .du-c1,.du-c2{transform:none!important;transition:none} .js .du-venn:not(.is-in):not(:hover) .du-lens,.js .du-venn:not(.is-in):not(:hover) .du-m{opacity:1} @media (prefers-reduced-motion:no-preference){.du-venn.is-in .du-lens{animation:du-pulse 1.2s ease-out 1}@keyframes du-pulse{0%{opacity:.8}100%{opacity:1}}} /* v18 · le fil réel : chaque marque posée par la trace de cet appareil s'allume dans sa couleur (l'exemple grisé garde le bleu uni) */ .du-fil2:not(.du-ex) .du-rub li.is-on[data-m="point"]{--mk:var(--blue-fort)} .du-fil2:not(.du-ex) .du-rub li.is-on[data-m="outil"]{--mk:var(--cyan-fort)} .du-fil2:not(.du-ex) .du-rub li.is-on[data-m="mots"]{--mk:var(--orange-fort)} .du-fil2:not(.du-ex) .du-rub li.is-on[data-m="relu"]{--mk:var(--blue-fort)} .du-fil2:not(.du-ex) .du-rub li.is-on[data-m="retour"]{--mk:var(--cyan-fort)} .du-fil2:not(.du-ex) .du-rub li.is-on:before{background:var(--mk,var(--blue-vif));border-style:solid;border-color:var(--mk,var(--blue-vif))} .du-fil2:not(.du-ex) .du-rub li.is-on b{color:var(--mk,inherit)} .du-rub li.is-new:before{animation:du-pop .6s ease-out 1}@keyframes du-pop{40%{transform:scale(1.25)}} @media (prefers-reduced-motion:reduce){.du-rub li.is-new:before{animation:none}} /* v18 · ancres : la cible ne se cache ni sous l'en-tête collant ni sous la pastille ; fil d'Ariane : le titre long passe seul sur sa ligne, sans « › » orphelin */ main [id],.ar-text [id]{scroll-margin-top:104px;scroll-margin-bottom:96px} .skip-nav{display:contents} @media (max-width:480px){.fil ol{flex-wrap:wrap}.fil li:last-child:not(:first-child){flex:1 1 100%}.fil li:last-child:not(:first-child):before{display:none}} /* Définition courte du mot « mécanisme », posée une fois par page (tour 6) */ .def-meca{max-width:62ch;margin:12px 0 0;font-size:1rem;line-height:1.5;color:var(--p-muted,var(--muted))} .def-meca a{display:inline-flex;align-items:center;min-height:44px;color:var(--p-ink,var(--fg));text-decoration:underline;text-underline-offset:4px} .kit-footer p.def-meca.kit-footer__def{margin:10px 0 0;max-width:46ch}.kit-footer p.def-meca.kit-footer__def a{color:#c9d2ec;text-decoration:underline;text-underline-offset:3px} .du-cta a:not(.btn){display:inline-flex;align-items:center;min-height:44px} .dossier__more p a{padding:12px 2px;margin:-12px 0} header[data-kit-header]:not(.kit-header){height:68px;overflow:hidden} /* panneau « Affichage » : couleurs, écriture, clair ou sombre (boutons radio) ; les palettes et écritures sont dans kit.themes.css */ .kit-aff{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;min-width:44px;height:44px;padding:0 12px 0 10px;font-size:.9375rem;font-weight:500;border-radius:999px;border:0;background:transparent;color:var(--muted);cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;transition:background calc(.2s*var(--k,1)),color calc(.2s*var(--k,1))} .kit-aff:hover,.kit-aff[aria-expanded="true"]{background:var(--soft);color:var(--fg)} .kit-aff:hover .amb-tip,.kit-aff:focus-visible .amb-tip{opacity:1;visibility:visible} .kit-aff[aria-expanded="true"] .amb-tip{opacity:0;visibility:hidden} .aff-btn-m{display:none} .kit-footer__btns{display:flex;flex-wrap:wrap;gap:8px} .kit-aff-f{font:600 .9375rem var(--sans);min-height:44px;padding:8px 18px;border-radius:999px;border:1.5px solid currentColor;background:transparent;color:inherit;cursor:pointer} .kit-aff-f:hover,.kit-aff-f[aria-expanded="true"]{background:rgba(255,255,255,.1)} @media (max-width:899px){ .kit-aff{display:none} .aff-btn-m{display:flex;align-items:center;gap:10px;min-height:44px;width:100%;white-space:nowrap;padding:10px 16px;border:0;border-radius:999px;background:transparent;color:var(--fg);cursor:pointer;text-align:left;font:500 1.0625rem var(--sans)} .aff-btn-m:hover{background:var(--soft)} .aff-btn-m svg{flex:none} } /* l'en-tête garde une seule ligne avec le bouton « Affichage » ajouté : marges resserrées */ @media (min-width:900px){.kit-actions{gap:2px}.amb-mot{white-space:nowrap}} /* défilement latéral : bord dégradé tant qu'il y a une suite à droite */ @media (max-width:899px){[data-suite]:not([data-fin]){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}} /* « Réglages » : le son et l'affichage dans un seul bouton de l'en-tête (un seul arrêt au clavier) */ .kit-reg-w{position:relative;flex:none} .kit-reg{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;min-width:44px;height:44px;padding:0 12px 0 10px;font:inherit;font-size:.9375rem;font-weight:500;border-radius:999px;border:0;background:transparent;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background calc(.2s*var(--k,1)),color calc(.2s*var(--k,1))} .kit-reg:hover,.kit-reg[aria-expanded="true"]{background:var(--soft);color:var(--fg)} .kit-reg-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:224px;padding:8px;border-radius:16px;background:var(--bg);color:var(--fg);border:1px solid var(--line);box-shadow:0 12px 32px rgb(0 0 0 / .16);display:grid;gap:2px} .kit-reg-menu[hidden]{display:none} .kit-reg-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:12px;background:transparent;color:var(--fg);font:500 1rem var(--sans);cursor:pointer;text-align:left;white-space:nowrap} .kit-reg-menu button:hover,.kit-reg-menu button.amb-btn[aria-pressed="true"]:hover{background:var(--soft)} .kit-reg-menu button.amb-btn[aria-pressed="true"]{background:transparent} .kit-reg-menu .amb-etat{margin-left:auto;flex:none;position:relative;width:38px;height:22px;border-radius:999px;border:1.5px solid var(--fg);background:var(--bg)} .kit-reg-menu .amb-etat:after{content:"";position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:var(--fg);transition:transform calc(.25s*var(--k,1)) var(--spring,ease)} .kit-reg-menu .amb-btn[aria-pressed="true"] .amb-etat{background:var(--blue)} .kit-reg-menu .amb-btn[aria-pressed="true"] .amb-etat:after{transform:translateX(16px);background:var(--on-blue)} @media (max-width:899px){.kit-reg-w{display:none}} @media (min-width:900px) and (max-width:1100px){.kit-reg{padding:0 8px 0 7px;gap:4px;font-size:.875rem}} @media (min-width:1241px){.kit-reg{padding:0 9px 0 8px}} /* « Rendez-vous » de l'en-tête : en contour, pour qu'un seul bouton bleu reste dans la première vue */ .kit-actions .btn.sm{background:transparent;color:var(--fg);box-shadow:none}.kit-actions .btn.sm:hover{background:var(--soft);transform:none;box-shadow:none}.kit-actions .btn.sm:active{transform:none}.kit-actions .btn.sm:focus-visible{box-shadow:0 0 0 4px var(--cyan)} @media (min-width:900px) and (max-width:1240px){.kit-header .wrap{gap:6px}} @media (min-width:900px) and (max-width:1100px){.kit-nav a{padding:8px 6px;font-size:.875rem}.amb-btn,.kit-aff{padding:0 8px 0 7px;gap:4px;font-size:.875rem}.kit-actions .btn.sm{padding:6px 12px;font-size:.9375rem}.kit-header .wrap{gap:4px;padding-left:10px}} @media (min-width:1241px){.kit-nav a{padding:8px 8px;font-size:.9375rem}.kit-actions .esp{padding-inline:8px;font-size:.9375rem}.kit-header .wrap{gap:8px}.amb-btn,.kit-aff{padding:0 9px 0 8px;font-size:.9375rem}.kit-actions .btn.sm{padding:6px 14px}} /* curseurs, cases et boutons radio suivent la palette ; les surfaces toujours claires gardent des contrôles clairs, même en sombre */ :root :is(input[type=range],input[type=checkbox],input[type=radio],progress){accent-color:var(--blue)} :root .ot-card :is(input[type=range],input[type=checkbox],input[type=radio],progress){accent-color:var(--blue-fort)} .card-illu__frame,.dossier__sheet,.quote__paper,.portrait__frame,.ot-card,.cd-card,.du-venn{color-scheme:light} /* diagnostic : le titre passait sous la carte (lignes en nowrap, 70 px dans une colonne de 468 px) ; correctif posé ici car la page n'a pas de feuille propre */ @media (min-width:1000px){:root .dg-intro h1{font-size:clamp(2.1rem,2.9vw,2.6rem)}:root .dg-intro h1 .l{white-space:normal}:root .dg-intro h1 .kw{display:inline;white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.06em}:root .dg-intro h1{line-height:1.22}} /* titres de cartes de niveau 2 (ordre des titres) : même aspect que les h3 de carte */ .card-illu__body h2.h2-carte{font-size:1.5rem;font-weight:600;line-height:1.1;margin-bottom:8px;color:var(--p-ink)}.card-illu__body h2.h2-carte:after{content:"";display:block;width:36px;height:4px;margin-top:10px;border-radius:99px;background:var(--p-ink,var(--night))} /* petits écrans : le logo garde sa taille, le nom et le bouton se resserrent (le nom disparaît seulement sous 350 px) */ @media (max-width:420px){.kit-logo{font-size:.9375rem;gap:6px}.kit-header .wrap{gap:4px;padding-left:8px}.kit-actions{gap:4px}.kit-actions .btn{padding:6px 8px;font-size:.8125rem}.kit-menu{width:44px;height:44px}} @media (max-width:349px){.kit-logo .wm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}} /* v27 : un seul orange par écran. Le cachet, l'indice et le trait sous les titres passent à l'encre ou au bleu ; l'orange reste au mot clé */ #piece .ps-cachet{border-color:var(--blue-fort);color:var(--blue-fort)}#piece .ps-mec b{color:var(--blue-fort)} .du-pivot{margin:18px 0 0;font:800 clamp(1.35rem,2.4vw,1.9rem)/1.25 var(--titre);letter-spacing:-.02em;color:inherit;text-wrap:balance} .du-pivot .kw--barre{font-weight:600} .voix{margin:16px 0 0;max-width:420px}.js .voix[hidden]{display:block;visibility:hidden;min-height:124px}.voix[hidden]{display:none}.voix__t{margin:0 0 6px;font:600 .9375rem var(--mono);color:var(--muted)}.voix audio{display:block;width:100%;min-height:44px;accent-color:var(--blue)}.voix__d{margin-top:8px}.voix__d summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:600 .9375rem var(--sans);color:var(--fg)}.voix__d p{margin:4px 0 0;color:var(--fg)}@media(max-width:900px){.ac-s1 .voix{order:5}} /* === V5 début === */ :root:root:where(:not([data-palette]),[data-palette="7"]){--bg:#FAF9F5;--card:#FFFFFF;--zone:#FAF9F5;--band:#FAF9F5;--soft:#F6EFE2;--night:#10224F;--fg:var(--encre,#2A2748);--muted:#55527A;--line:#E3D9C6;--bg-glass:rgba(250,249,245,0.82);--field:#FFFFFF;--field-line:var(--encre,#2A2748);--blue:#3730C9;--on-blue:#FFFFFF;--orange:#FF6B2B;--orange-text:#B13C05;--cyan:#4FD1B0;--cyan-text:#0B6A52;--grid:rgba(55,48,120,0.045);--glow:rgba(90,140,255,.16);--shadow:var(--encre,#2A2748);--fshadow:#3730C9;--zone-grid:rgba(55,48,120,0.07);--cshadow:var(--encre,#2A2748);--blue-vif:#3730C9;--paper-fixe:#FAF9F5;--muted-fixe:#55527A;--blue-fort:#2A24A3;--cyan-fort:#0B6A52;--orange-fort:#B13C05;--tint-bleu:#E1DFFF;--tint-orange:#FFE0D0;--night-rgb:30 27 77;--blue-vif-rgb:55 48 201;--edge-rgb:157 184 255} :root:root:where(:not([data-palette]),[data-palette="7"]) :is(.card-illu,.dossier,.quote,.portrait){--p-paper:#FFFFFF;--p-band:#FFFFFF;--p-grid:rgba(55,48,201,0.1);--p-ink:var(--encre,#2A2748);--p-muted:#55527A;--p-line:#E3D9C6;--ring:#3730C9} :root:root:where(:not([data-palette]),[data-palette="7"]) :is(.ot-card,.card-illu){--muted:#55527A;--fg:var(--encre,#2A2748);--line:#D2CFE8;--soft:#F6EFE2;--card:#FFFFFF;--bg:#FFFFFF;--blue:#3730C9;--on-blue:#FFFFFF;--shadow:var(--encre,#2A2748);--orange-text:#B13C05;--cyan-text:#0B6A52;--field:#FFFFFF;--field-line:var(--encre,#2A2748);--surface-quiet:#E8E6FF;--surface-now:#E8E6FF;--surface-row:#FFFFFF} :root:root:where(:not([data-palette]),[data-palette="7"]) .kw{--kw-ink:var(--encre,#2A2748)} @media (prefers-color-scheme:dark){:root:root:where(:not([data-palette]),[data-palette="7"]):not([data-theme="light"]){--bg:#0A1630;--band:#0A1630;--fg:#EEF3FF;--muted:#B7C3E0;--line:#27406E;--card:#12244C;--soft:#183063;--zone:#12244C;--bg-glass:rgba(10,22,48,0.8);--field:#12244C;--field-line:#9DB8FF;--blue:#9DB8FF;--on-blue:#0A1630;--orange-text:#FF9A6C;--cyan-text:#6FE0C2;--grid:rgba(157,184,255,0.1);--glow:rgba(90,140,255,.18);--shadow:#030A1C;--fshadow:#4A78FF;--zone-grid:rgba(157,184,255,0.14);--cshadow:#2F528F;--night:#0A1630;--edge-rgb:157 184 255;color-scheme:dark}:root:root:where(:not([data-palette]),[data-palette="7"]):not([data-theme="light"]) :is(.card-illu,.dossier,.quote,.portrait){--ring:#6FE0C2}:root:root:where(:not([data-palette]),[data-palette="7"]):not([data-theme="light"]) :is(.ot-card,.card-illu){--muted:#55527A;--fg:var(--encre,#2A2748);--line:#D2CFE8;--soft:#F6EFE2;--card:#FFFFFF;--bg:#FFFFFF;--blue:#3730C9;--on-blue:#FFFFFF;--shadow:var(--encre,#2A2748);--orange-text:#B13C05;--cyan-text:#0B6A52;--field:#FFFFFF;--field-line:var(--encre,#2A2748);--surface-quiet:#E8E6FF;--surface-now:#E8E6FF;--surface-row:#FFFFFF}} :root:root:where(:not([data-palette]),[data-palette="7"])[data-theme="dark"]{--bg:#0A1630;--band:#0A1630;--fg:#EEF3FF;--muted:#B7C3E0;--line:#27406E;--card:#12244C;--soft:#183063;--zone:#12244C;--bg-glass:rgba(10,22,48,0.8);--field:#12244C;--field-line:#9DB8FF;--blue:#9DB8FF;--on-blue:#0A1630;--orange-text:#FF9A6C;--cyan-text:#6FE0C2;--grid:rgba(157,184,255,0.1);--glow:rgba(90,140,255,.18);--shadow:#030A1C;--fshadow:#4A78FF;--zone-grid:rgba(157,184,255,0.14);--cshadow:#2F528F;--night:#0A1630;--edge-rgb:157 184 255;color-scheme:dark}:root:root:where(:not([data-palette]),[data-palette="7"])[data-theme="dark"] :is(.card-illu,.dossier,.quote,.portrait){--ring:#6FE0C2}:root:root:where(:not([data-palette]),[data-palette="7"])[data-theme="dark"] :is(.ot-card,.card-illu){--muted:#55527A;--fg:var(--encre,#2A2748);--line:#D2CFE8;--soft:#F6EFE2;--card:#FFFFFF;--bg:#FFFFFF;--blue:#3730C9;--on-blue:#FFFFFF;--shadow:var(--encre,#2A2748);--orange-text:#B13C05;--cyan-text:#0B6A52;--field:#FFFFFF;--field-line:var(--encre,#2A2748);--surface-quiet:#E8E6FF;--surface-now:#E8E6FF;--surface-row:#FFFFFF} :root:root:where(:not([data-palette]),[data-palette="7"]) .amb-couche{opacity:.3!important} @font-face{font-family:"Public Sans";font-display:swap;font-style:normal;font-weight:400 700;src:url(fonts/public-sans-fr.woff2) format("woff2")} @font-face{font-family:Fraunces;font-display:swap;font-style:normal;font-weight:300 800;size-adjust:90%;src:url(fonts/fraunces-fr.woff2) format("woff2")} @font-face{font-family:Fraunces;font-display:swap;font-style:italic;font-weight:400 700;size-adjust:90%;src:url(fonts/fraunces-italic-fr.woff2) format("woff2")} :root:root:where(:not([data-typo]),[data-typo="6"]){--titre:Fraunces,Georgia,"Times New Roman",serif;--serif:Fraunces,Georgia,"Times New Roman",serif;--sans:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif} :where(:root:root:where(:not([data-typo]),[data-typo="6"])) h1{--wi:800;font-size:clamp(2.4rem,8.8vw,6.4rem);line-height:.95;letter-spacing:-.03em} :where(:root:root:where(:not([data-typo]),[data-typo="6"])) h2{font-size:clamp(1.9rem,5.2vw,3.5rem);font-weight:750;line-height:1;letter-spacing:-.025em} :root:root:where(:not([data-typo]),[data-typo="6"]) .kw{font-family:Fraunces,Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;font-size:1em;padding-bottom:.04em} :root:root:where(:not([data-typo]),[data-typo="6"]) .ink{padding-bottom:.06em;margin-bottom:-.06em}:root:root:where(:not([data-typo]),[data-typo="6"]) .ink:before{bottom:.1em} html:root:root:where(:not([data-ame]),[data-ame="4"]){--grid:transparent;--zone-grid:transparent;counter-reset:chap; --plume:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6C14 2 24 8 38 4S62 3 76 6 104 3 119 5' fill='none' stroke='%232A2748' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); --carte-bord:color-mix(in srgb,var(--blue) 30%,var(--line));--doux4:#55527A} :root:root[data-theme="dark"]:where(:not([data-ame]),[data-ame="4"]){--doux4:#B7C3E0} @media (prefers-color-scheme:dark){:root:root:not([data-theme="light"]):where(:not([data-ame]),[data-ame="4"]){--doux4:#B7C3E0}} :root:root[data-theme="dark"]:where(:not([data-ame]),[data-ame="4"]){--plume:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6C14 2 24 8 38 4S62 3 76 6 104 3 119 5' fill='none' stroke='%23100E2E' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")} @media (prefers-color-scheme:dark){:root:root:not([data-theme="light"]):where(:not([data-ame]),[data-ame="4"]){--plume:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6C14 2 24 8 38 4S62 3 76 6 104 3 119 5' fill='none' stroke='%23100E2E' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}} html:root:root:where(:not([data-ame]),[data-ame="4"]) .mm{display:none} html:root:root:where(:not([data-ame]),[data-ame="4"]) :is(.card-illu__frame,.dossier__sheet,.quote__paper,.cd-card,.du-venn,.fiche){border:1.5px solid var(--carte-bord);border-radius:16px;box-shadow:none} html:root:root:where(:not([data-ame]),[data-ame="4"]) .card-illu__zone{background-image:none!important} html:root:root:where(:not([data-ame]),[data-ame="4"]) .du-venn figcaption{color:var(--muted-fixe)} html:root:root:where(:not([data-ame]),[data-ame="4"]) .tab{background:transparent;color:var(--doux4);box-shadow:none!important;border:0;padding:0 0 6px 2px;margin:0;font:italic 500 1.0625rem/1.2 var(--serif);text-transform:none;letter-spacing:0;border-radius:0} html:root:root:where(:not([data-ame]),[data-ame="4"]) .mono{font:italic 500 1.1875rem/1.35 var(--serif);text-transform:none;letter-spacing:0;color:var(--p-muted,var(--muted))} html:root:root:where(:not([data-ame]),[data-ame="4"]) .btn{box-shadow:none} html:root:root:where(:not([data-ame]),[data-ame="4"]) .btn:hover{box-shadow:none;transform:none} html:root:root:where(:not([data-ame]),[data-ame="4"]) h1,html:root:root:where(:not([data-ame]),[data-ame="4"]) main h2{font-weight:800} html:root:root:where(:not([data-ame]),[data-ame="4"]) body:is([data-page="article"],[data-page="apropos"],[data-page="confidentialite"],[data-page="conditions"]) main h2:not([hidden] *):not(.card-illu *,.dossier *,.quote *,details *,.ot-card *)::before{counter-increment:chap;content:counter(chap,decimal-leading-zero) / "";display:block;width:fit-content;min-width:2.4em;margin-bottom:.5em;padding-bottom:.16em;border-bottom:3px solid var(--blue);font:italic 700 clamp(1.5rem,3.2vw,2.1rem)/1 var(--serif);letter-spacing:-.01em;color:var(--blue)} html:root:root:where(:not([data-ame]),[data-ame="4"]) .kw{padding:0 .14em .12em;background-color:color-mix(in srgb,var(--orange) 50%,#fff);background-image:none} html:root:root:where(:not([data-ame]),[data-ame="4"]) .kw--bleu{background-color:color-mix(in srgb,var(--orange) 50%,#fff);background-image:none} :root:root[data-theme="dark"]:where(:not([data-ame]),[data-ame="4"]) .kw--bleu{background-color:color-mix(in srgb,var(--orange) 62%,#0A1630)} @media (prefers-color-scheme:dark){:root:root:not([data-theme="light"]):where(:not([data-ame]),[data-ame="4"]) .kw--bleu{background-color:color-mix(in srgb,var(--orange) 62%,#0A1630)}} html:root:root:where(:not([data-ame]),[data-ame="4"]) .kw--barre{background:none} html:root:root:where(:not([data-ame]),[data-ame="4"]) .portrait{transform:rotate(-1.8deg);transform-origin:50% 40%;padding-top:0} html:root:root:where(:not([data-ame]),[data-ame="4"]) .portrait>.tab{display:none} html:root:root:where(:not([data-ame]),[data-ame="4"]) .portrait::before{content:"";position:absolute;z-index:5;top:-14px;left:50%;width:112px;height:28px;margin-left:-56px;transform:rotate(-3deg);background:rgb(236 226 200 / .88);box-shadow:0 1px 2px rgb(var(--night-rgb) / .22);clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,16% 8%,20% 0,100% 0,100% 100%,0 100%)} html:root:root:where(:not([data-ame]),[data-ame="4"]) .portrait__frame{background:#fff;border:0;border-radius:3px;padding:12px 12px 0;box-shadow:0 1px 2px rgb(var(--night-rgb) / .2),0 22px 28px -22px rgb(var(--night-rgb) / .55)} html:root:root:where(:not([data-ame]),[data-ame="4"]) .portrait__band{border-radius:2px} html:root:root:where(:not([data-ame]),[data-ame="4"]) .portrait figcaption{padding:14px 6px 18px} html:root:root:where(:not([data-ame]),[data-ame="4"]) .portrait figcaption b{font:italic 700 1.375rem/1.1 var(--serif);color:var(--encre,#2A2748)} html:root:root:where(:not([data-ame]),[data-ame="4"]) .portrait figcaption b::after{display:none} html:root:root:where(:not([data-ame]),[data-ame="4"]) .portrait figcaption{color:#55527A} html:root:root:where(:not([data-ame]),[data-ame="4"]) :is(.sheet,.dg-tm,.film-frame,.es-hero-fig .zone,.es-mini.is-ciel svg,.es-mini i,dialog.es-dlg,.dg-ptag,.dg-tag,.film-ctl .btn,.es-pager a,.es-group a[aria-current=page],.es-seg [role=tab][aria-selected=true],.es-mood label:has(input:checked),.es-pack:has(input:checked)){box-shadow:none} html:root:root:where(:not([data-ame]),[data-ame="4"]) :is(.sheet,.film-frame,.es-hero-fig .zone,.dg-tm,.es-mini.is-ciel svg){border:1.5px solid var(--carte-bord);border-radius:16px} html:root:root:where(:not([data-ame]),[data-ame="4"]) :is(.dg-face){border:1.5px solid var(--carte-bord);box-shadow:none} html:root:root:where(:not([data-ame]),[data-ame="4"]) .dg-flipwrap:before{display:none} html:root:root:where(:not([data-ame]),[data-ame="4"]) .dg-pile:before,html:root:root:where(:not([data-ame]),[data-ame="4"]) .dg-pile:after{border-color:var(--carte-bord)} html:root:root:where(:not([data-ame]),[data-ame="4"]) .dg-tag{transform:none;font:600 1rem/1.35 var(--sans);text-transform:none;border-color:var(--carte-bord);animation:none} html:root:root:where(:not([data-ame]),[data-ame="4"]) .dg-tag:hover{transform:none;background:var(--soft)} html:root:root:where(:not([data-ame]),[data-ame="4"]) .dg-tag b{text-transform:none;letter-spacing:0;font:italic 500 .9375rem/1.3 var(--serif)} html:root:root:where(:not([data-ame]),[data-ame="4"]) .dg-ptag{transform:none;border:1.5px solid var(--carte-bord);font:italic 500 .9375rem/1.2 var(--serif);text-transform:none;letter-spacing:0} html:root:root:where(:not([data-ame]),[data-ame="4"]) .dg-tm-v{font:700 3rem/1 var(--sans)} html:root:root:where(:not([data-ame]),[data-ame="4"]) :is(.es-hint,.es-state,.es-note,.meta,.k,.ou-sc-cap,.ou-sc-box span,.es-vrai h3,.es-group h2,.co-facts li span,.mq-facts li span,figcaption span,.ac-micro,.cd-src,.cd-src span,.dossier__ind,.ps-src,.ps-ind-b,.ps-ind-b span,.ps-trace,.src,.mq-note,.co-prixtab caption,.pv-d,.pv-k){font-family:var(--sans);font-size:max(.9375rem,1em);letter-spacing:0;text-transform:none} html:root:root:where(:not([data-ame]),[data-ame="4"]) .es-group h2{font:italic 500 1.0625rem/1.3 var(--serif);color:var(--doux4)} html:root:root:where(:not([data-ame]),[data-ame="4"]) .es-state{background:transparent;border-color:var(--carte-bord)} html:root:root:where(:not([data-ame]),[data-ame="4"]) .cd-tag{box-shadow:none;transform:none;border:1.5px solid var(--carte-bord);font:italic 500 .9375rem/1.2 var(--serif);text-transform:none;letter-spacing:0} :root:root:where(:not([data-pied]),[data-pied="1"]){--pd-fond:var(--night);--pd-texte:#EEF0F6;--pd-doux:#C9CBEC;--pd-trait:rgb(var(--edge-rgb) / .38);--pd-focus:#fff; --pd-etoile:var(--orange); } :root:root:where(:not([data-pied]),[data-pied="1"])[data-theme="dark"]{--pd-fond:#1B1850} @media (prefers-color-scheme:dark){:root:root:where(:not([data-pied]),[data-pied="1"]):not([data-theme="light"]){--pd-fond:#1B1850}} .kit-footer.kit-pied{margin-top:clamp(56px,8vw,96px);padding:0;border:0;border-radius:0;background:none;color:var(--pd-texte);font-size:1rem;line-height:1.5} .kit-pied .pd{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)} .kit-pied a{color:inherit;text-decoration:none} .kit-pied a:hover{color:inherit;text-decoration:underline;text-underline-offset:4px} .kit-footer.kit-pied :focus-visible{outline:3px solid var(--pd-focus);outline-offset:3px;box-shadow:none;border-radius:6px} .kit-pied ul{list-style:none;margin:0;padding:0} .kit-pied li{display:inline-block} .kit-pied li a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding-inline:2px;margin-right:16px} .pd__h{margin:0;font:.875rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pd-doux)} .pd__plan{display:grid;gap:10px 40px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))} .pd__cert{margin:0;font:600 1.0625rem/1.35 var(--serif)} .pd__leg{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 28px;border-top:1px solid var(--pd-trait);padding-top:14px} .pd__leg .pd__note{flex:1 1 300px} .pd__lien li a{font-weight:600} .pd__note{margin:0;font:1rem/1.45 var(--sans);color:var(--pd-doux)} .pd__btns{display:flex;flex-wrap:wrap;gap:8px} .pd__btns button{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid currentColor;background:none;color:inherit;font:inherit;font-size:.9375rem;cursor:pointer} .pd__btns button:hover{background:rgb(255 255 255 / .1)} @media (min-width:900px){.pd__plan ul li{display:block}.pd__plan li a{margin-right:0}} :root:root .kit-footer.kit-pied--1{border:0} .kit-pied--1 .pd1{padding-bottom:clamp(20px,4vw,40px)} .pd1__carte{position:relative;perspective:1800px;transition:height .7s cubic-bezier(.3,.7,.2,1)} .pd1__dos,.pd1__verso{position:absolute;left:0;right:0;top:0;box-sizing:border-box;border-radius:22px;background:var(--pd-fond);color:var(--pd-texte);border:1.5px solid var(--pd-trait);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .8s cubic-bezier(.3,.7,.2,1),visibility 0s linear .4s} .pd1__dos{display:grid;gap:16px;justify-items:start;text-align:left;padding:clamp(24px,5vw,40px);outline:1px solid var(--pd-trait);outline-offset:-10px} .pd1__marque{display:grid;gap:22px;justify-items:start;align-content:start} .pd1__logo{color:#fff;min-height:44px} .pd1__logo .lg-c{display:block!important}.pd1__logo .lg-n{display:none!important} .kit-footer.kit-pied .pd1__logo:hover{text-decoration:none} .pd1__etoiles{width:112px;height:auto;fill:rgb(var(--edge-rgb) / .62)} .pd1__etoiles .on{fill:var(--pd-etoile)} .pd1__txt{display:grid;gap:14px;justify-items:start;width:100%} .pd1__ct{margin:0;font-size:1.0625rem;line-height:1.5;color:var(--pd-texte)} .pd1__ct a{text-decoration:underline;text-underline-offset:4px;font-weight:600} .pd1__txt .pd__leg{width:100%;box-sizing:border-box;margin-top:2px} .pd1__txt .pd__note{flex-basis:260px} .pd1__q{margin:0;font:700 clamp(1.4rem,3.6vw,2rem)/1.15 var(--serif);letter-spacing:-.02em;color:#fff;text-wrap:balance} .pd1__tour,.pd1__retour{min-height:48px;padding:0 24px;border-radius:999px;border:1.5px solid #fff;background:#fff;color:#10224F;font:600 1.0625rem var(--sans);cursor:pointer} .pd1__retour{margin:6px 0 0;justify-self:start;background:none;color:inherit;border-color:currentColor} .pd1__tour:hover{background:#E8E6FF;border-color:#E8E6FF} .pd1__verso .pd__h{margin-bottom:10px} .pd1__verso{display:grid;gap:18px;padding:clamp(24px,5vw,44px);transform:rotateY(180deg);visibility:hidden} .pd1__cert{margin:0;font:700 clamp(1.4rem,3.6vw,2rem)/1.15 var(--serif);color:#fff} .pd1__carte.ouverte .pd1__dos{transform:rotateY(-180deg);visibility:hidden} .pd1__carte.ouverte .pd1__verso{transform:none;visibility:visible;transition-delay:0s,0s} @media (min-width:900px){.pd1__dos{grid-template-columns:auto 1fr;gap:clamp(24px,5vw,64px);align-items:start}.pd1__etoiles{width:200px}} @media (prefers-reduced-motion:reduce){.pd1__carte,.pd1__dos,.pd1__verso{transition:none!important}} .decor-fige .pd1__carte,.decor-fige .pd1__dos,.decor-fige .pd1__verso{transition:none!important} /* === V5 fin === */ /* grands écrans : on utilise la largeur disponible (avant : 1160 px fixes, soit 40 % de vide à 1920) */ @media(min-width:1400px){:root{--max:1300px}} @media(min-width:1700px){:root{--max:1480px}} /* ===== it. 13 : boîte de dialogue « Réglages » (kit.js) ===== */ .reg-btn-m{display:none} @media (max-width:899px){.reg-btn-m{display:flex}} .kit-rg{box-sizing:border-box;position:fixed;inset:76px 16px auto auto;margin:0;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 92px);overflow:auto;overscroll-behavior:contain;padding:20px 22px 18px;border:1.5px solid var(--fg);border-radius:18px;background:var(--bg);color:var(--fg);box-shadow:4px 4px 0 var(--fg);font:400 1rem/1.45 var(--sans)} .kit-rg:not([open]){display:none} .kit-rg::backdrop{background:rgb(16 14 46 / .22)} .kit-rg *{box-sizing:border-box} .rg-tete{display:flex;align-items:center;justify-content:space-between;gap:12px} .kit-rg .rg-t{margin:0;font:700 1.5rem/1.15 var(--serif);letter-spacing:-.01em;color:var(--fg)} .rg-x{flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--fg);background:transparent;color:var(--fg);font:400 1.6rem/1 var(--sans);cursor:pointer;display:grid;place-items:center} .rg-x:hover{background:var(--soft)} .rg-s{margin:4px 0 14px;color:var(--muted);font-size:.9375rem} .rg-ap{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:14px;align-items:center;padding:14px;border:1.5px solid color-mix(in srgb,var(--fg) 22%,transparent);border-radius:14px;margin-bottom:6px} .rg-ap-t{margin:0;font:700 1.375rem/1.2 var(--serif);color:var(--fg)} .rg-ap-p{margin:6px 0 0;font-size:1rem;color:var(--muted)} .rg-ap-ill{display:block;border-radius:12px;padding:6px;background-color:var(--illbg)} .rg-ap-ill img{display:block;width:100%;height:auto} .rg-g{border:0;margin:0;padding:14px 0 4px;min-width:0} .rg-g+.rg-g{border-top:1px solid color-mix(in srgb,var(--fg) 14%,transparent)} .rg-lg{float:left;width:100%;padding:0;margin:0 0 8px;font:600 1rem/1.3 var(--sans);color:var(--fg)} .rg-lg+*{clear:both} .rg-aide{margin:-4px 0 8px;font-size:.875rem;color:var(--muted)} .rg-ch{display:flex;flex-wrap:wrap;gap:8px} .rg-o{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border:1.5px solid color-mix(in srgb,var(--fg) 30%,transparent);border-radius:999px;cursor:pointer;font-size:.9375rem;line-height:1.2;background:transparent;color:var(--fg)} .rg-o:hover{background:var(--soft)} .rg-o input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer} .rg-o:has(input:checked){border-color:var(--fg);background:var(--soft);font-weight:600;box-shadow:inset 0 0 0 1px var(--fg)} .rg-o:has(input:checked)::after{content:"";width:6px;height:11px;border:solid var(--fg);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-2px);margin-left:2px} .rg-o:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px} .rg-sans-trait .rg-g:nth-of-type(2) .rg-ch{opacity:.55} .rg-sw{flex:none} .rg-sw-hl{font:italic 700 .9375rem/1 var(--serif);padding:2px 4px 1px;border-radius:3px;color:var(--encre,#2A2748);background-image:linear-gradient(178deg,transparent 52%,var(--sw) 52%,var(--sw) 92%,transparent 92%)} .rg-sw-hl[data-v=orange]{--sw:#FF6B35}.rg-sw-hl[data-v=indigo]{--sw:#BDBCE3}.rg-sw-hl[data-v=sable]{--sw:#EADFC8} .rg-sw-hl[data-v=encre]{text-decoration:underline 2px;text-underline-offset:3px;color:var(--fg)} .rg-sw-hl[data-v=aucun]{color:var(--fg)} :root[data-theme=dark] .rg-sw-hl:not([data-v=encre]):not([data-v=aucun]){color:#EEF3FF} :root[data-theme=dark] .rg-sw-hl[data-v=orange]{--sw:#9F4632}:root[data-theme=dark] .rg-sw-hl[data-v=indigo]{--sw:#44418F}:root[data-theme=dark] .rg-sw-hl[data-v=sable]{--sw:#514D5C} @media (prefers-color-scheme:dark){:root:not([data-theme=light]) .rg-sw-hl:not([data-v=encre]):not([data-v=aucun]){color:#EEF3FF}:root:not([data-theme=light]) .rg-sw-hl[data-v=orange]{--sw:#9F4632}:root:not([data-theme=light]) .rg-sw-hl[data-v=indigo]{--sw:#44418F}:root:not([data-theme=light]) .rg-sw-hl[data-v=sable]{--sw:#514D5C}} .rg-sw-f{width:20px;height:20px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--fg) 45%,transparent)} .rg-sw-f[data-v=ivoire]{background:#F7F3EA}.rg-sw-f[data-v=sable]{background:#EADFC8}.rg-sw-f[data-v=blanc]{background:#fff}.rg-sw-f[data-v=indigo]{background:#E6E4F5}.rg-sw-f[data-v=encre]{background:var(--encre,#2A2748)} .rg-sws{display:grid;gap:4px;padding-bottom:8px} .rg-sr{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px} .rg-st{display:grid;gap:1px}.rg-st b{font-weight:600}.rg-st small{font-size:.875rem;color:var(--muted)} .rg-sw-b{flex:none;position:relative;width:52px;height:32px;border-radius:999px;border:1.5px solid var(--fg);background:var(--bg);cursor:pointer;padding:0} .rg-sw-b::before{content:"";position:absolute;inset:-6px -2px} .rg-knob{position:absolute;top:4px;left:4px;width:21px;height:21px;border-radius:50%;background:var(--fg);transition:transform calc(.2s*var(--k,1)) ease} .rg-sw-b[aria-checked=true]{background:var(--fg)} .rg-sw-b[aria-checked=true] .rg-knob{transform:translateX(20px);background:var(--bg)} .rg-sw-b:focus-visible,.rg-x:focus-visible,.rg-plus:focus-visible,.rg-pied button:focus-visible{outline:3px solid var(--blue);outline-offset:2px} .rg-plus{display:block;width:100%;min-height:44px;margin:6px 0 0;padding:10px 0;border:0;border-top:1px solid color-mix(in srgb,var(--fg) 14%,transparent);background:transparent;color:var(--fg);font:500 1rem var(--sans);text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .rg-pied{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px} .rg-pied button{min-height:44px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--fg);background:transparent;color:var(--fg);font:600 .9375rem var(--sans);cursor:pointer} .rg-pied button:hover{background:var(--soft)} .rg-pied .rg-raz{flex:1 1 auto} .rg-vu{margin:8px 0 0;min-height:1.2em;font-size:.875rem;color:var(--muted)} @media (max-width:899px){ .kit-rg{inset:auto 0 0 0;width:100%;max-width:none;max-height:88dvh;border-radius:18px 18px 0 0;border-width:1.5px 0 0;box-shadow:0 -6px 24px rgb(0 0 0 / .18);padding:16px 16px calc(16px + env(safe-area-inset-bottom))} .rg-ap{grid-template-columns:minmax(0,1fr) 92px} } /* ===== it. 14 : bannière de consentement (kit.js, .cs) et compléments du pied ===== */ .cs{position:fixed;z-index:80;left:16px;bottom:16px;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;box-sizing:border-box;background:var(--card);color:var(--fg);border:1.5px solid var(--fg);border-radius:18px;box-shadow:0 18px 40px -16px rgb(12 24 52 / .45)} .cs[hidden]{display:none} .cs *{box-sizing:border-box} .cs-in{padding:18px 20px 14px} .cs-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .cs .cs-t{margin:0;font:700 1.375rem/1.2 var(--serif);letter-spacing:-.01em;color:var(--fg)} .cs-t:focus{outline:none}.cs-t:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px} .cs-x{flex:none;width:44px;height:44px;margin:-8px -8px 0 0;border-radius:50%;border:1.5px solid var(--fg);background:transparent;color:var(--fg);font:400 1.5rem/1 var(--sans);cursor:pointer;display:grid;place-items:center} .cs-x[hidden]{display:none} .cs-p{margin:8px 0 0;font-size:1rem;line-height:1.5;color:var(--fg)} .cs-act{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} .cs-b{min-height:48px;padding:10px 14px;border-radius:999px;border:1.5px solid var(--fg);background:transparent;color:var(--fg);font:600 1rem/1.2 var(--sans);cursor:pointer} .cs-b:hover,.cs-x:hover{background:var(--soft)} .cs-b[hidden],.cs-perso[hidden]{display:none} .cs-perso{grid-column:1/-1;justify-self:start;min-height:44px;padding:0 2px;border:0;background:none;color:var(--fg);font:500 1rem var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer} .cs :is(.cs-b,.cs-perso,.cs-x,.rg-sw-b,a):focus-visible{outline:3px solid var(--blue);outline-offset:2px} .cs-pl{margin:6px 0 0;font-size:.875rem;line-height:1.45;color:var(--muted)} .cs-pl a{color:var(--fg);font-weight:600;text-underline-offset:3px;display:inline-block;padding-block:6px} .cs-det[hidden]{display:none} .cs-cats{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid color-mix(in srgb,var(--fg) 14%,transparent)} .cs-cat{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--fg) 14%,transparent)} .cs-cat .rg-st small{display:block} .cs-tj{flex:none;font:.8125rem var(--mono);letter-spacing:.04em;color:var(--muted)} .cs--det .cs-act{grid-template-columns:1fr 1fr} :root.cs-ouvert .kit-bar{display:none!important} :root.cs-ouvert body{padding-bottom:calc(var(--cs-h,0px) + 24px)} @media (max-width:899px){ .cs{left:0;right:0;bottom:0;width:100%;max-height:85dvh;border-radius:18px 18px 0 0;border-width:1.5px 0 0;box-shadow:0 -8px 24px rgb(0 0 0 / .18)} .cs-in{padding:14px 16px calc(12px + env(safe-area-inset-bottom))} .cs .cs-t{font-size:1.25rem} .cs-p{font-size:.9375rem} } @media (max-width:359px){.cs-act{grid-template-columns:1fr}} /* pied : « Gérer mes choix » a l'allure d'un lien ; réseaux et droits */ .kit-pied li .cs-gerer{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;margin-right:16px;border:0;background:none;color:inherit;font:600 1rem var(--sans);cursor:pointer} .kit-pied li .cs-gerer:hover{text-decoration:underline;text-underline-offset:4px} .kit-footer:not(.kit-pied) li .cs-gerer{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .pd__fin{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px} .pd__res li a{margin-right:20px} .pd__droits{margin:0;font-size:.9375rem;color:var(--pd-doux)} /* Réglages : ligne des témoins */ .rg-cs .rg-sr{gap:12px} .rg-cs-b{flex:none;min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--fg);background:transparent;color:var(--fg);font:600 .9375rem var(--sans);cursor:pointer} .rg-cs-b:hover{background:var(--soft)} .rg-cs-b:focus-visible{outline:3px solid var(--blue);outline-offset:2px} /* ===== it. 16 : univers de couleurs (data-univers) et structure du fond (data-trame), choisis dans les Réglages (17.10.2026) ===== changebooster = couleurs actuelles ; foret et bordeaux redéfinissent les jetons ; fond de page #FCFCFA dans les trois (mode clair). Contrastes vérifiés (AA) : texte, texte secondaire, liens, texte blanc sur bouton, en clair et en sombre. */ :root:root[data-univers][data-theme="light"]{--bg:#FCFCFA;--bg-glass:rgba(252,252,250,.82)} @media (prefers-color-scheme:light){:root:root[data-univers]:not([data-theme="dark"]){--bg:#FCFCFA;--bg-glass:rgba(252,252,250,.82)}} :root:root[data-univers="foret"]{ --night:#1F3A2E;--night-rgb:31 58 46;--fg:#1F3A2E;--muted:#4A5C51;--muted-fixe:#4A5C51;--line:#cdd8cf;--field-line:#1F3A2E; --soft:#DCE3D3;--surface-quiet:#DCE3D3;--surface-now:#DCE3D3;--tint-bleu:#DCE3D3; --blue:#2E6B4F;--blue-vif:#2E6B4F;--blue-fort:#1F3A2E;--blue-vif-rgb:46 107 79;--on-blue:#ffffff; --shadow:#1F3A2E;--cshadow:#1F3A2E;--fshadow:#2E6B4F;--grid:rgba(31,58,46,.07);--zone-grid:rgba(31,58,46,.1);--edge-rgb:120 170 140} :root:root[data-univers="bordeaux"]{ --night:#4A1C2C;--night-rgb:74 28 44;--fg:#4A1C2C;--muted:#6A4A55;--muted-fixe:#6A4A55;--line:#ddcfd3;--field-line:#4A1C2C; --soft:#ECE4E1;--surface-quiet:#ECE4E1;--surface-now:#ECE4E1;--tint-bleu:#ECE4E1; --blue:#8A2F4A;--blue-vif:#8A2F4A;--blue-fort:#6B2238;--blue-vif-rgb:138 47 74;--on-blue:#ffffff; --shadow:#4A1C2C;--cshadow:#4A1C2C;--fshadow:#8A2F4A;--grid:rgba(74,28,44,.07);--zone-grid:rgba(74,28,44,.1);--edge-rgb:200 140 160} @media (prefers-color-scheme:dark){ :root:root[data-univers="foret"]:not([data-theme="light"]){--bg:#14261D;--band:#14261D;--card:#1F3A2E;--zone:#1F3A2E;--field:#1F3A2E;--soft:#23453A;--surface-quiet:#23453A;--surface-now:#23453A;--fg:#EEF2EE;--muted:#B5C7BA;--line:#2f4a3d;--blue:#8FD1B0;--on-blue:#14261D;--field-line:#8FD1B0;--bg-glass:rgba(20,38,29,.82);--grid:rgba(143,209,176,.1);--zone-grid:rgba(143,209,176,.14);--shadow:#07110c;--cshadow:#2E6B4F;--fshadow:#8FD1B0} :root:root[data-univers="bordeaux"]:not([data-theme="light"]){--bg:#26101A;--band:#26101A;--card:#3A1A26;--zone:#3A1A26;--field:#3A1A26;--soft:#4A2230;--surface-quiet:#4A2230;--surface-now:#4A2230;--fg:#F6ECEE;--muted:#D8B9C2;--line:#5a2e3d;--blue:#F2A7BC;--on-blue:#26101A;--field-line:#F2A7BC;--bg-glass:rgba(38,16,26,.82);--grid:rgba(242,167,188,.1);--zone-grid:rgba(242,167,188,.14);--shadow:#12060b;--cshadow:#8A2F4A;--fshadow:#F2A7BC}} :root:root[data-univers="foret"][data-theme="dark"]{--bg:#14261D;--band:#14261D;--card:#1F3A2E;--zone:#1F3A2E;--field:#1F3A2E;--soft:#23453A;--surface-quiet:#23453A;--surface-now:#23453A;--fg:#EEF2EE;--muted:#B5C7BA;--line:#2f4a3d;--blue:#8FD1B0;--on-blue:#14261D;--field-line:#8FD1B0;--bg-glass:rgba(20,38,29,.82);--grid:rgba(143,209,176,.1);--zone-grid:rgba(143,209,176,.14);--shadow:#07110c;--cshadow:#2E6B4F;--fshadow:#8FD1B0} :root:root[data-univers="bordeaux"][data-theme="dark"]{--bg:#26101A;--band:#26101A;--card:#3A1A26;--zone:#3A1A26;--field:#3A1A26;--soft:#4A2230;--surface-quiet:#4A2230;--surface-now:#4A2230;--fg:#F6ECEE;--muted:#D8B9C2;--line:#5a2e3d;--blue:#F2A7BC;--on-blue:#26101A;--field-line:#F2A7BC;--bg-glass:rgba(38,16,26,.82);--grid:rgba(242,167,188,.1);--zone-grid:rgba(242,167,188,.14);--shadow:#12060b;--cshadow:#8A2F4A;--fshadow:#F2A7BC} /* structure du fond de page : papier (grain, actuel), quadrillage, points, lignes, uni */ :root{--trame:color-mix(in srgb,var(--fg) 9%,transparent)} :root[data-trame="quadrillage"] body{background-image:var(--grain),linear-gradient(var(--trame) 1px,transparent 1px),linear-gradient(90deg,var(--trame) 1px,transparent 1px);background-size:auto,40px 40px,40px 40px} :root[data-trame="points"] body{background-image:var(--grain),radial-gradient(color-mix(in srgb,var(--fg) 18%,transparent) 1.2px,transparent 1.7px);background-size:auto,22px 22px} :root[data-trame="lignes"] body{background-image:var(--grain),repeating-linear-gradient(transparent 0 31px,var(--trame) 31px 32px)} :root[data-trame="uni"] body{background-image:none} .rg-sw-u{width:22px;height:22px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--fg) 45%,transparent);background:linear-gradient(135deg,var(--u1) 0 55%,#FF6B35 55% 100%)} .rg-sw-u[data-v=changebooster]{--u1:#0C1834}.rg-sw-u[data-v=foret]{--u1:#1F3A2E}.rg-sw-u[data-v=bordeaux]{--u1:#4A1C2C} .rg-sw-t{width:22px;height:22px;border-radius:6px;border:1.5px solid color-mix(in srgb,var(--fg) 45%,transparent);background-color:#FCFCFA;--c:rgba(12,24,52,.35)} .rg-sw-t[data-v=quadrillage]{background-image:linear-gradient(var(--c) 1px,transparent 1px),linear-gradient(90deg,var(--c) 1px,transparent 1px);background-size:6px 6px} .rg-sw-t[data-v=points]{background-image:radial-gradient(var(--c) 1px,transparent 1.4px);background-size:5px 5px} .rg-sw-t[data-v=lignes]{background-image:repeating-linear-gradient(transparent 0 4px,var(--c) 4px 5px)} .rg-sw-t[data-v=papier]{background-image:var(--grain);background-color:#F4EFE4} /* it. 16 : encre des univers (couleurs écrites en dur raccordées à --encre) */ :root:root[data-univers="foret"]{--encre:#1F3A2E;--k-plein:#1F3A2E;--k-ombre:#2E6B4F;--k-bord:#1F3A2E}:root:root[data-univers="bordeaux"]{--encre:#4A1C2C;--k-plein:#4A1C2C;--k-ombre:#8A2F4A;--k-bord:#4A1C2C} /* ===== it. 35 : ambiance « Tech » + cartes d'ambiance dans les Réglages (22.10.2026) ===== */ :root:root[data-univers="tech"]{ --night:#0B2233;--night-rgb:11 34 51;--fg:#0B2233;--muted:#46586A;--muted-fixe:#46586A;--line:#cfd9e2;--field-line:#0B2233; --soft:#DDE8F0;--surface-quiet:#DDE8F0;--surface-now:#DDE8F0;--tint-bleu:#DDE8F0; --blue:#0A6FB8;--blue-vif:#0A6FB8;--blue-fort:#074F85;--blue-vif-rgb:10 111 184;--on-blue:#ffffff; --shadow:#0B2233;--cshadow:#0B2233;--fshadow:#0A6FB8;--grid:rgba(11,34,51,.07);--zone-grid:rgba(11,34,51,.1);--edge-rgb:120 170 200} :root:root[data-univers="tech"][data-theme="light"]{--bg:#F5F8FB;--bg-glass:rgba(245,248,251,.82)} @media (prefers-color-scheme:light){:root:root[data-univers="tech"]:not([data-theme="dark"]){--bg:#F5F8FB;--bg-glass:rgba(245,248,251,.82)}} @media (prefers-color-scheme:dark){ :root:root[data-univers="tech"]:not([data-theme="light"]){--bg:#0A1620;--band:#0A1620;--card:#12263A;--zone:#12263A;--field:#12263A;--soft:#183349;--surface-quiet:#183349;--surface-now:#183349;--fg:#E8F1F8;--muted:#A9BFD0;--line:#254258;--blue:#5CC8FF;--on-blue:#0A1620;--field-line:#5CC8FF;--bg-glass:rgba(10,22,32,.82);--grid:rgba(92,200,255,.1);--zone-grid:rgba(92,200,255,.14);--shadow:#04090e;--cshadow:#0A6FB8;--fshadow:#5CC8FF}} :root:root[data-univers="tech"][data-theme="dark"]{--bg:#0A1620;--band:#0A1620;--card:#12263A;--zone:#12263A;--field:#12263A;--soft:#183349;--surface-quiet:#183349;--surface-now:#183349;--fg:#E8F1F8;--muted:#A9BFD0;--line:#254258;--blue:#5CC8FF;--on-blue:#0A1620;--field-line:#5CC8FF;--bg-glass:rgba(10,22,32,.82);--grid:rgba(92,200,255,.1);--zone-grid:rgba(92,200,255,.14);--shadow:#04090e;--cshadow:#0A6FB8;--fshadow:#5CC8FF} :root:root[data-univers="tech"]{--encre:#0B2233;--k-plein:#0B2233;--k-ombre:#0A6FB8;--k-bord:#0B2233} .rg-sw-u[data-v=tech]{--u1:#0B2233} /* cartes d'ambiance */ .kit-rg .rg-g:has(.rg-amb) .rg-ch{display:grid;grid-template-columns:1fr 1fr;gap:10px} .rg-o.rg-amb{flex-direction:column;align-items:stretch;gap:8px;padding:8px;border-radius:14px;min-height:0;text-align:left} .rg-o.rg-amb:has(input:checked)::after{content:none} .rg-amb-sw{position:relative;display:flex;align-items:center;justify-content:space-between;height:58px;padding:0 12px;border-radius:9px;border:1px solid rgb(0 0 0 / .12);overflow:hidden;background-color:var(--a-bg)} .rg-amb-sw b{font:700 1.7rem/1 var(--a-font);color:var(--a-ink)} .rg-amb-sw i{width:16px;height:16px;border-radius:50%;background:var(--a-acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--a-acc) 28%,transparent)} .rg-amb-sw[data-v=changebooster]{--a-bg:#F4EFE4;--a-ink:#0C1834;--a-acc:#FF6B35;--a-font:Fraunces,Georgia,serif;background-image:var(--grain)} .rg-amb-sw[data-v=foret]{--a-bg:#EEF2E8;--a-ink:#1F3A2E;--a-acc:#2E6B4F;--a-font:Fraunces,Georgia,serif;background-image:radial-gradient(rgb(31 58 46 / .28) 1.2px,transparent 1.7px);background-size:10px 10px} .rg-amb-sw[data-v=bordeaux]{--a-bg:#F7F0EE;--a-ink:#4A1C2C;--a-acc:#8A2F4A;--a-font:"Crimson Pro",Georgia,serif;background-image:repeating-linear-gradient(transparent 0 9px,rgb(74 28 44 / .2) 9px 10px)} .rg-amb-sw[data-v=tech]{--a-bg:#F5F8FB;--a-ink:#0B2233;--a-acc:#0A6FB8;--a-font:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;background-image:linear-gradient(rgb(11 34 51 / .14) 1px,transparent 1px),linear-gradient(90deg,rgb(11 34 51 / .14) 1px,transparent 1px);background-size:10px 10px} .rg-amb-t{display:flex;flex-direction:column;gap:2px;padding:0 2px 2px} .rg-amb-t b{font:700 1rem/1.2 var(--sans);color:var(--fg)} .rg-amb-t small{font:400 .8125rem/1.3 var(--sans);color:var(--muted)} .rg-det{margin:8px 0 0;border-top:1px solid color-mix(in srgb,var(--fg) 14%,transparent)} .rg-det>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:6px 0;cursor:pointer;font:600 1rem/1.3 var(--sans);color:var(--fg);list-style:none} .rg-det>summary::-webkit-details-marker{display:none} .rg-det>summary:after{content:"";width:9px;height:9px;border:solid var(--fg);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s;margin-right:4px} .rg-det[open]>summary:after{transform:rotate(-135deg)} .rg-det>summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px} /* it. 36 : logo sans cadre, avec une vraie réaction au survol, au clic et au clavier */ .kit-logo .tile{background:none!important;box-shadow:none!important;border-radius:0;overflow:visible} .kit-logo .wm{position:relative;background:linear-gradient(var(--orange,#FF6B35),var(--orange,#FF6B35)) 0 100%/0 3px no-repeat;padding-bottom:2px;transition:background-size calc(.35s*var(--k)) ease,color .2s} .kit-logo:hover .wm,.kit-logo:focus-visible .wm{background-size:100% 3px} .kit-logo:hover .tile,.kit-logo:focus-visible .tile{animation:kitLogoBoost calc(.6s*var(--k)) var(--spring,cubic-bezier(.34,1.56,.64,1)) both} .kit-logo:active .tile{transform:scale(.9) rotate(4deg);animation:none} @keyframes kitLogoBoost{0%{transform:scale(1) rotate(0)}45%{transform:scale(1.22) rotate(-9deg)}100%{transform:scale(1.1) rotate(-4deg)}} .kit-logo:focus-visible{outline:3px solid var(--orange,#FF6B35);outline-offset:4px;border-radius:12px} @media (prefers-reduced-motion:reduce){.kit-logo:hover .tile,.kit-logo:focus-visible .tile{animation:none;transform:scale(1.08)}} /* it. 37 : statut coach connecté */ .kit-user{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--fg);padding:4px 10px 4px 4px;border-radius:99px;border:1.5px solid var(--line);background:var(--card)} .kit-user b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:.85rem} :root[data-theme=dark] .kit-user b{color:var(--bg)} @media(prefers-color-scheme:dark){:root:not([data-theme=light]) .kit-user b{color:var(--bg)}} :root[data-statut=coach] .kit-actions .btn.sm{display:none} .kit-user span{display:none}.kit-user{padding:4px}.kit-user:hover span,.kit-user:focus-within span{display:none} #apercu-barre .ap-st button{padding:4px 12px;min-height:28px;background:none;border:0;color:inherit;font:inherit;cursor:pointer} #apercu-barre .ap-st button[aria-pressed=true]{background:#F7F3EA;color:#2A2748} /* en-tête sur une seule ligne de 1241 à 1560 px : liens resserrés, « Réglages » ne passe plus dessous */ @media (min-width:1301px) and (max-width:1560px){.kit-header .wrap{gap:8px;flex-wrap:nowrap}.kit-nav{flex-wrap:nowrap;gap:2px}.kit-nav a{padding:8px 10px;font-size:.9375rem;white-space:nowrap}.kit-actions{flex:none}.kit-actions .esp{padding:8px 10px}} @media (min-width:1301px) and (max-width:1560px){.kit-logo{flex:none}.kit-nav{min-width:0;margin-left:auto}} @media (min-width:1301px) and (max-width:1420px){.kit-nav a{padding:8px 7px;font-size:.875rem}.kit-actions .esp{padding:8px 8px;font-size:.875rem}} /* texte « grand » : l'en-tête garde ses mesures (en pixels) au-dessus de 1300 px, sinon « Réglages » passe sous le menu */ @media (min-width:1301px){html[data-fs="grande"] .kit-header .wrap{gap:8px;flex-wrap:nowrap}html[data-fs="grande"] .kit-nav{flex-wrap:nowrap;gap:2px;min-width:0;margin-left:auto}html[data-fs="grande"] .kit-nav a{padding:8px 7px;font-size:14px;white-space:nowrap}html[data-fs="grande"] .kit-actions{flex:none}html[data-fs="grande"] .kit-actions .esp{padding:8px 8px;font-size:14px}html[data-fs="grande"] .kit-logo{flex:none}} /* Espace et vue coach en sombre : les cartes « papier » (card-illu, ot-card) suivent le thème nuit, bleu profond, au lieu de rester blanches */ :root[data-theme="dark"] :is(.es-main,.co-top) :is(.card-illu,.ot-card){--muted:#B7C3E0;--fg:#EEF3FF;--line:#27406E;--soft:#183063;--card:#12244C;--bg:#12244C;--p-paper:#12244C;--p-band:#12244C;--p-ink:#EEF3FF;--p-muted:#B7C3E0;--p-line:#27406E;--p-grid:rgba(157,184,255,.10);--p-shadow:#030A1C;--blue:#9DB8FF;--on-blue:#0A1630;--shadow:#030A1C;--orange-text:#FF9A6C;--cyan-text:#6FE0C2;--field:#12244C;--field-line:#9DB8FF;--surface-quiet:#183063;--surface-now:#183063;--surface-row:#12244C} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.es-main,.co-top) :is(.card-illu,.ot-card){--muted:#B7C3E0;--fg:#EEF3FF;--line:#27406E;--soft:#183063;--card:#12244C;--bg:#12244C;--p-paper:#12244C;--p-band:#12244C;--p-ink:#EEF3FF;--p-muted:#B7C3E0;--p-line:#27406E;--p-grid:rgba(157,184,255,.10);--p-shadow:#030A1C;--blue:#9DB8FF;--on-blue:#0A1630;--shadow:#030A1C;--orange-text:#FF9A6C;--cyan-text:#6FE0C2;--field:#12244C;--field-line:#9DB8FF;--surface-quiet:#183063;--surface-now:#183063;--surface-row:#12244C}} :root[data-theme="dark"] :is(.es-main,.co-top) .sx-as,:root[data-theme="dark"] :is(.es-main,.co-top) .hi-c,:root[data-theme="dark"] :is(.es-main,.co-top) .rt-sc,:root[data-theme="dark"] :is(.es-main,.co-top) .cd-prev,:root[data-theme="dark"] :is(.es-main,.co-top) .rt-gap{background:#183063!important;color:#EEF3FF!important;border-color:#27406E!important}:root[data-theme="dark"] :is(.es-main,.co-top) .sx-as .es-sub,:root[data-theme="dark"] :is(.es-main,.co-top) .sx-as p{color:#B7C3E0!important}:root[data-theme="dark"] :is(.es-main,.co-top) .hi-weeks i,:root[data-theme="dark"] :is(.es-main,.co-top) .rt-bars span,:root[data-theme="dark"] :is(.es-main,.co-top) .rt-bar,:root[data-theme="dark"] :is(.es-main,.co-top) .rt-delta,:root[data-theme="dark"] :is(.es-main,.co-top) .rt-mini span{background:#27406E!important;color:#EEF3FF!important}:root[data-theme="dark"] :is(.es-main,.co-top) .hi-weeks i.on{background:#9DB8FF!important}:root[data-theme="dark"] :is(.es-main,.co-top) .hi-weeks i.cur{background:#FF9A6C!important}:root[data-theme="dark"] :is(.es-main,.co-top) .cd-pt:hover,:root[data-theme="dark"] :is(.es-main,.co-top) .cd-l:hover,:root[data-theme="dark"] :is(.es-main,.co-top) .sx-lk:hover{background:#183063!important} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.es-main,.co-top) .sx-as,:root:not([data-theme="light"]) :is(.es-main,.co-top) .hi-c,:root:not([data-theme="light"]) :is(.es-main,.co-top) .rt-sc,:root:not([data-theme="light"]) :is(.es-main,.co-top) .cd-prev,:root:not([data-theme="light"]) :is(.es-main,.co-top) .rt-gap{background:#183063!important;color:#EEF3FF!important;border-color:#27406E!important}:root:not([data-theme="light"]) :is(.es-main,.co-top) .sx-as .es-sub,:root:not([data-theme="light"]) :is(.es-main,.co-top) .sx-as p{color:#B7C3E0!important}:root:not([data-theme="light"]) :is(.es-main,.co-top) .hi-weeks i,:root:not([data-theme="light"]) :is(.es-main,.co-top) .rt-bars span,:root:not([data-theme="light"]) :is(.es-main,.co-top) .rt-bar,:root:not([data-theme="light"]) :is(.es-main,.co-top) .rt-delta,:root:not([data-theme="light"]) :is(.es-main,.co-top) .rt-mini span{background:#27406E!important;color:#EEF3FF!important}:root:not([data-theme="light"]) :is(.es-main,.co-top) .hi-weeks i.on{background:#9DB8FF!important}:root:not([data-theme="light"]) :is(.es-main,.co-top) .hi-weeks i.cur{background:#FF9A6C!important}:root:not([data-theme="light"]) :is(.es-main,.co-top) .cd-pt:hover,:root:not([data-theme="light"]) :is(.es-main,.co-top) .cd-l:hover,:root:not([data-theme="light"]) :is(.es-main,.co-top) .sx-lk:hover{background:#183063!important}}