/* ==========================================================================
   applicateurs.css — page « Nos artisans applicateurs agréés »
   (applicateurs-beton-cire.html). Même langage que les pages éditoriales
   du site : surtitres gris, titres sobres, titres courts à filet, vraies
   photos de chantier, alternance blanc / pierre. Aucune illustration dessinée.
   ========================================================================== */
.page-applicateurs{
  --ap-encre:#1C1916;--ap-texte:#4E4943;--ap-gris:#8C867E;--ap-ligne:rgba(28,25,22,.13);
  --ap-papier:#FFFFFF;--ap-pierre:#F4F1EC;--ap-pierre-2:#ECE7E0;
  --ap-max:1440px;--ap-marge:56px;--ap-gout:max(var(--ap-marge),(100% - var(--ap-max))/2);
  background:var(--ap-papier);color:var(--ap-encre);
}
/* header écrit dans la page (build-includes.ps1) : hauteur réservée dès le premier rendu */
.page-applicateurs #header-placeholder{min-height:60px}
@media (max-width:768px){.page-applicateurs #header-placeholder{min-height:75px}}

.ap a{color:inherit}
.ap p a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;transition:opacity .25s}
.ap p a:hover{opacity:.6}
.ap h2,.ap h3{font-weight:400}
.ap p{font-weight:400}

/* ---------- blocs communs ---------- */
.ap-bloc{padding:clamp(72px,8vw,120px) var(--ap-gout)}
.ap-bloc--pierre{background:var(--ap-pierre)}
.ap-surtitre{margin:0 0 14px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ap-gris)}
.ap-entete{max-width:62ch;margin-bottom:clamp(36px,4vw,56px)}
.ap-entete--large{max-width:74ch}
.ap-h2{margin:0;font-size:clamp(28px,2.8vw,42px);line-height:1.15;letter-spacing:-.01em}
.ap .ap-chapo-section{margin:18px 0 0;font-size:clamp(16px,1.2vw,18px);line-height:1.75;color:var(--ap-encre)}
.ap-bloc p{margin:14px 0 0;font-size:15.5px;line-height:1.85;color:var(--ap-texte)}
.ap-bloc p strong{font-weight:500;color:var(--ap-encre)}
.ap h3{margin:0;font-size:18.5px;line-height:1.3;color:var(--ap-encre)}
.ap-photo{margin:0;overflow:hidden;background:var(--ap-pierre)}
.ap-photo img{display:block;width:100%;height:auto}
.ap-bouton{
  display:inline-block;padding:16px 26px;background:var(--ap-encre);color:#fff!important;border:1px solid var(--ap-encre)!important;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background .25s,color .25s;
}
.ap-bouton:hover{background:transparent;color:var(--ap-encre)!important;opacity:1!important}
.ap-bouton--ligne{background:transparent;color:var(--ap-encre)!important}
.ap-bouton--ligne:hover{background:var(--ap-encre);color:#fff!important}
.ap-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px!important}
.ap p.ap-actions a{padding-bottom:16px}

/* ==========================================================================
   Hero : texte à gauche, applicateur au travail à droite
   ========================================================================== */
.ap-hero{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,5vw,90px);align-items:center;
  padding:clamp(40px,5vw,80px) var(--ap-gout) clamp(56px,6vw,96px);background:var(--ap-pierre);
}
.ap-ariane{display:flex;flex-wrap:wrap;gap:10px;font-size:12.5px;letter-spacing:.04em;color:var(--ap-gris);margin-bottom:clamp(28px,4vw,56px)}
.ap-ariane a{text-decoration:none}
.ap-ariane a:hover{color:var(--ap-encre)}
.ap-titre{margin:0;font-weight:400;font-size:clamp(40px,4.8vw,76px);line-height:1.02;letter-spacing:-.02em;color:var(--ap-encre)}
.ap-chapo{margin:clamp(22px,2.4vw,32px) 0 0;max-width:52ch;font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:var(--ap-texte)}
.ap-hero__photo{aspect-ratio:4/5}
.ap-hero__photo img{height:100%;object-fit:cover}

/* repères : une donnée par case, comme la bande des pages par pièce */
.ap-reperes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--ap-ligne);border-top:1px solid var(--ap-ligne);border-bottom:1px solid var(--ap-ligne)}
.ap-repere{background:var(--ap-papier);padding:clamp(22px,2.4vw,34px) clamp(18px,2vw,30px)}
.ap-repere__cle{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ap-gris)}
.ap-repere__val{display:block;margin-top:10px;font-size:clamp(24px,2.2vw,32px);line-height:1.1;color:var(--ap-encre)}
.ap-repere p{margin:10px 0 0!important;font-size:14px!important;line-height:1.65!important}

/* ==========================================================================
   Articles courts à filet
   ========================================================================== */
.ap-articles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,52px)}
.ap-articles--deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.ap-articles h3::before{content:"";display:block;width:36px;height:2px;margin-bottom:16px;background:var(--ap-encre)}
.ap-articles p{margin-top:12px}

/* photo + texte côte à côte */
.ap-duo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(36px,5vw,90px);align-items:center}
.ap-duo--inverse{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.ap-duo__texte .ap-h2{max-width:22ch}
.ap-note{max-width:74ch;margin-top:clamp(36px,3.6vw,52px)!important;padding-top:24px;border-top:1px solid var(--ap-ligne)}

/* ==========================================================================
   Chantiers : 9 vignettes tirées au hasard dans projets-sol.html
   (applicateurs.js) ; chacune ouvre son chantier sur la page projets
   ========================================================================== */
.ap-chantiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,3.4vw,52px) clamp(20px,2.2vw,34px)}
.ap-chantier{display:block;margin:0;text-decoration:none}
.ap-chantier:focus-visible{outline:2px solid var(--ap-encre);outline-offset:6px}
.ap-chantier .ap-photo{aspect-ratio:1000/429}
.ap-chantier .ap-photo img{height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.ap-chantier:hover .ap-photo img{transform:scale(1.03)}
.ap-chantier h3{transition:opacity .25s}
.ap-chantier:hover h3{opacity:.6}
.ap-chantier__legende{padding-top:16px}
.ap-chantier__app{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ap-gris)}
.ap-chantier h3{margin-top:8px;font-size:17.5px}
.ap-chantier__meta{display:block;margin-top:6px;font-size:14px;line-height:1.6;color:var(--ap-texte)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .ap-hero{grid-template-columns:1fr}
  .ap-hero__photo{aspect-ratio:16/10;max-width:720px}
  .ap-reperes,.ap-articles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-duo,.ap-duo--inverse{grid-template-columns:1fr}
  .ap-duo--inverse .ap-photo{order:-1}
  .ap-chantiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-chantier:nth-child(9){display:none} /* 8 sur 2 colonnes : pas de vignette orpheline */
}
@media (max-width:760px){
  .page-applicateurs{--ap-marge:22px}
  .ap-reperes,.ap-articles,.ap-articles--deux,.ap-chantiers{grid-template-columns:1fr}
  .ap-chantier:nth-child(9){display:block}
}
@media (max-width:520px){
  .ap-actions .ap-bouton{width:100%;text-align:center}
}