/* --------------------------------------------------------------------------
   Urbanisme : affiche paysage 1536 x 1024. Complète pages/fiche.css.

   Unité : --u = 1 px d'affiche = 100cqw / 1536. Toutes les positions et tailles
   ci-dessous sont les pixels mesurés sur urbanisme.png, multipliés par --u.
   Mêmes polices que PVU : Antonio pour les titres, Barlow pour le texte.
   -------------------------------------------------------------------------- */

.fiche.urba{--W:1536;--PH:672;max-width:1536px;--u:calc(100cqw / 1536);
  --navy:#072A57;--vert:#48782C;--vert-onglet:#457030;--gris-texte:#393939;--panneau:#EFF0F0}
.urba svg{display:block}
.urba .signature{font-family:var(--display);font-weight:500;text-transform:uppercase;color:#0A9A4A;letter-spacing:.1em;line-height:1}
.urba h1{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1;letter-spacing:0}
.urba h1 .l1{display:block;color:var(--navy)}
.urba h1 .l2{display:block;color:var(--vert)}
.urba .lede{font-family:var(--texte);font-weight:600;color:var(--navy);text-align:center}
.urba .u-badge{display:flex;align-items:center;font-family:var(--texte);font-weight:700;text-transform:uppercase;color:#466D2B}

.urba .carte{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;border-radius:0}
.urba .carte h2{display:inline-block;position:relative;z-index:1;background:linear-gradient(#446C2B,#4B7A30);color:#fff;
  font-family:var(--texte);font-weight:700;text-transform:uppercase;line-height:1;letter-spacing:0}
.urba .carte ul{background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 10px -4px rgba(10,30,20,.45)}
.urba .carte li{display:grid;align-items:center;color:#323230;font-weight:500;white-space:nowrap}
.urba .carte li svg{align-self:start}

.urba .u-panneau h2{color:#fff;font-family:var(--texte);font-weight:600;text-transform:uppercase;text-align:center;line-height:1}
.urba .engagements h2{background:var(--navy)}
.urba .atouts-u h2{background:#427128}
.urba .u-panneau li{text-align:center}
.urba .u-panneau b{display:block;font-family:var(--texte);font-weight:700;text-transform:uppercase}
.urba .engagements b{color:#0C2353}
.urba .atouts-u b{color:#476E2F}
.urba .u-panneau span{display:block;color:var(--gris-texte);font-weight:500}
.urba .u-panneau sub{font-size:.7em;line-height:0}
.urba .u-pied{background:var(--navy);color:#fff;display:flex;align-items:center}
.urba .u-pied p{font-family:var(--texte);font-weight:500}

/* ==========================================================================
   Écran large et impression : la composition de l'affiche.
   ========================================================================== */
@media screen and (min-width:900px), print{
  .urba .entete{position:absolute;left:0;top:0;width:100%;height:calc(672 * var(--u));z-index:3;pointer-events:none}
  .urba .u-logo{position:absolute;left:calc(28 * var(--u));top:calc(22 * var(--u));width:calc(299 * var(--u))}
  .urba .u-logo img{width:100%}
  .urba .signature{font-size:calc(21 * var(--u));margin-top:calc(6 * var(--u))}
  .urba h1{position:absolute;left:calc(300 * var(--u));top:calc(21 * var(--u));width:calc(1050 * var(--u));text-align:center;color:inherit}
  .urba h1 .l1{font-size:calc(32 * var(--u));letter-spacing:.098em}
  .urba h1 .l2{font-size:calc(29.5 * var(--u));letter-spacing:.098em;margin-top:calc(6 * var(--u))}
  .urba .lede{position:absolute;left:calc(450 * var(--u));top:calc(104 * var(--u));width:calc(500 * var(--u));
    font-size:calc(21 * var(--u));line-height:calc(23 * var(--u))}
  .urba .u-badge{position:absolute;left:calc(1318 * var(--u));top:calc(24 * var(--u));width:calc(210 * var(--u));
    column-gap:calc(16 * var(--u));font-size:calc(15.5 * var(--u));line-height:calc(20 * var(--u));
    background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0));padding:calc(4 * var(--u)) 0}
  .urba .u-badge svg{width:calc(56 * var(--u));height:calc(62 * var(--u));flex:none}

  .urba .mosaique{aspect-ratio:1536/672}

  .urba .carte h2{font-size:calc(16.6 * var(--u));padding:calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u));
    border-radius:calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) 0}
  .urba .carte ul{margin-top:calc(-4 * var(--u));padding:calc(10 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u)) calc(12 * var(--u));
    border-radius:0 calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u))}
  .urba .carte li{grid-template-columns:calc(12 * var(--u)) 1fr;column-gap:calc(11 * var(--u));
    font-size:calc(12.5 * var(--u));line-height:calc(18 * var(--u));margin-top:calc(2.75 * var(--u))}
  .urba .carte li:first-child{margin-top:0}
  .urba .carte li svg{width:calc(12 * var(--u));height:calc(12 * var(--u));margin-top:calc(3 * var(--u))}

  .urba .u-bas{position:relative;height:calc(352 * var(--u));display:grid;grid-template-columns:calc(764 * var(--u)) calc(772 * var(--u));
    grid-template-rows:calc(297 * var(--u)) calc(55 * var(--u));column-gap:0}
  .urba .u-panneau{position:relative;background:var(--panneau)}
  .urba .atouts-u{border-left:calc(3 * var(--u)) solid #fff}
  .urba .u-panneau h2{height:calc(40 * var(--u));font-size:calc(18.2 * var(--u));line-height:calc(40 * var(--u));letter-spacing:0;padding-right:calc(45 * var(--u))}
  .urba .atouts-u h2{font-size:calc(18.5 * var(--u));letter-spacing:.06em;padding-right:calc(42 * var(--u))}
  .urba .engagements li:first-child span{margin-top:calc(5 * var(--u))}
  .urba .u-panneau li{position:absolute;top:calc(55 * var(--u));width:calc(146 * var(--u));left:calc((var(--c) - 73) * var(--u))}
  .urba .atouts-u li{left:calc((var(--c) - 73 - 767) * var(--u))}
  .urba .u-panneau img{width:calc(74 * var(--u));margin:0 auto}
  .urba .u-panneau b{font-size:calc(14 * var(--u));line-height:calc(18.5 * var(--u));margin-top:calc(8 * var(--u));letter-spacing:0}
  .urba .u-panneau span{font-size:calc(12.5 * var(--u));line-height:calc(19.5 * var(--u));margin-top:calc(11 * var(--u))}
  .urba .u-pied{grid-column:1 / -1;margin-top:calc(1 * var(--u));padding-left:calc(214 * var(--u));column-gap:calc(16 * var(--u))}
  .urba .u-pied svg{width:calc(34 * var(--u));height:calc(38 * var(--u))}
  .urba .u-pied p{font-size:calc(16 * var(--u));margin-top:calc(-9 * var(--u))}
  .urba .u-pied .sep{margin:0 calc(22 * var(--u))}
}

/* ==========================================================================
   Téléphone et tablette.
   ========================================================================== */
@media screen and (max-width:899px){
  .urba .entete{padding:20px 16px 6px;display:grid;gap:10px}
  .urba .u-logo img{width:190px}
  .urba .signature{font-size:12.5px;margin-top:6px}
  .urba h1 .l1{font-size:clamp(24px,7vw,34px)}
  .urba h1 .l2{font-size:clamp(20px,5.8vw,28px);margin-top:4px}
  .urba .lede{font-size:17px;line-height:1.3;text-align:left}
  .urba .lede br{display:none}
  .urba .u-badge{column-gap:12px;font-size:14px;line-height:1.3}
  .urba .u-badge br{display:none}
  .urba .u-badge svg{width:36px;height:40px;flex:none}

  .urba .carte h2{font-size:17px;padding:8px 12px;border-radius:5px 5px 5px 0}
  .urba .carte ul{margin-top:-3px;padding:10px 12px;border-radius:0 8px 8px 8px}
  .urba .carte li{grid-template-columns:14px 1fr;column-gap:9px;font-size:14px;line-height:1.35;margin-top:4px}
  .urba .carte li svg{width:14px;height:14px;margin-top:3px}

  .urba .u-bas{padding:0 16px}
  .urba .u-panneau{margin-top:18px;background:var(--panneau);border-radius:10px;overflow:hidden}
  .urba .u-panneau h2{font-size:16px;line-height:1.2;padding:10px 12px}
  .urba .u-panneau ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px 10px;padding:16px 10px}
  .urba .u-panneau img{width:60px;margin:0 auto}
  .urba .u-panneau b{font-size:14px;line-height:1.2;margin-top:8px}
  .urba .u-panneau span{font-size:13px;line-height:1.35;margin-top:5px}
  .urba .u-pied{margin:18px -16px 0;padding:16px;column-gap:12px}
  .urba .u-pied svg{width:26px;height:28px;flex:none}
  .urba .u-pied p{font-size:14px;line-height:1.4}
  .urba .u-pied .sep{display:none}
  .urba .u-panneau br,.urba .carte li br{display:none}
  .urba .u-panneau sub{font-size:12px}
  .urba .carte li{white-space:normal}
  .urba .u-pied p span{display:block}
}

/* ==========================================================================
   Impression : une page au format de l'affiche (3:2 paysage), sans marge.
   ========================================================================== */
@page{size:315mm 210mm;margin:0}
@media print{
  .fiche.urba{width:315mm;height:210mm}
  .urba .carte ul{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.88);box-shadow:none}
}