/* Page pilier « Agence web à Fès » — FESWEB
 *
 * Même règle que faq.css : tout élément qui pose un fond pose aussi sa
 * couleur de texte. Rien n'est laissé à l'héritage du thème.
 *
 * Palette reprise de globals.css : violet #5f2dde, rose #fe0054, fond blanc.
 */

.fes-pilier {
   --p-encre: #191430;
   --p-encre-douce: #55506B;
   --p-accent: #5F2DDE;
   --p-accent-vif: #FE0054;
   --p-bord: #E4E0F2;
   --p-surface: #FFFFFF;
   --p-doux: #F8F6FF;

   color: var(--p-encre-douce);
   max-width: 1060px;
   margin: 0 auto;
   padding: 0 20px 72px;
}

.fes-pilier h2,
.fes-pilier h3 {
   color: var(--p-encre);
}

.fes-pilier p {
   font-size: 16.5px;
   line-height: 1.72;
   color: var(--p-encre-douce);
}

.fes-pilier a {
   color: var(--p-accent);
   text-decoration: underline;
   text-underline-offset: 2px;
}

.fes-pilier a:hover {
   color: var(--p-accent-vif);
}

/* ---------- Bloc d'ouverture ---------- */
.fes-pilier__intro {
   padding: 44px 0 8px;
}

.fes-pilier__kicker {
   display: inline-block;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--p-accent);
   margin: 0 0 12px;
}

.fes-pilier__lede {
   font-size: clamp(18px, 2.2vw, 21px);
   line-height: 1.6;
   color: var(--p-encre);
   font-weight: 500;
   max-width: 62ch;
   margin: 0 0 18px;
}

/* ---------- Chiffres ---------- */
.fes-chiffres {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 14px;
   margin: 32px 0 8px;
   padding: 0;
   list-style: none;
}

.fes-chiffres li {
   background: var(--p-doux);
   border: 1px solid var(--p-bord);
   border-radius: 12px;
   padding: 18px 20px;
   text-align: center;
}

.fes-chiffres b {
   display: block;
   font-size: 30px;
   line-height: 1.1;
   font-weight: 700;
   color: var(--p-accent);
   font-variant-numeric: tabular-nums;
   margin-bottom: 6px;
}

.fes-chiffres span {
   font-size: 13.5px;
   line-height: 1.4;
   color: var(--p-encre-douce);
}

/* ---------- Sections ---------- */
.fes-pilier section {
   margin: 52px 0 0;
}

.fes-pilier section > h2 {
   font-size: clamp(23px, 3vw, 30px);
   line-height: 1.25;
   font-weight: 700;
   margin: 0 0 8px;
}

.fes-pilier__soustitre {
   margin: 0 0 22px;
   max-width: 66ch;
}

/* ---------- Grille de cartes ---------- */
.fes-cartes {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
   gap: 16px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.fes-carte {
   background: var(--p-surface);
   border: 1px solid var(--p-bord);
   border-radius: 12px;
   padding: 22px 24px;
   transition: border-color .18s ease, box-shadow .18s ease;
}

.fes-carte:hover {
   border-color: var(--p-accent);
   box-shadow: 0 10px 30px -18px rgba(95, 45, 222, .5);
}

.fes-carte h3 {
   font-size: 18px;
   line-height: 1.3;
   font-weight: 700;
   margin: 0 0 8px;
}

.fes-carte p {
   font-size: 15.5px;
   line-height: 1.65;
   margin: 0 0 12px;
}

.fes-carte__lien {
   font-weight: 600;
   font-size: 15px;
   text-decoration: none;
   border-bottom: 1px solid currentColor;
   padding-bottom: 1px;
}

.fes-carte__prix {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   color: var(--p-accent);
   background: var(--p-doux);
   border-radius: 20px;
   padding: 4px 12px;
   margin: 0 0 10px;
}

/* ---------- Clients ---------- */
.fes-clients {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 16px;
   list-style: none;
   margin: 0;
   padding: 0;
}

.fes-clients li {
   border-left: 3px solid var(--p-accent);
   background: var(--p-doux);
   border-radius: 0 10px 10px 0;
   padding: 18px 20px;
}

.fes-clients strong {
   display: block;
   color: var(--p-encre);
   font-size: 16px;
   margin-bottom: 4px;
}

.fes-clients span {
   display: block;
   font-size: 14px;
   line-height: 1.55;
   color: var(--p-encre-douce);
}

/* ---------- Méthode ---------- */
.fes-etapes {
   counter-reset: etape;
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
   gap: 12px;
}

.fes-etapes li {
   counter-increment: etape;
   position: relative;
   padding: 14px 16px 14px 52px;
   background: var(--p-surface);
   border: 1px solid var(--p-bord);
   border-radius: 10px;
   font-size: 15.5px;
   line-height: 1.5;
   color: var(--p-encre);
}

.fes-etapes li::before {
   content: counter(etape);
   position: absolute;
   left: 14px;
   top: 13px;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: var(--p-accent);
   color: #FFFFFF;
   font-size: 13px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   font-variant-numeric: tabular-nums;
}

/* ---------- Coordonnées ---------- */
.fes-coord {
   background: var(--p-doux);
   border: 1px solid var(--p-bord);
   border-radius: 14px;
   padding: 26px 28px;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
   gap: 22px;
}

.fes-coord dt {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--p-accent);
   margin: 0 0 6px;
}

.fes-coord dd {
   margin: 0;
   font-size: 15.5px;
   line-height: 1.6;
   color: var(--p-encre);
}

/* ---------- Appel à l'action ---------- */
.fes-cta {
   margin-top: 52px;
   background: var(--p-encre);
   border-radius: 16px;
   padding: 36px 32px;
   text-align: center;
}

.fes-cta h2 {
   color: #FFFFFF;
   font-size: clamp(21px, 2.6vw, 27px);
   line-height: 1.3;
   margin: 0 0 10px;
}

.fes-cta p {
   color: #C9C4DE;
   margin: 0 auto 22px;
   max-width: 54ch;
}

.fes-cta__btn {
   display: inline-block;
   background: var(--p-accent);
   color: #FFFFFF;
   font-weight: 700;
   font-size: 16px;
   text-decoration: none;
   padding: 14px 30px;
   border-radius: 30px;
   transition: background-color .18s ease;
}

.fes-cta__btn:hover,
.fes-cta__btn:focus-visible {
   background: var(--p-accent-vif);
   color: #FFFFFF;
}

.fes-pilier a:focus-visible,
.fes-cta__btn:focus-visible {
   outline: 2px solid var(--p-accent-vif);
   outline-offset: 3px;
}

@media (max-width: 600px) {
   .fes-pilier { padding: 0 16px 56px; }
   .fes-coord { padding: 22px 20px; }
   .fes-cta { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
   .fes-carte, .fes-cta__btn { transition: none; }
}