/* Grau de Incapacidade : concept « A Coluna » (S4, récit vertical). Bande pétrole sur toute la hauteur ; le texte court sur blanc.
   Polices hébergées ici : Lusitana 700 (titres), Rosario 400 et 700 (texte), SIL OFL 1.1 (polices/OFL-*.txt). */
@font-face{font-family:"Rosario";src:url(polices/rosario-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Rosario";src:url(polices/rosario-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Lusitana";src:url(polices/lusitana-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --petroleo:#0e3f47;--agua:#7fd1c7;--tinta:#17232b;--suave:#3d4c55;--elo:#0b5c66;--filete:#d5e3e3;--campo:#eef6f5;
  --lado0:clamp(372px,34vw,560px);
  /* très grands écrans : la bande s'élargit pour que le texte reste au centre ; son contenu glisse d'autant (--recuo) */
  --recuo:max(0px,calc((100vw - 56rem) / 2 - var(--lado0)));
  --lado:calc(var(--lado0) + var(--recuo));
  /* largeur de la colonne dessinée : suit la bande, sans dépasser la hauteur de l'écran ; l'épine passe au centre de la colonne */
  --sw:max(300px,min(calc(var(--lado0) - 40px),calc((100vh - 150px) * .5497)));
  --eixo:calc(20px + var(--recuo) + var(--sw) * .3855)
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-variant-numeric:lining-nums;margin:0;font:400 1.25rem/1.55 "Rosario",system-ui,sans-serif;color:var(--tinta);background:#fff}
a{color:var(--elo);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,.tableau:focus-visible{outline:3px solid #d2552b;outline-offset:3px}
.saltar{position:absolute;left:-999px;top:8px;background:#fff;padding:10px 14px;z-index:5}
.saltar:focus{left:8px}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
p{margin:0 0 .8em}
h1,h2,.marco,.resposta strong,.marca-link span{font-family:"Lusitana",Georgia,serif;font-weight:700}
h1,h2{overflow-wrap:anywhere;hyphens:auto}
.coluna,.coluna text,.campo input,.resposta strong{font-variant-numeric:lining-nums}

/* Chaque étape : la bande à gauche ne s'interrompt jamais, le texte à droite */
.etapa{display:grid;grid-template-columns:var(--lado) minmax(0,1fr);grid-template-areas:"lado corpo"}
.lado{grid-area:lado;background:var(--petroleo);color:#fff;position:relative}
.corpo{grid-area:corpo;padding:2.5rem 4rem 3rem 3.5rem;max-width:56rem;min-width:0}
.primeira{grid-template-areas:"lado cab" "lado corpo";grid-template-rows:auto 1fr}
.primeira .lado{display:flex;flex-direction:column}
.fio{flex:1;position:relative;min-height:40px}
.fio::before,.passo .lado::before{content:"";position:absolute;left:calc(var(--eixo) - 2px);top:0;bottom:0;width:4px;background:var(--agua)}
.cab{grid-area:cab;padding:2.25rem 4rem 0 3.5rem;max-width:56rem;min-width:0}
.marca{font-size:1.125rem;color:var(--suave);margin-bottom:1.35rem}
.marca b{color:var(--petroleo)}
h1{font-size:2.875rem;line-height:1.1;margin:0 0 .9rem;color:var(--tinta)}
.resposta{font-size:1.75rem;line-height:1.3;margin:0}
.resposta strong{color:var(--petroleo);font-size:2.5rem;white-space:nowrap}
.primeira .corpo{padding-top:.9rem}
.porque{font-size:1.1875rem;color:var(--suave);max-width:40em}

/* La colonne de capacité */
.lado-tit{margin:0;padding:34px 40px 0 calc(20px + var(--recuo));font-size:1.125rem;color:#cfe9e5}
.coluna{margin:0;padding:6px 20px 0 calc(20px + var(--recuo))}
.coluna svg{display:block}
.col-larga svg{width:var(--sw);height:auto}
.col-movel{display:none}
.coluna text{font-family:"Rosario",sans-serif;fill:#fff}
.coluna .seg{fill:var(--petroleo);font-size:19px;font-weight:700;text-anchor:middle}
.col-movel .seg{font-size:16px}
.coluna .esc{font-size:19px;text-anchor:end;fill:#cfe9e5}
.coluna .esc.forte{font-weight:700;fill:#fff;font-size:20px}
.coluna .tick{stroke:#8fb9b5;stroke-width:1.5}
.coluna .lim{stroke:#fff;stroke-width:2.5}
.coluna .res{stroke:#fff;stroke-width:4}
.coluna .grau{font-family:"Lusitana",serif;font-weight:700;font-size:54px}
.coluna .grau-l{font-size:19px;fill:#cfe9e5}

/* Les coefficients, empilés */
.coefs{margin:1.1rem 0 1.1rem}
.coefs-tit{font-weight:700;margin-bottom:.2rem}
.coefs-tit span{font-weight:400;color:var(--suave)}
.onde{font-size:1.0625rem;color:var(--suave);margin-bottom:.8rem;max-width:40em}
.linha{display:grid;grid-template-columns:170px 150px auto;align-items:center;column-gap:14px;row-gap:2px;margin-bottom:10px}
.linha label{font-size:1.1875rem}
.campo{display:flex;align-items:center;border-bottom:3px solid var(--petroleo);background:var(--campo);min-height:3.5rem}
.campo input{width:100%;min-width:0;border:0;background:transparent;font:700 1.75rem/1 "Rosario",sans-serif;color:var(--tinta);padding:.5rem 6px .5rem 14px;min-height:3.5rem;text-align:right;border-radius:0}
.campo .pc{padding:0 14px 0 4px;font-size:1.375rem;font-weight:700;color:var(--petroleo)}
.campo:has(input[aria-invalid]){border-bottom-color:#b3261e;background:#fbeeee}
.nota{grid-column:2 / -1;font-size:1.0625rem;color:var(--suave);min-height:0}
.campo input[aria-invalid]~.pc{color:#b3261e}
.linha:has([aria-invalid]) .nota{color:#b3261e}
button{font:700 1.1875rem/1 "Rosario",sans-serif;cursor:pointer;min-height:48px}
.tirar{background:none;border:0;color:var(--elo);text-decoration:underline;text-underline-offset:3px;padding:0 10px;justify-self:start}
.juntar{background:var(--petroleo);color:#fff;border:0;padding:0 22px;margin-top:4px}
.juntar[hidden]{display:none}
.limiar,.lei,.decide{font-size:1.1875rem;max-width:42em}
.lei{color:var(--suave);font-size:1.0625rem}
.fonte{font-size:1.0625rem;color:var(--suave)}
.descer{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:6px;font-weight:700;font-size:1.25rem;color:var(--petroleo)}
.descer span{font-weight:400;color:var(--suave)}
.descer::after{content:"";width:12px;height:12px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg) translateY(-4px)}

/* Les étapes suivantes, posées sur l'épine */
.rotulo{grid-area:lado;position:relative;z-index:1;align-self:start;padding:44px 24px 32px calc(var(--eixo) + 34px);color:#fff}
.passo .lado::after{content:"";position:absolute;left:calc(var(--eixo) - 13px);top:50px;width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--agua)}
.marco{font-size:2rem;line-height:1.1;margin:0 0 6px;overflow-wrap:anywhere}
.quando{font-size:1.25rem;color:#cfe9e5;margin:0}
.passo .corpo{border-top:1px solid var(--filete)}
h2{font-size:2rem;line-height:1.15;margin:0 0 .75rem}

/* Pages de texte */
.marca-link{grid-area:lado;position:relative;z-index:1;align-self:start;display:flex;align-items:center;gap:12px;padding:2rem 24px 0 calc(28px + var(--recuo));color:#fff;text-decoration:none;font-size:1.375rem;line-height:1.15}
.marca-link:hover span{text-decoration:underline}
.marca-col{width:22px;height:34px;flex:none}
.pag .corpo{padding-top:2.5rem;min-height:60vh}
.pag.larga .corpo{max-width:80rem}
.texto{max-width:44rem}
.pag.larga .texto{max-width:none}
.texto h2{margin-top:2rem}
.texto h3{font-size:1.375rem;margin:1.5rem 0 .4rem}
.texto ul,.texto ol{padding-left:1.4em;margin:0 0 1em}
.texto li{margin-bottom:.35em}
.passo .texto,.passo .corpo{max-width:56rem}
.tableau{overflow-x:auto;margin:0 0 1.25rem;max-width:100%}
[role=region]{overflow-x:auto;max-width:100%;margin:0 0 1.25rem}
[role=region]:focus-visible{outline:3px solid #d2552b;outline-offset:3px}
.capitulos ul{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.capitulos a{display:inline-block;padding:.65rem 0;font-weight:700}
.capitulos span{font-weight:400;color:var(--suave)}
.capitulo{scroll-margin-top:1rem}
.capitulo table{min-width:46rem}
table{border-collapse:collapse;width:100%;font-size:1.0625rem}
caption{text-align:left;font-weight:700;padding:0 0 .5rem}
th,td{border-bottom:1px solid var(--filete);padding:.55rem .7rem;text-align:left;vertical-align:top}
thead th{background:var(--campo);border-bottom:2px solid var(--petroleo)}
.filtro{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:0 0 1rem}
.filtro select{font:400 1.125rem/1.2 "Rosario",sans-serif;min-height:48px;padding:.4rem .8rem;border:0;border-bottom:3px solid var(--petroleo);background:var(--campo);color:var(--tinta);max-width:100%;border-radius:0}
.filtro output{color:var(--suave);font-size:1.0625rem}

/* Pied de page */
.rodape .corpo{font-size:1.0625rem;color:var(--suave);padding-bottom:4rem}
.rodape .corpo b{color:var(--tinta)}
.rodape .lado::before{content:"";position:absolute;left:calc(var(--eixo) - 2px);top:0;height:44px;width:4px;background:var(--agua)}
.rodape h2{font-size:1.5rem;margin:0 0 .4rem}
.fontes ul{padding-left:1.2em;margin:0 0 1em}
.fontes li{margin-bottom:.4em;overflow-wrap:anywhere}
.pe-nav ul{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:0 1.5rem}
.pe-nav a{display:inline-block;padding:.65rem 0;font-weight:700}
.pub[hidden]{display:none}

/* Téléphones, tablettes et texte agrandi : la bande se réduit à l'épine, le texte garde toute la largeur */
@media (max-width:1000px){
  :root{--lado:44px;--eixo:22px}
  body{font-size:1.125rem}
  .etapa{grid-template-areas:"lado rotulo" "lado corpo";grid-template-rows:auto 1fr}
  .primeira{grid-template-columns:minmax(0,1fr);grid-template-areas:"cab" "lado" "corpo";grid-template-rows:auto}
  .cab{padding:1.25rem 16px .9rem;max-width:none}
  .marca{font-size:1rem;margin-bottom:.6rem}
  h1{font-size:2rem}
  .resposta{font-size:1.375rem}
  .resposta strong{font-size:1.875rem}
  .primeira .lado{display:block;padding:.9rem 12px .4rem}
  .lado-tit{padding:0 4px;font-size:1rem}
  .coluna{padding:4px 0 0}
  .col-larga{display:none}
  .col-movel{display:block}
  .col-movel svg{width:100%;max-width:400px;height:auto}
  .fio{display:none}
  .primeira .corpo{display:flex;flex-direction:column}
  .primeira .corpo>*{order:2}
  .primeira .corpo>.coefs{order:1}
  .primeira .corpo>.porque{order:3}
  .passo .corpo{padding-left:12px;padding-right:14px}
  .corpo,.primeira .corpo{padding:1rem 16px 1.75rem;max-width:none}
  .porque{font-size:1.0625rem}
  .linha{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l l" "c t" "n n"}
  .linha label{grid-area:l;font-size:1.0625rem}
  .campo{grid-area:c}
  .tirar{grid-area:t}
  .nota{grid-area:n;font-size:1rem}
  .juntar{padding:0 14px;font-size:1.0625rem}
  .limiar,.decide{font-size:1.0625rem}
  .lei,.fonte,.onde{font-size:1rem}
  .descer{font-size:1.125rem}
  .descer span{display:none}
  .rotulo,.marca-link{grid-area:rotulo;padding:1.25rem 16px 0;color:var(--tinta)}
  .marca-link{color:var(--petroleo);font-size:1.25rem}
  .marco{font-size:1.5rem;color:var(--petroleo);margin:0}
  .quando{font-size:1rem;color:var(--suave)}
  .passo .lado::before,.rodape .lado::before{left:20px}
  .passo .lado::after{left:11px;top:26px}
  .passo .corpo{border-top:0;padding-top:.6rem;padding-left:12px;padding-right:14px}
  .passo .rotulo{border-top:1px solid var(--filete)}
  h2{font-size:1.625rem}
  .pag .corpo{padding-top:1rem;min-height:0}
  .rodape .corpo{font-size:1rem}
}
@media (max-width:420px){
  .marco{font-size:1.375rem}
  th,td{padding:.45rem .5rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}