.met-heros{ position:relative; overflow:hidden; background:#fff; }
.met-heros .photo{
  position:absolute; right:0; top:15px; bottom:0; width:45%;
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 16%, #fff) 0%, #F5F7FB 62%, color-mix(in srgb, var(--accent) 9%, #fff) 100%) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%);
}
.met-heros .boite{ position:relative; z-index:2; padding-top:35px; padding-bottom:78px; }
.met-heros .texte{ max-width:min(64%,900px); }
.met-heros h1{
  font-size:clamp(32px,5vw,72px); font-weight:700; line-height:1.081; color:var(--nuit);
}

.met-heros h1 .accent{
  background-image:linear-gradient(180deg,var(--accent) 70%,#8E7AE6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.met-heros p{ margin-top:30px; font-size:20px; line-height:1.32; color:var(--corps); max-width:580px; }
.met-heros .actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:34px; }



.quotidien{ padding:64px 0 72px; }

.quotidien-grille{
  display:grid; grid-template-columns:480px minmax(0,1fr);
  gap:45px; align-items:center; margin-right:-98px;
}
.citation{
  font-family:'Caveat',cursive; font-size:clamp(30px,3.7vw,52px); line-height:1.12;
  color:var(--nuit); position:relative;
}
.citation .guillemet{ color:var(--accent); }
.frise-etapes{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:14px; text-align:center; }.frise-etapes > div,.frise-etapes > :where(.vv-w) > div{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.frise-etapes .picto{
  width:34px; height:34px; border-radius:9px; background:var(--accent-voile); display:block;
  display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.frise-etapes .picto svg{ width:26px; height:26px; }
.frise-etapes b{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:20px; color:var(--ink); }
.frise-etapes span{ font-size:17px; color:var(--corps); line-height:1.3; }
.frise-ligne{ position:relative; margin-top:22px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
.frise-ligne::before{
  content:""; position:absolute; left:6%; right:6%; top:50%; height:1.5px; background:#C6CDD8;
}
.frise-ligne i{ position:relative; justify-self:center; width:9px; height:9px; border-radius:50%; background:#8A93A3; }


.met-constat{ padding:56px 0 76px; text-align:center; }
.met-constat h2{ font-size:clamp(24px,2.3vw,32px); font-weight:700; line-height:1.225; max-width:1000px; margin:0 auto; }
.constat-grille{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  margin:44px -16px 0; text-align:left;
}
.carte-constat{
  background:linear-gradient(180deg,#FDFDFE 0%,#F4F6FA 100%);
  border-radius:20px; padding:28px 34px 32px 100px;
  box-shadow:0 18px 40px -30px rgba(11,23,46,.45);
}
.carte-constat{ position:relative; }
.carte-constat .picto{
  position:absolute; left:30px; top:30px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.carte-constat .picto svg{ width:38px; height:38px; }
.carte-constat b{
  display:block; font-family:'Satoshi',sans-serif; font-weight:700; font-size:17px;
  color:var(--accent); margin-bottom:8px;
}
.carte-constat p{ font-size:15.5px; color:var(--corps); }


.diagnostic{ padding:56px 0 84px; text-align:center; }
.diagnostic h2{ font-size:clamp(24px,2.3vw,32px); font-weight:700; line-height:1.225; max-width:24em; margin:0 auto; }
.diagnostic-meta{ margin-top:14px; font-size:16px; color:var(--corps); }
.diagnostic-meta i{ color:#C6CDD8; font-style:normal; margin:0 8px; }
.diagnostic-grille{
  display:grid; grid-template-columns:minmax(0,1.92fr) minmax(0,1fr);
  gap:51px; margin-top:44px; text-align:left; align-items:start;
}
.carte-quiz, .carte-score{
  background:linear-gradient(180deg,#FEFEFF 0%,#F7F9FC 100%);
  border-radius:22px; padding:34px 44px 34px 60px; box-shadow:var(--ombre-carte);
}
.quiz-tete{ font-size:16px; color:var(--corps); }
.quiz-barre{ margin:12px 0 26px; height:3px; background:#E4E8EF; border-radius:3px; overflow:hidden; }
.quiz-barre i{ display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .25s ease; }
.quiz-q{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:17px; color:var(--ink); margin-bottom:20px; }
.quiz-opts{ display:flex; flex-direction:column; gap:12px; }
.quiz-opts label{
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--ligne); border-radius:13px; padding:14px 18px;
  font-size:16px; color:var(--ink); background:#fff; cursor:pointer;
}
.quiz-opts label:hover{ border-color:var(--accent-clair); }
.quiz-opts label.choisi{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.quiz-opts input{ accent-color:var(--accent); width:18px; height:18px; }
.quiz-nav{ display:flex; align-items:center; justify-content:center; gap:26px; margin-top:26px; }
.quiz-nav .precedent{ font-family:'Satoshi',sans-serif; font-weight:500; color:var(--sourdine); }
.quiz-note{ margin-top:16px; font-size:15px; color:var(--sourdine); text-align:center; }
.carte-score{ text-align:center; }
.carte-score h3{ font-size:18px; font-weight:700; margin-bottom:20px; }
.jauge{ position:relative; width:150px; margin:0 auto 12px; }
.jauge svg{ transform:rotate(-90deg); }
.jauge .fond{ stroke:#E4E8EF; }
.jauge .valeur{ stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset .4s ease; }
.jauge b{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:24px; color:var(--ink);
}
.verdict{ font-size:15.5px; color:var(--corps); margin-bottom:20px; }
.carte-score small{ display:block; margin-top:14px; font-size:13px; color:var(--sourdine); }

.quiz-alerte{ margin-top:12px; font-size:14.5px; color:var(--accent); }



.carte-score [hidden]{ display:none !important; }
.diag-form{ display:grid; gap:10px; margin-top:4px; text-align:left; }
.diag-champ{ display:grid; gap:5px; margin:0; }
.diag-champ label{ font-size:13.5px; color:var(--sourdine); }
.diag-form input:not([type=checkbox]), .diag-form select{
  border:1px solid var(--ligne); border-radius:12px; padding:12px 14px;
  font:inherit; width:100%; color:var(--ink); background:#fff;
}
.diag-form input:focus, .diag-form select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.diag-consent{ display:flex; align-items:flex-start; gap:10px; margin-top:4px; font-size:13px; line-height:1.45; color:var(--corps); }
.diag-consent input{ margin-top:2px; width:16px; height:16px; flex:none; accent-color:var(--accent); }
.diag-form .btn{ justify-self:center; margin-top:4px; }
.diag-rgpd{ margin:0; font-size:12.5px; line-height:1.45; color:var(--sourdine); text-align:center; }
.diag-rgpd a{ color:var(--accent); text-decoration:underline; }
.diag-merci{ margin-top:8px; font-size:15px; line-height:1.5; color:var(--ink); }


.univers{ padding:20px 0 84px; text-align:center; }
.univers-grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:34px 0 0; }
.carte-univers{
  padding:12px 34px 8px; text-align:center;
  display:flex; flex-direction:column; gap:14px;
  border-left:1px solid var(--ligne);
}.univers-grille > :first-child,.univers-grille > :where(.vv-w:first-child) > :first-child{ border-left:0; }
.carte-univers .kicker{
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:14px; letter-spacing:.03em;
  text-transform:uppercase; line-height:1.5;
}
.carte-univers.rose .kicker{ color:#FE2977; }
.carte-univers.teal .kicker{ color:#028D9D; }
.carte-univers.bleu .kicker{ color:#0161D8; }
.carte-univers .nom{
  font-family:'Satoshi',sans-serif; font-weight:900; font-size:clamp(26px,3.5vw,50px);
  line-height:1.02; letter-spacing:-.03em;
  background-clip:text; -webkit-background-clip:text; color:transparent;
}
.carte-univers.rose .nom{ background-image:linear-gradient(180deg,#FF6BA6,#E4005C); }
.carte-univers.teal .nom{ background-image:linear-gradient(180deg,#5FD3CD,#028D9D); }
.carte-univers.bleu .nom{ background-image:linear-gradient(180deg,#8FB0EE,#0161D8); }
.carte-univers .desc{ font-size:15px; color:var(--corps); }
.carte-univers ul{ display:flex; flex-direction:column; gap:9px; text-align:left; }
.carte-univers li{
  display:flex; align-items:center; gap:11px; font-size:15px; color:var(--ink);
  padding:6px 0; text-align:left;
}
.carte-univers li::before{
  content:""; flex:none; width:19px; height:19px; border-radius:50%;
  background-position:center; background-repeat:no-repeat; background-size:11px, cover;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"),
                   linear-gradient(339deg,#FFFFFF -90%,var(--pastille) 100%);
}
.carte-univers.rose li::before{ --pastille:#FE2977; }
.carte-univers.teal li::before{ --pastille:#028D9D; }
.carte-univers.bleu li::before{ --pastille:#0161D8; }
.carte-univers .btn{ margin-top:auto; align-self:center; }


.role{ padding:10px 0 76px; }
.role-grille{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:center; }
.role h2{ font-size:clamp(23px,2.5vw,31px); font-weight:700; margin-bottom:26px; }
@media (max-width:1080px){
  .role-escalier,
  .role-escalier span{ min-width:0; overflow-wrap:break-word; }
  
  .role-escalier span{ margin-left:0 !important; }
  .role h2{ min-width:0; }
  .quiz-nav .precedent{ padding:12px 10px; }
}
.role-escalier{ display:flex; flex-direction:column; gap:14px; }
.role-escalier span{
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:17px;
}
.role-escalier .t{ color:var(--accent); }
.role-escalier .g{ color:#C3CAD5; }
.role-texte p{ font-size:16.5px; color:var(--corps); margin-bottom:16px; }


.met-cas{ padding:70px 0 80px; background:var(--brume); text-align:center; }
.met-cas h2{ font-size:clamp(25px,2.3vw,32px); font-weight:700; line-height:1.225; }

.carte-cas-metier{
  margin-top:40px; text-align:left;
  display:grid; grid-template-columns:minmax(0,.38fr) minmax(0,1fr);
  background:#fff; border-radius:24px; overflow:hidden; box-shadow:var(--ombre-carte);
  color:inherit; transition:transform .2s ease, box-shadow .2s ease;
}
.carte-cas-metier:hover{ transform:translateY(-3px); box-shadow:0 26px 54px -30px rgba(11,23,46,.34); }
.carte-cas-metier:hover .lire-cas::after{ transform:translateX(4px); }
.carte-cas-metier.sans-photo{ grid-template-columns:minmax(0,1fr); }
.carte-cas-metier .photo{
  min-height:360px; background:var(--accent-voile) center/cover no-repeat;
}
.carte-cas-metier .contenu{ padding:34px 38px 34px; }
.carte-cas-metier .tag{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:14.5px; color:var(--accent); }
.carte-cas-metier .qui{ display:flex; align-items:center; gap:14px; margin:16px 0 16px; }
.carte-cas-metier .qui .logo{ width:60px; height:60px; border-radius:12px; background:#EEF1F6; }
.carte-cas-metier .qui b{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:23px; color:var(--ink); }
.carte-cas-metier p{ font-size:15.5px; color:var(--corps); margin-bottom:14px; }
.cas-stats{ margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cas-stats b{ display:block; font-family:'Satoshi',sans-serif; font-weight:700; font-size:22px; color:var(--accent); }
.cas-stats span{ font-size:14.5px; color:var(--corps); }


.met-autres{ padding:40px 0 60px; text-align:center; }
.met-autres h2{ font-size:clamp(24px,2.3vw,32px); font-weight:700; line-height:1.225; margin-bottom:28px; }
.met-pilules{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.met-pilules a{
  display:inline-flex; align-items:center; padding:12px 18px;
  border:1px solid var(--ligne); border-radius:999px;
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:14.5px; color:var(--ink);
  transition:border-color .15s ease, color .15s ease;
}

.met-pilules a.rose:hover{ border-color:#FE2977; color:#FE2977; }
.met-pilules a.teal:hover{ border-color:#028D9D; color:#028D9D; }
.met-pilules a.bleu:hover{ border-color:#0161D8; color:#0161D8; }


@media (max-width:1080px){
  .met-heros .photo{ position:relative; top:0; width:100%; height:230px; -webkit-mask-image:none; mask-image:none; }
  .met-heros .texte{ max-width:none; }
  .met-heros .boite{ padding-top:40px; padding-bottom:48px; }
  .quotidien-grille{ grid-template-columns:1fr; margin-right:0; }
  .frise-etapes{ grid-auto-flow:row; grid-template-columns:1fr 1fr; }
  .frise-ligne{ display:none; }
  .constat-grille{ grid-template-columns:1fr 1fr; margin:36px 0 0; }
  .carte-constat{ padding:26px 26px 28px; }
  .quotidien-grille{ margin-right:0; }
  .diagnostic-grille{ grid-template-columns:1fr; }
  .univers-grille{ grid-template-columns:1fr; margin:34px 0 0; gap:26px; }
  .carte-univers{ border-left:0; border-top:1px solid var(--ligne); padding:26px 0 0; }.univers-grille > :first-child,.univers-grille > :where(.vv-w:first-child) > :first-child{ border-top:0; padding-top:0; }
  .carte-quiz, .carte-score{ padding:26px 22px; }
  .role-grille{ grid-template-columns:1fr; }
  .carte-cas-metier{ grid-template-columns:1fr; }
  .cas-stats{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .constat-grille{ grid-template-columns:1fr; }
  .frise-etapes{ grid-template-columns:1fr; }
  .carte-quiz, .carte-score{ padding:24px 20px; }
}


@media (min-width:1100px){
  
  .met-heros .boite{ padding-top:72px; padding-bottom:114px; }
  .met-heros .texte{ max-width:none; }
  .met-heros h1{ width:870px; max-width:none; font-size:72px; line-height:1.08; }
  .met-heros p{ margin-top:63px; max-width:598px; font-family:'Inter',sans-serif; font-size:20px; line-height:24px; }
  .met-heros .actions{ margin-top:43px; gap:12px; }
  .met-heros .actions .btn{ height:51px; padding:0 24px; border-radius:24px; font-size:14px; }
  .met-heros .actions .btn-contour{ height:49px; background:transparent; border:2px solid var(--accent); color:var(--accent); }
  .met-heros .actions .btn-contour:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .met-heros .photo{ right:-17px; width:968px; top:27px; bottom:auto; height:645px; }
  
  .quotidien{ padding:74px 0 0; }
  .quotidien .surtitre{ margin-bottom:32px; }
  .quotidien-grille{ grid-template-columns:478px minmax(0,1fr); gap:0; margin-right:-98px; align-items:start; }
  .citation{ font-size:46px; line-height:1.1; min-height:153px; }
  .frise{ margin:-58px 0 0 13px; width:852px; }
  .frise-etapes{ grid-auto-columns:142px; gap:0; }.frise-etapes > div,.frise-etapes > :where(.vv-w) > div{ gap:0; }
  .frise-etapes .picto{ margin-bottom:10px; }
  .frise-etapes b{ font-family:'Inter',sans-serif; font-size:20px; line-height:24px; }
  .frise-etapes span{ width:155px; margin:10px -6.5px 0; font-size:20px; line-height:24px; }
  .frise-ligne{ margin-top:41px; }
  .frise-ligne::before{ left:70px; right:65px; height:1px; }
  .frise-ligne i{ width:11px; height:11px; }
  
  .met-constat{ padding:78px 0 40px; }
  .met-constat .surtitre{ margin-bottom:9px; }
  .met-constat h2{ font-size:32px; line-height:39px; margin-bottom:0; }
  .constat-grille{ width:992px; margin:47px 0 0 142px; grid-template-columns:repeat(3,292px); column-gap:58px; row-gap:29px; text-align:center; }
  .carte-constat{ min-height:199px; padding:51px 24px 28px; border-radius:28px; border:.5px solid rgba(165,199,241,.34); box-shadow:0 4px 4px rgba(0,0,0,.25); background:#fff; }.constat-grille > :nth-child(-n+3),.constat-grille > :where(.vv-w) > :nth-child(-n+3){ min-height:223px; }
  .carte-constat .picto{ display:none; }
  .carte-constat b{ font-size:20px; line-height:27px; margin-bottom:3px; }
  .carte-constat p{ font-family:'Inter',sans-serif; font-size:20px; line-height:23px; }
  
  .diagnostic{ padding:0 0 95px; }
  .diagnostic .surtitre{ margin-bottom:3px; }
  .diagnostic h2{ font-size:32px; line-height:37px; max-width:633px; }
  .diagnostic-meta{ margin-top:12px; font-size:20px; line-height:24px; }
  .diagnostic-grille{ grid-template-columns:784px 401px; gap:50px; margin:58px 0 0 -14px; }
  .carte-quiz{ min-height:435px; padding:49px 70px 40px 71px; border-radius:28px; background:#fff; border:.5px solid rgba(255,165,201,.34); box-shadow:0 4px 4px rgba(0,0,0,.25); }
  .quiz-tete{ font-size:20px; line-height:24px; }
  .quiz-barre{ margin:5px 0 30px; }
  .quiz-q{ font-size:20px; line-height:27px; margin-bottom:14px; }
  .quiz-opts{ gap:16px; }
  .quiz-opts label{ height:42px; padding:0 16px; font-size:20px; border-radius:8px; }
  .quiz-nav{ margin-top:29px; }
  .quiz-nav .btn{ height:59px; padding:0 30px; font-size:20px; }
  .quiz-note{ margin-top:11px; font-size:16px; }
  .carte-score{ min-height:431px; padding:89px 24px 30px; border-radius:28px; background:#fff; border:.5px solid rgba(255,165,201,.34); box-shadow:0 4px 4px rgba(0,0,0,.25); }
  .carte-score h3{ font-size:20px; line-height:27px; margin-bottom:18px; }
  .jauge{ width:108px; margin-bottom:10px; }
  .jauge svg{ width:108px; height:108px; }
  .verdict{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:20px; line-height:22px; max-width:171px; margin:0 auto 10px; }
  .carte-score .btn{ height:59px; padding:0 30px; font-size:20px; }
  .carte-score small{ font-size:15px; max-width:420px; margin:10px auto 0; }
  
  .univers{ padding:0 0 80px; }
  .univers .surtitre{ margin-bottom:47px; }
  .univers-grille{ margin:0 -70px; }
  .carte-univers{ padding:0 30px; gap:0; }
  .carte-univers .kicker{ font-size:18px; line-height:24px; letter-spacing:0; max-width:255px; margin:0 auto; }
  .carte-univers .nom{ margin-top:19px; font-size:48px; line-height:1; letter-spacing:0; }
  .carte-univers .desc{ margin:37px auto 0; max-width:362px; font-family:'Inter',sans-serif; font-weight:500; font-size:18px; line-height:22px; color:rgba(11,23,46,.42); }
  .carte-univers ul{ margin-top:29px; gap:0; text-align:center; }
  .carte-univers li{ justify-content:center; padding:8px 0; font-family:'Inter',sans-serif; font-weight:500; font-size:18px; line-height:22px; text-align:center; }
  .carte-univers li::before{ content:none; }
  .carte-univers .btn{ margin-top:70px; height:59px; padding:0 30px; border-radius:24px; font-size:20px; }
  
  .role{ padding:47px 0 0; min-height:410px; }
  .role-grille{ grid-template-columns:631px 600px; gap:65px; margin-left:-17px; align-items:start; }
  .role h2{ font-size:32px; line-height:39px; margin-bottom:36px; }
  .role-escalier{ gap:12px; }
  .role-escalier span{ font-size:20px; line-height:27px; }
  .role-texte{ padding-top:6px; }
  .role-texte p{ font-family:'Inter',sans-serif; font-size:20px; line-height:24px; margin-bottom:24px; }
  
  .met-cas{ padding:39px 0 76px; background:var(--accent-voile); }
  .met-cas .surtitre{ margin-bottom:19px; }
  .met-cas h2{ font-size:48px; line-height:59px; }
  .carte-cas-metier{ margin:43px -24px 0; grid-template-columns:426px minmax(0,1fr); min-height:446px; border-radius:28px; border:.5px solid rgba(255,165,201,.34); box-shadow:0 4px 4px rgba(0,0,0,.25); }
  .carte-cas-metier .photo{ min-height:0; }
  .carte-cas-metier .contenu{ padding:38px 30px 27px; }
  .carte-cas-metier .tag{ font-size:16px; line-height:18px; }
  .carte-cas-metier .qui{ margin:35px 0 10px; }
  .carte-cas-metier .qui .logo{ width:65px; height:62px; }
  .carte-cas-metier .qui b{ font-size:32px; }
  .carte-cas-metier p{ font-family:'Inter',sans-serif; font-size:18px; line-height:22px; margin-bottom:12px; }
  .carte-cas-metier .cas-stats{ margin-top:28px; }
  .cas-stats b{ font-family:'Inter',sans-serif; font-weight:600; font-size:24px; line-height:24px; }
  .cas-stats span{ font-size:16px; line-height:16px; }
  
  .gabarit-metier .sol-faq{ padding:86px 0 71px; }
  .gabarit-metier .sol-faq .surtitre{ margin-bottom:12px; }
  .gabarit-metier .sol-faq h2{ font-size:32px; line-height:43px; margin-bottom:68px; }
  .gabarit-metier .faq-liste{ gap:14.4px; }.gabarit-metier .faq-item > button,.gabarit-metier .faq-item > :where(.vv-w) > button{ min-height:93.6px; }
  
  .gabarit-metier .sol-lire{ padding:34px 0 81px; background:var(--accent-voile); text-align:center; }
  .gabarit-metier .sol-lire .surtitre{ margin-bottom:7px; }
  .gabarit-metier .sol-lire h2{ font-size:32px; line-height:43px; margin-bottom:40px; }
  .gabarit-metier .sol-lire .ressources-grille{ text-align:left; gap:25px; max-width:1052px; margin:0 auto; }
  .gabarit-metier .sol-lire .carte-ressource{ min-height:318px; }
  .gabarit-metier .sol-lire .carte-ressource .visuel{ aspect-ratio:334/139; }
  .gabarit-metier .sol-lire .carte-ressource .corps{ padding:20px 19px 14px; gap:6px; }
  .gabarit-metier .sol-lire .carte-ressource .duree{ font-size:13px; line-height:18px; }
  .gabarit-metier .sol-lire .carte-ressource b{ font-size:15px; line-height:20px; }
  .gabarit-metier .sol-lire .carte-ressource .extrait{ font-size:13px; line-height:18px; }
  .gabarit-metier .sol-lire .carte-ressource .lire{ font-size:13px; line-height:18px; }
  
  .gabarit-metier .appel{ padding:105px 0 16px; }
  .gabarit-metier .appel .carte-appel{ min-height:326px; padding-top:38px; padding-bottom:36px; }
  .gabarit-metier .appel .carte-appel .visuel{ width:252px; height:252px; }
  .gabarit-metier .appel .carte-appel .surtitre{ margin-bottom:9px; }
  .gabarit-metier .appel .carte-appel h2{ font-size:32px; line-height:43px; margin:0; }
  .gabarit-metier .appel .carte-appel p:not(.surtitre){ font-size:20px; line-height:24px; margin:17px 0 0; max-width:629px; }
  .gabarit-metier .appel .carte-appel .btn{ margin-top:15px; height:59px; padding:0 30px; border-radius:24px; font-size:20px; }
  
  .gabarit-metier .pied{ padding:15px 0 51px; border-top:0; }
  .gabarit-metier .pied .boite{ grid-template-columns:376px 347px 283px minmax(180px,1fr); padding:0 0 0 55px; }
  .gabarit-metier .pied .logo{ margin-bottom:28px; }
  .gabarit-metier .pied .sociaux{ gap:9px; margin-left:-6px; }
  .gabarit-metier .pied ul{ margin-top:21px; }
  .gabarit-metier .pied ul li{ padding:11px 0; line-height:17px; }
  .gabarit-metier .pied ul a{ font-size:14px; line-height:17px; }
  .gabarit-metier .pied ul:first-of-type a{ font-weight:500; }
  .gabarit-metier .pied .droite{ align-items:flex-start; text-align:left; margin-top:16px; gap:0; }
  .gabarit-metier .pied .droite .btn{ margin-bottom:20px; }
  .gabarit-metier .pied .droite a.discret{ line-height:17px; }.gabarit-metier .pied .droite a.discret + :where(.vv-w) > a.discret,.gabarit-metier .pied .droite :where(.vv-w):has(> a.discret) + a.discret,.gabarit-metier .pied .droite a.discret + a.discret,.gabarit-metier .pied .droite :where(.vv-w):has(> a.discret) + :where(.vv-w) > a.discret{ margin-top:27px; }
}
@media (min-width:1100px){
  
  .met-heros p{ max-width:640px; }
  .carte-univers .kicker{ min-height:71px; }
  .role-grille{ margin-left:auto; padding-left:15px; padding-right:0; }
}
@media (min-width:1100px){
  .verdict{ max-width:300px; }
  .carte-score .btn{ margin-top:0; }
  .carte-score small{ font-size:14px; line-height:15px; max-width:351px; }
}
@media (min-width:1100px){
  
  .quotidien{ overflow-x:clip; }
}
@media (min-width:1100px){
  
  .met-heros .boite{ padding-top:3px; }
  .met-heros h1{ width:990px; min-height:372px; display:flex; align-items:center; }
  .met-heros p{ margin-top:-7px; }
}
@media (min-width:1100px){
  
  .met-constat h2{ max-width:1200px; }
  .carte-univers ul{ margin-bottom:70px; }
  .carte-univers .btn{ margin-top:auto; }
}
@media (min-width:1100px){
  
  .met-heros h1{ display:table-cell; vertical-align:middle; height:372px; width:990px; }
  .met-heros h1 .accent{ display:inline; }
  
  .carte-univers .kicker{ max-width:300px; }
}
@media (min-width:1100px){
  
  .met-heros h1 .accent::before{ content:"\A"; white-space:pre; }.met-heros h1 :where(.vv-w):has(> br) + :where(.vv-w) > .accent::before,.met-heros h1 br + .accent::before,.met-heros h1 :where(.vv-w):has(> br) + .accent::before,.met-heros h1 br + :where(.vv-w) > .accent::before{ content:none; }
}


.quiz-opts input{
  appearance:none; -webkit-appearance:none; flex:none; width:20px; height:20px; margin:0;
  border:1.5px solid var(--accent); border-radius:50%; background:#fff; cursor:pointer;
  display:inline-grid; place-content:center;
}
.quiz-opts input::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--accent); transform:scale(0); transition:transform .12s ease; }
.quiz-opts input:checked::before{ transform:scale(1); }
.quiz-opts input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.quiz-opts label{ border-color:rgba(255,165,201,.34); box-shadow:0 2px 6px rgba(11,23,46,.06); }
.quiz-nav .precedent{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:16px; color:var(--accent); }
.quiz-nav .precedent:hover{ text-decoration:underline; }
@media (min-width:1100px){
  .quiz-nav{ justify-content:flex-start; padding-left:184px; gap:43px; }
  .quiz-nav .precedent{ padding:12px 0; }
}


.gabarit-metier .sol-lire h2 .accent, .gabarit-metier .sol-lire h2 .degrade{ color:inherit; background-image:none; -webkit-background-clip:initial; background-clip:initial; -webkit-text-fill-color:currentColor; }


.carte-cas-metier .qui .logo{ background-color:transparent; background-size:contain; background-position:center; background-repeat:no-repeat; border-radius:0; }


.gabarit-metier .met-heros h1 .accent{ background-image:none; -webkit-background-clip:initial; background-clip:initial; color:var(--accent); -webkit-text-fill-color:currentColor; }
body[data-metier="responsable-pedagogique"] .met-heros h1 .accent{ background-image:linear-gradient(90deg,#028D9D 20%,#5F74FA 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.gabarit-metier .surtitre{ display:inline-block; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.theme-rose.gabarit-metier .surtitre{ background-image:linear-gradient(90deg,#FE5E9E 0%,#8E85D9 100%); }
.theme-teal.gabarit-metier .surtitre{ background-image:linear-gradient(90deg,#54B2B0 0%,#7298E1 100%); }
.theme-bleu.gabarit-metier .surtitre{ background-image:linear-gradient(90deg,#2879DD 0%,#6A8DE7 100%); }
.theme-rose.gabarit-metier .appel .carte-appel .surtitre{ background-image:linear-gradient(90deg,#FE5E9E 45%,#968CDB 100%); }
.theme-teal.gabarit-metier .appel .carte-appel .surtitre{ background-image:linear-gradient(90deg,#59B4B1 45%,#779EDF 100%); }
.theme-bleu.gabarit-metier .appel .carte-appel .surtitre{ background-image:linear-gradient(90deg,#317FDF 40%,#8DA9DB 100%); }
.gabarit-metier .sol-faq h2 .accent{ color:inherit; background-image:none; -webkit-background-clip:initial; background-clip:initial; -webkit-text-fill-color:currentColor; }

@media (min-width:1100px){
.role-texte p{ font-family:'Inter',sans-serif; font-size:20px; line-height:24px; margin-bottom:24px; }
  
  .met-cas{ padding:39px 0 76px; background:var(--accent-voile); }
  .met-cas .surtitre{ margin-bottom:19px; }
  .met-cas h2{ font-size:48px; line-height:59px; }
  .carte-cas-metier{ margin:43px -24px 0; grid-template-columns:426px minmax(0,1fr); min-height:446px; border-radius:28px; border:.5px solid rgba(255,165,201,.34); box-shadow:0 4px 4px rgba(0,0,0,.25); }
  .carte-cas-metier .photo{ min-height:0; }
  .carte-cas-metier .contenu{ padding:38px 30px 27px; }
  .carte-cas-metier .tag{ font-size:16px; line-height:18px; }
  .carte-cas-metier .qui{ margin:35px 0 10px; }
  .carte-cas-metier .qui .logo{ width:65px; height:62px; }
  .carte-cas-metier .qui b{ font-size:32px; }
  .carte-cas-metier p{ font-family:'Inter',sans-serif; font-size:18px; line-height:22px; margin-bottom:12px; }
  .carte-cas-metier .cas-stats{ margin-top:28px; }
  .cas-stats b{ font-family:'Inter',sans-serif; font-weight:600; font-size:24px; line-height:24px; }
  .cas-stats span{ font-size:16px; line-height:16px; }
  
  .gabarit-metier .sol-faq{ padding:86px 0 71px; }
  .gabarit-metier .sol-faq .surtitre{ margin-bottom:12px; }
  .gabarit-metier .sol-faq h2{ font-size:32px; line-height:43px; margin-bottom:68px; }
  .gabarit-metier .faq-liste{ gap:14.4px; }.gabarit-metier .faq-item > button,.gabarit-metier .faq-item > :where(.vv-w) > button{ min-height:93.6px; }
  
  .gabarit-metier .sol-lire{ padding:34px 0 81px; background:var(--accent-voile); text-align:center; }
  .gabarit-metier .sol-lire .surtitre{ margin-bottom:7px; }
  .gabarit-metier .sol-lire h2{ font-size:32px; line-height:43px; margin-bottom:40px; }
  .gabarit-metier .sol-lire .ressources-grille{ text-align:left; gap:25px; max-width:1052px; margin:0 auto; }
  .gabarit-metier .sol-lire .carte-ressource{ min-height:318px; }
  .gabarit-metier .sol-lire .carte-ressource .visuel{ aspect-ratio:334/139; }
  .gabarit-metier .sol-lire .carte-ressource .corps{ padding:20px 19px 14px; gap:6px; }
  .gabarit-metier .sol-lire .carte-ressource .duree{ font-size:13px; line-height:18px; }
  .gabarit-metier .sol-lire .carte-ressource b{ font-size:15px; line-height:20px; }
  .gabarit-metier .sol-lire .carte-ressource .extrait{ font-size:13px; line-height:18px; }
  .gabarit-metier .sol-lire .carte-ressource .lire{ font-size:13px; line-height:18px; }
  
  .gabarit-metier .appel{ padding:105px 0 16px; }
  .gabarit-metier .appel .carte-appel{ min-height:326px; padding-top:38px; padding-bottom:36px; }
  .gabarit-metier .appel .carte-appel .visuel{ width:252px; height:252px; }
  .gabarit-metier .appel .carte-appel .surtitre{ margin-bottom:9px; }
  .gabarit-metier .appel .carte-appel h2{ font-size:32px; line-height:43px; margin:0; }
  .gabarit-metier .appel .carte-appel p:not(.surtitre){ font-size:20px; line-height:24px; margin:17px 0 0; max-width:629px; }
  .gabarit-metier .appel .carte-appel .btn{ margin-top:15px; height:59px; padding:0 30px; border-radius:24px; font-size:20px; }
  
  .gabarit-metier .pied{ padding:15px 0 51px; border-top:0; }
  .gabarit-metier .pied .boite{ grid-template-columns:376px 347px 283px minmax(180px,1fr); padding:0 0 0 55px; }
  .gabarit-metier .pied .logo{ margin-bottom:28px; }
  .gabarit-metier .pied .sociaux{ gap:9px; margin-left:-6px; }
  .gabarit-metier .pied ul{ margin-top:21px; }
  .gabarit-metier .pied ul li{ padding:11px 0; line-height:17px; }
  .gabarit-metier .pied ul a{ font-size:14px; line-height:17px; }
  .gabarit-metier .pied ul:first-of-type a{ font-weight:500; }
  .gabarit-metier .pied .droite{ align-items:flex-start; text-align:left; margin-top:16px; gap:0; }
  .gabarit-metier .pied .droite .btn{ margin-bottom:20px; }
  .gabarit-metier .pied .droite a.discret{ line-height:17px; }.gabarit-metier .pied .droite a.discret + :where(.vv-w) > a.discret,.gabarit-metier .pied .droite :where(.vv-w):has(> a.discret) + a.discret,.gabarit-metier .pied .droite a.discret + a.discret,.gabarit-metier .pied .droite :where(.vv-w):has(> a.discret) + :where(.vv-w) > a.discret{ margin-top:27px; }
}
@media (min-width:1100px){
  
  .met-heros p{ max-width:640px; }
  .carte-univers .kicker{ min-height:71px; }
  .role-grille{ margin-left:auto; padding-left:15px; padding-right:0; }
}
@media (min-width:1100px){
  .verdict{ max-width:300px; }
  .carte-score .btn{ margin-top:0; }
  .carte-score small{ font-size:14px; line-height:15px; max-width:351px; }
}
@media (min-width:1100px){
  
  .quotidien{ overflow-x:clip; }
}
@media (min-width:1100px){
  
  .met-heros .boite{ padding-top:3px; }
  .met-heros h1{ width:990px; min-height:372px; display:flex; align-items:center; }
  .met-heros p{ margin-top:-7px; }
}
@media (min-width:1100px){
  
  .met-constat h2{ max-width:1200px; }
  .carte-univers ul{ margin-bottom:70px; }
  .carte-univers .btn{ margin-top:auto; }
}
@media (min-width:1100px){
  
  .met-heros h1{ display:table-cell; vertical-align:middle; height:372px; width:990px; }
  .met-heros h1 .accent{ display:inline; }
  
  .carte-univers .kicker{ max-width:300px; }
}
@media (min-width:1100px){
  
  .met-heros h1 .accent::before{ content:"\A"; white-space:pre; }.met-heros h1 :where(.vv-w):has(> br) + :where(.vv-w) > .accent::before,.met-heros h1 br + .accent::before,.met-heros h1 :where(.vv-w):has(> br) + .accent::before,.met-heros h1 br + :where(.vv-w) > .accent::before{ content:none; }
}


.quiz-opts input{
  appearance:none; -webkit-appearance:none; flex:none; width:20px; height:20px; margin:0;
  border:1.5px solid var(--accent); border-radius:50%; background:#fff; cursor:pointer;
  display:inline-grid; place-content:center;
}
.quiz-opts input::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--accent); transform:scale(0); transition:transform .12s ease; }
.quiz-opts input:checked::before{ transform:scale(1); }
.quiz-opts input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.quiz-opts label{ border-color:rgba(255,165,201,.34); box-shadow:0 2px 6px rgba(11,23,46,.06); }
.quiz-nav .precedent{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:16px; color:var(--accent); }
.quiz-nav .precedent:hover{ text-decoration:underline; }
@media (min-width:1100px){
  .quiz-nav{ justify-content:flex-start; padding-left:184px; gap:43px; }
  .quiz-nav .precedent{ padding:12px 0; }
}


.gabarit-metier .sol-lire h2 .accent, .gabarit-metier .sol-lire h2 .degrade{ color:inherit; background-image:none; -webkit-background-clip:initial; background-clip:initial; -webkit-text-fill-color:currentColor; }


.carte-cas-metier .qui .logo{ background-color:transparent; background-size:contain; background-position:center; background-repeat:no-repeat; border-radius:0; }



@media (min-width:1100px){
  .met-heros .photo{
    -webkit-mask-image:linear-gradient(90deg,transparent 29%,rgba(0,0,0,.39) 43.8%,#000 71.4%);
            mask-image:linear-gradient(90deg,transparent 29%,rgba(0,0,0,.39) 43.8%,#000 71.4%);
  }
  .met-heros p{ max-width:598px; }
}


.quiz-nav .precedent:disabled{ opacity:.45; cursor:default; text-decoration:none; }
@media (min-width:1100px){
  .jauge{ height:108px; overflow:visible; }
  .carte-score small{ font-size:15px; line-height:15px; max-width:none; margin:8px -34px 0; }
}


.gabarit-metier .surtitre{ font-size:18px; letter-spacing:0; line-height:24px; }


@media (min-width:1100px){
  
  .role.role-plan{ padding:0; min-height:0; height:var(--role-h); }
  .role.role-plan .role-grille{ display:block; position:relative; max-width:none; width:100%; margin:0; padding:0; height:var(--role-h); }
  .role.role-plan .role-tete{ position:absolute; left:var(--x); top:var(--y); width:var(--w); }
  .role.role-plan h2{ margin:0; font-size:32px; line-height:39px; }
  .role.role-plan .role-escalier{ display:block; }
  .role.role-plan .role-escalier span{ position:absolute; left:var(--x); top:var(--y); margin:0 !important; white-space:nowrap; font-size:20px; line-height:27px; }
  .role.role-plan .role-texte{ position:absolute; left:var(--x); top:var(--y); width:var(--w); padding:0; }
  
  .quotidien .surtitre{ margin-top:12px; }
  .quotidien .citation{ margin-top:-12px; }
  
  .constat-grille{ margin:33px 0 0 122px; }
  
  .diagnostic{ padding-top:37px; padding-bottom:37px; }
  .quiz-q{ margin-bottom:24px; }
  .jauge{ margin-bottom:32px; }
  
  .univers .surtitre{ margin-bottom:55px; }
  .univers-grille{ margin:0 -98px; grid-template-columns:494px 496px 450px; }
  .carte-univers .kicker{ min-height:71px; max-width:280px; display:flex; align-items:center; justify-content:center; }
  .carte-univers .kicker br{ display:none; }
  .carte-univers .nom{ margin-top:15px; }
  .carte-univers .desc{ margin-top:51px; }
  .carte-univers ul{ margin-bottom:17px; }
  body[data-metier="directeur-etablissement"] .carte-univers:first-child .desc{ max-width:424px; }
  .univers{ padding-bottom:134px; }
  
  .met-cas .surtitre{ margin-bottom:59px; }
  .gabarit-metier .met-cas h2{ line-height:39px; margin-bottom:7px; }
  .met-cas{ padding-bottom:27px; }
  .gabarit-metier .sol-faq .surtitre{ margin-bottom:24px; }
  .gabarit-metier .sol-faq h2{ margin-bottom:58px; }
  .gabarit-metier .sol-lire h2{ margin-bottom:59px; }
  .gabarit-metier .appel{ padding-top:39px; }
  .gabarit-metier .appel .carte-appel{ padding-top:52px; }
  .gabarit-metier .appel .surtitre{ margin-bottom:31px; }
}
@media (min-width:1100px){
  
  .gabarit-metier .carte-cas-metier{ margin-top:7px; }
}


@media (min-width:1100px){
  body[data-metier="directeur-etablissement"] .carte-univers .nom{ margin-top:11px; }
  body[data-metier="directeur-admissions"] .quotidien{ margin-top:-36px; }
  body[data-metier="directeur-admissions"] .met-constat{ margin-top:9px; }
  body[data-metier="directeur-admissions"] .diagnostic{ margin-top:-38px; }
  body[data-metier="directeur-admissions"] .univers{ margin-top:-51px; }
  body[data-metier="directeur-admissions"] .carte-univers ul{ margin-bottom:13px; }
  body[data-metier="directeur-admissions"] .role{ margin-top:32px; }
  body[data-metier="directeur-admissions"] .sol-faq{ margin-top:65px; }
  body[data-metier="directeur-admissions"] .sol-lire{ margin-top:-9px; }
  body[data-metier="directeur-admissions"] .appel{ margin-top:12px; }
  body[data-metier="dsi"] .quotidien{ margin-top:-24px; }
  body[data-metier="dsi"] .diagnostic{ margin-top:-16px; }
  body[data-metier="dsi"] .univers{ margin-top:-37px; }
  body[data-metier="dsi"] .univers-grille{ margin-top:10px; }
  body[data-metier="dsi"] .carte-univers .nom{ margin-top:-4px; }
  body[data-metier="dsi"] .carte-univers ul{ margin-bottom:59px; }
  body[data-metier="dsi"] .role{ margin-top:-5px; }
  body[data-metier="dsi"] .carte-cas-metier{ margin-top:-39px; }
  body[data-metier="dsi"] .sol-faq{ margin-top:65px; }
  body[data-metier="dsi"] .appel{ margin-top:32px; }
  body[data-metier="professeur"] .quotidien{ margin-top:-36px; }
  body[data-metier="professeur"] .met-constat{ margin-top:-15px; }
  body[data-metier="professeur"] .diagnostic{ margin-top:-55px; }
  body[data-metier="professeur"] .univers-grille{ margin-top:15px; }
  body[data-metier="professeur"] .carte-univers .nom{ margin-top:-4px; }
  body[data-metier="professeur"] .carte-univers ul{ margin-bottom:-10px; }
  body[data-metier="professeur"] .role{ margin-top:59px; }
  body[data-metier="professeur"] .sol-faq{ margin-top:65px; }
  body[data-metier="responsable-pedagogique"] .quotidien{ margin-top:-36px; }
  body[data-metier="responsable-pedagogique"] .met-constat{ margin-top:9px; }
  body[data-metier="responsable-pedagogique"] .diagnostic{ margin-top:-56px; }
  body[data-metier="responsable-pedagogique"] .univers-grille{ margin-top:-17px; }
  body[data-metier="responsable-pedagogique"] .carte-univers .nom{ margin-top:27px; }
  body[data-metier="responsable-pedagogique"] .carte-univers ul{ margin-bottom:36px; }
  body[data-metier="responsable-pedagogique"] .role{ margin-top:-60px; }
  body[data-metier="responsable-pedagogique"] .sol-faq{ margin-top:65px; }
  body[data-metier="responsable-pedagogique"] .sol-lire{ margin-top:-117px; }
  body[data-metier="responsable-concours"] .quotidien{ margin-top:-36px; }
  body[data-metier="responsable-concours"] .met-constat{ margin-top:12px; }
  body[data-metier="responsable-concours"] .diagnostic{ margin-top:-56px; }
  body[data-metier="responsable-concours"] .univers-grille{ margin-top:14px; }
  body[data-metier="responsable-concours"] .carte-univers .nom{ margin-top:-3px; }
  body[data-metier="responsable-concours"] .role{ margin-top:32px; }
  body[data-metier="responsable-concours"] .sol-faq{ margin-top:58px; }
  body[data-metier="responsable-concours"] .appel{ margin-top:29px; }
}:where(.vv-w):has(> .diag-consent) + :where(.vv-w) > .diag-consent,.diag-consent + :where(.vv-w) > .diag-consent,:where(.vv-w):has(> .diag-consent) + .diag-consent,.diag-consent + .diag-consent{ margin-top:8px; }



.gabarit-metier .surtitre{ font-size:18px; letter-spacing:0; line-height:1.33; }


.gabarit-metier main{ overflow-x:clip; }
.gabarit-metier .role{ position:relative; }.gabarit-metier .role > .boite,.gabarit-metier .role > :where(.vv-w) > .boite{ position:relative; z-index:1; }
.gabarit-metier .role::after{ content:""; position:absolute; z-index:0; pointer-events:none; display:none; }
.theme-teal.gabarit-metier .role::after{
  display:block; left:calc(50% + 354px); top:-230px; width:892px; height:985px; opacity:.28;
  background:url('../img/solutions/motif-teal.webp') center / auto 985px no-repeat;
}
.theme-rose.gabarit-metier .role::after{
  display:block; left:calc(50% + 332px); top:-150px; width:648px; height:648px;
  background:url('../img/solutions/motif-rose.png') center / 100% 100% no-repeat;
}


.carte-cas-metier .photo{ position:relative; }
.carte-cas-metier .photo::after{ content:""; position:absolute; inset:0; background:color-mix(in srgb, var(--accent) 23%, transparent); }
body[data-metier="dsi"] .carte-cas-metier .photo::after{ background:color-mix(in srgb, var(--accent) 12%, transparent); }


.gabarit-metier .appel .btn-accent{
  height:59px; padding:0 30px; border-radius:24px; font-size:20px; font-weight:700;
  background:var(--degrade-accent); border:1px solid color-mix(in srgb, var(--accent-vif) 60%, transparent); box-shadow:none;
}
.theme-rose.gabarit-metier .appel .btn-accent{ background:#FE2977; border-color:transparent; height:54px; border-radius:27px; font-weight:900; }
@media (max-width:1080px){ .gabarit-metier .role::after{ display:none !important; } }

.gabarit-metier .role{ overflow:clip; }





.citation{ font-family:'Segoe Script','Caveat',cursive; }
@media (min-width:1100px){
  .citation{ font-size:40px; line-height:1.28; max-width:440px; }
}


@media (min-width:1100px){
  .frise-etapes span{ width:141px; margin:10px .5px 0; }
}


.met-constat .carte-constat{ transition:transform .25s ease, box-shadow .25s ease; }
.met-constat .carte-constat.vv-vu{ transition:opacity .55s ease, transform .25s ease, box-shadow .25s ease; }
.met-constat .carte-constat:hover{ transform:translateY(-6px) scale(1.03); box-shadow:0 20px 34px -16px rgba(11,23,46,.30); z-index:1; }
@media (min-width:1100px){
  .carte-constat b{ margin-bottom:12px; }
}


@media (min-width:1100px){
  .diagnostic{ padding-top:60px; }
}


@media (min-width:1100px){
  .carte-score small{ margin:10px 0 0; max-width:100%; }
}
.quiz-opts label{ height:auto; min-height:42px; padding-top:8px; padding-bottom:8px; line-height:1.3; align-items:center; }


.diagnostic:has(#diag-form:not([hidden])) .quiz-note,
.diagnostic:has(#diag-merci:not([hidden])) .quiz-note{ display:none; }


.theme-teal{ --liseret:rgba(2,141,157,.34); }
.theme-bleu{ --liseret:rgba(1,97,216,.30); }
.theme-rose{ --liseret:rgba(255,165,201,.34); }
@media (min-width:1100px){
  .gabarit-metier .carte-quiz,
  .gabarit-metier .carte-score,
  .gabarit-metier .carte-cas-metier{ border-color:var(--liseret,rgba(255,165,201,.34)); }
}
.gabarit-metier .quiz-opts label{ border-color:var(--liseret,rgba(255,165,201,.34)); }


.carte-univers .nom{
  font-weight:700; letter-spacing:0; padding:.14em 0 .2em; margin-bottom:-.2em;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));
}
@media (min-width:1100px){
  .carte-univers .nom{ font-size:64px; line-height:.77; }
  .gabarit-metier .carte-univers .nom{ margin-top:calc(var(--nom-mt,15px) - .14em); }
}
.carte-univers.rose .nom{ background-image:linear-gradient(90deg,rgba(255,0,102,.74) 41.8%,rgba(61,101,224,.74) 100%); }
.carte-univers.teal .nom{ background-image:linear-gradient(90deg,rgba(7,144,140,.74) 41.8%,rgba(61,101,224,.74) 100%); }
.carte-univers.bleu .nom{ background-image:linear-gradient(90deg,rgba(55,105,193,.74) 41.8%,rgba(61,101,224,.74) 100%); }


.role-escalier span.vv-apparition.vv-vu{ transition:opacity 1s ease, transform 1s ease; }


@media (min-width:1100px){
  .gabarit-metier .met-cas h2{ margin-bottom:27px; }
  .gabarit-metier .carte-cas-metier,
  body[data-metier="dsi"] .carte-cas-metier{ margin-top:0; } 
}


body[data-metier="responsable-pedagogique"] .met-heros h1 .accent{
  background-image:none; -webkit-background-clip:initial; background-clip:initial;
  color:var(--accent); -webkit-text-fill-color:currentColor;
}


.carte-constat .picto{ display:none; }


@media (min-width:1100px){
  body.gabarit-metier .carte-univers ul{ margin-bottom:40px; }
}
.gabarit-metier .carte-univers .btn{ margin-top:auto; }
@media (max-width:1099.98px){
  body.gabarit-metier .carte-univers ul{ margin-bottom:28px; }
}


@media (min-width:1100px){
  body[data-metier="directeur-admissions"] .univers,
  body[data-metier="dsi"] .univers{ margin-top:0; }
}


@media (min-width:1100px){
  .gabarit-metier .quotidien .surtitre{ max-width:480px; line-height:1.3; }
}




@media (min-width:1100px){
  
  body[data-metier="responsable-pedagogique"] .sol-lire,
  body[data-metier="directeur-admissions"] .sol-lire{ margin-top:0; }

  
  .gabarit-metier .frise-ligne{ grid-auto-columns:142px; justify-content:start; width:max-content; }
  .gabarit-metier .frise-ligne::before{ left:71px; right:71px; }

  
  .theme-bleu.gabarit-metier .role::after{
    display:block; left:calc(50% + 470px); top:-140px; width:680px; height:680px; opacity:.4;
    background:url('../img/solutions/motif-bleu.webp') center / 100% 100% no-repeat;
    -webkit-mask-image:radial-gradient(closest-side, #000 55%, transparent 100%);
            mask-image:radial-gradient(closest-side, #000 55%, transparent 100%);
  }

  
  body[data-metier="directeur-admissions"] .met-heros .photo{
    -webkit-mask-image:linear-gradient(90deg, transparent 29%, rgba(0,0,0,.39) 43.8%, #000 71.4%), linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 29%, rgba(0,0,0,.39) 43.8%, #000 71.4%), linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }
}


.met-constat .carte-constat.vv-vu{ transition:opacity .4s ease-out, transform .4s ease-out, box-shadow .3s ease-out; }
.met-constat .carte-constat:hover{ transform:scale(1.05); box-shadow:0 10px 24px -12px rgba(11,23,46,.22); z-index:2; transition:transform .22s ease-out, box-shadow .22s ease-out; }


@media (min-width:1100px){
  .gabarit-metier .quotidien .citation{ font-size:32px; line-height:1.42; max-width:400px; min-height:0; }
}


@media (min-width:1100px){
  .gabarit-metier .met-constat h2{ padding-bottom:13px; }.gabarit-metier .met-constat :has(> .carte-constat, > :where(.vv-w) > .carte-constat){ row-gap:36px; }
  body[data-metier="responsable-concours"] .met-constat{ margin-top:8px; }
  body[data-metier="responsable-concours"] .diagnostic{ margin-top:8px; }
  body[data-metier="responsable-pedagogique"] .met-constat{ margin-top:12px; }
  body[data-metier="responsable-pedagogique"] .diagnostic{ margin-top:8px; }
  body[data-metier="professeur"] .met-constat{ margin-top:12px; }
  body[data-metier="professeur"] .diagnostic{ margin-top:8px; }
  body[data-metier="directeur-etablissement"] .met-constat{ margin-top:8px; }
  body[data-metier="directeur-etablissement"] .diagnostic{ margin-top:8px; }
  body[data-metier="directeur-admissions"] .met-constat{ margin-top:12px; }
  body[data-metier="directeur-admissions"] .diagnostic{ margin-top:8px; }
  body[data-metier="dsi"] .met-constat{ margin-top:12px; }
  body[data-metier="dsi"] .diagnostic{ margin-top:8px; }
}


@media (min-width:1100px){
  .gabarit-metier .carte-cas-metier .contenu{ display:flex; flex-direction:column; padding:40px 44px 34px 34px; }
  .gabarit-metier .carte-cas-metier .qui{ margin:26px 0 18px; }.gabarit-metier .carte-cas-metier .contenu > p,.gabarit-metier .carte-cas-metier .contenu > :where(.vv-w) > p{ max-width:780px; }
  .gabarit-metier .carte-cas-metier .cas-stats{ margin-top:34px; gap:0; }.gabarit-metier .carte-cas-metier .cas-stats > div,.gabarit-metier .carte-cas-metier .cas-stats > :where(.vv-w) > div{ padding:0 22px; }.gabarit-metier .carte-cas-metier .cas-stats > div:first-child,.gabarit-metier .carte-cas-metier .cas-stats > :where(.vv-w:first-child) > div:first-child{ padding-left:0; }.gabarit-metier .carte-cas-metier .cas-stats > :where(.vv-w):has(> div) + div,.gabarit-metier .carte-cas-metier .cas-stats > div + div,.gabarit-metier .carte-cas-metier .cas-stats > div + :where(.vv-w) > div,.gabarit-metier .carte-cas-metier .cas-stats > :where(.vv-w):has(> div) + :where(.vv-w) > div,.gabarit-metier .carte-cas-metier .cas-stats > :where(.vv-w) > div + div,.gabarit-metier .carte-cas-metier .cas-stats > :where(.vv-w) > div + :where(.vv-w) > div,.gabarit-metier .carte-cas-metier .cas-stats > :where(.vv-w) > :where(.vv-w):has(> div) + div,.gabarit-metier .carte-cas-metier .cas-stats > :where(.vv-w) > :where(.vv-w):has(> div) + :where(.vv-w) > div{ border-left:1px solid color-mix(in srgb, var(--ink, #0B172E) 16%, transparent); }
  .gabarit-metier .carte-cas-metier .cas-stats b{ margin-bottom:6px; }
  .gabarit-metier .carte-cas-metier .cas-stats span{ font-size:18px; line-height:22px; }
  .gabarit-metier .carte-cas-metier .lire-cas{ margin-top:auto; padding-top:24px; }
}


.role-escalier span.vv-apparition.vv-vu{ transition:opacity 1.4s ease, transform 1.4s ease; }


@media (min-width:1100px){
  .gabarit-metier .frise-etapes span{ font-size:18px !important; line-height:22px; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; }
}


@media (min-width:1100px){
  html body.gabarit-metier .met-cas .surtitre{ margin-bottom:29px; }
  html body.gabarit-metier .met-cas h2{ margin-bottom:53px; }
  html body.gabarit-metier .met-cas{ padding-bottom:76px; }html body.gabarit-metier :where(.vv-w):has(> .met-cas) + .sol-faq,html body.gabarit-metier .met-cas + :where(.vv-w) > .sol-faq,html body.gabarit-metier :where(.vv-w):has(> .met-cas) + :where(.vv-w) > .sol-faq,html body.gabarit-metier .met-cas + .sol-faq{ margin-top:0; padding-top:86px; }
}


@media (min-width:1100px){
  body[data-metier="directeur-admissions"].gabarit-metier .role::after,
  body[data-metier="dsi"].gabarit-metier .role::after{
    display:block; top:auto; bottom:0; height:410px; opacity:1;
    -webkit-mask-image:none; mask-image:none; mix-blend-mode:multiply;
  }
  body[data-metier="directeur-admissions"].gabarit-metier .role::after{
    left:calc(50% + 720px - 448px); width:448px;
    background:url('../img/metiers/role-motif-adm.webp') right bottom / 448px 410px no-repeat;
  }
  body[data-metier="dsi"].gabarit-metier .role::after{
    left:calc(50% + 720px - 489px); width:489px;
    background:url('../img/metiers/role-motif-dsi.webp') right bottom / 489px 410px no-repeat;
  }
}

@media (min-width:1441px){
  body[data-metier="directeur-admissions"].gabarit-metier .role::after,
  body[data-metier="dsi"].gabarit-metier .role::after{
    -webkit-mask-image:linear-gradient(90deg,#000 70%,transparent); mask-image:linear-gradient(90deg,#000 70%,transparent);
  }
}


.diag-info-legale{ margin:8px 0 0; font-size:12.5px; line-height:17px; color:#667085; }


.guide-fenetre{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(11,23,46,.55); }
.guide-fenetre[hidden]{ display:none; }
html.guide-ouvert{ overflow:hidden; }
.guide-carte{ position:relative; width:min(520px,100%); max-height:calc(100dvh - 40px); overflow:auto; background:#fff; border-radius:26px; padding:36px 36px 30px; box-shadow:0 30px 80px -30px rgba(11,23,46,.5); }
.guide-carte .surtitre{ margin-bottom:8px; }
.guide-carte h2{ font-size:24px; line-height:1.25; margin:0 0 10px; }
.guide-intro{ font-size:16px; color:#475467; margin-bottom:20px; }
.guide-form{ display:flex; flex-direction:column; gap:12px; }

.guide-form[hidden]{ display:none; }
.guide-form input[type=email], .guide-form input[type=text]{ height:48px; padding:0 18px; border:1px solid #D9DEE7; border-radius:14px; font:inherit; font-size:16px; }
.guide-form input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.guide-consent{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:20px; margin-top:4px; }
.guide-consent input{ width:18px; height:18px; margin-top:1px; flex:none; accent-color:var(--accent); }
.guide-info{ font-size:12.5px; line-height:17px; color:#667085; margin:-4px 0 4px 28px; }
.guide-form .btn{ align-self:flex-start; }
.guide-erreur{ color:#D0021B; font-size:14px; }
.guide-merci p{ font-size:17px; margin-bottom:18px; }
.guide-fermer{ position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:0; background:#F2F4F7; color:#0B172E; font-size:24px; line-height:36px; cursor:pointer; }
@media (max-width:640px){ .guide-carte{ padding:30px 20px 24px; } .guide-form .btn{ align-self:stretch; } }


.met-constat .carte-constat{ will-change:transform; backface-visibility:hidden; -webkit-font-smoothing:antialiased; }


@media (min-width:1441px){
  .role.role-plan .role-grille{ width:1440px; margin:0 auto; }
}


@media (min-width:1100px){
  .carte-univers .nom{ line-height:.86; }
}

@media (min-width:1100px){
  body[data-metier="directeur-admissions"].gabarit-metier .role::after,
  body[data-metier="dsi"].gabarit-metier .role::after{ filter:none; } 
}


@media (min-width:1100px){
  .theme-rose.gabarit-metier .role::after{ top:-118px; left:calc(50% + 440px); } 
}


@media (min-width:1100px){
  
  .gabarit-metier .carte-univers .nom{ line-height:.95; }

  
  body[data-metier="responsable-concours"].gabarit-metier .role-texte{ width:470px; max-width:470px; }
  body[data-metier="responsable-concours"].gabarit-metier .role::after{ left:calc(50% + 333px); top:-96px; width:586px; height:586px; }

  
  body[data-metier="directeur-admissions"].gabarit-metier .role::after{
    left:calc(50% + 720px - 650px); width:650px; height:595px;
    background-size:650px 595px; filter:saturate(1.25) contrast(1.08);
  }
  body[data-metier="dsi"].gabarit-metier .role::after{
    left:calc(50% + 720px - 709px); width:709px; height:595px;
    background-size:709px 595px; filter:saturate(1.25) contrast(1.08);
  }
}
@media (min-width:1100px){
  
  body[data-metier="responsable-concours"] .role.role-plan,
  body[data-metier="responsable-concours"] .role.role-plan .role-grille{ height:500px; }
  body[data-metier="responsable-concours"].gabarit-metier .role::after{ left:calc(50% + 348px); }
}
@media (min-width:1100px){
  
  body[data-metier="directeur-admissions"].gabarit-metier .role::after{
    background:url('../img/metiers/role-motif-adm.svg') right bottom / 650px 595px no-repeat; filter:none; mix-blend-mode:normal;
  }
  body[data-metier="dsi"].gabarit-metier .role::after{
    background:url('../img/metiers/role-motif-dsi.svg') right bottom / 709px 595px no-repeat; filter:none; mix-blend-mode:normal;
  }
}


@media (min-width:1100px){
  body[data-metier="directeur-admissions"].gabarit-metier .role::after{
    background-image:url('../img/metiers/role-motif-adm-rose.svg');
  }
}


@media (min-width:1100px){ .carte-constat b{ margin-bottom:18px; } }
.role-escalier span.vv-apparition.vv-vu{ transition:opacity 2s ease, transform 2s ease; }


.met-heros .met-nom{ display:none; }
@media (max-width:640px){
  
  html body.gabarit-metier .met-heros{ padding:0; min-height:0; }
  html body.gabarit-metier .met-heros .photo{ position:relative; inset:auto; width:100%; height:210px; margin:0; background-size:cover; background-position:center 30%; mask-image:none; -webkit-mask-image:none; }
  html body.gabarit-metier .met-heros .photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(43,47,60,.38) 0%, rgba(43,47,60,.18) 50%, #fff 100%); }
  html body.gabarit-metier .met-heros .met-nom{ display:block; position:absolute; left:20px; top:18px; z-index:1; font-family:'Satoshi',sans-serif; font-weight:700; font-size:22px; line-height:1.15; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.35); max-width:70%; }
  html body.gabarit-metier .met-heros .boite{ padding:6px 20px 26px; }
  html body.gabarit-metier .met-heros .texte{ max-width:none; }
  html body.gabarit-metier .met-heros h1{ width:auto; max-width:none; font-size:26px; line-height:1.15; text-align:left; }
  html body.gabarit-metier .met-heros p{ margin-top:12px; max-width:none; font-size:15px; line-height:1.45; text-align:left; }
  
  html body.gabarit-metier .met-heros .actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
  html body.gabarit-metier .met-heros .actions .btn{ width:100%; height:auto; min-height:50px; padding:10px 10px; font-size:13.5px; line-height:1.2; white-space:normal; text-align:center; display:flex; align-items:center; justify-content:center; border-radius:999px; }
  
  html body.gabarit-metier .quotidien{ padding:26px 0 0; }
  html body.gabarit-metier .quotidien .surtitre{ margin-bottom:18px; }
  html body.gabarit-metier .frise-etapes .picto{ width:58px; height:58px; margin-bottom:8px; }
  html body.gabarit-metier .frise-etapes .picto svg{ width:30px; height:30px; }
  
  html body.gabarit-metier .carte-constat{ min-height:0; padding:16px 18px; cursor:pointer; }
  html body.gabarit-metier .carte-constat b{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; font-size:17px; line-height:1.3; }
  html body.gabarit-metier .carte-constat b::after{ content:""; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); flex:none; margin-right:4px; transition:transform .2s; }
  html body.gabarit-metier .carte-constat.ouvert b::after{ transform:rotate(-135deg); }
  html body.gabarit-metier .carte-constat p{ display:none; margin-top:10px; font-size:15.5px; line-height:1.45; }
  html body.gabarit-metier .carte-constat.ouvert p{ display:block; }
  
  html body.gabarit-metier .carte-univers{ cursor:pointer; position:relative; padding-right:44px; }
  html body.gabarit-metier .carte-univers::after{ content:""; position:absolute; right:22px; top:34px; width:10px; height:10px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(45deg); transition:transform .2s; }
  html body.gabarit-metier .carte-univers.ouvert::after{ transform:rotate(-135deg); }
  html body.gabarit-metier .carte-univers .desc, html body.gabarit-metier .carte-univers ul, html body.gabarit-metier .carte-univers .btn{ display:none; }
  html body.gabarit-metier .carte-univers.ouvert .desc, html body.gabarit-metier .carte-univers.ouvert ul{ display:block; }
  html body.gabarit-metier .carte-univers.ouvert .btn{ display:inline-flex; }
  html body.gabarit-metier .carte-univers .nom{ margin-bottom:0; }
  
  html body.gabarit-metier .role{ display:none; }
  
  html body.gabarit-metier .carte-cas-metier .photo{ height:170px; min-height:0; }
  html body.gabarit-metier .carte-cas-metier .contenu p:not(:first-of-type):not(.tag){ display:none; }
  html body.gabarit-metier .carte-cas-metier .cas-stats{ display:none; }
  
  html body.gabarit-metier .carte-appel h2{ display:none; }
  html body.gabarit-metier .carte-appel .appel-long{ display:none; }
}


@media (max-width:640px){
  html body.gabarit-metier .met-heros h1 .h1-nom{ display:none; }
  html body.gabarit-metier .met-heros h1::first-letter{ text-transform:uppercase; }
}


@media (max-width:640px){
  html body.gabarit-metier .met-heros .actions{ grid-template-columns:1fr; gap:12px; }
  html body.gabarit-metier .met-heros .actions .btn{ min-height:54px; padding:12px 20px; font-size:15px; }
}


@media (max-width:640px){
  
  html body.gabarit-metier .carte-univers{ padding-left:44px; }
  html body.gabarit-metier .carte-univers:not(.ouvert)::after{ top:50%; margin-top:-8px; }
  
  html body.gabarit-metier .met-heros .met-nom{ max-width:200px; }
}

/* 13/10 : « Question suivante » inactif tant qu'aucune réponse n'est choisie. */
#quiz-suivant:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

/* 13/10 (retour de Sarah) : prénom et nom en deux champs côte à côte. */
.diag-duo{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:480px){ .diag-duo{ grid-template-columns:1fr; } }