/* --------------------------------------------------------------------------
   Fiches SCHEIER : feuille commune à toutes les pages issues d'une affiche.

   Principe : la page est un conteneur (container-type). Toutes les tailles de
   la composition sont exprimées en centièmes de sa largeur (cqw), à partir des
   pixels mesurés sur l'affiche d'origine (1024 px de large) : 1 px = 0,09766 cqw.
   L'impression est donc la même composition, simplement mise à l'échelle.

   La photo est découpée en tuiles. Chaque tuile est un recadrage du même fond,
   décrit par --tx --ty --tw --th (boîte en pixels d'affiche), et porte SON
   encart, placé par --cx --cy --cw (boîte de l'encart sur l'affiche).
   Au-dessus de 900 px et à l'impression, les tuiles se remettent bord à bord.
   En dessous, elles s'empilent et l'encart reste sur sa photo.
   -------------------------------------------------------------------------- */

@font-face{font-family:"Antonio";font-weight:500;src:url("assets/fonts/Antonio-Medium.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Antonio";font-weight:600;src:url("assets/fonts/Antonio-SemiBold.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Antonio";font-weight:700;src:url("assets/fonts/Antonio-Bold.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Barlow";font-weight:400;src:url("assets/fonts/Barlow-Regular.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Barlow";font-weight:500;src:url("assets/fonts/Barlow-Medium.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Barlow";font-weight:600;src:url("assets/fonts/Barlow-SemiBold.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Barlow";font-weight:700;src:url("assets/fonts/Barlow-Bold.woff2") format("woff2");font-display:swap}

:root{
  --vert-titre:#04260C;
  --bleu:#0E4577;
  --vert-vif:#096338;
  --vert-carte:#356A4B;
  --vert-bande:#087143;
  --vert-libelle:#0A643C;
  --bleu-expertise:#0C5D71;
  --encre:#122617;
  --papier:#F4F6F2;
  --blanc:#FFFFFF;
  --trait:#AAAAAA;
  --gris-bande:#F3F3F0;
  --verre:rgba(255,255,255,.88);
  --verre-bord:rgba(255,255,255,.6);
  --flou:blur(10px) saturate(1.1);
  --display:"Antonio","Arial Narrow",Arial,sans-serif;
  --texte:"Barlow","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--texte);line-height:1.4}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}

.fiche{container-type:inline-size;position:relative;width:100%;max-width:1100px;margin:0 auto;background:var(--blanc)}

/* ---------- structure commune ---------- */
.marque p{margin:0}
.marque-kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--bleu)}
.marque-kicker span{color:var(--vert-vif)}
.marque-nom{font-family:var(--display);font-weight:700;font-style:italic;color:var(--encre);line-height:1}
.marque-nom em{color:var(--vert-vif)}
.marque-procede{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--vert-vif)}
.marque-desc{font-weight:600;line-height:1.25}

.tuile{position:relative}
.cadre{position:absolute;inset:0;overflow:hidden}
.cadre img{position:absolute;max-width:none;
  width:calc(var(--W,1024) / var(--tw) * 100%);
  left:calc(-1 * var(--tx) / var(--tw) * 100%);
  top:calc(-1 * var(--ty) / var(--th) * 100%)}

.carte{background:var(--verre);border:1px solid var(--verre-bord);
  -webkit-backdrop-filter:var(--flou);backdrop-filter:var(--flou);
  box-shadow:0 .6cqw 2.4cqw -1.6cqw rgba(10,30,20,.5)}
.carte h2{font-family:var(--display);font-weight:600;text-transform:uppercase;color:var(--encre);line-height:1}
.carte h2 b{font-weight:700}
.pour{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--vert-carte);line-height:1.17}
.carte li{display:grid;align-items:center}
.carte li img{justify-self:center}

.synergie{background:var(--gris-bande)}
.synergie h2{text-align:center;font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--vert-bande);line-height:1.05}
.mix li{text-align:center}
.mix img{border-radius:50%;object-fit:cover;margin-left:auto;margin-right:auto}
.mix b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--vert-libelle);line-height:1.05}
.mix span{display:block;line-height:1.15}
.mix .op{font-family:var(--display);font-weight:700;color:var(--vert-bande)}
.mix .resultat b{color:var(--vert-vif)}

.atouts,.expertise .boite{position:relative;border:1px solid var(--trait);background:var(--blanc)}
.atouts h2,.expertise h2{position:absolute;background:var(--blanc);font-family:var(--display);font-weight:700;text-transform:uppercase;white-space:nowrap}
.atouts h2{color:#075B43}
.expertise h2{color:var(--bleu-expertise)}
.atouts li,.expertise li{display:grid;align-items:start}
.atouts b,.expertise b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1.08}
.atouts b{color:#0B633C}
.expertise b{color:var(--bleu-expertise)}
.atouts span,.expertise span{display:block;line-height:1.18}
/* Interlettrage borné : au-delà de 0,10 em (Antonio) et 0,12 em (Barlow), Chrome écrit chaque
   lettre séparément dans le PDF et une recherche de mot ne trouve plus « revégétalisation ». */
.logo .signature{font-family:var(--display);font-weight:500;text-transform:uppercase;color:#0A9A4A;letter-spacing:.1em;line-height:1}
.logo address{font-style:normal;line-height:1.3}

.pied{text-align:center;text-transform:uppercase;color:#222;letter-spacing:.02em}
.pied a{display:block;color:#0A6D3F;font-weight:600;letter-spacing:.12em;text-transform:none;text-decoration:none}

/* ---------- ce que vous regardez (écran seulement) ---------- */
.regard{max-width:74ch;margin:0 auto;padding:clamp(24px,4vw,44px) clamp(16px,3vw,32px) 72px;font-size:15px;line-height:1.6;color:#33403A}
.regard h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:19px;color:var(--vert-bande);margin:0 0 .9em;letter-spacing:.02em}
.regard ul{margin:0 0 1.2em;padding-left:1.15em;list-style:disc}
.regard li{margin-bottom:.6em}
.regard a{color:var(--vert-vif);font-weight:600}

/* ==========================================================================
   Composition d'affiche : écran large et impression.
   ========================================================================== */
@media screen and (min-width:900px), print{
  .entete{position:absolute;left:0;top:0;width:100%;height:100.39cqw;z-index:3;pointer-events:none}
  .entete > *{pointer-events:auto}
  h1{position:absolute;left:1.76cqw;top:1.07cqw;width:84cqw;
    font:700 6.35cqw/.99 var(--display);letter-spacing:-.02em;color:var(--vert-titre)}
  .lede{position:absolute;left:1.76cqw;top:18.55cqw;width:48cqw;
    font:600 2.344cqw/1.38 var(--display);color:var(--bleu)}
  .marque{position:absolute;left:58.4cqw;top:12.7cqw;width:38.96cqw;min-height:17cqw;
    display:grid;grid-template-columns:8cqw 1fr;column-gap:1cqw;align-content:start;
    padding:1.2cqw 1.66cqw 1cqw;border-radius:1cqw;
    background:var(--verre);border:1px solid var(--verre-bord);
    -webkit-backdrop-filter:var(--flou);backdrop-filter:var(--flou)}
  .marque-kicker{grid-column:1/-1;font-size:1.5625cqw;margin-bottom:.6cqw}
  .marque img{grid-row:2/5;width:8cqw;align-self:center}
  .marque-nom{font-size:3.6cqw;letter-spacing:-.03em}
  .marque-procede{font-size:1.465cqw;margin-top:.25cqw}
  .marque-desc{font-size:1.465cqw;margin-top:.7cqw}

  .mosaique{position:relative;aspect-ratio:1024/1028;overflow:hidden}
  .tuile{position:absolute;z-index:1;
    left:calc(var(--tx) / var(--W,1024) * 100%);top:calc(var(--ty) / var(--PH,1028) * 100%);
    width:calc(var(--tw) / var(--W,1024) * 100%);aspect-ratio:calc(var(--tw) / var(--th))}
  .tuile.principale{z-index:0}

  .carte{position:absolute;z-index:2;
    left:calc((var(--cx) - var(--tx)) / var(--tw) * 100%);
    top:calc((var(--cy) - var(--ty)) / var(--th) * 100%);
    width:calc(var(--cw) / var(--tw) * 100%);
    padding:1.07cqw 1.17cqw .9cqw;border-radius:.88cqw}
  .carte h2{font-size:1.953cqw;letter-spacing:-.015em}
  .pour{font-size:1.22cqw;margin:.5cqw 0 .8cqw}
  .carte li{grid-template-columns:3.03cqw 1fr;column-gap:.6cqw;margin-top:.7cqw;font-size:1.123cqw;line-height:1.18;font-weight:500}
  .carte li img{width:3.03cqw}

  .bas{padding:0 1.465cqw}
  .synergie{margin-top:.39cqw;min-height:19.43cqw;border-radius:1cqw;padding:1.17cqw 2.5cqw 1cqw}
  .synergie h2{font-size:1.758cqw;margin-bottom:1cqw}
  .mix{display:flex;justify-content:space-between;align-items:flex-start}
  .mix li{flex:0 0 11cqw}
  .mix li.resultat{flex-basis:11.6cqw}
  .mix img{width:8.6cqw;height:8.6cqw;margin-bottom:.68cqw}
  .mix b{font-size:1.074cqw}
  .mix span{font-size:1.025cqw;margin-top:.39cqw;font-weight:500}
  .mix .op{flex:0 0 auto;font-size:3.42cqw;line-height:1;padding-top:2.9cqw}

  .atouts{margin-top:1.5625cqw;min-height:12.3cqw;border-radius:.88cqw;padding:2.1cqw 1.17cqw .8cqw}
  .atouts h2{top:-1.05cqw;left:50%;transform:translateX(-50%);padding:0 1.37cqw;font-size:1.465cqw;line-height:1.45}
  .atouts ul{display:grid;grid-template-columns:1.04fr 1.03fr .91fr .99fr 1.07fr}
  .atouts li{grid-template-columns:5cqw 1fr;column-gap:.68cqw;padding:.2cqw 1cqw;border-right:1px solid var(--trait)}
  .atouts li:last-child{border-right:0}
  .atouts img{width:4.88cqw}
  .atouts b{font-size:1.025cqw}
  .atouts span{font-size:1cqw;margin-top:.49cqw;font-weight:500}

  /* Les hauteurs du tiers bas sont fixées : 1028 + 4 + 199 + 16 + 126 + 24 + 86 + 9 + 44 = 1536 px d'affiche,
     soit 150 cqw, la hauteur exacte d'une page 210 x 315 mm. */
  .synergie,.atouts,.expertise,.pied{min-height:0}
  .synergie{height:19.43cqw}
  .atouts{height:12.3cqw}
  .expertise{display:grid;grid-template-columns:25.1cqw 1fr;column-gap:2.4cqw;align-items:center;
    margin-top:2.34cqw;height:8.4cqw;padding-left:1.46cqw}
  .logo img{width:100%}
  .logo .signature{font-size:1.05cqw;margin-top:.4cqw}
  .logo address{font-size:1cqw;margin-top:.45cqw;font-weight:500}
  .expertise .boite{height:8.4cqw;border-radius:.88cqw;padding:1.5cqw 1.27cqw .4cqw}
  .expertise h2{top:-1.05cqw;left:4.2cqw;padding:0 1.27cqw;font-size:1.66cqw;line-height:1.25}
  .expertise ul{display:grid;grid-template-columns:1fr 1fr 1fr}
  .expertise li{grid-template-columns:4.2cqw 1fr;column-gap:.68cqw;align-items:center;padding:0 1cqw;border-right:1px solid #999}
  .expertise li:last-child{border-right:0}
  .expertise li img{width:4.2cqw}
  .expertise b{font-size:1.025cqw;line-height:1}
  .expertise span{font-size:1cqw;margin-top:.4cqw;line-height:1.13;font-weight:500}

  .pied{margin-top:.88cqw;height:4.3cqw;padding:.2cqw 0 0;font-size:1.22cqw;line-height:1.35;font-weight:500}
  .pied a{font-size:1.465cqw;margin-top:.1cqw}
}

/* ==========================================================================
   Téléphone et tablette : le titre d'abord, puis chaque photo avec son encart.
   ========================================================================== */
@media screen and (max-width:899px){
  .entete{padding:20px 16px 6px}
  h1{font:700 clamp(30px,8.6vw,46px)/1 var(--display);letter-spacing:-.01em;color:var(--vert-titre);margin-bottom:10px}
  .lede{font:600 clamp(16px,4.3vw,21px)/1.3 var(--display);color:var(--bleu);margin-bottom:16px}
  .marque{display:grid;grid-template-columns:64px 1fr;column-gap:12px;align-content:start;
    background:var(--blanc);border:1px solid #D5DCD4;border-radius:10px;padding:12px 14px}
  .marque-kicker{grid-column:1/-1;font-size:14px;margin-bottom:6px}
  .marque img{grid-row:2/5;width:64px;align-self:center}
  .marque-nom{font-size:30px}
  .marque-procede{font-size:13px;margin-top:2px}
  .marque-desc{font-size:14px;margin-top:6px}

  .mosaique{display:grid;gap:14px;padding:14px 16px 4px}
  .tuile{display:flex;flex-direction:column;justify-content:flex-end;
    aspect-ratio:calc(var(--mw, var(--tw)) / var(--mh, var(--th)));
    border-radius:10px;overflow:hidden;padding:3.5%}
  .tuile.principale{order:-1}
  .cadre img{width:calc(var(--W,1024) / var(--mw, var(--tw)) * 100%);
    left:calc(-1 * var(--mx, var(--tx)) / var(--mw, var(--tw)) * 100%);
    top:calc(-1 * var(--my, var(--ty)) / var(--mh, var(--th)) * 100%)}
  .carte{position:relative;padding:12px 14px 12px;border-radius:9px}
  .carte h2{font-size:21px}
  .pour{font-size:13px;margin:4px 0 8px}
  .carte li{grid-template-columns:30px 1fr;column-gap:8px;margin-top:7px;font-size:14px;line-height:1.25}
  .carte li img{width:30px}

  .bas{padding:0 16px}
  .synergie{margin-top:12px;border-radius:10px;padding:18px 14px 14px}
  .synergie h2{font-size:18px;margin-bottom:14px;text-wrap:balance}
  .mix{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 10px}
  .mix li{flex:0 1 140px}
  .mix img{width:76px;height:76px;margin-bottom:8px}
  .mix b{font-size:13.5px}
  .mix span{font-size:12.5px;margin-top:4px}
  .mix .op{display:none}

  .atouts{margin-top:22px;border-radius:9px;padding:20px 12px 10px}
  .atouts h2{top:-11px;left:12px;padding:0 8px;font-size:15px;line-height:22px;white-space:normal}
  .atouts ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 8px}
  .atouts li{grid-template-columns:44px 1fr;column-gap:8px;padding:4px 6px}
  .atouts img{width:44px}
  .atouts b{font-size:13px}
  .atouts span{font-size:12.5px;margin-top:3px}

  .expertise{display:grid;gap:16px;margin-top:22px}
  .logo{padding:0 4px}
  .logo img{width:min(100%,260px)}
  .logo .signature{font-size:12.5px;margin-top:6px}
  .logo address{font-size:13px;margin-top:6px}
  .expertise .boite{border-radius:9px;padding:20px 12px 10px}
  .expertise h2{top:-11px;left:12px;padding:0 8px;font-size:15px;line-height:22px}
  .expertise ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 8px}
  .expertise li{grid-template-columns:40px 1fr;column-gap:8px;align-items:center;padding:4px 6px}
  .expertise li img{width:40px}
  .expertise b{font-size:13px}
  .expertise span{font-size:12.5px;margin-top:3px}

  .pied{margin-top:18px;padding:0 8px 22px;font-size:12.5px;line-height:1.4}
  .pied a{font-size:16px;margin-top:6px}
}

/* ==========================================================================
   Impression : une page au format de l'affiche (2:3), sans marge.
   ========================================================================== */
@page{size:210mm 315mm;margin:0}
@media print{
  body{background:var(--blanc)}
  .fiche{width:210mm;max-width:none;margin:0;height:315mm;overflow:hidden}
  .regard{display:none !important}
  .carte,.marque{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.92);box-shadow:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

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