:root{--tool-ink:#11110f;--tool-paper:#f4f0e7;--tool-white:#fffdf8;--tool-red:#e84435;--tool-blue:#315dd8;--tool-yellow:#ffd743;--tool-green:#24966a;--tool-orange:#f28c28;--tool-cyan:#66c6c0;--tool-pink:#e98ba4;--tool-border:2px solid var(--tool-ink);--tool-shadow:6px 6px 0 var(--tool-ink)}
*{box-sizing:border-box}.page-tools{width:100%;max-width:100%;overflow-x:clip;color:var(--tool-ink);background:var(--tool-paper)}.page-tools main,.page-tools .tool-hero,.page-tools .tool-mode-nav{width:100%;max-width:100%}.page-tools main{display:block;overflow-x:clip}.page-tools #footer-placeholder{background:var(--tool-paper)}.tool-shell{width:min(calc(100% - 40px),1320px);max-width:calc(100% - 40px);margin-right:auto;margin-left:auto}
.tool-mode-nav{position:sticky;z-index:50;top:var(--mobile-header-h,80px);border-bottom:var(--tool-border);background:var(--tool-paper);transition:transform .4s var(--ease-std)}.tool-mode-nav.is-tool-nav-hidden{transform:translateY(calc(-100% - var(--mobile-header-h,80px) - 2px))}.tool-nav-inner{display:flex;align-items:stretch;padding:0}.tool-nav-direct,.tool-nav-group>summary{display:flex;min-height:52px;align-items:center;gap:8px;padding:0 17px;border-right:1px solid var(--tool-ink);cursor:pointer;white-space:nowrap;font:700 10px/1 var(--font-text);letter-spacing:.1em;text-transform:uppercase;list-style:none}.tool-nav-group>summary::-webkit-details-marker{display:none}.tool-nav-direct[aria-current=page],.tool-nav-group[data-current=true]>summary,.tool-nav-direct:hover,.tool-nav-group>summary:hover{color:#fff;background:var(--tool-ink)}.tool-nav-group{position:relative}.tool-nav-dropdown{position:absolute;z-index:80;top:100%;left:0;display:none;width:300px;border:var(--tool-border);background:var(--tool-white);box-shadow:var(--tool-shadow)}.tool-nav-group[open] .tool-nav-dropdown,.tool-nav-group:hover .tool-nav-dropdown,.tool-nav-group:focus-within .tool-nav-dropdown{display:block}.tool-nav-dropdown a{display:block;padding:14px 17px;border-bottom:1px solid var(--tool-ink);font:500 13px/1.25 var(--font-text)}.tool-nav-dropdown a:last-child{border-bottom:0}.tool-nav-dropdown a:hover,.tool-nav-dropdown a[aria-current=page]{color:#fff;background:var(--tool-blue)}
.tool-hero{padding:clamp(45px,7vw,90px) 0 clamp(36px,5vw,64px);border-bottom:var(--tool-border)}.tool-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:clamp(34px,8vw,110px);align-items:end}.tool-kicker,.tool-label,.tool-number,.tool-status{display:block;font:700 10px/1.3 var(--font-text);letter-spacing:.15em;text-transform:uppercase}.tool-kicker{margin-bottom:17px}.tool-hero h1{max-width:980px;margin:0;font:500 clamp(52px,8vw,118px)/.84 var(--font-title);letter-spacing:-.06em}.tool-hero-copy{max-width:500px;margin:0;font-size:clamp(17px,2vw,22px);line-height:1.42}.tool-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}.tool-meta span{padding:8px 10px;border:1px solid currentColor;font:700 9px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase}
.tool-workspace{padding:clamp(48px,7vw,88px) 0}.tool-workspace--hub{padding-top:clamp(28px,4vw,52px)}.category-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:var(--tool-border);border-left:var(--tool-border)}.category-tool-link{display:grid;min-height:210px;grid-template-columns:52px 1fr;gap:20px;align-items:start;padding:28px;border-right:var(--tool-border);border-bottom:var(--tool-border);background:var(--tool-yellow);transition:transform .18s ease,box-shadow .18s ease}.category-tool-link:nth-child(4n+2){color:#fff;background:var(--tool-red)}.category-tool-link:nth-child(4n+3){color:#fff;background:var(--tool-blue)}.category-tool-link:nth-child(4n+4){color:#fff;background:var(--tool-green)}.category-tool-link strong{display:block;margin-bottom:12px;font:500 clamp(28px,3vw,44px)/.94 var(--font-title)}.category-tool-link small{display:block;max-width:470px;font-size:14px;line-height:1.55}.category-tool-link:hover{position:relative;z-index:2;transform:translate(-5px,-5px);box-shadow:8px 8px 0 var(--tool-ink)}
.tool-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:34px;border:var(--tool-border);background:var(--tool-white)}.tool-guide article{padding:clamp(22px,3vw,34px);border-right:1px solid var(--tool-ink)}.tool-guide article:last-child{border-right:0}.tool-guide h2,.tool-guide h3{margin:12px 0 10px;font:500 clamp(24px,3vw,36px)/1 var(--font-title)}.tool-guide p,.tool-guide ol{margin:0;font-size:14px;line-height:1.55}.tool-guide ol{padding-left:20px}.tool-guide li+li{margin-top:7px}
.calculator{border:var(--tool-border);background:var(--tool-white);box-shadow:var(--tool-shadow)}.calculator-head{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 24px;border-bottom:var(--tool-border);background:var(--tool-yellow)}.calculator-head h2{margin:0;font:500 clamp(28px,4vw,46px)/.95 var(--font-title)}.calculator-body{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(380px,1.2fr)}.tool-controls{padding:clamp(24px,4vw,44px);border-right:var(--tool-border)}.tool-control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.tool-field{display:flex;min-width:0;flex-direction:column;gap:8px}.tool-field--full{grid-column:1/-1}.tool-field label,.tool-field legend{font:700 10px/1.35 var(--font-text);letter-spacing:.1em;text-transform:uppercase}.tool-field input,.tool-field select{width:100%;min-height:50px;padding:11px 40px 11px 13px;color:var(--tool-ink);border:2px solid var(--tool-ink);border-radius:0;background-color:var(--tool-white);font:500 16px/1 var(--font-text)}.tool-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2311110f' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}.tool-field input:focus,.tool-field select:focus{outline:3px solid var(--tool-blue);outline-offset:2px}.tool-field input[type=range]{min-height:28px;padding:0;border:0;accent-color:var(--tool-red)}.tool-field small{color:#5b5b55;font-size:11px;line-height:1.45}.tool-inline{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.tool-output{display:flex;min-width:0;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,58px);overflow:hidden;color:#fff;background:var(--tool-ink)}.tool-output-light{color:var(--tool-ink);background:var(--tool-paper)}.tool-result-label{display:block;margin-bottom:10px;color:inherit;opacity:.68;font:700 10px/1.3 var(--font-text);letter-spacing:.14em;text-transform:uppercase}.tool-result-main{display:block;max-width:100%;overflow-wrap:anywhere;font:500 clamp(48px,7vw,96px)/.85 var(--font-title);letter-spacing:-.06em}.tool-result-unit{font-size:.32em;letter-spacing:0}.tool-result-sub{max-width:650px;margin:18px 0 0;color:inherit;font-size:15px;line-height:1.55}.tool-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;margin-top:25px;background:currentColor}.tool-result-grid>div{padding:15px;color:#fff;background:var(--tool-ink)}.tool-output-light .tool-result-grid>div{color:var(--tool-ink);background:var(--tool-paper)}.tool-result-grid strong{display:block;margin-top:6px;font:500 clamp(21px,3vw,34px)/1 var(--font-title)}.tool-note{margin:20px 0 0;padding-top:15px;border-top:1px solid currentColor;font-size:11px;line-height:1.5;opacity:.72}.tool-button{display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:12px 18px;color:#fff;border:2px solid var(--tool-ink);border-radius:0;background:var(--tool-ink);cursor:pointer;font:700 10px/1 var(--font-text);letter-spacing:.11em;text-transform:uppercase}.tool-button:hover,.tool-button:focus-visible{color:var(--tool-ink);background:var(--tool-yellow)}.tool-button-secondary{color:var(--tool-ink);background:transparent}
.explain-after{display:grid;grid-template-columns:.7fr 1.3fr;gap:40px;margin-top:44px;padding-top:30px;border-top:1px solid var(--tool-ink)}.explain-after h2{margin:0;font:500 clamp(30px,4vw,48px)/.95 var(--font-title)}.explain-after p{max-width:760px;margin:0}.result-explanation{margin-top:18px;padding:16px;color:var(--tool-ink);background:var(--tool-yellow);font-size:14px;line-height:1.5}
.focal-diagram{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px}.focal-view{position:relative;min-height:180px;overflow:hidden;border:2px solid #fff;background:#315dd8}.focal-view:before{position:absolute;right:15%;bottom:0;width:24%;height:68%;content:"";background:var(--tool-red)}.focal-view:after{position:absolute;right:17%;bottom:68%;width:20%;aspect-ratio:1;content:"";border-radius:50%;background:var(--tool-yellow)}.focal-view span{position:absolute;z-index:2;bottom:10px;left:10px;padding:6px 8px;color:var(--tool-ink);background:#fff;font:700 9px/1 var(--font-text);text-transform:uppercase}.focal-view--crop:before{right:9%;width:38%;height:84%}.focal-view--crop:after{right:14%;bottom:82%;width:28%;transform:translateY(50%)}.dof-diagram{margin-bottom:25px}.dof-line{position:relative;height:66px;border:2px solid #fff}.dof-zone{position:absolute;top:0;bottom:0;left:var(--near,35%);width:var(--depth,25%);background:var(--tool-green)}.dof-subject{position:absolute;top:-12px;bottom:-12px;left:50%;width:4px;background:var(--tool-yellow)}.dof-scale{display:flex;justify-content:space-between;margin-top:8px;font-size:10px}.frame-diagram{position:relative;min-height:270px;margin-bottom:24px;border:2px solid #fff;background:var(--tool-blue)}.frame-camera{position:absolute;bottom:18px;left:8%;width:52px;height:36px;background:var(--tool-yellow)}.frame-subject{position:absolute;right:12%;bottom:18px;width:70px;height:175px;background:var(--tool-red)}.frame-distance{position:absolute;right:25%;bottom:42px;left:24%;height:2px;background:#fff}.frame-distance:after{position:absolute;right:0;bottom:-5px;width:12px;height:12px;border-top:2px solid #fff;border-right:2px solid #fff;content:"";transform:rotate(45deg)}
.color-layout{display:grid;grid-template-columns:minmax(300px,.7fr) minmax(390px,1.3fr);border:var(--tool-border);background:var(--tool-white);box-shadow:var(--tool-shadow)}.color-controls{padding:clamp(24px,4vw,44px);border-right:var(--tool-border)}.color-canvas-wrap{position:relative;display:grid;min-height:560px;place-items:center;padding:28px;background:var(--tool-ink)}#color-wheel{width:min(100%,520px);height:auto;touch-action:none;cursor:crosshair}.color-marker{position:absolute;width:24px;height:24px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #111;pointer-events:none}.palette-strip{display:flex;min-height:120px;margin-top:22px;border:var(--tool-border)}.palette-color{display:flex;min-width:0;flex:1;align-items:end;padding:8px;color:#fff;font:700 8px/1.2 var(--font-text);text-shadow:0 1px 2px #000;text-transform:uppercase}.temperature-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}.temperature-swatch{display:flex;min-height:160px;align-items:end;padding:14px;border:2px solid currentColor;transition:background .2s}.temperature-swatch strong{padding:6px 8px;color:#111;background:#fff}
.paper-preview,.flash-preview,.motion-preview{position:relative;min-height:300px;margin-bottom:24px;border:2px solid #fff;background:var(--tool-blue)}.paper-frame{position:absolute;inset:10%;border:18px solid var(--tool-white);background:var(--tool-red)}.paper-photo{position:absolute;inset:var(--paper-top,22%) var(--paper-side,25%) var(--paper-bottom,22%);background:var(--tool-yellow)}.flash-head{position:absolute;top:22%;left:12%;width:70px;height:50px;background:var(--tool-yellow)}.flash-beam{position:absolute;top:24%;right:25%;left:25%;height:120px;background:rgba(255,215,67,.55);clip-path:polygon(0 40%,100% 0,100% 100%,0 60%)}.flash-person{position:absolute;right:12%;bottom:12%;width:70px;height:160px;background:var(--tool-red)}.motion-object{position:absolute;top:40%;left:45%;width:90px;height:55px;background:var(--tool-yellow)}.motion-lines{position:absolute;top:45%;left:8%;width:36%;height:4px;background:#fff;box-shadow:0 18px 0 #fff,0 36px 0 #fff}
.tool-illustration{display:block;width:100%;min-height:0;aspect-ratio:3/2;margin:0 0 24px;border:2px solid #fff;object-fit:cover;object-position:center}
.hub-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:var(--tool-border);border-left:var(--tool-border)}.hub-category{display:block;min-height:270px;padding:32px;border-right:var(--tool-border);border-bottom:var(--tool-border);background:var(--tool-white);transition:transform .18s ease,box-shadow .18s ease}.hub-category--optique{background:var(--tool-yellow)}.hub-category--exposition{color:#fff;background:var(--tool-red)}.hub-category--couleur{color:#fff;background:var(--tool-blue)}.hub-category--impression{color:#fff;background:var(--tool-green)}.hub-category--flash{background:var(--tool-orange)}.hub-category--mouvement{background:var(--tool-cyan)}.hub-category--fichiers{background:var(--tool-pink)}.hub-category--challenge{color:#fff;background:var(--tool-ink)}.hub-category h2{margin:38px 0 14px;color:inherit;font:500 clamp(34px,4vw,58px)/.9 var(--font-title)}.hub-category p{max-width:520px;margin:0;color:inherit}.hub-category:hover{position:relative;z-index:2;transform:translate(-5px,-5px);box-shadow:8px 8px 0 var(--tool-ink)}
.challenge-layout{display:grid;grid-template-columns:minmax(300px,.78fr) minmax(420px,1.22fr);border:var(--tool-border);background:var(--tool-white);box-shadow:var(--tool-shadow)}.challenge-brief{display:flex;min-height:650px;flex-direction:column;justify-content:space-between;padding:clamp(28px,4vw,48px);color:#fff;border-right:var(--tool-border);background:var(--tool-blue)}.challenge-brief h2{margin:15px 0;color:inherit;font:500 clamp(38px,5vw,62px)/.9 var(--font-title)}.challenge-scene{min-height:260px;margin-top:24px}.challenge-scene svg{display:block;width:100%;height:260px;border:3px solid #fff;box-shadow:14px 14px 0 rgba(0,0,0,.25)}.challenge-console{padding:clamp(28px,5vw,56px)}.dial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.dial{padding:14px 10px;border:2px solid var(--tool-ink)}.dial label{display:block;margin-bottom:9px;font:700 9px/1 var(--font-text);text-transform:uppercase}.dial select{width:100%;padding:9px 24px 9px 5px;border:0;border-top:1px solid var(--tool-ink);background-color:transparent;font:500 16px/1 var(--font-title)}.challenge-meter{margin:25px 0}.challenge-meter-track{position:relative;height:26px;border:2px solid var(--tool-ink);background:var(--tool-paper)}.challenge-meter-zero{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--tool-ink)}.challenge-meter-needle{position:absolute;top:-7px;left:50%;width:14px;height:40px;border:2px solid var(--tool-ink);background:var(--tool-red);transform:translateX(-50%)}.challenge-feedback{min-height:115px;margin-top:22px;padding:18px;border:2px solid var(--tool-ink);background:var(--tool-yellow)}.challenge-progress{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-bottom:18px}.challenge-progress span{height:6px;background:rgba(255,255,255,.3)}.challenge-progress span.is-done{background:var(--tool-yellow)}
.calculator-body{grid-template-columns:minmax(360px,1fr) minmax(360px,1fr)}.tool-control-grid{align-items:start}.tool-field>label{display:flex;min-height:42px;align-items:flex-end}.value-control-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}.value-control{position:relative;display:grid;width:100%;min-width:0;height:64px;grid-template-columns:38px minmax(0,1fr) 38px;border:2px solid var(--tool-ink);background:var(--tool-white)}.value-control button{min-width:0;color:var(--tool-ink);border:0;border-radius:0;background:transparent;font-family:var(--font-text);cursor:pointer}.value-control-step{font-size:21px;line-height:1}.value-control-step:first-child{border-right:1px solid var(--tool-ink)}.value-control-step:nth-child(3){border-left:1px solid var(--tool-ink)}.value-control-step:hover:not(:disabled),.value-control-step:focus-visible{color:#fff;background:var(--tool-blue)}.value-control-step:disabled{cursor:not-allowed;opacity:.22}.value-control-current{position:relative;padding:7px 20px 7px 8px;overflow:hidden;overflow-wrap:anywhere;font-size:14px;font-weight:500;line-height:1.15;text-align:left;text-overflow:clip;white-space:normal}.value-control-current:after{position:absolute;right:7px;top:50%;content:'⌄';font-size:12px;transform:translateY(-55%)}.value-control-current:hover,.value-control-current:focus-visible{background-color:var(--tool-yellow);outline:0}.value-control-menu{position:absolute;z-index:120;top:calc(100% + 8px);right:-2px;left:-2px;display:grid;max-height:300px;grid-template-columns:repeat(2,minmax(0,1fr));overflow-y:auto;border:2px solid var(--tool-ink);background:var(--tool-white);box-shadow:8px 8px 0 var(--tool-ink)}.value-control-menu[hidden]{display:none}.value-control-option{min-height:48px;padding:10px;border-right:1px solid var(--tool-ink)!important;border-bottom:1px solid var(--tool-ink)!important;font-size:12px!important;line-height:1.25!important;text-align:left}.value-control-option:hover,.value-control-option:focus-visible{color:#fff!important;background:var(--tool-blue)!important;outline:0}.value-control-option.is-selected{color:#fff;background:var(--tool-ink)}.tool-inline>.value-control{min-width:0}.dial .value-control{height:56px;grid-template-columns:32px minmax(0,1fr) 32px;border:0;border-top:1px solid var(--tool-ink)}.dial .value-control-current{padding-right:18px;font-family:var(--font-title);font-size:13px}.dial .value-control-menu{right:0;left:0}.dial>label{min-height:22px}.tool-field:has(.value-control){min-width:0}
.tool-result-grid{gap:8px;background:transparent}.tool-result-grid>div{border:1px solid currentColor}.value-control-option:last-child:nth-child(odd){grid-column:1/-1}
.value-control-step:disabled{color:var(--tool-ink);background:var(--tool-white);cursor:default;opacity:1}
@media(max-width:1050px){.tool-nav-inner{overflow-x:auto;scrollbar-width:none}.tool-nav-dropdown{position:fixed;top:calc(var(--mobile-header-h,80px) + 52px);right:12px;left:12px;width:auto}.tool-nav-group:hover:not([open]) .tool-nav-dropdown{display:none}}
@media(max-width:980px){.calculator-body{grid-template-columns:1fr}.tool-controls{border-right:0;border-bottom:var(--tool-border)}}
@media(max-width:850px){.tool-hero-grid,.calculator-body,.color-layout,.challenge-layout,.explain-after{grid-template-columns:1fr}.tool-guide{grid-template-columns:1fr}.tool-guide article{border-right:0;border-bottom:1px solid var(--tool-ink)}.tool-guide article:last-child{border-bottom:0}.tool-controls,.color-controls,.challenge-brief{border-right:0;border-bottom:var(--tool-border)}.challenge-brief{min-height:0}.hub-categories,.category-list{grid-template-columns:1fr}.hub-category,.category-tool-link{min-height:0}}
@media(max-width:600px){.tool-shell{width:calc(100% - 24px);max-width:calc(100% - 24px)}.tool-hero h1{font-size:clamp(49px,17vw,78px)}.tool-control-grid,.dial-grid{grid-template-columns:1fr}.tool-field--full{grid-column:auto}.tool-result-main{font-size:clamp(44px,17vw,76px)}.category-tool-link{grid-template-columns:34px 1fr;padding:24px 18px}.focal-diagram,.temperature-compare{grid-template-columns:1fr}.color-canvas-wrap{min-height:390px}.palette-strip{min-height:92px}.palette-color{padding:4px;font-size:6px;writing-mode:vertical-rl}.challenge-console{padding:22px}.challenge-progress{grid-template-columns:repeat(10,1fr)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.category-tool-link,.temperature-swatch,.challenge-meter-needle{transition:none}}
/* Les cartes d’outils restent stables au survol : seules la couleur et l’ombre peuvent évoluer. */
.category-tool-link:hover,.hub-category:hover{transform:none!important}