/* Page « Santé visuelle au travail » v3 (L'Opticien Qui Bouge) : styles propres à la page, fondés sur les variables du site.
   Tout mouvement est réservé à html.anim (absente en Mode accessible, « Arrêter les animations », FALC et prefers-reduced-motion).
   Sans html.anim, tout le contenu est visible et statique. Les surimpressions sur photo utilisent des couleurs littérales
   (blanc sur fond abysse) pour rester lisibles quand le site passe en fond clair. */

/* ---------- héros : photo plein cadre à droite, texte à gauche */
.sv3-hero{min-height:min(92vh,880px)}
.sv3-hero .wrap{max-width:var(--wrap)}
.sv3-hero__photo{position:absolute;inset:0 0 0 auto;width:min(64%,960px);z-index:-1;background:#0A3238;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.sv3-hero__photo img{width:100%;height:100%;object-fit:cover;object-position:46% 40%}
.sv3-hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,22,26,.35),rgba(4,22,26,0) 30%,rgba(4,22,26,.75))}
.sv3-hero h1{font-size:clamp(2.6rem,6vw,5.6rem);max-width:11ch;color:#fff}
.sv3-hero h1 em{color:var(--jaune)}
.sv3-hero .lead{max-width:30rem}
.sv3-hero .sv-pastilles{margin-top:3rem;max-width:44rem}
.sv3-hero .pastilles li{padding-right:1.6rem;margin-right:1.6rem}
.sv3-hero .pastilles b{font-size:clamp(1.3rem,2.1vw,1.8rem)}
@media (max-width:900px){
  .sv3-hero{min-height:0}
  .sv3-hero{padding-top:var(--entete)}
  .sv3-hero__photo{position:relative;inset:auto;width:100%;height:min(62vw,330px);margin-bottom:-2.2rem;z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .sv3-hero__photo img{object-position:50% 30%}
  .sv3-hero__photo::after{background:linear-gradient(180deg,rgba(4,22,26,.15),rgba(4,22,26,.2))}
  .sv3-hero .wrap{z-index:1}
  .sv3-hero h1{max-width:12ch}
  .sv3-hero .pastilles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sv3-hero .pastilles li{padding-right:.5rem;margin-right:.5rem}
}
.anim .sv3-hero__photo img{transform:scale(1.07);animation:sv3-zoom 2.4s var(--ease-out) .1s forwards}
@keyframes sv3-zoom{to{transform:scale(1)}}

/* ---------- écrans sur photo (reconnaissance, bande) */
.sv3-photo{position:relative;overflow:hidden;isolation:isolate;background:#0A3238;color:#fff}
.sv3-fond{position:absolute;inset:0;z-index:-2}
.sv3-fond img{width:100%;height:100%;object-fit:cover}
.sv3-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,22,26,.93) 0,rgba(4,22,26,.72) 40%,rgba(4,22,26,.08) 78%)}
.sv3-photo h2,.sv3-photo .numero{color:#fff}
.sv3-photo h2 em{color:var(--jaune)}
.anim .sv3-fond img{transform:scale(1.1);transition:transform 2.6s var(--ease-out)}
.anim .sv3-fond.vu img{transform:scale(1)}
/* le fond est un .reveal : le garder visible même avant l'apparition */
.anim .sv3-fond.reveal{opacity:1;transform:none}

.sv3-ident{min-height:min(88vh,760px);display:flex;align-items:center}
.sv3-ident .wrap{width:100%}
.sv3-ident .sv3-fond{inset:0 0 0 auto;width:min(72%,1000px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.sv3-ident .sv3-fond img{object-position:50% 38%;transform:scaleX(-1)}
.anim .sv3-ident .sv3-fond img{transform:scaleX(-1) scale(1.1)}
.anim .sv3-ident .sv3-fond.vu img{transform:scaleX(-1) scale(1)}
.sv3-dits{list-style:none;display:grid;gap:clamp(.6rem,1.6vw,1.1rem);margin:clamp(1.6rem,3vw,2.6rem) 0}
.sv3-dits li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;max-width:min(100%,29ch);padding-top:.9rem;border-top:1px solid rgba(255,255,255,.28);
  font-family:var(--titre);font-weight:750;font-size:clamp(1.3rem,2.3vw,2rem);line-height:1.15;letter-spacing:-.03em;color:#fff}
.sv3-dits li span{font-size:.8rem;font-weight:800;letter-spacing:.16em;color:#F4C658}
.sv3-chute{font-family:var(--titre);font-weight:800;font-size:clamp(1.1rem,2vw,1.5rem);color:#F4C658;margin:0}
@media (max-width:900px){.sv3-ident{min-height:680px;align-items:flex-end}.sv3-ident .sv3-fond{width:100%;inset:0;-webkit-mask-image:none;mask-image:none}.sv3-ident .sv3-fond img{object-position:50% 20%}.sv3-photo::before{background:linear-gradient(180deg,rgba(4,22,26,.1) 0,rgba(4,22,26,.55) 38%,rgba(4,22,26,.94) 70%)}}

.sv3-bande{min-height:clamp(380px,56vh,560px);display:flex;align-items:center}
.sv3-bande .wrap{width:100%}
.sv3-bande h2{font-size:clamp(2rem,5vw,4.4rem);max-width:15ch}
.sv3-bande .sv3-fond img{object-position:50% 45%}
main section.sv3-bande h2:not([style]){font-size:clamp(2rem,5vw,4.4rem)}

/* ---------- les trois temps : trois grandes photos */
.sv3-temps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.3rem);margin-top:2.4rem}
.sv3-temps>*{min-width:0}
.sv3-temp{position:relative;border-radius:var(--r);overflow:hidden;isolation:isolate;aspect-ratio:3/4.1;background:#0A3238;display:flex;align-items:flex-end;color:#fff}
.sv3-temp>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease-out)}
.sv3-temp::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,22,26,0) 30%,rgba(4,22,26,.92) 88%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);border-radius:inherit}
.sv3-temp:hover>img{transform:scale(1.05)}
.sv3-temp__txt{padding:clamp(1.2rem,2.2vw,1.8rem);width:100%}
.sv3-temp__n{display:block;font-family:var(--titre);font-weight:900;font-size:clamp(3rem,5vw,4.4rem);line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px #3CCAD3;margin-bottom:.3rem}
.sv3-temp h3{color:#fff;font-size:clamp(1.4rem,2.2vw,1.9rem);letter-spacing:-.035em;margin-bottom:.4rem}
.sv3-temp p{margin:0;color:#E3F0F2;font-size:1rem;max-width:26ch}
@media (max-width:900px){
  .sv3-temps{grid-template-columns:minmax(0,1fr)}
  .sv3-temp{aspect-ratio:16/11}
  .sv3-temp p{max-width:40ch}
}

/* ---------- schéma du poste */
.sv3-poste__grille{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;margin-top:2rem}
.sv3-poste__grille>*{min-width:0}
.sv3-schema{margin:0;padding:clamp(.8rem,2vw,1.6rem);border-radius:var(--r);background:var(--surf);border:1px solid var(--ligne)}
.sv3-sch{width:100%;height:auto}
.sv3-num{font-family:var(--titre);font-weight:800;font-size:17px;fill:#F0BB3B}
.sv3-cote{font-family:var(--titre);font-weight:700;font-size:20px;fill:#3CCAD3}
.sv3-reperes{list-style:none;display:grid;gap:.7rem}
.sv3-reperes li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;padding:1rem 1.2rem;border-radius:16px;background:var(--surf);border:1px solid var(--ligne);
  font-family:var(--titre);font-weight:700;font-size:clamp(1.02rem,1.5vw,1.2rem);letter-spacing:-.015em;line-height:1.25;color:var(--blanc);max-width:none}
.sv3-reperes b{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid var(--jaune);color:var(--jaune-txt);font-size:1.05rem}
html.a11y-clair .sv3-reperes b{color:#8A5A00}
.sv3-reperes li:focus-visible{outline:3px solid var(--jaune)}
.sv3-reperes li.on{border-color:var(--jaune);background:rgba(240,187,59,.08)}
.sv3-note{margin-top:1.4rem;color:var(--gris-2);font-size:.95rem;max-width:none}
/* animation du schéma : tracés qui se dessinent, repères qui s'éclairent tour à tour (html.anim seulement) */
.anim .sv3-schema .sv3-trait{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.6s var(--ease-out)}
.anim .sv3-schema.vu .sv3-trait{stroke-dashoffset:0}
.anim .sv3-schema.vu [data-rep="1"] .sv3-trait,.anim .sv3-schema.vu [data-rep="4"] .sv3-trait{stroke-dasharray:7 7;stroke-dashoffset:0}
.anim .sv3-schema [data-rep]{opacity:.38;transition:opacity .5s}
.anim .sv3-schema [data-rep].on{opacity:1}
.anim .sv3-schema [data-rep].on circle:not([r="4"]):not([r="10"]){filter:drop-shadow(0 0 8px rgba(240,187,59,.9))}
.anim .sv3-schema:not(.vu) [data-rep]{opacity:0}

/* ---------- règle 20-20-20 */
.sv3-vingt__grille{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;margin-top:1.6rem}
.sv3-vingt__grille>*{min-width:0}
.sv3-regle{list-style:none;display:grid;gap:0}
.sv3-regle li{display:grid;grid-template-columns:minmax(0,auto) 1fr;gap:clamp(.8rem,2vw,1.8rem);align-items:center;padding:.5rem 0;border-top:1px solid var(--ligne);max-width:none}
.sv3-regle li:last-child{border-bottom:1px solid var(--ligne)}
.sv3-regle b{font-family:var(--titre);font-weight:900;font-size:clamp(4.2rem,10vw,8.4rem);line-height:.95;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--turq);min-width:1.3em}
.sv3-regle li:nth-child(2) b{-webkit-text-stroke-color:var(--jaune)}
.sv3-regle li:nth-child(3) b{-webkit-text-stroke-color:#7FD7C4}
.sv3-regle span{font-family:var(--titre);font-weight:700;font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:-.02em;color:var(--blanc);line-height:1.2}
html.a11y-contraste .sv3-regle b,html.a11y-clair .sv3-regle b{-webkit-text-stroke-color:currentColor;color:var(--blanc);-webkit-text-stroke-width:0}
.sv3-minuteur{padding:clamp(1.4rem,3vw,2.2rem);border-radius:var(--r);background:var(--surf);border:1px solid var(--ligne)}
.sv3-minuteur .btn{margin-top:.2rem}
@media (max-width:900px){.sv3-poste__grille,.sv3-vingt__grille{grid-template-columns:minmax(0,1fr)}}

/* mouvement du minuteur (repris de la v2) */
.sv-minuteur{display:grid;justify-items:center;text-align:center;gap:1.1rem}
.sv-cadran{position:relative;width:min(210px,62vw);aspect-ratio:1}
.sv-cadran svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.sv-piste{fill:none;stroke:var(--ligne-2);stroke-width:6}
.sv-anneau{fill:none;stroke:var(--turq);stroke-width:7;stroke-linecap:round;stroke-dasharray:326.73;stroke-dashoffset:0}
.sv-minuteur.fini .sv-anneau{stroke:var(--jaune)}
.sv-chiffre{position:absolute;inset:0;display:grid;place-content:center;margin:0;max-width:none}
.sv-chiffre b{font-family:var(--titre);font-weight:900;font-size:clamp(3rem,7vw,4.2rem);line-height:1;letter-spacing:-.05em;color:var(--blanc)}
.sv-chiffre span{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-2)}
.sv-consigne{min-height:3.2em;margin:0;font-weight:700;color:var(--blanc);max-width:24rem}
.anim .sv-anneau{transition:stroke-dashoffset 1s linear,stroke .4s;filter:drop-shadow(0 0 8px rgba(29,185,195,.7))}
.anim .sv-minuteur.fini .sv-anneau{filter:drop-shadow(0 0 10px rgba(240,187,59,.75))}
.anim .sv-minuteur.en-cours .sv-cadran{animation:sv3-souffle 4s ease-in-out infinite}
@keyframes sv3-souffle{50%{transform:scale(1.035)}}

/* ---------- repères de confiance */
.sv3-confiance__grille{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:center;margin-top:1.6rem}
.sv3-confiance__grille>*{min-width:0}
.sv3-grand{font-family:var(--titre);font-weight:850;font-size:clamp(2.2rem,5.4vw,4.8rem);line-height:1;letter-spacing:-.045em;color:var(--blanc);margin:0;max-width:none}
.sv3-grand em{font-style:normal;color:var(--jaune)}
html.a11y-clair .sv3-grand em{color:#8A5A00}
.sv3-grand small{display:block;margin-top:1.1rem;font-family:var(--texte);font-weight:400;font-size:clamp(1.05rem,1.6vw,1.3rem);letter-spacing:0;line-height:1.4;color:var(--gris-1)}
.sv3-liste{list-style:none;display:grid;gap:0}
.sv3-liste li{position:relative;padding:1.15rem 0 1.15rem 2.1rem;border-top:1px solid var(--ligne-2);font-family:var(--titre);font-weight:700;font-size:clamp(1.1rem,1.9vw,1.45rem);letter-spacing:-.02em;color:var(--blanc);max-width:none}
.sv3-liste li:last-child{border-bottom:1px solid var(--ligne-2)}
.sv3-liste li::before{content:"";position:absolute;left:0;top:50%;width:11px;height:11px;margin-top:-5px;border-radius:50%;background:var(--turq);box-shadow:0 0 12px var(--turq)}
@media (max-width:900px){.sv3-confiance__grille{grid-template-columns:minmax(0,1fr)}}

/* ---------- partenaire */
.sv3-partenaire .sv-partenaire{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.sv3-partenaire .sv-partenaire>*{min-width:0}
.sv-logo{display:grid;place-items:center;padding:clamp(2rem,5vw,3.4rem);border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 30px 90px -40px rgba(29,185,195,.9)}
.sv-logo img{width:100%;max-width:340px;height:auto}
.sv3-partenaire h2{margin-bottom:.5em}
.sv3-liens{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.2rem;max-width:none}
.sv-sources{font-size:.85rem;color:var(--gris-2);margin-top:2.2rem;max-width:none}
@media (max-width:900px){.sv3-partenaire .sv-partenaire{grid-template-columns:minmax(0,1fr)}}

/* sections de la page : rythme vertical resserré (un écran = une idée) */
main section.sv3-sec{padding:clamp(3.2rem,6.5vw,5.2rem) 0}
main section.sv3-sec h2:not([style]){font-size:clamp(2rem,4.8vw,4rem)}
main section.sv3-ident h2:not([style]){font-size:clamp(2.2rem,5.4vw,4.6rem)}
.sv3-ident,.sv3-bande{padding:clamp(4rem,9vw,7rem) 0}
.sv3-faq{padding-top:clamp(3rem,6vw,5rem)}

/* contraste renforcé : surfaces noires, bordures blanches */
html.a11y-contraste .sv3-schema,html.a11y-contraste .sv3-reperes li,html.a11y-contraste .sv3-minuteur{background:#000;border-color:#fff}
html.a11y-contraste .sv3-sch *{stroke-opacity:1}
html.a11y-contraste .sv-anneau{filter:none}
/* Mode accessible : pas de photo plein cadre qui gêne la lecture, mise en page simplifiée */
html.mode-accessible .sv3-hero__photo::after{background:rgba(4,22,26,.72)}
html.mode-accessible .sv3-ident,html.mode-accessible .sv3-bande{min-height:0}
html.mode-accessible .sv3-temp{aspect-ratio:16/10}
@media (forced-colors:active){.sv3-hero__photo,.sv3-fond{display:none}.sv3-photo{background:Canvas;color:CanvasText}}

.sv3-ident h2{max-width:9ch}
@media (max-width:900px){.sv3-ident h2{max-width:none}}

/* bande « poste » : texte à droite, sujets de la photo à gauche */
.sv3-bande::before{background:linear-gradient(270deg,rgba(4,22,26,.94) 0,rgba(4,22,26,.8) 36%,rgba(4,22,26,0) 66%)}
.sv3-bande .wrap{display:flex;justify-content:flex-end}
.sv3-bande h2{text-align:left;max-width:12ch;margin-bottom:0}
@media (max-width:900px){.sv3-bande::before{background:linear-gradient(180deg,rgba(4,22,26,.35),rgba(4,22,26,.9))}.sv3-bande{align-items:flex-end}.sv3-bande .wrap{justify-content:flex-start}}
.sv3-poste__grille{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}

.sv3-intro{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--gris-1);margin:-.2rem 0 0;max-width:none}
@media (max-width:900px){.sv3-poste__grille{grid-template-columns:minmax(0,1fr)}}
@media (min-width:901px){
  .sv3-bande .sv3-fond{inset:0 auto 0 0;width:64%;-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 30%);mask-image:linear-gradient(270deg,transparent 0,#000 30%)}
  .sv3-bande .sv3-fond img{object-position:30% 45%}
  .sv3-bande::before{background:none}
  .sv3-bande h2{max-width:11ch;font-size:clamp(2rem,4.2vw,3.9rem)}
  main section.sv3-bande h2:not([style]){font-size:clamp(2rem,4.2vw,3.9rem)}
  .sv3-bande .wrap{justify-content:flex-end;padding-right:max(var(--gout),4vw)}
}