/* =====================================================
   da.css — Composants communs dans la DA du site
   (boutons, tags, onglets, filtres, retour, pastille d'état)
   Chargé en dernier sur toutes les pages.

   Système de boutons :
   - principal  : sticker orange incliné, texte noir (devis, envoi)
   - secondaire : pastille inclinée, noire sur fond clair,
                  crème sur fond sombre (voir les projets, tarifs…)
   ===================================================== */

/* ── Base commune aux deux boutons ── */
.cta-main,
.about-cta-btn,
.form-submit,
.btn-outline,
.cta-secondary,
.about-cta-secondary,
.btn-hero-primary,
.btn-hero-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0 !important;
  border-radius: 999px;
  text-decoration: none;
  transform: rotate(var(--btn-tilt, -2deg));
  transition: transform .35s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease, background .25s ease, color .25s ease;
}
/* Flèche qui avance au survol */
.cta-main::after,
.about-cta-btn::after,
.form-submit::after,
.btn-outline::after,
.cta-secondary::after,
.about-cta-secondary::after,
.btn-hero-primary::after,
.btn-hero-outline::after {
  content: "→";
  display: inline-block;
  margin-left: 0.15em; /* certains boutons ont une mise en page qui annule l'espacement */
  transition: transform .3s cubic-bezier(0.34,1.56,0.64,1);
}
.cta-main:hover::after, .about-cta-btn:hover::after, .form-submit:hover::after,
.btn-outline:hover::after, .cta-secondary:hover::after, .about-cta-secondary:hover::after,
.btn-hero-primary:hover::after, .btn-hero-outline:hover::after { transform: translateX(4px); }

.cta-main:hover, .cta-main:focus-visible,
.about-cta-btn:hover, .about-cta-btn:focus-visible,
.form-submit:hover, .form-submit:focus-visible,
.btn-outline:hover, .btn-outline:focus-visible,
.cta-secondary:hover, .cta-secondary:focus-visible,
.about-cta-secondary:hover, .about-cta-secondary:focus-visible,
.btn-hero-primary:hover, .btn-hero-primary:focus-visible,
.btn-hero-outline:hover, .btn-hero-outline:focus-visible {
  transform: rotate(0deg) translateY(-3px) scale(1.05);
}

/* ── Principal : sticker orange ── */
.cta-main,
.about-cta-btn,
.form-submit {
  padding: 16px 32px;
  background: #e07a3a !important; color: #111 !important;
  font-family: "DM Sans", sans-serif; font-size: 1.02rem; font-weight: 700;
  box-shadow: 0 12px 28px rgba(224,122,58,0.35), 0 4px 10px rgba(0,0,0,0.15);
}
.cta-main:hover, .about-cta-btn:hover, .form-submit:hover {
  background: #f08a48 !important; color: #111 !important;
  box-shadow: 0 18px 36px rgba(224,122,58,0.45), 0 6px 14px rgba(0,0,0,0.2);
}

/* Le bouton du formulaire de contact reste centré */
.form-submit { display: flex; width: fit-content; margin-left: auto; margin-right: auto; cursor: pointer; }

/* ── Secondaire : pastille noire sur fond clair ── */
.btn-outline,
.cta-secondary,
.about-cta-secondary {
  --btn-tilt: 1.5deg;
  padding: 13px 26px;
  background: #111 !important; color: #fde8c8 !important;
  font-family: "Inconsolata", monospace; font-size: 1rem; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}
.btn-outline:hover, .cta-secondary:hover, .about-cta-secondary:hover {
  background: #111 !important; color: #fde8c8 !important;
  box-shadow: 0 16px 32px rgba(0,0,0,0.22);
}
/* … crème sur fond sombre (section photo de l'accueil) */
.photo-section .btn-outline,
.photo-section .btn-outline:hover {
  background: #fde8c8 !important; color: #a84d22 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
}

/* ── Hero (fond orange) : pastilles crème et noire ── */
.btn-hero-primary,
.btn-hero-primary:hover {
  padding: 14px 28px;
  background: #fde8c8 !important; color: #a84d22 !important;
  font-family: "Inconsolata", monospace; font-size: 1.05rem; font-weight: 600;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}
.btn-hero-outline,
.btn-hero-outline:hover,
.btn-hero-outline:focus {
  --btn-tilt: 1.5deg;
  padding: 14px 28px;
  background: #111 !important; color: #fde8c8 !important;
  font-family: "Inconsolata", monospace; font-size: 1.05rem; font-weight: 600;
  backdrop-filter: none;
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
}

/* ── Tags (pages projets + cartes services de l'accueil) ── */
.service-tags span {
  display: inline-block;
  padding: 6px 13px; border-radius: 999px;
  background: #fde8c8; color: #a84d22;
  font-family: "Inconsolata", monospace; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  transform: rotate(-1.5deg);
  transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), background .2s ease, color .2s ease;
}
.service-tags > :nth-child(even) span,
.service-tags > span:nth-child(even) { transform: rotate(1.5deg); }
.service-tags span.active { background: #e07a3a; color: #111; }
.service-tags a:hover span { background: #e07a3a; color: #111; transform: rotate(0deg) translateY(-2px); }

/* ── Page Réalisations : onglets Design / Photo ── */
.universe-tabs { background: none !important; gap: 10px !important; padding: 0 !important; }
.universe-tab {
  font-family: "Inconsolata", monospace !important; font-size: 1rem !important; font-weight: 600 !important;
  color: #111 !important; background: none !important; box-shadow: none !important;
  transition: transform .35s cubic-bezier(0.34,1.56,0.64,1), background .2s ease !important;
}
.universe-tab:hover:not(.is-active) { color: #e07a3a !important; }
.universe-tab.is-active {
  background: #e07a3a !important; color: #111 !important;
  box-shadow: 0 8px 20px rgba(224,122,58,0.35) !important;
  transform: rotate(-2deg);
}

/* ── Page Services : onglets Graphisme / Photographie, identiques à Réalisations ── */
.services-tabs { background: none !important; gap: 10px !important; padding: 0 !important; }
.services-tab,
.services-tab--photo {
  padding: 12px 26px !important; border-radius: 999px !important;
  font-family: "Inconsolata", monospace !important; font-size: 1rem !important; font-weight: 600 !important;
  color: #111 !important; background: none !important; box-shadow: none !important;
  text-decoration: none;
  transition: transform .35s cubic-bezier(0.34,1.56,0.64,1), background .2s ease, box-shadow .2s ease !important;
}
.services-tab:hover, .services-tab:focus-visible, .services-tab.is-active,
.services-tab--photo:hover, .services-tab--photo:focus-visible, .services-tab--photo.is-active {
  background: #e07a3a !important; color: #111 !important;
  box-shadow: 0 8px 20px rgba(224,122,58,0.35) !important;
  transform: rotate(-2deg);
}

/* ── Page Réalisations : filtres de gauche ── */
.filter-list li {
  border: 0 !important; border-radius: 999px !important;
  font-family: "Inconsolata", monospace; font-size: 0.95rem; font-weight: 600;
  color: rgba(0,0,0,0.6);
  width: fit-content;
  transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), background .2s ease, color .2s ease;
}
.filter-list li:hover { background: none !important; color: #e07a3a; }
.filter-list li.is-active {
  background: #e07a3a !important; color: #111 !important; font-weight: 600;
  transform: rotate(-2deg);
  box-shadow: 0 6px 16px rgba(224,122,58,0.3);
}

/* ── Pages projets : bouton retour et flèches "autres projets" ── */
.back-button,
.rp-nav-prev,
.rp-nav-next {
  background: #e07a3a !important; color: #fde8c8 !important;
  border: 0 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 6px 16px rgba(224,122,58,0.35) !important;
  transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease !important;
}
.back-button:hover,
.rp-nav-prev:hover,
.rp-nav-next:hover {
  background: #e07a3a !important;
  transform: scale(1.1) rotate(-8deg);
  box-shadow: 0 10px 22px rgba(224,122,58,0.45) !important;
}

/* ── Pages projets sur mobile / tablette ──
   main.css place le bouton retour à -60px à gauche du titre (dans la marge sur
   ordinateur) : sur petit écran il sortait de l'écran. On le remet dans la ligne
   du titre, et le titre (64px, sans retour à la ligne) peut maintenant se couper. */
@media (max-width: 900px) {
  .case-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }
  .case-title-row .back-button {
    position: static !important; flex-shrink: 0;
    width: 40px; height: 40px; margin: 0;
  }
  /* La grille s'élargissait à la taille du média le plus large (ex. mockup de 822px) */
  .case-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .case-grid > *, .case-gallery, .case-media, .case-info { min-width: 0; max-width: 100%; }
  .case-gallery img, .case-gallery video, .case-media img, .case-media video {
    max-width: 100% !important; height: auto;
  }
  .auberge-gifs { display: flex; flex-direction: column; gap: 14px; max-width: 100%; }

  .case-info h1,
  .case-title-row h1 {
    font-size: clamp(2rem, 9vw, 3.2rem) !important;
    line-height: 1.05;
    white-space: normal !important;
    overflow-wrap: anywhere;
    min-width: 0;
    margin: 0;
  }
}

/* ── À propos : pastille sur la photo, en sticker crème ── */
.about-photo-status {
  background: #fde8c8 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  top: 16px !important; left: 16px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
  transform: rotate(-3deg);
}
.about-photo-status span { color: #a84d22 !important; font-weight: 600; font-size: 0.85rem !important; }
.about-photo-status .status-dot { display: none; }

/* ── Textes : plus de surlignage façon marqueur sous les mots en gras ──
   (main.css dessinait une bande orange sous chaque <strong>/<b> du site) */
strong::after, b::after { content: none !important; display: none !important; }
.about-text strong { background: none !important; padding: 0 !important; }

/* ── Contact : étapes avec astérisque orange au lieu des numéros en rond noir ── */
.step-num {
  width: auto !important; height: auto !important; margin-top: 2px !important;
  background: none !important; border-radius: 0 !important;
  color: #e07a3a !important; font-size: 0.9rem !important; line-height: 1.4;
}
.contact-delay strong { font-weight: 600; }

/* ── Accueil : "Voir les tarifs" des cartes services en petite pastille ── */
.service-card-cta {
  display: inline-flex !important; align-items: center; gap: 6px;
  margin-top: 16px !important; padding: 7px 14px !important;
  border: 0 !important; border-radius: 999px;
  background: #111 !important; color: #fde8c8 !important;
  font-family: "Inconsolata", monospace; font-size: 0.85rem !important; font-weight: 600 !important;
  transform: rotate(-1.5deg);
  transition: transform .3s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.service-card-cta::after { content: "→"; transition: transform .3s cubic-bezier(0.34,1.56,0.64,1); }
.service-card-cta:hover { transform: rotate(0deg) translateY(-2px) scale(1.05) !important; }
.service-card-cta:hover::after { transform: translateX(3px); }

/* ── Éventail : capsules et bouton assortis au fond pastel de chaque carte ── */
.services-cards-area .service-card:nth-child(1) { --tag-bg: #fbd9c4; --tag-ink: #a84d22; }
.services-cards-area .service-card:nth-child(2) { --tag-bg: #cfe8e1; --tag-ink: #2f6b5c; }
.services-cards-area .service-card:nth-child(3) { --tag-bg: #dcd6f3; --tag-ink: #54449a; }
.services-cards-area .service-card:nth-child(4) { --tag-bg: #fbe2b4; --tag-ink: #8a5a10; }
.services-cards-area .service-card:nth-child(5) { --tag-bg: #d3def2; --tag-ink: #2f4f8a; }
.services-cards-area .service-card .service-tags span { background: var(--tag-bg, #fde8c8); color: var(--tag-ink, #a84d22); }
.services-cards-area .service-card .service-tags a:hover span { background: var(--tag-ink, #e07a3a); color: #fff; }
.services-cards-area .service-card .service-card-cta { background: var(--tag-ink, #111) !important; color: #fff !important; }
/* Carte orange : pastille crème, comme dans le menu mobile */
.services-cards-area .service-cta .btn-outline,
.services-cards-area .service-cta .btn-outline:hover {
  background: #fde8c8 !important; color: #a84d22 !important;
  box-shadow: 0 10px 24px rgba(120,50,10,0.3);
}

/* ── Vidéos en boucle (anciens GIF) : même rendu que les images des projets ── */
video.lazy-loop.as-img { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); background: #fff; }

/* ── Menu déroulant mobile : fond orange, rubriques en pastilles crème ── */
.topnav-drawer {
  background: #e07a3a !important;
  display: flex; flex-direction: column; justify-content: center;
  padding: 110px 8vw 60px !important;
  overflow: hidden;
}
/* Grand astérisque décoratif, comme dans le hero */
.topnav-drawer::before {
  content: "✱";
  position: absolute; right: -18vw; bottom: -12vh;
  font-size: 90vw; line-height: 1; color: rgba(253,232,200,0.08);
  transform: rotate(14deg); pointer-events: none;
}
.topnav-drawer ul {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.topnav-drawer li { margin: 0 !important; }
.topnav-drawer ul a {
  display: inline-flex; align-items: center;
  padding: 10px 26px; border-radius: 999px;
  background: #fde8c8; color: #a84d22 !important;
  font-family: "Inconsolata", monospace; font-size: clamp(1.4rem, 6vw, 2rem) !important; font-weight: 600 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  /* entrée en cascade à l'ouverture */
  opacity: 0;
  transform: translateY(24px) rotate(var(--tilt, -2deg)) scale(0.9);
  transition: opacity .3s ease, transform .5s cubic-bezier(0.34,1.56,0.64,1), background .2s ease;
}
.topnav-drawer li:nth-child(2) a { --tilt: 1.5deg; }
.topnav-drawer li:nth-child(3) a { --tilt: -1deg; }
.topnav-drawer li:nth-child(4) a { --tilt: 2deg; }
.topnav-drawer li:nth-child(5) a { --tilt: -2.5deg; }
.topnav-drawer.is-open ul a {
  opacity: 1;
  transform: translateY(0) rotate(var(--tilt, -2deg)) scale(1);
  transition-delay: calc(0.12s + var(--i, 0) * 0.07s);
}
.topnav-drawer ul a:active { transform: rotate(0deg) scale(0.97); }
/* Page en cours : pastille noire */
.topnav-drawer ul a[aria-current="page"] { background: #111; color: #fde8c8 !important; }

/* Bouton devis : pastille noire avec flèche */
.drawer-cta { position: relative; margin-top: 44px !important; text-align: center; }
.drawer-cta .cta-link {
  display: inline-flex !important; align-items: center; gap: 10px;
  padding: 14px 28px !important; border: 0 !important; border-radius: 999px;
  background: #111 !important; color: #fde8c8 !important;
  font-family: "DM Sans", sans-serif; font-size: 1.05rem !important; font-weight: 700;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
  opacity: 0; transform: translateY(20px) rotate(-2deg);
  transition: opacity .3s ease .5s, transform .5s cubic-bezier(0.34,1.56,0.64,1) .5s;
}
.drawer-cta .cta-link::after { content: "→"; }
.topnav-drawer.is-open .drawer-cta .cta-link { opacity: 1; transform: translateY(0) rotate(-2deg); }

@media (prefers-reduced-motion: reduce) {
  .topnav-drawer ul a, .drawer-cta .cta-link { opacity: 1; transition: none; }
}

/* ── Pages légales ── */
.legal-content .legal-updated {
  font-family: "Inconsolata", monospace; font-size: 0.85rem; color: #a84d22; margin-top: -6px;
}
.legal-content ul { margin: 0 0 1.2em; padding-left: 0; list-style: none; }
.legal-content ul li { position: relative; padding-left: 20px; margin-bottom: 8px; line-height: 1.6; }
.legal-content ul li::before { content: "✱"; position: absolute; left: 0; top: 0; font-size: 0.75rem; color: #e07a3a; }
.legal-content a { color: #a84d22; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cta-main, .about-cta-btn, .form-submit, .btn-outline, .cta-secondary, .about-cta-secondary,
  .btn-hero-primary, .btn-hero-outline, .service-tags span, .universe-tab.is-active,
  .filter-list li.is-active, .about-photo-status { transform: none !important; }
}

/* ── Accessibilité (contrastes WCAG AA, cibles tactiles) ── */
/* Capsules du hero : #c0582a sur crème = 3,75:1 → #a84d22 = 4,68:1 */
.hero-services-card li a { color: #a84d22; }
/* « Quelques réponses » (FAQ) : orange clair sur crème = 2,69:1 → 4,05:1 */
.home-faq h2 .faq-accent { color: #c0582a; }
/* Initiales des avis : blanc sur orange = 2,99:1 → noir = 6,31:1 */
.review-avatar { color: #111; }
/* Points du carrousel d'avis : zone de toucher 24 px, le point visible reste petit */
.reviews-dots { gap: 2px; }
.reviews-dot,
.reviews-dot.active {
  width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border-radius: 0;
}
.reviews-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: background .25s, width .25s;
}
.reviews-dot.active::before { width: 22px; border-radius: 4px; background: #e07a3a; }

/* Vignettes des carrousels : width/height servent à réserver la place, pas à figer la taille */
.project-slide img { height: auto; }

/* Font Awesome : la CDN déclare ses polices en font-display:block (icônes invisibles
   jusqu'à 3 s) ; ces déclarations, chargées après, les affichent sans attendre */
@font-face { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-solid-900.woff2") format("woff2"); }
@font-face { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-regular-400.woff2") format("woff2"); }
@font-face { font-family: "Font Awesome 6 Brands"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-brands-400.woff2") format("woff2"); }

/* Vidéo dans les carrousels (Johann) : même rendu que les images voisines */
.project-slide video { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

/* ── Contact : petites mentions grises trop pâles (2,1 à 2,6:1) → environ 6:1 ── */
.contact-label, .form-field label, .form-helper { opacity: 0.7; }
.contact-delay { opacity: 0.72; }

/* ── Projets : filtres ── */
/* La barre latérale entière était à 80 % d'opacité : les filtres tombaient sous 4,5:1 */
.mv-sidebar { opacity: 1 !important; }
.sidebar-label { opacity: 0.7 !important; }
.filter-list li:hover { color: #c0582a; }
/* Le bouton (ajouté par le script) porte l'espacement : toute la pastille est cliquable */
.filter-list li { padding: 0; }
.filter-btn {
  all: unset; box-sizing: border-box; display: block;
  padding: 7px 12px; border-radius: 999px;
  font: inherit; color: inherit; cursor: pointer;
}
.filter-btn:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

/* Bouton « Demander un devis » de l'en-tête : blanc sur orange = 2,99:1 → noir = 6,31:1
   (comme les autres boutons orange du site) */
.topbar__cta .cta-link,
.topbar__cta .cta-link:hover { color: #111 !important; }