@import url('../fonts/fonts.css?v=98aec36daa');

/* Feuille de style du site groupe-entropia.com.
   Derivee de celle de fcc-informatique.com (jetons, polices, theme a trois
   etats), avec les couleurs du groupe : rouge #E92227, encre #343333.
   Ce rouge n'est pas celui de FCC (#EC4034). Ne pas les confondre.

   Aucun attribut style= dans les pages : la politique de securite du
   contenu n'accorde rien aux styles en ligne (style-src 'self'). */

  :root{
    --ground:#FFFFFF;
    --ground-2:#F6F4F4;
    --encre:#343333;
    --encre-2:#5A5858;
    --encre-3:#6E6B6B;
    --rouge:#E92227;
    /* #E92227 sur blanc fait 4,4:1, juste sous le seuil des petits textes.
       Les liens prennent donc une variante plus sombre. */
    --rouge-lis:#C4161B;
    --rail:#E2DEDE;
    --rail-fort:#BDB8B8;
    --focus:#C4161B;
    --inv-fond:#343333;--inv-texte:#F4F2F2;--inv-texte-2:#D3CFCF;
    --inv-faible:#A8A3A3;--inv-rail:#4A4848;
    --display:"Archivo",system-ui,sans-serif;
    --texte:"IBM Plex Sans",system-ui,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,monospace;
    --gut:clamp(1rem,4vw,3rem);
    --max:1120px;
    color-scheme:light;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --ground:#1C1B1B;--ground-2:#252323;
      --encre:#F2F0F0;--encre-2:#C2BDBD;--encre-3:#9C9797;
      --rouge:#FF4A4F;--rouge-lis:#FF7A7E;
      --rail:#363333;--rail-fort:#514D4D;--focus:#FF7A7E;
      --inv-fond:#121111;--inv-rail:#2E2C2C;
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --ground:#1C1B1B;--ground-2:#252323;
    --encre:#F2F0F0;--encre-2:#C2BDBD;--encre-3:#9C9797;
    --rouge:#FF4A4F;--rouge-lis:#FF7A7E;
    --rail:#363333;--rail-fort:#514D4D;--focus:#FF7A7E;
    --inv-fond:#121111;--inv-rail:#2E2C2C;
    color-scheme:dark;
  }

  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--ground);color:var(--encre);
       font-family:var(--texte);font-size:16px;line-height:1.6;
       -webkit-font-smoothing:antialiased}
  a{color:var(--rouge-lis)}
  a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
  h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.018em;
           line-height:1.14;text-wrap:balance;margin:0}
  p{margin:0}
  .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
  .evitement{position:absolute;left:-9999px;top:0}
  .evitement:focus{left:1rem;top:1rem;z-index:50;background:#FFFFFF;
                   color:#343333;padding:.5rem .8rem}

  /* ---------- en-tete ---------- */
  /* Le logo est a encre sombre : la bande qui le porte reste claire dans les
     deux themes, sinon il disparait de nuit. Ses couleurs sont donc fixes,
     et ne suivent pas les jetons. */
  .entete{background:#FFFFFF;color:#343333;border-top:4px solid #E92227;
          border-bottom:1px solid #E2DEDE}
  .entete .wrap{display:flex;align-items:center;gap:1rem 1.5rem;
                flex-wrap:wrap;padding-block:1rem}
  .entete .logo{display:block;height:44px;width:auto}
  .entete-fin{margin-left:auto;display:flex;align-items:center;gap:1.1rem}
  .langues ul{list-style:none;margin:0;padding:0;display:flex;gap:.2rem}
  .langues a{display:block;font-family:var(--mono);font-size:.78rem;font-weight:500;
             letter-spacing:.08em;color:#5A5858;text-decoration:none;
             padding:.35rem .5rem;border-bottom:2px solid transparent}
  .langues a:hover{color:#343333;border-bottom-color:#E92227}
  .langues a[aria-current="page"]{color:#343333;border-bottom-color:#343333}
  .langues a:focus-visible,.theme:focus-visible{outline-color:#C4161B}
  .theme{font:inherit;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
         color:#5A5858;background:transparent;border:1px solid #BDB8B8;
         padding:.35rem .6rem;cursor:pointer;white-space:nowrap}
  .theme:hover{color:#343333;border-color:#343333}
  @media (max-width:520px){
    .entete .logo{height:34px}
    .entete-fin{margin-left:0;width:100%;justify-content:space-between}
  }

  /* ---------- sections ---------- */
  section{border-bottom:1px solid var(--rail)}
  .sec{display:grid;grid-template-columns:150px minmax(0,1fr);
       gap:0 2.5rem;padding-block:clamp(2.5rem,6vw,4.25rem)}
  .lab{font-family:var(--mono);font-size:.7rem;font-weight:500;
       letter-spacing:.13em;text-transform:uppercase;color:var(--encre-3);
       padding-top:.4rem}
  /* le carre rouge du logo, en rappel */
  .lab::before{content:"";display:inline-block;width:.55rem;height:.55rem;
               background:var(--rouge);margin-right:.55rem;vertical-align:.02rem}
  .corps{min-width:0}
  .titre-sec{font-size:clamp(1.35rem,3vw,1.7rem);margin-bottom:1.4rem}
  /* marqueur visible d'une page non traduite : ne sort jamais en ligne */
  .a-traduire{margin-block:1rem;padding-block:.7rem;font-family:var(--mono);
              font-size:.8rem;background:#FFF3B0;color:#343333}
  @media (max-width:760px){
    .sec{grid-template-columns:1fr;gap:1rem}
    .lab{padding-top:0}
  }

  /* ---------- accroche ---------- */
  /* Le bonjour luxembourgeois, au-dessus du titre */
  .accroche .moien{font-family:var(--display);font-weight:600;color:var(--rouge-lis);
                   font-size:clamp(1.05rem,2vw,1.25rem);margin-bottom:.6rem}
  .insecable{white-space:nowrap}
  .accroche h1{font-size:clamp(1.8rem,4.6vw,2.8rem);max-width:24ch}
  .accroche .chapo{margin-top:1.2rem;font-size:clamp(1rem,1.9vw,1.15rem);
                   color:var(--encre-2);max-width:58ch}
  .accroche .chapo + .chapo{margin-top:.8rem}

  /* ---------- les societes ---------- */
  .societes{list-style:none;margin:0;padding:0;border-top:1px solid var(--rail)}
  .societe{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);
           gap:.3rem 2rem;padding-block:1.35rem;border-bottom:1px solid var(--rail)}
  .societe h3{font-size:1.15rem}
  .lieu{display:block;margin-top:.35rem;font-family:var(--mono);font-size:.72rem;
        letter-spacing:.06em;color:var(--encre-3)}
  .societe p{color:var(--encre-2)}
  .societe .site{display:inline-block;margin-top:.5rem;font-family:var(--display);
                 font-weight:600;font-size:.9rem;text-decoration:none;
                 color:var(--rouge-lis);border-bottom:1px solid currentColor}
  .societe .site:hover{color:var(--encre)}
  @media (max-width:620px){.societe{grid-template-columns:1fr}}


  /* ---------- texte courant (mentions) ---------- */
  .texte{max-width:66ch}
  .texte h1{font-size:clamp(1.7rem,4vw,2.3rem)}
  .texte h2{margin:2.4rem 0 .9rem;font-size:1.25rem;line-height:1.3}
  .texte p{margin:0 0 1rem;color:var(--encre-2);line-height:1.7}
  .texte p b{color:var(--encre)}
  .fiche{margin:1rem 0 0;border-top:1px solid var(--rail)}
  .fiche div{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
             gap:.2rem 1.5rem;padding-block:.75rem;border-bottom:1px solid var(--rail)}
  .fiche dt{font-family:var(--display);font-weight:600;font-size:.97rem}
  .fiche dd{margin:0;color:var(--encre-2)}
  @media (max-width:560px){.fiche div{grid-template-columns:1fr}}

  /* ---------- erreur ---------- */
  .actions{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.7rem}
  .btn{display:inline-block;font-family:var(--display);font-weight:600;
       font-size:.88rem;text-decoration:none;padding:.62rem 1.05rem;
       border:1.5px solid var(--encre);color:var(--encre)}
  .btn:hover{background:var(--encre);color:var(--ground)}

  /* ---------- pied ---------- */
  footer{background:var(--inv-fond);color:var(--inv-texte-2);font-size:.88rem}
  footer .wrap{padding-block:2.4rem;display:flex;flex-wrap:wrap;
               gap:1.5rem 3rem;justify-content:space-between}
  .pied-titre{font-family:var(--mono);font-size:.7rem;font-weight:500;
            letter-spacing:.13em;text-transform:uppercase;color:var(--inv-faible);
            margin:0 0 .6rem}
  footer address{font-style:normal;line-height:1.7}
  footer a{color:var(--inv-texte-2)}
  footer a:hover{color:var(--inv-texte)}
  footer ul{list-style:none;margin:0;padding:0;line-height:1.9}
  .pied-bas{flex-basis:100%;padding-top:1.1rem;border-top:1px solid var(--inv-rail);
            font-family:var(--mono);font-size:.72rem;color:var(--inv-faible)}

  .note{background:var(--ground-2);border-top:1px solid var(--rail)}
  .note .wrap{padding-block:1.5rem}
  .note p{font-family:var(--mono);font-size:.74rem;line-height:1.8;
          color:var(--encre-2);max-width:78ch}

  @media print{
    .entete-fin,.note{display:none!important}
    footer{background:none;color:#000}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}