:root{
    --abysse:#0b2d47; --eau:#0e4c7c; --eau-claire:#17a2b8;
    --feuille:#7cc242; --papier:#f5f8fa; --encre:#1d2b36; --gris:#6d7f8c;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--papier);color:var(--encre);
       font:16px/1.6 "Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%}
  img{max-width:100%;height:auto;display:block}
  .bandeau{background:linear-gradient(150deg,var(--abysse),var(--eau));color:#fff;padding:28px 20px 30px}
  .bandeau .dedans{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .bandeau img{width:74px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
  .marque{font-size:26px;font-weight:700;letter-spacing:.06em;margin:0}
  .sous{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:#a9cfe4;margin:3px 0 0}
  .filet{height:3px;background:linear-gradient(90deg,var(--eau),var(--eau-claire),var(--feuille))}
  main{max-width:1080px;margin:0 auto;padding:30px 20px 10px}
  h1{font-size:23px;line-height:1.3;margin:0 0 10px;color:var(--eau)}
  .chapeau{color:var(--gris);max-width:60ch;margin:0 0 8px}
  .outils{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 30px}
  .bouton{display:inline-block;padding:12px 20px;border-radius:8px;text-decoration:none;
          font-weight:600;font-size:15px;border:1px solid var(--eau)}
  .plein{background:var(--eau);color:#fff}
  .vide{background:#fff;color:var(--eau)}
  .grille{display:flex;flex-wrap:wrap;gap:20px;padding-bottom:10px}
  .carte{flex:1 1 260px;max-width:340px}
  .carte{background:#fff;border:1px solid #dfe8ee;border-radius:10px;overflow:hidden;
         text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s}
  .carte:hover,.carte:focus{box-shadow:0 8px 22px rgba(11,45,71,.14);transform:translateY(-2px)}
  .vign{height:320px;background:#eef3f7;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .vign img{max-height:320px;width:auto}
  .carte figcaption{padding:12px 14px 14px}
  .num{font-size:11px;letter-spacing:.18em;color:var(--eau-claire);font-weight:700}
  .titre{font-size:15px;font-weight:600;margin:2px 0 3px}
  .note{font-size:13px;color:var(--gris)}
  footer{margin-top:36px;background:#fff;border-top:1px solid #e2eaf0;padding:26px 20px 34px}
  .pied{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;
        gap:16px;flex-wrap:wrap;align-items:center;font-size:13.5px;color:var(--gris)}
  .pied strong{color:var(--eau);display:block;font-size:15px;letter-spacing:.04em}
  .point{display:inline-block;width:9px;height:9px;border-radius:50%;
         background:#cdd9e1;border:0;padding:0;cursor:pointer;vertical-align:middle}
  .porte{display:none;font-size:13px}
  .porte a{color:var(--eau-claire)}
  @media(max-width:520px){
    h1{font-size:20px}
    .bandeau img{width:60px}
    .marque{font-size:22px}
    .carte{flex:1 1 100%;max-width:none}
    .sous{font-size:11px;letter-spacing:.12em}
    .vign{height:430px}
    .vign img{max-height:430px}
  }

/* Ajouts du gabarit client */
.pourqui{display:none;margin:8px 0 0;font-size:13px;color:#cfe6f4;
         background:rgba(255,255,255,.12);padding:4px 10px;border-radius:5px}
.acompleter{background:#fff6e0;border:1px dashed #d8a92a;color:#7a5b00;
            padding:2px 8px;border-radius:5px;font-size:13.5px;font-weight:600;
            display:inline-block}

/* Ce que lit le CLIENT quand une valeur manque. Sobre, honnete, sans marqueur
   de chantier. Le professionnel, lui, garde sa pastille jaune. */
.a-preciser{font-style:italic;color:#6E7C88}