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

/* Feuille de style commune — site FCC Informatique
   Direction graphique du 20/09/2026, voir docs/direction-graphique.md

   Elle est partagee par toutes les pages, et pensee pour etre reemployee :
   la palette tient dans les jetons du bloc :root. Changer le logo et la
   couleur d'accent suffit a derive le site Entropia, puis buro24.com. */

  :root{
    --ground:#FFFFFF;
    --ground-2:#F4F1F3;
    --ground-3:#EAE5E8;
    --encre:#201820;
    --encre-2:#5C5258;
    --encre-3:#8B8189;
    --rouge:#EC4034; --rouge-2:#F4938A; --rouge-3:#FBE3E0;
    --rouge-lis:#C0281E;
    --rail:#DCD5D9;
    --rail-fort:#B9AFB5;
    --focus:#C0281E;
    --inv-fond:#201820;--inv-texte:#F2EEF0;--inv-texte-2:#CFC7CC;
    --inv-faible:#8B8189;--inv-rail:#372F35;--sur-rouge:#FFFFFF;
    --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:1180px;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --ground:#171316;--ground-2:#201B1F;--ground-3:#2C252A;
      --encre:#F2EEF0;--encre-2:#B5AAB0;--encre-3:#8B8189;
      --rouge:#FF5A4D;--rouge-lis:#FF7A6E;
      --rail:#352D33;--rail-fort:#4A4047;--focus:#FF7A6E;
      --rouge-2:#8E3A33;--rouge-3:#3B2220;
      --inv-fond:#0F0C0E;--inv-rail:#2A2329;--sur-rouge:#201820;
    }
  }
  :root[data-theme="dark"]{
    --ground:#171316;--ground-2:#201B1F;--ground-3:#2C252A;
    --encre:#F2EEF0;--encre-2:#B5AAB0;--encre-3:#8B8189;
    --rouge:#FF5A4D;--rouge-lis:#FF7A6E;
    --rail:#352D33;--rail-fort:#4A4047;--focus:#FF7A6E;
      --rouge-2:#8E3A33;--rouge-3:#3B2220;
      --inv-fond:#0F0C0E;--inv-rail:#2A2329;--sur-rouge:#201820;
  }

  *,*::before,*::after{box-sizing:border-box}
  body{margin:0;background:var(--ground);color:var(--encre);
       font-family:var(--texte);font-size:16px;line-height:1.55;
       -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.12;text-wrap:balance;margin:0}
  p{margin:0}

  .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}

  /* ---------- en-tete ---------- */
  .bandeau{background:var(--inv-fond);color:var(--inv-texte);font-family:var(--mono);
           font-size:.72rem;letter-spacing:.06em}
  .bandeau .wrap{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;
                 align-items:center;padding-block:.5rem}
  .bandeau strong{color:var(--rouge);font-weight:500}

  header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
         background:var(--ground);border-bottom:1px solid var(--rail)}
  .head{display:flex;align-items:center;gap:1rem;padding-block:.85rem}
  .logo{height:38px;width:auto;display:block;flex:none}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .logo{background:#F2EEF0;padding:3px 7px}
  }
  :root[data-theme="dark"] .logo{background:#F2EEF0;padding:3px 7px}
  .head-fin{margin-left:auto;display:flex;align-items:center;gap:.75rem}
  .tel{font-family:var(--display);font-weight:700;font-size:1.05rem;
       color:var(--encre);text-decoration:none;white-space:nowrap;
       font-variant-numeric:tabular-nums}
  .tel:hover{color:var(--rouge-lis)}
  .btn{display:inline-block;font-family:var(--display);font-weight:600;
       font-size:.86rem;letter-spacing:.01em;text-decoration:none;
       padding:.62rem 1.05rem;border:1.5px solid var(--encre);
       color:var(--encre);background:transparent;white-space:nowrap}
  .btn:hover{background:var(--encre);color:var(--ground)}
  .btn-plein{background:var(--rouge-lis);border-color:var(--rouge-lis);color:var(--sur-rouge)}
  .btn-plein:hover{background:var(--encre);border-color:var(--encre);color:var(--ground)}

  nav.menu{border-bottom:1px solid var(--rail);background:var(--ground-2)}
  nav.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
              gap:0 1.6rem}
  nav.menu a{font-size:.88rem;color:var(--encre-2);text-decoration:none;
             display:block;padding-block:.7rem;border-bottom:2px solid transparent}
  nav.menu a:hover{color:var(--encre);border-bottom-color:var(--rouge)}

  /* ---------- grille de section ---------- */
  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}
  .corps{min-width:0}
  @media (max-width:760px){
    .sec{grid-template-columns:1fr;gap:1rem}
    .lab{padding-top:0}
  }

  /* ---------- images ---------- */
  figure{margin:0}
  figure img{display:block;width:100%;height:auto}
  figcaption{margin-top:.5rem;font-family:var(--mono);font-size:.68rem;
             letter-spacing:.05em;color:var(--encre-3)}
  .bande{border-top:1px solid var(--rail);border-bottom:1px solid var(--rail)}
  .bande img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover}
  .bande .wrap{padding-block:0}
  .bande-leg{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;
             color:var(--encre-3);padding-block:.7rem}

  /* ---------- accroche ---------- */
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;
             gap:0 3rem;align-items:start}
  @media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:2rem}}
  @media (max-width:860px){.hero-grid figure{max-width:420px}}
  .hero h1{font-size:clamp(1.95rem,5.2vw,3.2rem);max-width:19ch}
  .hero h1 .pt{color:var(--rouge)}
  .hero .chapo{margin-top:1.15rem;font-size:clamp(1rem,1.9vw,1.15rem);
               color:var(--encre-2);max-width:56ch}
  .hero .actions{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.7rem}

  /* ---------- deux piliers ---------- */
  .piliers{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .pilier{padding:1.6rem 1.75rem 1.5rem;border:1px solid var(--rail)}
  .pilier+.pilier{border-left:none}
  .pilier h3{font-size:1.3rem}
  .pilier p{margin-top:.7rem;color:var(--encre-2);font-size:.97rem}
  .pilier .marque{display:inline-block;margin-top:.9rem;font-family:var(--mono);
                  font-size:.78rem;letter-spacing:.08em;color:var(--encre);
                  border-bottom:2px solid var(--rouge);padding-bottom:1px}
  .pilier .lien{display:inline-block;margin-top:1.1rem;font-family:var(--display);
                font-weight:600;font-size:.88rem;text-decoration:none;
                color:var(--rouge-lis)}
  .pilier .lien:hover{text-decoration:underline}
  @media (max-width:760px){
    .piliers{grid-template-columns:1fr}
    .pilier+.pilier{border-left:1px solid var(--rail);border-top:none}
  }

  /* ---------- liste de domaines ---------- */
  .domaines{margin-top:.25rem}
  .dom{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
       gap:.25rem 2rem;padding-block:1.05rem;border-top:1px solid var(--rail)}
  .dom:first-child{border-top:none;padding-top:0}
  .dom dt{font-family:var(--display);font-weight:600;font-size:1.02rem}
  .dom dd{margin:0;color:var(--encre-2);font-size:.95rem}
  .dom dd em{font-style:normal;color:var(--encre);
             box-shadow:inset 0 -.42em 0 color-mix(in srgb,var(--rouge) 22%,transparent)}
  @media (max-width:620px){.dom{grid-template-columns:1fr;gap:.2rem}}

  /* ---------- enjeux : trois constats courts ---------- */
  .enjeux{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
          border-top:1px solid var(--rail);border-bottom:1px solid var(--rail)}
  .enjeu{padding:1.4rem 1.5rem 1.4rem 0}
  .enjeu+.enjeu{padding-left:1.5rem;border-left:1px solid var(--rail)}
  .enjeu b{display:block;font-family:var(--display);font-weight:600;font-size:1.02rem}
  .enjeu p{margin-top:.45rem;color:var(--encre-2);font-size:.94rem}
  @media (max-width:820px){
    .enjeux{grid-template-columns:1fr}
    .enjeu{padding:1.2rem 0}
    .enjeu+.enjeu{padding-left:0;border-left:none;border-top:1px solid var(--rail)}
  }

  /* ---------- frise datee ---------- */
  .etape-d{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:0 1.3rem;
           padding-block:.95rem;border-top:1px solid var(--rail)}
  .etape-d:first-child{border-top:none;padding-top:0}
  .etape-d b{font-family:var(--mono);font-size:.9rem;font-weight:500;color:var(--rouge);
             font-variant-numeric:tabular-nums;letter-spacing:.02em}
  .etape-d p{color:var(--encre-2);font-size:.94rem}
  @media (max-width:560px){.etape-d{grid-template-columns:1fr;gap:.3rem}}

  /* ---------- encadre transverse ---------- */
  .encadre{border:1.5px solid var(--encre);padding:1.6rem 1.75rem;margin-top:.25rem}
  .encadre h2{font-size:1.35rem}
  .encadre p{margin-top:.8rem;color:var(--encre-2);max-width:62ch}
  .encadre p b{color:var(--encre)}

  /* ---------- renvoi vers Buro24 ---------- */
  .apres{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;
         align-items:center;background:var(--ground-2);padding:1.5rem 1.75rem;
         border:1px solid var(--rail)}
  .apres h2{font-size:1.2rem}
  .apres p{margin-top:.5rem;color:var(--encre-2);font-size:.95rem;max-width:58ch}
  @media (max-width:760px){.apres{grid-template-columns:1fr}}

  /* ---------- publics ---------- */
  .dom-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 2.5rem;
            align-items:start}
  @media (max-width:860px){.dom-grid{grid-template-columns:1fr;gap:1.8rem}
                           .dom-grid figure{max-width:400px}}
  .publics{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
  .publics span{font-family:var(--display);font-weight:600;font-size:1.02rem;
                border:1px solid var(--rail-fort);padding:.35rem .8rem}

  /* ---------- bande de couverture ---------- */
  .couv{margin-top:.25rem}
  .couv-legende{display:flex;flex-wrap:wrap;gap:1.25rem;margin-bottom:1.1rem;
                font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
                color:var(--encre-2)}
  .couv-legende i{display:inline-block;width:1.6rem;height:.6rem;
                  vertical-align:-1px;margin-right:.45rem}
  .cl-h{background:var(--rouge)}
  .cl-a{background:var(--rouge-3)}
  .jour{display:grid;grid-template-columns:2.6rem minmax(0,1fr);
        align-items:center;gap:.6rem;margin-bottom:.28rem}
  .jour b{font-family:var(--mono);font-size:.72rem;font-weight:500;
          color:var(--encre-2);letter-spacing:.06em}
  .piste{position:relative;height:1.35rem;background:var(--rouge-3);
         border:1px solid var(--rail);overflow:hidden}
  .seg{position:absolute;top:0;bottom:0;background:var(--rouge)}
  .seg-soc{position:absolute;top:0;bottom:0;background:var(--rouge-2)}
  .cl-s{background:var(--rouge-2)}
  .heures{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.6rem;
          margin-top:.4rem}
  .axe{position:relative;height:1rem;font-family:var(--mono);
       font-size:.66rem;color:var(--encre-3)}
  .axe span{position:absolute;top:0;transform:translateX(-50%);
            font-variant-numeric:tabular-nums}
  .axe span:first-child{transform:none}
  .axe span:last-child{transform:translateX(-100%)}
  .couv-note{margin-top:1.1rem;color:var(--encre-2);font-size:.95rem;max-width:60ch}
  .couv-note b{color:var(--encre)}

  /* ---------- diagnostic ---------- */
  .diag{border:1.5px solid var(--encre);padding:1.6rem 1.75rem}
  .diag h2{font-size:1.45rem}
  .diag p{margin-top:.7rem;color:var(--encre-2);max-width:54ch}
  .diag .actions{margin-top:1.3rem}
  .diag .aconstruire{margin-top:1rem;font-family:var(--mono);font-size:.7rem;
                     letter-spacing:.06em;color:var(--encre-3)}

  /* ---------- auto-diagnostic ---------- */
  .diag-promesse{margin-top:1.1rem;max-width:62ch;padding:.85rem 1rem;
                 background:var(--ground-2);border-left:3px solid var(--rouge);
                 font-size:.93rem;color:var(--encre-2)}
  .diag-promesse b{color:var(--encre)}
  .diag-form{margin-top:2rem;max-width:62ch}
  .dq{border-top:1px solid var(--rail);padding:1.9rem 0 .4rem}
  .dq:first-of-type{border-top:0;padding-top:.4rem}
  .dq-q{margin:0;font-family:var(--display);font-size:1.04rem;
        font-weight:600;line-height:1.4;color:var(--encre)}
  .dq-n{font-family:var(--mono);font-size:.74rem;font-weight:500;
        color:var(--rouge);margin-right:.6rem;letter-spacing:.06em}
  .dq-p{margin-top:.4rem;font-size:.9rem;color:var(--encre-3);max-width:54ch}
  .dq-o{margin-top:.85rem;display:flex;flex-direction:column;gap:.2rem}
  .dq-o label{display:flex;gap:.65rem;align-items:flex-start;cursor:pointer;
              padding:.5rem .7rem;border:1px solid transparent;border-radius:2px;
              font-size:.95rem;color:var(--encre-2)}
  .dq-o label:hover{background:var(--ground-2);color:var(--encre)}
  .dq-o input{margin:.25rem 0 0;accent-color:var(--rouge);flex:none}
  .dq-o input:checked + span{color:var(--encre);font-weight:500}
  .dq-o label:focus-within{border-color:var(--rail-fort);background:var(--ground-2)}
  .diag-actions{margin-top:1.9rem;display:flex;gap:.7rem;flex-wrap:wrap;
                padding-top:1.5rem;border-top:1px solid var(--rail)}
  .diag-sansjs{margin-top:.9rem;font-size:.85rem;color:var(--encre-3);max-width:54ch}
  .diag-form.js .diag-sansjs{display:none}

  .diag-res{margin-top:2.2rem;max-width:62ch;border:1.5px solid var(--encre);
            padding:1.7rem 1.8rem}
  .diag-res:focus{outline:2px solid var(--rouge);outline-offset:3px}
  .diag-res h3{font-size:1.3rem;margin:0}
  .diag-texte{margin-top:.7rem;color:var(--encre-2)}
  .diag-res h4{font-family:var(--mono);font-size:.72rem;font-weight:500;
               letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3);
               margin:1.7rem 0 .8rem}
  .diag-liste{margin:0;padding-left:1.3rem}
  .diag-liste li{margin-bottom:1rem}
  .diag-liste li b{display:block;font-family:var(--display);font-size:1rem}
  .diag-liste li span{display:block;margin-top:.3rem;color:var(--encre-2);
                      font-size:.94rem}
  .diag-reste,.diag-manque{font-size:.9rem;color:var(--encre-3)}
  .diag-manque{margin:0;color:var(--rouge-lis);font-size:.95rem}
  .diag-inconnu{margin-top:1.4rem;padding:.9rem 1rem;background:var(--ground-2);
                font-size:.94rem;color:var(--encre-2)}
  .diag-inconnu b{color:var(--encre)}
  .diag-fin{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--rail);
            font-size:.92rem;color:var(--encre-2)}
  /* Apres le resultat, le visiteur est au moment de plus forte intention :
     il lui faut de quoi agir, pas seulement de quoi recommencer. */
  .diag-contact{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.3rem}
  .diag-rejouer{margin-top:1.1rem}
  .diag-rejouer button{font:inherit;font-size:.85rem;color:var(--encre-3);
                       background:none;border:0;padding:0;cursor:pointer;
                       text-decoration:underline;text-underline-offset:3px}
  .diag-rejouer button:hover{color:var(--encre)}

  @media print{
    .bandeau,header,.menu,footer,.note,.diag-form,.diag-rejouer{display:none!important}
    .diag-res{border:1px solid #000;page-break-inside:avoid}
  }

  /* ---------- passages médias ---------- */
  .medias{list-style:none;margin:2rem 0 0;padding:0;max-width:62ch;
          border-top:1px solid var(--rail)}
  .medias li{padding:1.2rem 0;border-bottom:1px solid var(--rail)}
  .m-meta{margin:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;
          text-transform:uppercase;color:var(--encre-3)}
  .m-sep{color:var(--rail-fort);margin:0 .3rem}
  .m-titre{margin:.45rem 0 0;font-family:var(--display);font-size:1.02rem;
           font-weight:600;color:var(--encre)}
  .m-titre span{font-weight:400;color:var(--encre-2)}
  .m-sujet{margin:.3rem 0 0}
  .m-sujet a{color:var(--encre-2);text-decoration:none;
             border-bottom:1px solid var(--rail-fort)}
  .m-sujet a:hover{color:var(--encre);border-bottom-color:var(--rouge)}
  .m-qui{margin:.4rem 0 0;font-size:.88rem;color:var(--encre-3)}
  .medias-note{margin-top:1.3rem;font-size:.88rem;color:var(--encre-3);max-width:58ch}

  /* ---------- modalités ---------- */
  .modalites{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
             gap:0;margin:1rem 0 0;max-width:62ch;border:1px solid var(--rail)}
  .modalites > div{padding:1rem 1.1rem;border-right:1px solid var(--rail);
                   border-bottom:1px solid var(--rail)}
  .modalites > div:nth-child(2n){border-right:0}
  .modalites > div:nth-last-child(-n+2){border-bottom:0}
  .modalites dt{font-family:var(--mono);font-size:.68rem;font-weight:500;
                letter-spacing:.13em;text-transform:uppercase;color:var(--encre-3)}
  .modalites dd{margin:.4rem 0 0;font-size:.95rem;color:var(--encre)}
  @media (max-width:560px){
    .modalites{grid-template-columns:1fr}
    .modalites > div{border-right:0}
    .modalites > div:nth-last-child(-n+2){border-bottom:1px solid var(--rail)}
    .modalites > div:last-child{border-bottom:0}
  }

  /* ---------- formulaire de rappel ---------- */
  .rappel{margin-top:1.4rem;max-width:46ch}
  .rappel p{margin:0 0 .85rem}
  .rp-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .rp-ligne{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
  .rappel label{display:block;font-family:var(--mono);font-size:.68rem;
                font-weight:500;letter-spacing:.12em;text-transform:uppercase;
                color:var(--encre-3);margin-bottom:.35rem}
  .rp-fac{text-transform:none;letter-spacing:0;font-size:.72rem;
          color:var(--rail-fort);margin-left:.4rem}
  .rappel input,.rappel textarea{width:100%;box-sizing:border-box;
    font:inherit;font-size:.97rem;color:var(--encre);background:var(--ground);
    border:1px solid var(--rail-fort);border-radius:0;padding:.6rem .7rem}
  .rappel textarea{resize:vertical;min-height:4.5rem}
  .rappel input:focus,.rappel textarea:focus{outline:0;border-color:var(--encre);
    box-shadow:inset 0 -2px 0 var(--rouge)}
  /* :user-invalid ne se declenche qu'apres une saisie ou un envoi, la ou
     :invalid colorait les champs obligatoires des l'affichage. */
  .rappel input:user-invalid,.rappel textarea:user-invalid{border-color:var(--rouge-lis)}
  .rp-bas{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:1.1rem}
  .rp-bas .btn{margin:0}
  .rp-note{margin-top:1rem!important;font-size:.82rem;line-height:1.55;
           color:var(--encre-3)}
  .rp-note a{color:var(--encre-2)}
  @media (max-width:520px){.rp-ligne{grid-template-columns:1fr}}

  /* ---------- fenêtre d'arrivée ---------- */
  .surcouche{position:fixed;inset:0;z-index:60;display:flex;
             align-items:center;justify-content:center;padding:var(--gut)}
  .surcouche[hidden]{display:none}
  .surcouche-fond{position:absolute;inset:0;background:rgba(32,24,32,.55);
                  backdrop-filter:blur(2px)}
  .surcouche-boite{position:relative;max-width:34rem;width:100%;
                   background:var(--ground);border:1.5px solid var(--encre);
                   padding:2rem 2.1rem 1.8rem;box-shadow:0 18px 50px rgba(32,24,32,.28)}
  .surcouche-x{position:absolute;top:.5rem;right:.7rem;border:0;background:none;
               font-size:1.6rem;line-height:1;color:var(--encre-3);cursor:pointer;
               padding:.2rem .4rem}
  .surcouche-x:hover{color:var(--rouge)}
  .surcouche-sur{margin:0;font-family:var(--mono);font-size:.7rem;font-weight:500;
                 letter-spacing:.14em;text-transform:uppercase;color:var(--rouge)}
  .surcouche-boite h2{margin:.55rem 0 0;font-size:1.5rem;line-height:1.2}
  .surcouche-boite p#surcouche-texte{margin:.8rem 0 0;color:var(--encre-2);
                                     max-width:44ch}
  .surcouche-actions{margin-top:1.5rem;display:flex;gap:.7rem;flex-wrap:wrap}
  @media (prefers-reduced-motion:no-preference){
    .surcouche-boite{animation:surgir .22s ease-out}
    @keyframes surgir{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  }

  /* ---------- bande de marques ---------- */
  /* Fond blanc fixe, en clair comme en sombre : les logos partenaires sont
     fournis pour un fond clair. Le badge 3CX est anthracite et le Sophos est
     noir ; sur le fond sombre du theme nuit, ils disparaitraient. */
  .marques{background:#FFFFFF;border-block:1px solid var(--rail)}
  .marques .wrap{padding-block:1.9rem}
  .marques-titre{margin:0 0 1.3rem;font-family:var(--mono);font-size:.7rem;
                 font-weight:500;letter-spacing:.14em;text-transform:uppercase;
                 color:var(--encre-3)}
  .marques-rang{display:flex;flex-wrap:wrap;align-items:center;
                gap:1.6rem 2.6rem}
  /* Les trois logos sont des pastilles, pas des logotypes larges : ils portent
     leur propre texte. La hauteur est donnee un par un pour qu'ils pesent
     pareil a l'oeil et restent lisibles. */
  .marques-rang img{height:54px;width:auto;object-fit:contain;
                    opacity:.92;transition:opacity .15s}
  .marques-rang img[src*="3cx"],
  .marques-rang img[src*="msp"]{height:76px}
  .marques-rang img[src*="francenum"]{height:72px}
  .marques-rang a:hover img{opacity:1}
  @media (max-width:620px){.marques-rang{gap:1.1rem 1.8rem}
                           .marques-rang img{height:40px}
                           .marques-rang img[src*="3cx"],
                           .marques-rang img[src*="msp"]{height:56px}
                           .marques-rang img[src*="francenum"]{height:54px}}

  /* Une plage horaire ne doit jamais se couper en deux lignes. */
  .plage{white-space:nowrap}

  /* L'explication se deplie sur place : le visiteur ne quitte pas le bloc
     de contact pour aller lire une page juridique. */
  .implique{margin-top:.5rem;max-width:46ch;font-size:.82rem;
            line-height:1.55;color:var(--encre-3)}
  .implique summary{cursor:pointer;color:var(--encre-2);
                    text-decoration:underline;text-underline-offset:3px}
  .implique summary:hover{color:var(--encre)}
  .implique p{margin:.6rem 0 0;padding-left:.9rem;
              border-left:2px solid var(--rail)}

  /* ---------- signature de groupe ---------- */
  /* Le logo du groupe est a encre sombre : la bande reste claire dans les
     deux themes, comme la bande de marques, sinon il disparait de nuit. */
  .signature{background:#FFFFFF;border-top:1px solid #DCD5D9}
  .signature .wrap{display:flex;align-items:center;justify-content:center;
                   gap:.85rem;padding-block:1.35rem;flex-wrap:wrap}
  .signature span{font-family:var(--mono);font-size:.68rem;font-weight:500;
                  letter-spacing:.1em;text-transform:uppercase;color:#8B8189}
  .signature img{height:34px;width:auto;opacity:.92;transition:opacity .15s}
  .signature a:hover img{opacity:1}
  @media (max-width:520px){.signature .wrap{gap:.6rem;padding-block:1.1rem}
                           .signature img{height:26px}}

  /* ---------- articles ---------- */
  .articles{list-style:none;margin:0;padding:0;max-width:66ch;
            border-top:1px solid var(--rail)}
  .articles li{padding:1.6rem 0;border-bottom:1px solid var(--rail)}
  .a-meta{margin:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;
          text-transform:uppercase;color:var(--encre-3)}
  .articles h2{margin:.5rem 0 0;font-size:1.3rem;line-height:1.25}
  .articles h2 a{color:var(--encre);text-decoration:none;
                 border-bottom:2px solid var(--rouge-3)}
  .articles h2 a:hover{border-bottom-color:var(--rouge)}
  .a-chapo{margin:.6rem 0 0;color:var(--encre-2);max-width:60ch}
  .a-venir{opacity:.55}
  .a-venir h2{color:var(--encre-2)}

  .texte{max-width:66ch}
  .texte p{margin:0 0 1.1rem;color:var(--encre-2);line-height:1.72}
  .texte p b{color:var(--encre)}
  .texte h2{margin:2.4rem 0 1rem;font-size:1.25rem;line-height:1.3}
  .texte a{color:var(--encre);border-bottom:1px solid var(--rail-fort);
           text-decoration:none}
  .texte a:hover{border-bottom-color:var(--rouge)}
  .citation{margin:1.6rem 0;padding:1.1rem 1.3rem;background:var(--ground-2);
            border-left:3px solid var(--rouge);font-size:1.02rem;
            line-height:1.6;color:var(--encre)}
  .hero .a-meta{margin-bottom:1rem}

  /* ---------- bandeau de consentement ---------- */
  .cookies{position:fixed;left:0;right:0;bottom:0;z-index:70;
           background:var(--inv-fond);color:var(--inv-texte-2);
           border-top:3px solid var(--rouge);
           box-shadow:0 -10px 40px rgba(32,24,32,.25)}
  .cookies[hidden]{display:none}
  .cookies-corps{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;
                 padding-block:1.1rem}
  .cookies-texte{flex:1 1 32rem;min-width:0}
  .cookies-texte p{margin:0;font-size:.9rem;line-height:1.6}
  .cookies-texte p + p{margin-top:.4rem}
  .cookies-texte b{color:var(--inv-texte)}
  .cookies-texte a{color:var(--inv-texte)}
  .cookies-actions{display:flex;gap:.7rem;flex:0 0 auto}
  .cookies-actions .btn{margin:0;border-color:var(--inv-texte-2);
                        color:var(--inv-texte);min-width:9rem;justify-content:center}
  .cookies-actions .btn:hover{border-color:var(--inv-texte)}
  .cookies-actions .btn-plein{background:var(--rouge);border-color:var(--rouge);
                              color:var(--sur-rouge)}
  @media (max-width:700px){
    .cookies-actions{width:100%}
    .cookies-actions .btn{flex:1 1 0;min-width:0}
  }

  /* zone d'agenda : le lien reste la tant que rien n'est charge */
  .agenda-repli{margin-top:1.1rem}

  /* ---------- agenda ---------- */
  .agenda{margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--rail)}
  .agenda > p{max-width:62ch}
  .agenda h3{margin:0;font-family:var(--display);font-size:1.05rem}
  .agenda > p{margin:.4rem 0 0;font-size:.95rem;color:var(--encre-2)}
  .agenda-cadre{display:block;width:100%;height:860px;margin-top:1rem;
                border:1px solid var(--rail);background:var(--ground)}
  @media (max-width:600px){.agenda-cadre{height:1040px}}

  /* ---------- preuves ---------- */
  .preuves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
           gap:0;border:1px solid var(--rail)}
  .preuve{padding:1.3rem 1.4rem;border-left:1px solid var(--rail)}
  .preuve:first-child{border-left:none}
  .preuve .n{font-family:var(--display);font-weight:700;
             font-size:clamp(1.8rem,4vw,2.5rem);line-height:1;
             font-variant-numeric:tabular-nums}
  .preuve .t{margin-top:.5rem;font-size:.9rem;color:var(--encre-2)}
  @media (max-width:700px){
    .preuves{grid-template-columns:1fr}
    .preuve{border-left:none;border-top:1px solid var(--rail)}
    .preuve:first-child{border-top:none}
  }
  .partenaires{margin-top:1.25rem;font-family:var(--mono);font-size:.78rem;
               letter-spacing:.05em;color:var(--encre-2)}
  .partenaires a{color:var(--encre-2);text-decoration:none;
                 border-bottom:1px solid var(--rail-fort)}
  .partenaires a:hover{color:var(--encre);border-bottom-color:var(--rouge)}
  .interloc{margin-top:1.5rem;max-width:58ch}
  .interloc b{font-family:var(--display);font-size:1.02rem}
  .interloc p{margin-top:.45rem;color:var(--encre-2);font-size:.95rem}

  /* ---------- contact ---------- */
  .contact-grille{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
  @media (max-width:760px){.contact-grille{grid-template-columns:1fr;gap:1.5rem}}
  .coord{font-size:.97rem;line-height:1.75}
  .coord a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--rail-fort)}
  .coord a:hover{color:var(--rouge-lis);border-bottom-color:var(--rouge)}
  .coord .gros{font-family:var(--display);font-weight:700;font-size:1.5rem;
               display:inline-block;margin-bottom:.4rem;
               font-variant-numeric:tabular-nums;border:none}

  /* ---------- pied ---------- */
  footer{background:var(--inv-fond);color:var(--inv-texte-2);
          font-size:.87rem;border-top:1px solid var(--inv-rail)}
  footer .wrap{padding-block:2.5rem}
  .pied-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.75rem}
  @media (max-width:760px){.pied-grille{grid-template-columns:1fr 1fr}}
  @media (max-width:420px){.pied-grille{grid-template-columns:1fr}}
  footer h4{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 ul{list-style:none;margin:0;padding:0}
  footer li{margin-bottom:.3rem}
  footer a{color:var(--inv-texte-2);text-decoration:none}
  footer a:hover{color:var(--inv-texte);text-decoration:underline}
  .pied-bas{margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--inv-rail);
            display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
            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}
  .note b{color:var(--encre)}

  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}