/* =====================================================
   TEMPLATE: CLASSIC
   Cartes arrondies, ombres subtiles, trait décoratif h2
   ===================================================== */

/* -- h2 : centré, ligne fine + barre accent -- */

.front.template-classic h2 {
  position: relative;
  text-align: center;
  padding-bottom: 1.25rem;
  margin-bottom: 60px;
}

.front.template-classic h2::before {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 10rem;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 60%);
}

.front.template-classic h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 60px;
  height: 3px;
  background: var(--accent-color);
}

.front.template-classic .section-black h2::before,
.front.template-classic .section-red h2::before,
.front.template-classic .section-green h2::before,
.front.template-classic .section-purple h2::before,
.front.template-classic .section-primary h2::before,
.front.template-classic .section-accent h2::before,
.front.template-classic .section-neutral h2::before,
.front.template-classic .section-teal h2::before {
  background: color-mix(in srgb, white, transparent 60%);
}

/* -- BlockService -- */

.front.template-classic .block-service {
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.front.template-classic .block-service:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-50) / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.front.template-classic .service-icon {
  height: 5rem;
  width: 5rem;
  border-radius: 9999px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  background: linear-gradient(to bottom right, rgb(var(--accent-500)), rgb(var(--accent-600)));
}

.front.template-classic .block-service:hover .service-icon {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.front.template-classic .service-link {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-600) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.front.template-classic .service-link:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-700) / var(--tw-text-opacity, 1));
}

/* -- BlockTestimonial -- */

.front.template-classic .block-testimonial {
  border-radius: 0.5rem;
  border-left-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-600) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.front.template-classic .testimonial-photo {
  border-radius: 9999px;
}

/* -- BlockFaq -- */

.front.template-classic .block-faq details {
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.front.template-classic .block-faq details:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.front.template-classic .block-faq summary {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.front.template-classic .block-faq summary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.front.template-classic .faq-number {
  height: 2rem;
  width: 2rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-100) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--brand-600) / var(--tw-text-opacity, 1));
}

.front.template-classic .faq-chevron {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.front.template-classic .faq-answer {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

/* -- BlockPerson -- */

.front.template-classic .block-person {
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

.front.template-classic .block-person:hover {
  --tw-translate-y: -0.625rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.front.template-classic .person-photo {
  border-radius: 9999px;
}

.front.template-classic .person-social {
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.front.template-classic .person-social:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-600) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* -- BlockHero -- */

.front.template-classic .hero-cta {
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-600) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.front.template-classic .hero-cta:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-700) / var(--tw-bg-opacity, 1));
}

.front.template-classic .hero-cta-secondary {
  border-radius: 9999px;
  --tw-text-opacity: 1;
  color: rgb(var(--brand-600) / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.front.template-classic .hero-cta-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-50) / var(--tw-bg-opacity, 1));
}

.front.template-classic .hero-feature {
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.front.template-classic .hero-feature:hover {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.front.template-classic .hero-feature-icon {
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-50) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--accent-600) / var(--tw-text-opacity, 1));
}

/* -- Hero V2 card -- */

.front.template-classic .hero-v2-card {
  border-radius: 0.5rem;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* -- BlockCta -- */

.front.template-classic .block-cta,
.front.template-classic .block-cta-v2 {
  border-radius: 0.5rem;
}

.front.template-classic .cta-button {
  border-radius: 0.5rem;
}

/* -- BlockTimeline -- */

.front.template-classic .timeline-date {
  border-radius: 0.375rem;
}

.front.template-classic .timeline-image img {
  border-radius: 0.5rem;
}

.front.template-classic .timeline-line::before {
  background: #d1d5db;
}

.front.template-classic .timeline-card {
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* -- BlockVideo -- */

.front.template-classic .video-embed {
  border-radius: 0.5rem;
}

/* -- BlockShowcase -- */

.front.template-classic .showcase-img {
  border-radius: 0.5rem;
}

.front.template-classic .showcase-patch-text {
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* -- BlockIllustratedCard -- */

.front.template-classic .block-illustrated-card {
  --ic-radius: 0.5rem;
}

.front.template-classic .ic-button {
  border-radius: 0.5rem;
}

/* @piikivi-template
 * name: MUST
 * extends: classic
 * description: Template spécifique au groupe client MUST.
 * brandColor: #0088ad
 * accentColor: #3b82f6
 * bodyFont: Open Sans
 * headingFont: Raleway
 * headerVariant: classic
 * footerVariant: columns
 */

/* -- Override des CSS variables du layout --
   --heading-color est calculée par le layout (brand-900 = quasi noir).
   En production MUST, c'est un bleu-gris fixe #2c4964.
   !important nécessaire pour overrider l'inline style du layout. */
.front.template-must {
    --heading-color: #2c4964 !important;
    --accent-color: #3b82f6 !important;
}

.front.template-classic.front.template-must h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    color: var(--heading-color);
    font-weight: 600;
}

.front.template-classic.front.template-must .heading {
    border-bottom: 4px solid #f5f5f5;
    padding: 80px 0;
}
.front.template-classic.front.template-must .heading h1 {
    font-size: 3rem;
    line-height: 1;
    font-weight: 600;
}

/* -- Footer MUST : fond gris clair, bordure accent, couleurs atténuées -- */
.front.template-must footer {
    background-color: #ededed;
    border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
    color: var(--default-color);
}

.front.template-must footer p {
    color: var(--heading-color);
    font-size: 1.275rem;
    font-family: var(--font-heading), serif;
}
.front.template-must footer .footer-column-text p {
    color: var(--default-color);
    font-size: inherit;
    font-family: inherit;
}

.front.template-classic.template-must .hero-feature-icon {
    color: #006d8b;
    background-color: #f0f5f8;
}
.front.template-classic.template-must .hero-feature strong {
    font-size: 1.875rem;
    line-height: 2.25rem;
    color: var(--heading-color);
    font-weight: 600;
}

.front.template-classic.template-must .block-service h3 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 600;
}

.front.template-must footer a {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.front.template-must footer a {
    display: inline-block;
}