/* ── Portfolio Grid — v28 : mosaïque asymétrique ─────────────
   Remplace la grille auto-fit uniforme (3 colonnes identiques) par un
   motif qui casse le rythme : certaines cartes prennent 2 colonnes ou
   2 lignes selon leur position, sans dépendre du nombre réel de projets
   (le motif se répète tous les 5 éléments). Fonctionne avec un contenu
   dynamique (admin), pas de nombre fixe requis. Désactivé en dessous de
   900px : une grille cassée sur mobile devient illisible (CDC §22). */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
@media (min-width: 900px) {
  .portfolio-grid--mosaic {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 260px;
    grid-auto-flow: dense;
  }
  .portfolio-grid--mosaic .portfolio-card:nth-child(5n+1) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .portfolio-grid--mosaic .portfolio-card:nth-child(5n+4) {
    grid-column: span 2;
  }
  .portfolio-grid--mosaic .portfolio-card { height: 100%; }
  .portfolio-grid--mosaic .pc-img { height: 100%; aspect-ratio: auto; }
}

.portfolio-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--border);
  transition: box-shadow .3s, transform .3s;
}
.portfolio-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.pc-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--light);
  position: relative;
}
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.portfolio-card:hover .pc-img img { transform: scale(1.05); }
.pc-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
}
.pc-img--placeholder span {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gold);
}
.pc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(165,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}
.portfolio-card:hover .pc-overlay { opacity: 1; }
.pc-overlay span { color: var(--white); font-weight: 700; font-size: .9rem; }
.pc-body { padding: 24px; }
.pc-cat {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold);
  margin-bottom: 8px;
}
.pc-body h3 { font-size: 1rem; font-weight: 700; color: var(--black); margin-bottom: 4px; }
.pc-client { font-size: .82rem; color: var(--muted); }
.pc-results { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.pc-result {
  font-size: .75rem;
  color: var(--gray);
  background: var(--light);
  padding: 3px 10px;
  border-radius: 100px;
}
.pc-result strong { color: var(--red); }

/* Portfolio détail */
.portfolio-detail { display: grid; grid-template-columns: 1fr 320px; gap: 40px; }
.pd-cover { width: 100%; border-radius: var(--radius-lg); margin-bottom: 32px; }
.pd-results {
  display: flex;
  gap: 24px;
  background: var(--black);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.pd-result-item { text-align: center; }
.pd-result-value {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
}
.pd-result-label { font-size: .75rem; color: rgba(255,255,255,.5); text-transform: uppercase; }
.pd-description { font-size: .95rem; color: var(--gray); line-height: 1.8; }
.pd-description h2 { font-size: 1.3rem; color: var(--black); margin-bottom: 16px; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; margin-top: 16px; }
.gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); }

.pd-sidebar { display: flex; flex-direction: column; gap: 20px; }
.pd-info-box, .pd-cta-box, .pd-other {
  background: var(--light);
  border-radius: var(--radius-md);
  padding: 24px;
}
.pd-info-box h4, .pd-cta-box h4, .pd-other h4 {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 12px;
}
.pd-info-box ul { display: flex; flex-direction: column; gap: 10px; }
.pd-info-box li { display: flex; justify-content: space-between; font-size: .875rem; }
.pd-info-box strong { color: var(--gray); }
.pd-other ul { display: flex; flex-direction: column; gap: 8px; }
.pd-other a { font-size: .875rem; color: var(--black); display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: var(--radius-sm); transition: background .25s; }
.pd-other a span { font-size: .75rem; color: var(--muted); }
.pd-other a:hover { background: var(--white); color: var(--red); }

/* Portfolio filtres */
.portfolio-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
/* CDC 2026 §10.2 : avec 11 univers, filtres scrollables horizontalement sur mobile
   plutôt qu'un retour à la ligne qui pousse le contenu trop bas */
@media (max-width: 768px) {
  .portfolio-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .portfolio-filters::-webkit-scrollbar { display: none; }
  .portfolio-filters .pf-btn { flex: none; white-space: nowrap; }
}
.pf-btn {
  padding: 8px 18px;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s;
}
.pf-btn:hover, .pf-btn--active { background: var(--red); color: var(--white); border-color: var(--red); }
.pf-btn[data-pole]:hover, .pf-btn[data-pole].pf-btn--active {
  background: var(--pole-c) !important; border-color: var(--pole-c) !important;
}
.portfolio-card[data-pole] { border-top: 3px solid var(--pole-c); }
.portfolio-card[data-pole] .pc-cat { color: var(--pole-c); }

/* ── Testimonials ─────────────────────────────────────────── */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.testi-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: box-shadow .3s, transform .3s, border-color .3s;
}
.testi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(165,0,0,.25); }
.testi-stars { color: var(--rating-star); font-size: 1rem; margin-bottom: 12px; letter-spacing: 2px; }
.testi-text { font-size: .9rem; color: var(--gray); line-height: 1.7; margin-bottom: 24px; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testi-avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  font-size: .9rem;
}
.testi-author strong { display: block; font-size: .875rem; font-weight: 700; }
.testi-author span { font-size: .75rem; color: var(--muted); }

.testi-video-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 8px 16px;
  background: transparent;
  border: 1.5px solid var(--red);
  color: var(--red);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.testi-video-btn:hover { background: var(--red); color: var(--white); }
.testi-video-btn--light { border-color: rgba(255,255,255,.4); color: #fff; }
.testi-video-btn--light:hover { background: var(--red); border-color: var(--red); color: #fff; }

.trust-video-cta { text-align: center; margin-top: 48px; }

/* ── Blocs pédagogiques (insights) ────────────────────────── */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.insight-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: border-color .3s ease, transform .3s ease;
}
.insight-card:hover { border-color: rgba(165,0,0,.4); transform: translateY(-3px); }
.insight-icon { font-size: 1.8rem; margin-bottom: 16px; }
.insight-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 12px; line-height: 1.4; }
.insight-card p { font-size: .875rem; color: var(--gray); line-height: 1.6; margin-bottom: 16px; }
.insight-link { font-size: .82rem; font-weight: 700; color: var(--red); text-decoration: none; }
.insight-link:hover { text-decoration: underline; }

/* ── Modale vidéo témoignages ─────────────────────────────── */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-modal[hidden] { display: none; }
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .85);
}
.video-modal-box {
  position: relative;
  width: min(900px, 92vw);
  z-index: 1;
}
.video-modal-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: rgba(255, 255, 255, .1);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
}
.video-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
.video-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Blog ─────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.blog-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--white);
  transition: box-shadow .3s, transform .3s;
}
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.bc-img { aspect-ratio: 16/9; overflow: hidden; background: var(--light); }
.bc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-card:hover .bc-img img { transform: scale(1.05); }
.bc-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
}
.bc-img--placeholder span { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--red); }
.bc-body { padding: 24px; }
.bc-cat {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold);
  background: rgba(201,162,39,.14);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.bc-cat { margin-right: 6px; }
/* Badge pôle (CDC §6 "contenus éditoriaux") : reprend la couleur dédiée du pôle
   au lieu du rouge générique de catégorie, via le même système [data-pole] que
   le Mega Menu et les pages pôles. Sélecteurs composés pour l'emporter sur
   .bc-cat / .article-cat quel que soit l'ordre des règles dans ce fichier. */
.bc-cat.bc-pole, .article-cat.article-pole {
  color: var(--pole-c, var(--red));
  background: color-mix(in srgb, var(--pole-c, var(--red)) 12%, white);
}
.bc-body h3 { font-size: 1rem; font-weight: 700; color: var(--black); margin-bottom: 8px; line-height: 1.4; }
.bc-body p  { font-size: .85rem; color: var(--gray); line-height: 1.6; margin-bottom: 12px; }
.bc-footer  { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }

/* Blog layout & article */
.blog-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }
.blog-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.bc-tag {
  padding: 6px 14px;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray);
  transition: all .25s;
}
.bc-tag:hover, .bc-tag--active { background: var(--red); color: var(--white); border-color: var(--red); }

.article-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }
.article-cover { width: 100%; border-radius: var(--radius-lg); margin-bottom: 32px; }
.article-meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; font-size: .82rem; color: var(--muted); }
.article-cat {
  background: rgba(201,162,39,.14);
  color: var(--gold);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 100px;
}
.article-content { font-size: .95rem; color: var(--black); line-height: 1.85; }
.article-content h2 { font-size: 1.5rem; font-weight: 700; margin: 32px 0 12px; }
.article-content h3 { font-size: 1.2rem; font-weight: 700; margin: 24px 0 8px; }
.article-content p  { margin-bottom: 16px; }
.article-content ul, .article-content ol { padding-left: 24px; margin-bottom: 16px; }
.article-content li { margin-bottom: 6px; }
.article-content blockquote {
  border-left: 3px solid var(--red);
  padding-left: 24px;
  margin: 24px 0;
  font-style: italic;
  color: var(--gray);
}
.article-share { display: flex; align-items: center; gap: 12px; margin-top: 48px; flex-wrap: wrap; }
.article-share span { font-size: .82rem; color: var(--muted); font-weight: 600; }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--white);
}
.share-fb { background: #1877f2; }
.share-li { background: #0077b5; }
.share-wa { background: #25d366; }

.blog-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--nav-h) + var(--announce-h) + 24px); }
.sidebar-widget { background: var(--light); border-radius: var(--radius-md); padding: 24px; }
.sidebar-widget h4 { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 16px; }
.sidebar-cats { display: flex; flex-direction: column; gap: 4px; }
.sidebar-cats a { font-size: .875rem; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--gray); transition: color .25s, background .25s; }
.sidebar-cats a:hover, .sidebar-cats a.active { color: var(--red); background: var(--white); }
.sidebar-cta { background: var(--black); }
.sidebar-cta h4 { color: rgba(255,255,255,.5); }
.sidebar-cta p { font-size: .85rem; color: rgba(255,255,255,.5); margin-bottom: 16px; }

/* ── Contact ──────────────────────────────────────────────── */
.contact-layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.contact-form-wrap h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 24px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
/* CDC design V38 §6 : regroupement des formulaires en sections logiques
   (identité / besoin / message) — même traitement discret sur devis.php,
   contact.php, inscription.php et reservation.php. */
.form-section-title {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 8px 0 -6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.form-section-title:first-child { margin-top: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--gray); }
.req { color: var(--red); }
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--light);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--black);
  outline: none;
  transition: border-color .3s, box-shadow .3s;
  width: 100%;
}
/* Validation élégante — retour visuel discret uniquement après interaction (CDC §2 Formulaires) */
.form-group input:user-invalid,
.form-group textarea:user-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}
.form-group input:user-valid:not(:placeholder-shown),
.form-group textarea:user-valid:not(:placeholder-shown) {
  border-color: #16a34a;
}
.form-error { display: none; font-size: .78rem; color: #dc2626; margin-top: -2px; }
.form-group input:user-invalid ~ .form-error,
.form-group textarea:user-invalid ~ .form-error { display: block; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--red); background: var(--white); }
.form-group textarea { resize: vertical; min-height: 140px; }
.form-note { font-size: .78rem; color: var(--muted); }

/* Labels flottants (CDC V33 §42) — le label sert de repère au repos puis
   remonte au focus ou dès que le champ est rempli. S'appuie sur le même
   moteur de validation :user-invalid/:user-valid déjà en place ci-dessus. */
.form-group--float { position: relative; }
.form-group--float label {
  position: absolute; left: 15px; top: 13px;
  font-size: .85rem; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--muted); background: var(--light);
  padding: 0 5px; pointer-events: none;
  transition: top .18s ease, font-size .18s ease, color .18s ease;
}
.form-group--float input,
.form-group--float textarea { padding-top: 12px; }
.form-group--float input:not(:focus)::placeholder,
.form-group--float textarea:not(:focus)::placeholder { color: transparent; }
.form-group--float input:focus + label,
.form-group--float input:not(:placeholder-shown) + label,
.form-group--float textarea:focus + label,
.form-group--float textarea:not(:placeholder-shown) + label {
  top: -9px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--red); background: var(--white);
}
.form-group--float textarea + label { top: 13px; }
.form-group--float .req { color: var(--red); }

.alert { padding: 16px 18px; border-radius: var(--radius-sm); font-size: .875rem; margin-bottom: 24px; }
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.alert-error   { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }

.contact-info { display: flex; flex-direction: column; gap: 16px; }
.ci-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--light);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: box-shadow .3s; /* V41 : cohérence Priorité 7 (hover sur toutes les cartes) */
}
.ci-card:hover { box-shadow: var(--shadow-soft); }
.ci-icon { font-size: 1.4rem; flex-shrink: 0; }
.ci-card h4 { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 4px; }
.ci-card a, .ci-card p { font-size: .9rem; color: var(--black); font-weight: 500; }
.ci-card a:hover { color: var(--red); }
.ci-map { border-radius: var(--radius-md); overflow: hidden; }
.ci-map--placeholder { background: var(--light); border-radius: var(--radius-md); padding: 24px; text-align: center; }

/* ── Fiche document (Priorité 2.4 CDC V41, modèle Le Nid) ────
   Remplace l'ancien encart .form-wrap générique par une vraie fiche :
   icône, titre, badge de format + taille, boutons Voir / Télécharger. */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.doc-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.doc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); border-color: transparent; }
.doc-card__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(201,162,39,.12); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.doc-card__icon svg { width: 20px; height: 20px; }
.doc-card__title { font-size: 1rem; font-weight: 700; color: var(--black); line-height: 1.35; }
.doc-card__desc { font-size: .85rem; color: var(--muted); line-height: 1.6; margin: 0; }
.doc-card__meta { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.doc-card__ext {
  font-size: .68rem; font-weight: 800; letter-spacing: .05em;
  background: var(--light); color: var(--gray);
  padding: 3px 9px; border-radius: 100px;
}
.doc-card__size { font-size: .75rem; color: var(--muted); }
.doc-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-card__form { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.doc-card__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--radius-btn);
  font-size: .82rem; font-weight: 700; text-decoration: none;
  transition: background .25s, color .25s, border-color .25s;
}
.doc-card__btn svg { width: 14px; height: 14px; }
.doc-card__btn--ghost { background: var(--light); color: var(--black); border: 1.5px solid var(--border); }
.doc-card__btn--ghost:hover { border-color: var(--gold); color: var(--gold-dark, var(--gold)); }
.doc-card__btn--solid { background: var(--red); color: var(--white); flex: 1; justify-content: center; }
.doc-card__btn--solid:hover { background: var(--red-dark); }
.doc-card__form .btn { width: 100%; }

/* ── Page Documents : onglets + recherche (copie conforme Le Nid) ── */
.doc-search-wrap { position: relative; margin-bottom: 24px; }
.doc-search-input {
  width: 100%; padding: 14px 18px 14px 44px;
  background: var(--light); border: 2px solid var(--border); border-radius: 14px;
  color: var(--black); font-size: .9rem; outline: none; transition: border-color .2s;
}
.doc-search-input:focus { border-color: var(--gold); }
.doc-search-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: .4; }
.doc-search-results { margin-bottom: 16px; }
.doc-search-count { font-size: .8rem; color: var(--muted); margin-bottom: 14px; }
.doc-search-empty { text-align: center; color: var(--muted); padding: 20px; }
.dtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.dtab {
  padding: 9px 18px; border-radius: 100px; font-size: .82rem; font-weight: 700;
  border: 2px solid var(--border); background: var(--light); color: var(--gray);
  cursor: pointer; transition: all .2s;
}
.dtab.on, .dtab:hover { background: var(--black); color: #fff; border-color: var(--black); }
.dpanel { display: none; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 20px; margin-bottom: 20px; }
.dpanel.on { display: grid; }
.doc-contact-box {
  margin-top: 40px; background: var(--light); border: 1.5px solid var(--border); border-radius: var(--radius-xl);
  padding: 22px 26px; display: flex; gap: 14px; align-items: center;
}
.doc-contact-box__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(201,162,39,.14); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.doc-contact-box__title { font-weight: 700; color: var(--black); margin-bottom: 4px; }
.doc-contact-box__text { font-size: .85rem; color: var(--gray); }
.doc-contact-box__text strong { color: var(--gold); }

/* ── Alternative visible sous le widget Calendly (V41) ───────
   Le widget est un script tiers externe qui peut échouer à charger
   silencieusement (réseau, bloqueur de pub) — ce bloc reste toujours
   visible pour que la page ne paraisse jamais vide. */
.rdv-fallback {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.rdv-fallback p { color: var(--muted); font-size: .88rem; margin-bottom: 12px; }
.rdv-fallback__links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }