/* ==========================================================================
   assurecyber.fr — feuille unique.

   EXTERNE ET NON EN LIGNE, délibérément. Un bloc <style> dans la page
   obligerait la politique de sécurité du contenu à autoriser
   `style-src 'unsafe-inline'`, c'est-à-dire à rouvrir la porte que cette
   politique existe pour fermer. Le site qui promeut un outil relevant les
   en-têtes de sécurité des autres ne peut pas se le permettre.

   POLICE AUTO-HÉBERGÉE, même raison. Charger Raleway depuis Google imposerait
   `style-src` et `font-src` vers deux domaines tiers, ajouterait deux
   résolutions DNS avant le premier rendu, et confierait l'adresse IP de
   chaque visiteur à un tiers. Le fichier fait 43 Ko et il est servi d'ici.
   Licence et provenance : /polices/LICENCES.md

   Le texte suivi est en empattements SYSTÈME : aucun téléchargement, un rendu
   de document, et la même pile que le produit qu'il promeut.
   ========================================================================== */

@font-face {
  font-family: "Raleway";
  src: url("/polices/raleway-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --papier:#f7f9fc; --carte:#ffffff; --sky:#e8f2fa;
  --encre:#0b1724; --graphite:#3c4757; --ardoise:#637185;
  --trait:#e5eaf1; --trait-fort:#c8dff0;
  --marque:#265486; --marque-vif:#1f4e85;
  --critique:#a8352e; --important:#936923; --attention:#5e6024;

  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Raleway",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem;
  --e5:1.5rem; --e6:2rem; --e7:3rem; --e8:4.5rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier:#0b1724; --carte:#101f30; --sky:#16293d;
    --encre:#e9eef4; --graphite:#b3c0cf; --ardoise:#8b9aab;
    --trait:#1e3145; --trait-fort:#2b4a68;
    --marque:#8fc0e8; --marque-vif:#a9d1f2;
    --critique:#e8918a; --important:#e0b571; --attention:#b6bd6a;
  }
}
:root[data-theme="dark"] {
  --papier:#0b1724; --carte:#101f30; --sky:#16293d;
  --encre:#e9eef4; --graphite:#b3c0cf; --ardoise:#8b9aab;
  --trait:#1e3145; --trait-fort:#2b4a68;
  --marque:#8fc0e8; --marque-vif:#a9d1f2;
  --critique:#e8918a; --important:#e0b571; --attention:#b6bd6a;
}

*{box-sizing:border-box}

body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--serif);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.bande{max-width:58rem;margin:0 auto;padding:0 var(--e5)}
.etroit{max-width:44rem}

/* ---- accès rapide ------------------------------------------------------- */

.saut{
  position:absolute;left:-9999px;background:var(--encre);color:#fff;
  padding:var(--e3) var(--e4);font-family:var(--sans);z-index:10;
}
.saut:focus{left:var(--e4);top:var(--e4)}

/* ---- barre -------------------------------------------------------------- */

.barre{border-bottom:1px solid var(--trait);background:var(--carte)}
.barre .bande{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--e2) var(--e4);padding-top:var(--e4);padding-bottom:var(--e4);
}
.nom{
  font-family:var(--sans);font-weight:700;font-size:1.0625rem;
  letter-spacing:-.01em;color:var(--encre);text-decoration:none;
}
.nom span{color:var(--marque)}
.opere{font-family:var(--sans);font-size:.8125rem;color:var(--ardoise)}
.opere a{color:var(--marque-vif)}

/* ---- ouverture ---------------------------------------------------------- */

.ouverture{padding:var(--e8) 0 var(--e7);border-bottom:2px solid var(--encre)}
.ouverture.article{padding-top:var(--e7);padding-bottom:var(--e6)}

h1{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(2rem,1.2rem + 3.4vw,3.25rem);
  line-height:1.06;letter-spacing:-.025em;margin:0 0 var(--e4);
  max-width:20ch;text-wrap:balance;
}
.article h1{font-size:clamp(1.75rem,1.2rem + 2.4vw,2.5rem);max-width:24ch}

.accroche{
  font-size:clamp(1.1rem,1rem + .45vw,1.3rem);
  color:var(--graphite);max-width:42rem;margin:0 0 var(--e5);
}
.accroche strong{color:var(--encre);font-weight:600}
.accroche:last-child{margin-bottom:0}

.bouton{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:1rem;
  background:var(--marque);color:#fff;text-decoration:none;
  padding:var(--e3) var(--e5);border:1px solid var(--marque);
}
.bouton:hover,.bouton:focus-visible{background:var(--marque-vif);border-color:var(--marque-vif)}
.bouton:focus-visible{outline:2px solid var(--encre);outline-offset:2px}

.sous-bouton{font-family:var(--sans);font-size:.8125rem;color:var(--ardoise);margin:var(--e3) 0 0}

/* ---- fil d'Ariane ------------------------------------------------------- */

nav.fil{font-family:var(--sans);font-size:.8125rem;color:var(--ardoise);padding:var(--e4) 0 0}
nav.fil ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--e2)}
nav.fil li::after{content:"›";margin-left:var(--e2);color:var(--trait-fort)}
nav.fil li:last-child::after{content:""}
nav.fil a{color:var(--marque-vif)}

/* ---- sections ----------------------------------------------------------- */

section.question{padding:var(--e7) 0;border-bottom:1px solid var(--trait)}
article section{padding:var(--e6) 0;border-bottom:1px solid var(--trait)}
article section:last-of-type{border-bottom:0}

h2{
  font-family:var(--sans);font-weight:700;font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem);
  line-height:1.2;letter-spacing:-.015em;margin:0 0 var(--e4);
  max-width:26ch;text-wrap:balance;
}
h3{
  font-family:var(--sans);font-weight:600;font-size:1.125rem;
  margin:var(--e5) 0 var(--e2);text-wrap:balance;
}

p{margin:0 0 var(--e4);max-width:40rem}
p:last-child{margin-bottom:0}
strong{font-weight:600}

.reponse{
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--marque);
  margin:0 0 var(--e3);
}

a{color:var(--marque-vif);text-underline-offset:.15em}
a:focus-visible{outline:2px solid var(--marque);outline-offset:2px}

/* ---- listes ------------------------------------------------------------- */

ul.faits{list-style:none;margin:var(--e5) 0 0;padding:0}
ul.faits li{
  display:grid;grid-template-columns:1fr;gap:var(--e1);
  padding:var(--e4) 0;border-top:1px solid var(--trait);
}
@media (min-width:44rem){ul.faits li{grid-template-columns:13rem minmax(0,1fr);gap:var(--e5)}}
ul.faits li:last-child{border-bottom:1px solid var(--trait)}
ul.faits .quoi{font-family:var(--sans);font-weight:600;font-size:.9375rem}
ul.faits .detail{color:var(--graphite);font-size:.9375rem}

ul.serree{margin:0 0 var(--e4);padding-left:1.1rem;max-width:40rem}
ul.serree li{margin-bottom:var(--e2)}
ul.serree li::marker{color:var(--ardoise)}

/* ---- encart ------------------------------------------------------------- */

.encart{
  background:var(--carte);border:1px solid var(--trait);
  border-left:3px solid var(--marque);padding:var(--e5);margin:var(--e5) 0;
}
.encart.avertit{border-left-color:var(--important)}
.encart p{margin:0 0 var(--e3)}
.encart p:last-child{margin:0}
.encart .intitule{
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ardoise);
}

/* ---- tableau ------------------------------------------------------------ */

.defilant{overflow-x:auto;margin:var(--e4) 0 var(--e5)}
table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.9375rem}
th,td{text-align:left;padding:var(--e3) var(--e4) var(--e3) 0;border-bottom:1px solid var(--trait);vertical-align:top}
thead th{
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ardoise);font-weight:600;border-bottom:1px solid var(--encre);
}
tbody th{font-weight:600}

/* ---- démarrage ---------------------------------------------------------- */

ol.pas{list-style:none;counter-reset:p;margin:var(--e5) 0 0;padding:0;display:grid;gap:var(--e5)}
@media (min-width:48rem){ol.pas{grid-template-columns:repeat(3,1fr)}}
ol.pas li{counter-increment:p;border-top:2px solid var(--encre);padding-top:var(--e3)}
ol.pas li::before{
  content:counter(p,decimal-leading-zero);display:block;
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.1em;color:var(--marque);margin-bottom:var(--e2);
}
ol.pas b{font-family:var(--sans);font-size:1rem;display:block;margin-bottom:var(--e1)}
ol.pas span{color:var(--graphite);font-size:.9375rem}

/* ---- clôture ------------------------------------------------------------ */

.cloture{padding:var(--e8) 0}
.cloture h2{margin-bottom:var(--e4)}

/* ---- pied --------------------------------------------------------------- */

footer{border-top:2px solid var(--encre);background:var(--carte);
       font-family:var(--sans);font-size:.8125rem;color:var(--ardoise)}
footer .bande{padding-top:var(--e5);padding-bottom:var(--e6)}
footer h3{
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ardoise);margin:0 0 var(--e2);
}
footer p{margin:0 0 var(--e4);max-width:44rem;line-height:1.6}
footer a{color:var(--marque-vif)}
footer b{color:var(--encre);font-weight:600}
.mentions{display:grid;gap:var(--e5);grid-template-columns:1fr;
          padding-top:var(--e4);border-top:1px solid var(--trait)}
@media (min-width:44rem){.mentions{grid-template-columns:repeat(3,1fr);gap:var(--e6)}}

@media print{
  body{background:#fff;font-size:10.5pt}
  .barre,.bouton{border-color:#999}
  a{color:#000;text-decoration:none}
  section,ul.faits li,ol.pas li,.encart{break-inside:avoid}
  .defilant{overflow:visible}
  .defilant table{table-layout:auto;width:100%;font-size:8.5pt}
  .defilant td,.defilant th{overflow-wrap:anywhere}
}

/* ==========================================================================
   LA FICHE RÉFLEXE — conçue pour tenir sur UNE page A4.

   Un expert-comptable qui la diffuse ne le fera pas si elle sort sur deux
   feuilles, ni si le pied de page du site s'imprime derrière. Tout ce qui
   n'est pas la fiche porte donc la classe `ecran` et disparaît à l'impression,
   et la typographie se resserre pour tenir dans la hauteur.
   ========================================================================== */

.fiche{padding:var(--e6) 0 var(--e7)}

.fiche-tete{
  display:grid;grid-template-columns:1fr;gap:var(--e4);
  border-bottom:2px solid var(--encre);padding-bottom:var(--e4);margin-bottom:var(--e5);
}
@media (min-width:48rem){.fiche-tete{grid-template-columns:minmax(0,1fr) 14rem;gap:var(--e6)}}

.fiche h1{
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);margin:0 0 var(--e2);
  max-width:24ch;line-height:1.1;
}
.fiche-sous{color:var(--graphite);margin:0;font-size:1rem;max-width:44rem}
.fiche-sous strong{color:var(--encre)}

.diffuseur{align-self:end}
.diffuseur .etiquette{
  display:block;font-family:var(--sans);font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ardoise);margin-bottom:var(--e3);
}
.diffuseur .ligne-vide{display:block;border-bottom:1px solid var(--encre);height:2.2rem}

table.compteurs{font-size:.875rem}
table.compteurs th[scope="row"]{
  white-space:nowrap;font-family:var(--sans);font-weight:600;
  border-right:1px solid var(--trait);padding-right:var(--e4);
}
table.compteurs th[scope="row"] b{font-size:1.25rem;color:var(--marque);letter-spacing:-.02em}
table.compteurs .txt{font-size:.75rem;color:var(--ardoise);font-weight:400}
table.compteurs td.danger{color:var(--critique)}
table.compteurs td.danger b{color:var(--critique)}

.deux-colonnes{display:grid;grid-template-columns:1fr;gap:var(--e5);margin-top:var(--e5)}
@media (min-width:48rem){.deux-colonnes{grid-template-columns:repeat(2,1fr);gap:var(--e6)}}
.deux-colonnes h2{font-size:1.0625rem;margin:0 0 var(--e3);
  padding-bottom:var(--e2);border-bottom:1px solid var(--trait);max-width:none}

ol.numerotee{margin:0;padding-left:1.2rem;font-size:.9375rem}
ol.numerotee li{margin-bottom:var(--e3)}
ol.numerotee li::marker{font-family:var(--sans);font-weight:600;color:var(--marque)}

ul.cases{list-style:none;margin:0 0 var(--e4);padding:0;font-size:.9375rem}
ul.cases li{position:relative;padding-left:1.6rem;margin-bottom:var(--e2)}
ul.cases li::before{
  content:"";position:absolute;left:0;top:.35em;
  width:.85rem;height:.85rem;border:1px solid var(--encre);
}
.rappel{font-size:.875rem;color:var(--graphite);background:var(--sky);
        padding:var(--e3);margin:0}

.fiche-pied{margin-top:var(--e5);padding-top:var(--e4);border-top:1px solid var(--trait)}
.fiche-pied p{font-size:.875rem;color:var(--graphite);max-width:none}
.fiche-pied .source{
  font-family:var(--sans);font-size:.75rem;color:var(--ardoise);
  margin-top:var(--e3);padding-top:var(--e2);border-top:1px solid var(--trait);
}

@media print{
  .ecran{display:none !important}
  @page{size:A4;margin:12mm}
  body{background:#fff;font-size:9.5pt;line-height:1.45}
  .fiche{padding:0}
  .bande{padding:0;max-width:none}
  .fiche h1{font-size:16pt}
  .fiche-sous{font-size:10pt}
  .fiche-tete{grid-template-columns:minmax(0,1fr) 52mm;gap:8mm;
              padding-bottom:3mm;margin-bottom:4mm}
  table.compteurs{font-size:8.5pt}
  table.compteurs th[scope="row"] b{font-size:12pt}
  th,td{padding:2mm 3mm 2mm 0}
  .deux-colonnes{grid-template-columns:repeat(2,1fr);gap:8mm;margin-top:4mm}
  .deux-colonnes h2{font-size:11pt}
  ol.numerotee,ul.cases{font-size:8.5pt}
  ol.numerotee li,ul.cases li{margin-bottom:1.5mm}
  .rappel{font-size:8pt;background:none;border:0.4pt solid #999;padding:2mm}
  .fiche-pied{margin-top:4mm;padding-top:2mm}
  .fiche-pied p{font-size:8pt}
  .fiche-pied .source{font-size:7.5pt}
  .fiche,.deux-colonnes section,table.compteurs{break-inside:avoid}
}

/* ==========================================================================
   FORMULAIRE — le simulateur est la seule page qui en porte un.

   Aucun script : la saisie part au serveur, qui exécute le module de
   qualification du produit et rend du HTML. La feuille doit donc rendre les
   champs lisibles sans aucune aide dynamique, y compris les états d'erreur du
   navigateur.
   ========================================================================== */

form label{
  display:block;font-family:var(--sans);font-weight:600;font-size:.9375rem;
  margin:var(--e4) 0 var(--e2);
}
form label .discret{font-weight:400}

form input[type="text"],form select{
  display:block;width:100%;max-width:26rem;
  font-family:var(--sans);font-size:1rem;color:var(--encre);
  background:var(--carte);border:1px solid var(--trait-fort);
  padding:var(--e3) var(--e4);border-radius:0;
}
form input[type="text"]:focus,form select:focus{
  outline:2px solid var(--marque);outline-offset:1px;border-color:var(--marque);
}
form select{
  /* Chevron dessiné en CSS : aucune image distante, la politique l'interdit. */
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ardoise) 50%),
                   linear-gradient(135deg,var(--ardoise) 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) 55%,calc(100% - .8rem) 55%;
  background-size:.35rem .35rem,.35rem .35rem;
  background-repeat:no-repeat;padding-right:2.4rem;
}

form fieldset{border:1px solid var(--trait);padding:var(--e4) var(--e5);margin:var(--e4) 0}
form fieldset legend{font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:0 var(--e2)}
form fieldset label{
  display:grid;grid-template-columns:1.4rem minmax(0,1fr);gap:var(--e3);
  align-items:start;font-weight:400;font-family:var(--serif);font-size:.9375rem;
  margin:0 0 var(--e4);
}
form fieldset label:last-of-type{margin-bottom:0}
form input[type="checkbox"]{width:1.05rem;height:1.05rem;margin:.25rem 0 0;accent-color:var(--marque)}

form button{
  font-family:var(--sans);font-weight:600;font-size:1rem;
  background:var(--marque);color:#fff;border:1px solid var(--marque);
  padding:var(--e3) var(--e5);margin-top:var(--e5);cursor:pointer;
}
form button:hover{background:var(--marque-vif);border-color:var(--marque-vif)}
form button:focus-visible{outline:2px solid var(--encre);outline-offset:2px}

/* ---- verdict du simulateur ---- */
.verdict{
  font-family:var(--sans);font-size:.8125em;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;padding:.15em .6em;border:1px solid currentColor;
  margin-right:var(--e3);white-space:nowrap;
}
.p-oui{color:var(--critique)}     /* « oui » est une contrainte, pas une bonne nouvelle */
.p-non{color:var(--attention)}
.p-doute{color:var(--important)}