/* --------------------------------------------------------------------------
   PVU, zone urbaine : affiche paysage 1491 x 1055 (version client du 17/09/2026).
   Complète pages/fiche.css, qui n'est pas modifiée.

   Unité : --u = 1 px d'affiche = 100cqw / 1491. Toutes les positions et tailles
   ci-dessous sont les pixels mesurés sur application-urbaine.png, multipliés par --u.
   Polices : Antonio pour le grand titre, Barlow pour tout le reste.
   -------------------------------------------------------------------------- */

.fiche.pvu{--W:1491;--PH:754;max-width:1491px;--u:calc(100cqw / 1491);
  --titre:#04350B;--bleu-chapo:#0B2E74;--bleu-marque:#123A6E;--vert-marque:#0B6A2C;
  --vert-pvu:#0E6B2C;--vert-pour:#0C5B26;--encre-carte:#10181A;--texte-carte:#3B414C;
  --vert-panneau:#0C6329;--vert-lib:#12603A;--gris-texte:#3E4553;--bord:#DCDEDC;
  --panneau:#F8F9F8;--navy-coord:#16386B;--gris-coord:#33383C;--vert-www:#0C5A2F}

.pvu img{display:block}

/* ---------- familles et couleurs, communes à tous les formats ---------- */
.pvu h1{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--titre);letter-spacing:0}
.pvu .lede{font-family:var(--texte);font-weight:600;color:var(--bleu-chapo)}
.pvu .lede strong{font-weight:700}

.pvu .carte{background:#fff;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.pvu .carte h2{font-family:var(--texte);font-weight:700;text-transform:uppercase;color:var(--encre-carte);line-height:1}
.pvu .carte h2 b{color:var(--vert-pvu)}
.pvu .carte .pour{font-family:var(--texte);font-weight:700;text-transform:uppercase;color:var(--vert-pour)}
.pvu .carte li{display:grid;align-items:start;color:var(--texte-carte);font-weight:500}

.pvu #marque-pvu h2{font-family:var(--texte);font-weight:700;font-style:italic;text-transform:uppercase;color:var(--encre-carte)}
.pvu .kicker{font-family:var(--texte);font-weight:700;color:var(--bleu-marque)}
.pvu .kicker span{color:var(--vert-marque)}
.pvu #marque-pvu .pour{color:var(--vert-marque)}
.pvu .desc{color:#242938;font-weight:500}

.pvu .panneau{background:var(--panneau);border:1px solid var(--bord);margin:0;padding:0;min-height:0}
.pvu .panneau > h2{background:#fff;font-family:var(--texte);font-weight:700;text-transform:uppercase;
  color:var(--vert-panneau);white-space:nowrap;line-height:1;transform:none}
.pvu .mix b{font-family:var(--texte);font-weight:700;text-transform:uppercase;color:var(--vert-lib);display:block}
.pvu .mix span{display:block;color:var(--gris-texte);font-weight:400}
.pvu .mix .op{font-family:var(--texte);font-weight:700;color:#0A5C33;text-align:center;line-height:1}
.pvu .atouts li,.pvu .boite li{padding:0;border-right:0;margin:0}
.pvu .expertise{margin:0;padding:0}
.pvu .mix .op{padding:0}
.pvu .mix li img{margin:0 auto}
.pvu .atouts b{font-family:var(--texte);font-weight:700;text-transform:uppercase;color:var(--vert-lib);display:block}
.pvu .atouts span{display:block;color:var(--gris-texte);font-weight:400}

.pvu .boite{background:#fff;border:1px solid var(--bord);margin:0;padding:0;min-height:0}
.pvu .boite > h2{background:#fff;font-family:var(--texte);font-weight:700;text-transform:uppercase;
  color:#0C5541;white-space:nowrap;line-height:1;transform:none}
.pvu .boite b{font-family:var(--texte);font-weight:700;text-transform:uppercase;color:#0E2C63;display:block}
.pvu .boite span{display:block;color:var(--gris-texte);font-weight:400}
.pvu .logo .signature{font-family:var(--display);font-weight:500;text-transform:uppercase;color:#0A9A4A;
  letter-spacing:.09em;line-height:1}
.pvu .coord{font-style:normal;color:var(--gris-coord);font-weight:500}
.pvu .coord .raison{color:var(--navy-coord);font-weight:700;text-transform:uppercase;display:block}
.pvu .coord .site{color:var(--vert-www);font-weight:700;text-decoration:none;display:block}

/* ==========================================================================
   Écran large et impression : la composition de l'affiche.
   ========================================================================== */
@media screen and (min-width:900px), print{
  .pvu .entete{position:absolute;left:0;top:0;width:100%;height:calc(454 * var(--u));z-index:3;pointer-events:none}
  .pvu .entete > *{pointer-events:auto}

  .pvu h1{position:absolute;left:0;top:0;width:calc(600 * var(--u));height:calc(230 * var(--u))}
  .pvu h1 span{position:absolute;left:calc(30 * var(--u));line-height:1;white-space:nowrap}
  .pvu h1 .l1{top:calc(24.5 * var(--u));font-size:calc(64 * var(--u));letter-spacing:.057em}
  .pvu h1 .l2{top:calc(88.3 * var(--u));font-size:calc(65.1 * var(--u));letter-spacing:.018em}
  .pvu h1 .l3{top:calc(157.8 * var(--u));font-size:calc(61.6 * var(--u));letter-spacing:.038em}

  .pvu .lede{position:absolute;left:0;top:0;width:calc(600 * var(--u))}
  .pvu .lede span{position:absolute;left:calc(32 * var(--u));line-height:1;white-space:nowrap;
    font-size:calc(23.5 * var(--u))}
  .pvu .lede .a{top:calc(228.8 * var(--u));letter-spacing:-.061em}
  .pvu .lede .b{top:calc(258.8 * var(--u));letter-spacing:-.053em}
  .pvu .lede .c{top:calc(289.8 * var(--u));letter-spacing:-.042em}

  .pvu .mosaique{aspect-ratio:1491/754}
  .pvu .carte{border-radius:calc(12 * var(--u));padding:0;overflow:hidden;
    height:calc(var(--ch) / var(--th) * 100%);
    box-shadow:0 calc(2 * var(--u)) calc(9 * var(--u)) calc(-5 * var(--u)) rgba(12,30,18,.35)}
  .pvu .carte > *{position:absolute}

  /* encart de marque */
  .pvu #marque-pvu .kicker{left:calc(18 * var(--u));top:calc(3.8 * var(--u));font-size:calc(21 * var(--u));
    letter-spacing:-.086em;line-height:1;white-space:nowrap}
  .pvu #marque-pvu .embleme{left:calc(6 * var(--u));top:calc(32 * var(--u));width:calc(82 * var(--u))}
  .pvu #marque-pvu h2{left:calc(96 * var(--u));top:calc(37.9 * var(--u));font-size:calc(45.7 * var(--u));
    letter-spacing:-.048em;line-height:1;white-space:nowrap}
  .pvu #marque-pvu .pour{left:calc(98 * var(--u));top:calc(90.5 * var(--u));font-size:calc(17.6 * var(--u));
    font-weight:600;letter-spacing:-.086em;line-height:1;white-space:nowrap;margin:0}
  .pvu #marque-pvu .desc{left:calc(100 * var(--u));top:calc(118.6 * var(--u));font-size:calc(17.1 * var(--u));
    letter-spacing:-.053em;line-height:calc(20 * var(--u))}
  .pvu .desc .d1{letter-spacing:-.062em}
  .pvu .desc .d2{letter-spacing:-.049em}

  /* les quatre encarts PVU */
  .pvu .carte h2{font-size:calc(24.5 * var(--u));white-space:nowrap}
  .pvu .carte .pour{font-family:var(--display);font-size:calc(18.6 * var(--u));line-height:calc(17 * var(--u));
    white-space:nowrap;margin:0}
  .pvu .carte ul{position:absolute}
  .pvu .carte li{grid-template-columns:calc(46 * var(--u)) 1fr;font-size:calc(14.2 * var(--u));
    letter-spacing:-.068em;align-items:start}
  .pvu .carte li{position:relative}
  .pvu .carte li span{grid-column:2}
  .pvu .carte li{letter-spacing:calc(var(--ls, -.068) * 1em)}
  .pvu .carte li img{position:absolute;left:calc(var(--il) * var(--u));top:calc(var(--it) * var(--u));
    width:calc(var(--iw) * var(--u));height:auto}
  .pvu .carte li span,.pvu .mix b,.pvu .mix span,.pvu .atouts b,.pvu .atouts span,
  .pvu .boite b,.pvu .boite span,.pvu .coord{white-space:nowrap}
  .pvu .atouts li.seule b{font-size:calc(9.5 * var(--u));letter-spacing:-.078em}

  #pvu-1000 h2{left:calc(14 * var(--u));top:calc(4.1 * var(--u));letter-spacing:-.070em}
  #pvu-1000 .pour{left:calc(15 * var(--u));top:calc(34.73 * var(--u));letter-spacing:+.043em}
  #pvu-1000 ul{left:calc(8 * var(--u));top:calc(70.3 * var(--u));width:calc(249 * var(--u))}
  #pvu-1000 li{column-gap:calc(12 * var(--u));margin-top:calc(14 * var(--u));line-height:calc(18 * var(--u))}
  #pvu-1000 li:first-child{margin-top:0}

  #pvu-3000 h2{left:calc(12 * var(--u));top:calc(1.1 * var(--u));letter-spacing:-.085em}
  #pvu-3000 .pour{left:calc(13 * var(--u));top:calc(29.73 * var(--u));letter-spacing:+.021em}
  #pvu-3000 ul{left:calc(7 * var(--u));top:calc(60.76 * var(--u));width:calc(212 * var(--u))}
  #pvu-3000 li{column-gap:calc(13 * var(--u));margin-top:calc(11 * var(--u));line-height:calc(15 * var(--u))}
  #pvu-3000 li + li + li{margin-top:calc(13 * var(--u))}
  #pvu-3000 li:first-child{margin-top:0}

  #pvu-2000 h2{left:calc(17 * var(--u));top:calc(2.1 * var(--u));letter-spacing:-.094em}
  #pvu-2000 .pour{left:calc(17 * var(--u));top:calc(33.73 * var(--u));letter-spacing:+.036em}
  #pvu-2000 ul{left:calc(11 * var(--u));top:calc(79 * var(--u));width:calc(215 * var(--u))}
  #pvu-2000 li{column-gap:calc(8 * var(--u));margin-top:calc(5 * var(--u));line-height:calc(16.5 * var(--u))}
  #pvu-2000 li + li + li{margin-top:calc(10 * var(--u))}
  #pvu-2000 li:first-child{margin-top:0}

  #pvu-4000 h2{left:calc(14 * var(--u));top:calc(3.1 * var(--u));letter-spacing:-.086em}
  #pvu-4000 .pour{left:calc(14 * var(--u));top:calc(31.73 * var(--u));letter-spacing:+.031em}
  #pvu-4000 ul{left:calc(5 * var(--u));top:calc(66.3 * var(--u));width:calc(215 * var(--u))}
  #pvu-4000 li{column-gap:calc(12 * var(--u));margin-top:calc(13 * var(--u));line-height:calc(16 * var(--u))}
  #pvu-4000 li + li + li{margin-top:calc(18 * var(--u))}
  #pvu-4000 li:first-child{margin-top:0}

  /* ---------- tiers bas ---------- */
  .pvu .bas{position:relative;height:calc(301 * var(--u));background:#fff}
  .pvu .panneau{position:absolute;border-radius:calc(12 * var(--u))}
  .pvu .panneau > h2{position:absolute}
  .pvu .synergie{left:calc(21 * var(--u));top:calc(20 * var(--u));width:calc(794 * var(--u));height:calc(154 * var(--u))}
  .pvu .synergie > h2{left:calc(151 * var(--u));top:calc(-9 * var(--u));font-size:calc(20 * var(--u));
    letter-spacing:-.064em;padding:0 calc(14 * var(--u))}
  .pvu .mix li{position:absolute;top:calc(15 * var(--u));width:calc(146 * var(--u));
    left:calc((var(--c) - 94) * var(--u));text-align:center}
  .pvu .mix li img{width:calc(74 * var(--u));height:calc(74 * var(--u));border-radius:50%;margin:0 auto;
    position:relative;left:calc(var(--io, 0) * var(--u))}
  .pvu .mix b{font-size:calc(12 * var(--u));line-height:calc(15.5 * var(--u));letter-spacing:+.002em;
    margin-top:calc(3.85 * var(--u))}
  .pvu .mix span{position:relative;left:calc(-2 * var(--u));
    font-size:calc(12 * var(--u));line-height:calc(15 * var(--u));letter-spacing:-.064em;
    margin-top:calc(-1.25 * var(--u))}
  .pvu .mix .resultat b{margin-top:calc(4.85 * var(--u));line-height:calc(16 * var(--u))}
  .pvu .mix .op{position:absolute;width:calc(22 * var(--u));left:calc((var(--c) - 32) * var(--u));
    top:calc(41 * var(--u));font-size:calc(27 * var(--u))}
  .pvu .mix .egal{top:calc(46 * var(--u))}

  .pvu .atouts{left:calc(827 * var(--u));top:calc(19 * var(--u));width:calc(645 * var(--u));height:calc(159 * var(--u))}
  .pvu .atouts > h2{left:calc(139 * var(--u));top:calc(-8.7 * var(--u));font-size:calc(18.5 * var(--u));
    letter-spacing:-.043em;padding:0 calc(12 * var(--u))}
  .pvu .atouts li{display:block;position:absolute;top:calc(69.8 * var(--u));left:calc(var(--x) * var(--u));
    width:calc(var(--w) * var(--u))}
  .pvu .atouts li.seule{top:calc(73.8 * var(--u))}
  .pvu .atouts li img{position:absolute;left:calc(var(--ix) * var(--u));top:calc(var(--iy) * var(--u));
    width:calc(var(--iw) * var(--u))}
  .pvu .atouts b{font-size:calc(11 * var(--u));line-height:calc(17 * var(--u));letter-spacing:-.045em}
  .pvu .atouts span{font-size:calc(12 * var(--u));line-height:calc(14 * var(--u));letter-spacing:-.048em;
    margin-top:calc(3.55 * var(--u))}
  .pvu .atouts li.seule span{margin-top:calc(8.55 * var(--u));line-height:calc(14 * var(--u))}
  .pvu .atouts .trait{position:absolute;top:calc(14 * var(--u));width:1px;height:calc(130 * var(--u));
    background:var(--bord);left:calc(var(--x) * var(--u))}

  .pvu .expertise{display:block;position:absolute;left:0;top:0;width:100%;height:100%}
  .pvu .logo{position:absolute;left:calc(38 * var(--u));top:calc(186 * var(--u));width:calc(279 * var(--u))}
  .pvu .logo img{width:100%}
  .pvu .logo .signature{font-size:calc(13 * var(--u));margin-top:calc(7 * var(--u))}
  .pvu .boite{position:absolute;left:calc(346 * var(--u));top:calc(194 * var(--u));
    width:calc(665 * var(--u));height:calc(76 * var(--u));border-radius:calc(10 * var(--u))}
  .pvu .boite > h2{position:absolute;left:calc(72 * var(--u));top:calc(-16.9 * var(--u));
    font-size:calc(19.5 * var(--u));letter-spacing:-.030em;padding:0 calc(12 * var(--u))}
  .pvu .boite li{display:block;position:absolute;left:calc(var(--x) * var(--u));top:calc(12.8 * var(--u));
    width:calc(160 * var(--u))}
  .pvu .boite li img{position:absolute;left:calc(-68 * var(--u));top:calc(var(--iy) * var(--u));
    width:calc(63 * var(--u))}
  .pvu .boite b{font-size:calc(11 * var(--u));line-height:calc(11 * var(--u));letter-spacing:-.027em}
  .pvu .boite span{font-size:calc(12.2 * var(--u));line-height:calc(16 * var(--u));letter-spacing:-.035em;
    margin-top:calc(5.9 * var(--u))}
  .pvu .boite .trait{position:absolute;top:calc(9 * var(--u));width:1px;height:calc(58 * var(--u));
    background:var(--bord);left:calc(var(--x) * var(--u))}

  .pvu .coord{position:absolute;left:calc(1111 * var(--u));top:calc(184.5 * var(--u));width:calc(370 * var(--u));
    font-size:calc(15 * var(--u));line-height:calc(21.5 * var(--u));letter-spacing:-.030em}
  .pvu .coord .raison{font-size:calc(15 * var(--u));line-height:calc(22 * var(--u));letter-spacing:-.015em}
  .pvu .coord .site{position:absolute;left:calc(49 * var(--u));top:calc(64.3 * var(--u));
    font-size:calc(21 * var(--u));line-height:1;letter-spacing:-.010em}
  .pvu .coord .globe{position:absolute;left:calc(-5 * var(--u));top:calc(64.5 * var(--u));width:calc(29 * var(--u))}
  .pvu .separateur{position:absolute;left:calc(1065 * var(--u));top:calc(206 * var(--u));
    width:1px;height:calc(60 * var(--u));background:#C9CDD1}
}

/* ==========================================================================
   Téléphone et tablette : le titre, puis chaque photo avec son encart.
   ========================================================================== */
@media screen and (max-width:899px){
  /* le bandeau du site est fixe et transparent sur téléphone : on lui laisse sa hauteur */
  .pvu .entete{padding:20px 16px 4px}
  .pvu h1{display:block;margin-bottom:10px}
  .pvu h1 span{display:block;line-height:1.02}
  .pvu h1 .l1{font-size:clamp(28px,8.4vw,44px)}
  .pvu h1 .l2{font-size:clamp(26px,7.4vw,40px)}
  .pvu h1 .l3{font-size:clamp(26px,7.4vw,40px)}
  .pvu .lede{font-size:16px;line-height:1.35}
  .pvu .lede span{display:inline}
  .pvu .lede br{display:none}

  /* Chaque tuile devient une bande photo suivie de son encart : le cadrage telephone
     (--mx --my --mw --mh) vise une zone de LA photo de la tuile ou aucun panneau n'est peint. */
  .pvu .mosaique{display:grid;gap:14px;padding:14px 16px 4px}
  .pvu .tuile{display:block;aspect-ratio:auto;border-radius:10px;overflow:hidden;padding:0;background:#fff;
    box-shadow:0 2px 12px -6px rgba(12,30,18,.5)}
  .pvu .tuile.principale{order:-1}
  .pvu .cadre{position:relative;inset:auto;width:100%;
    aspect-ratio:calc(var(--mw, var(--tw)) / var(--mh, var(--th)))}
  .pvu .carte{position:relative;padding:14px 14px 16px;border-radius:0;box-shadow:none}
  .pvu .carte h2{font-size:20px}
  .pvu .carte .pour{font-size:14px;margin:4px 0 9px;line-height:1.2}
  .pvu .carte li{grid-template-columns:34px 1fr;column-gap:9px;margin-top:8px;font-size:13.5px;line-height:1.3;
    letter-spacing:0}
  .pvu .carte li br,.pvu .atouts br,.pvu .boite br,.pvu .mix br,.pvu .desc br{display:none}
  .pvu .desc .d1,.pvu .desc .d2{letter-spacing:0}
  .pvu .carte li img{width:34px}
  .pvu .carte li:first-child{margin-top:0}

  .pvu #marque-pvu{display:grid;grid-template-columns:60px 1fr;column-gap:12px;align-items:center}
  .pvu #marque-pvu .kicker{grid-column:1/-1;grid-row:1;font-size:13.5px;line-height:1.2;margin-bottom:8px}
  .pvu #marque-pvu .embleme{grid-column:1;grid-row:2/4;width:60px}
  .pvu #marque-pvu h2{grid-column:2;grid-row:2;font-size:30px;line-height:1}
  .pvu #marque-pvu .pour{grid-column:2;grid-row:3;font-size:13px;margin:3px 0 0;line-height:1.2}
  .pvu #marque-pvu .desc{grid-column:1/-1;grid-row:4;font-size:13.5px;line-height:1.35;margin-top:10px}

  .pvu .bas{padding:0 16px}
  .pvu .panneau,.pvu .boite{margin-top:22px;border-radius:10px;padding:18px 12px 14px;position:relative}
  .pvu .panneau > h2,.pvu .boite > h2{font-size:15px;line-height:1.25;white-space:normal;
    padding:0 8px;position:absolute;top:-10px;left:12px}
  .pvu .mix{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 10px;padding-top:4px}
  .pvu .mix li{flex:0 1 140px;text-align:center}
  .pvu .mix li img{width:72px;height:72px;border-radius:50%;margin:0 auto 8px}
  .pvu .mix b{font-size:13px;line-height:1.2}
  .pvu .mix span{font-size:12.5px;line-height:1.3;margin-top:4px}
  .pvu .mix .op,.pvu .trait{display:none}
  .pvu .atouts ul,.pvu .boite ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 10px;padding-top:6px}
  .pvu .atouts li,.pvu .boite li{position:relative;display:block}
  .pvu .atouts li img,.pvu .boite li img{position:relative;width:46px;margin-bottom:6px}
  .pvu .atouts b,.pvu .boite b{font-size:13px;line-height:1.2}
  .pvu .atouts span,.pvu .boite span{font-size:12.5px;line-height:1.3;margin-top:4px}
  .pvu .expertise{display:block;margin-top:22px}
  .pvu .logo{padding:0 2px}
  .pvu .logo img{width:min(100%,250px)}
  .pvu .logo .signature{font-size:12.5px;margin-top:7px}
  .pvu .coord{display:block;margin:18px 0 26px;font-size:13.5px;line-height:1.5}
  .pvu .coord .raison{font-size:14px}
  .pvu .coord .globe{display:none}
  .pvu .coord .site{display:inline-block;font-size:17px;margin-top:8px}
}

/* ==========================================================================
   Impression : une page au format de l'affiche (A4 paysage), sans marge.
   ========================================================================== */
@page{size:297mm 210mm;margin:0}
@media print{
  .fiche.pvu{width:297mm;max-width:none;height:210mm;margin:0;overflow:hidden}
}