/* ============================================================
   IMAGINOVE : « Planche d'autocollants », pages intérieures
   (services, portfolio, véhicules, enseignes, devis)
   Complète planche.css ; même monde, mêmes règles (voir DESIGN.md).
   ============================================================ */

.planche .tint { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .5) 110px, rgba(255, 255, 255, .5) calc(100% - 110px), rgba(255, 255, 255, 0) 100%); }
.planche .top { position: relative; padding: 124px 0 64px; }
.planche .top-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.planche .top h1 {
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(1.8rem, 3.4vw, 3.9rem);
  line-height: .96;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin: 0 0 26px;
}
.planche .top .lead { margin: 0; }
.planche .top-photo { margin: 0; rotate: 1.4deg; }
.planche .top-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; box-shadow: var(--ring), 0 26px 40px -20px rgba(18, 18, 18, .5); }
.planche .tagline { margin: 0 0 18px; font: 800 .74rem/1.2 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Services : rangées alternées */
.planche .svc-rows { display: grid; gap: 110px; }
.planche .svc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 90px); align-items: center; }
.planche .svc-row:nth-child(even) .svc-photo { order: 2; }
.planche .svc-photo { margin: 0; rotate: var(--rot, 0deg); }
.planche .svc-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; box-shadow: var(--ring), 0 24px 34px -18px rgba(18, 18, 18, .5); }
.planche .svc-body h2, .planche .split-text h2 { font-size: clamp(1.6rem, 2.8vw, 2.7rem); }
.planche .svc-body h2 { margin: 0 0 16px; }
.planche .row-desc { margin: 0 0 18px; max-width: 54ch; font-size: 1.02rem; line-height: 1.6; }
.planche .pl-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; font-size: .95rem; line-height: 1.4; }
.planche .pl-list li::before { content: '+ '; color: var(--ink); font-weight: 900; }
.planche .pl-list-1 { grid-template-columns: 1fr; }
.planche .row-link { margin: 20px 0 0; }
.planche .link-u { font: 800 .78rem/1 var(--f); letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid var(--ink); padding-bottom: 4px; }
.planche .link-u:hover { color: var(--red); border-color: var(--red); }
.planche .note-sticker { margin: 110px auto 0; max-width: 760px; padding: 28px 34px; text-align: center; font-size: 1.05rem; line-height: 1.55; --rot: -1deg; }
.planche .note-sticker p { margin: 0; }
.planche .note-sticker strong { font-weight: 800; }

/* Portfolio : collage de photos réelles */
.planche .collage { columns: 3; column-gap: 34px; }
.planche .tile {
  position: relative;
  margin: 0 0 46px;
  break-inside: avoid;
  rotate: var(--rot, 0deg);
  transition: opacity .7s cubic-bezier(.2, .9, .3, 1), translate .7s cubic-bezier(.2, .9, .3, 1), rotate .35s cubic-bezier(.2, .9, .3, 1);
}
.planche .tile:hover { rotate: 0deg; }
.planche .tile img { width: 100%; height: auto; object-fit: cover; border-radius: 16px; box-shadow: var(--ring), 0 22px 32px -18px rgba(18, 18, 18, .5); }
.planche .tile figcaption { position: absolute; left: -8px; bottom: 22px; rotate: -3deg; }
.planche .split-photo.tile { margin: 0; }
.planche .split-photo.tile img { aspect-ratio: 16 / 9; }

/* Deux colonnes texte + photo */
.planche .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 90px); align-items: center; }
.planche .split-top { align-items: start; }
.planche .split-text h2 { margin: 0 0 22px; }
.planche .prose p { margin: 0 0 16px; max-width: 56ch; font-size: 1.02rem; line-height: 1.65; }
.planche .prose strong { font-weight: 800; }
.planche .prose ul { margin: 0 0 16px; padding-left: 1.2em; line-height: 1.6; }
.planche .wide-photo { margin: 52px 0 0; }
.planche .wide-photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 20px; box-shadow: var(--ring), 0 26px 40px -22px rgba(18, 18, 18, .5); }


/* Étapes à 4 */
.planche .steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.planche .steps-4 .step { min-height: 280px; padding: 30px 24px 34px; }
.planche .steps-4 .step:nth-child(4) { --rot: .8deg; --ty: 90px; }
.planche .steps-4 .pl-num { font-size: 3.8rem; }

/* Devis : cartes de contact */
.planche .contact-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 30px; }
.planche .pl-contact { padding: 32px 28px 36px; }
.planche .pl-contact h3 { margin: 0 0 6px; font-size: 1.3rem; }
.planche .contact-link { display: block; width: fit-content; max-width: 100%; margin: 6px 0 14px; padding-bottom: 3px; font: 900 1.2rem/1.2 var(--f); font-stretch: 112%; overflow-wrap: anywhere; border-bottom: 2px solid currentColor; }
.planche .pl-contact .pl-sub { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.planche .pl-contact.stk-red .pl-sub { color: var(--white); }
.planche .map-frame { display: block; width: 100%; height: 320px; margin: 8px 0 24px; border: 0; border-radius: 18px; box-shadow: var(--ring), 0 20px 30px -18px rgba(18, 18, 18, .5); }

/* Plaque de fin des pages intérieures */
.planche .final-sm { padding: 100px 0 110px; }
.planche .final-sm h2 { max-width: 20ch; margin: 0 0 24px; font-size: clamp(2.2rem, 5.4vw, 5rem); line-height: .92; white-space: normal; text-wrap: balance; }
/* Texte blanc sur toutes les cartes rouges (contraste 4,6:1 contre 4,1:1 pour le noir) */
.planche .stk-red h3, .planche .stk-red strong, .planche .stk-red .contact-link { color: var(--white); }
.planche .btn-wa { background: var(--white); color: var(--ink); box-shadow: var(--ring), var(--lift); }
.planche .final .btn-ghost { color: var(--white); box-shadow: inset 0 0 0 2px var(--white); }
.planche .final .btn-ghost:hover { background: transparent; box-shadow: inset 0 0 0 2px var(--white); }
.planche .final .btn-dark, .planche .final .btn-wa { background: var(--white); color: var(--ink); box-shadow: none; }

@media (max-width: 1100px) {
  .planche .top-grid { grid-template-columns: 1fr; }
  .planche .top { padding-top: 108px; }
  .planche .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .planche .svc-rows { gap: 80px; }
  .planche .svc-row { grid-template-columns: 1fr; gap: 28px; }
  .planche .svc-row:nth-child(even) .svc-photo { order: 0; }
  .planche .split { grid-template-columns: 1fr; gap: 40px; }
  .planche .collage { columns: 2; column-gap: 24px; }
  .planche .steps-4 .step:nth-child(n) { --ty: 0px; min-height: 0; }
  .planche .note-sticker { margin-top: 80px; }
}
@media (max-width: 560px) {
  .planche .collage { columns: 1; }
  .planche .steps-4 { grid-template-columns: 1fr; }
  .planche .pl-list { grid-template-columns: 1fr; }
  .planche .row-num { font-size: 3.6rem; }
  .planche .map-frame { height: 260px; }
  .planche .final-sm { padding: 76px 0 84px; }
}

/* Composition « nuage d'autocollants » : largeurs, décalages et inclinaisons différents (jamais une grille de cartes égales) */
.planche .cloud { list-style: none; margin: 56px 0 0; padding: 0 0 44px; display: flex; flex-wrap: wrap; gap: 76px 30px; align-items: flex-start; }
.planche .cloud > li { width: min(var(--w, 320px), 100%); }
.planche .cloud .stk { padding: 30px 28px 34px; }
.planche .cloud .who-card { padding: 9px 9px 22px; }
.planche .cloud h3 { margin: 0 0 10px; font-size: 1.25rem; }
.planche .cloud p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--muted); }
.planche .cloud .stk-red p { color: var(--white); }
.planche .cloud .who-card strong { margin-top: 0; }

/* Emplacement vide en pointillés : la trace d'un autocollant qui attend le vôtre */
.planche .slot-cta {
  display: block;
  padding: 28px 28px 32px;
  border: 2px dashed rgba(18, 18, 18, .38);
  border-radius: 22px;
  color: var(--ink);
  translate: 0 var(--ty, 0px);
  transition: border-color .25s, translate .3s cubic-bezier(.2, .9, .3, 1);
}
.planche .slot-cta:hover { border-color: var(--red); translate: 0 calc(var(--ty, 0px) - 4px); }
.planche .slot-cta h3 { margin: 0 0 10px; font-size: 1.25rem; }
.planche .slot-cta p { margin: 0 0 18px; font-size: .95rem; line-height: 1.55; color: var(--muted); }
.planche .slot-big { display: block; margin-bottom: 10px; font: 900 1.6rem/1 var(--f); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; }
.planche .slot-cta.tile { display: block; break-inside: avoid; margin: 0 0 46px; padding: 34px 28px 38px; rotate: 0deg; }
.planche .slot-cta.tile > span:not(.slot-big):not(.link-u) { display: block; margin-bottom: 18px; font-size: .95rem; line-height: 1.55; color: var(--muted); }

/* Le rouge ne marque plus les titres : réservé aux actions, à la navigation active et aux étiquettes clés */
.planche .u-red { color: inherit; }
/* Moins de vide entre l'en-tête et la première section des pages intérieures */
.planche .top + .section { padding-top: 56px; }
/* En-tête sans photo (portfolio : le collage est déjà le visuel) */
.planche .top-grid.solo { grid-template-columns: 1fr; }
.planche .top-grid.solo .lead { max-width: 56ch; }
/* Interlettrage des grands titres de fin : -.03em évite que T et Q se touchent */
.planche .final h2, .planche .final-sm h2 { letter-spacing: -.03em; }