/* ==========================================================================
   UltraPC – page « À propos » (CMS 4, templates/cms/page.tpl, branche upc_apropos)
   Style de la page « Nos magasins » (upc-stores.css) et des pages magasins par
   ville (upc-ville.css). Préfixe .upc-ap. Chargé uniquement sur cette page (hors
   paquet CCC) : changer le paramètre ?v= dans cms/page.tpl après modification.
   ========================================================================== */

.upc-ap {
  --ap-navy: #002B49;
  --ap-navy-2: #00335a;
  --ap-navy-50: #eef4f9;
  --ap-navy-100: #d6e4ef;
  --ap-blue: #19488f;
  --ap-orange: #f39200;
  --ap-orange-dark: #d98200;
  --ap-orange-50: #fff7eb;
  --ap-bg: #f1f5f9;
  --ap-border: #e2e8f0;
  --ap-text: #334155;
  --ap-muted: #64748b;
  --ap-radius: 16px;
  margin: 0 0 24px;
  padding: 0 0 24px;
  border: 0;
  border-radius: var(--ap-radius);
  background: var(--ap-bg);
  color: var(--ap-text);
  font-size: 15px;
  line-height: 1.65;
}
.upc-ap *, .upc-ap *::before, .upc-ap *::after { box-sizing: border-box; }
.upc-ap p { margin: 0; }

/* ---------- Bandeau ---------- */
.upc-ap-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 22px 64px;
  border-radius: var(--ap-radius) var(--ap-radius) 0 0;
  background: linear-gradient(180deg, var(--ap-navy), var(--ap-navy-2));
  color: #fff;
}
.upc-ap-hero::before { /* trame discrète */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .06;
  pointer-events: none;
}
.upc-ap-hero::after { /* liseré aux couleurs du logo */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, #e63b2e 0 25%, #f5b800 25% 50%, #3fae49 50% 75%, #1e88e5 75% 100%);
}
.upc-ap-hero > * { position: relative; }
@media (min-width: 768px) { .upc-ap-hero { padding: 44px 36px 72px; } }
@media (min-width: 992px) { .upc-ap-hero { padding: 52px 44px 80px; } }

.upc-ap-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: var(--ap-orange);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.upc-ap-eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--ap-orange); }

.upc-ap .upc-ap-titre {
  margin: 14px 0 0;
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: none;
}
@media (min-width: 768px) { .upc-ap .upc-ap-titre { font-size: 40px; } }

.upc-ap-lead {
  max-width: 760px;
  margin-top: 16px !important;
  color: rgba(255,255,255,.88);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
}
@media (min-width: 768px) { .upc-ap-lead { font-size: 19px; } }

/* ---------- Cartes ---------- */
.upc-ap-grille {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: -36px 14px 0;
}
@media (min-width: 768px) {
  .upc-ap-grille { margin: -40px 24px 0; gap: 20px; }
}
@media (min-width: 992px) {
  .upc-ap-grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin: -44px 32px 0; }
}

.upc-ap-carte {
  padding: 24px 22px 22px;
  border: 1px solid var(--ap-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px -16px rgba(0,43,73,.35);
}
@media (min-width: 768px) { .upc-ap-carte { padding: 28px 28px 26px; } }

.upc-ap .upc-ap-h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid #f1f5f9;
  color: var(--ap-navy);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}
.upc-ap-pastille {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ap-orange-50);
  color: var(--ap-orange);
}

.upc-ap-texte { color: var(--ap-text); font-size: 15.5px; line-height: 1.7; }

/* Engagements : tuiles avec icône */
.upc-ap-valeurs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 576px) and (max-width: 991px) { .upc-ap-valeurs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.upc-ap-valeur {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ap-navy-100);
  border-radius: 12px;
  background: var(--ap-navy-50);
  color: var(--ap-navy);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.35;
}
@media (min-width: 576px) and (max-width: 991px) {
  .upc-ap-valeur { flex-direction: column; align-items: flex-start; }
}
.upc-ap-valeur-ic {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--ap-blue);
  box-shadow: 0 4px 10px -6px rgba(0,43,73,.4);
}

/* Magasin : photo + bouton */
.upc-ap-magasin { display: flex; flex-direction: column; }
.upc-ap-photo {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--ap-border);
  background: var(--ap-navy-50);
}
.upc-ap-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.upc-ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 18px;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--ap-orange);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none !important;
  transition: background .15s, transform .15s;
}
.upc-ap-btn::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}
.upc-ap-btn:hover { background: var(--ap-orange-dark); transform: translateY(-1px); }
.upc-ap-btn:focus-visible { outline: 3px solid rgba(243,146,0,.45); outline-offset: 2px; }
@media (max-width: 575px) {
  .upc-ap-carte { padding: 20px 16px 18px; }
  .upc-ap-btn { align-self: stretch; }
}

/* Bloc « Qui est UltraPC ? » (contenu BO : <div class="upc-ap-qui"> … <!--/upc-ap-qui-->) — 10/10/2026 */
.upc-ap-carte.upc-ap-qui { grid-column: 1 / -1; }
.upc-ap .upc-ap-qui h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid #f1f5f9;
  color: var(--ap-navy);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}
.upc-ap-qui h2::before {
  content: "";
  flex: 0 0 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ap-orange-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f39200' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='14' height='10' rx='1.5'/%3E%3Cpath d='M6 18h6M9 14v4'/%3E%3Crect x='18' y='4' width='4' height='14' rx='1'/%3E%3Cpath d='M20 8h0'/%3E%3C/svg%3E") no-repeat center / 21px 21px;
}
.upc-ap-qui p { max-width: 980px; color: var(--ap-text); font-size: 15.5px; line-height: 1.75; }
.upc-ap-qui p + p { margin-top: 12px; }
.upc-ap .upc-ap-qui a,
.upc-ap .upc-ap-qui a:visited {
  color: var(--ap-navy) !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--ap-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.upc-ap .upc-ap-qui a:hover { color: var(--ap-orange-dark) !important; }
.upc-ap-chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .upc-ap-chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.upc-ap-chiffres li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--ap-navy);
  color: rgba(255,255,255,.82);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}
.upc-ap-chiffres strong {
  color: var(--ap-orange);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}