/* ═══════════════════════════════════════════════════════════
   APEX CLUB — feuille de thème
   ───────────────────────────────────────────────────────────
   Consolidation des correctifs appliqués au CSS d'origine
   (css/apex.css), dans l'ordre de cascade :

     1. Composants     — tokens du template : corps, boutons, cartes
     2. Dégraissage    — chasse fixe, sur-titres, décor, animations
     3. En-tête        — bandeau translucide, nav, ancres
     4. Mise à plat    — zéro ombre, zéro bordure, surfaces
     5. Finitions      — halos, icônes, planning, pied de page
     6. Mobile         — deux paliers, menu en feuille

   Le composant « programme sur mesure » garde sa feuille
   (css/bilan.css), le CSS d'origine la sienne (css/apex.css).
   ═══════════════════════════════════════════════════════════ */



/* ═══════════ 1. COMPOSANTS ═══════════ */

/* ═══════════════════════════════════════════════════════════
   Calibration des composants sur les tokens du template.

   Ce qui est repris tel quel de la notice :
     • corps 16 px / 400 / interligne 1,5 (il était en « normal »,
       soit ~1,2 — trop serré pour du texte courant) ;
     • boutons 13 px / 600, padding 12×24 (ils étaient en 11 px / 400,
       trop menus et trop légers pour être cliquables du regard) ;
     • cartes : filet 1 px, rayon 8-10 px, ZÉRO ombre au repos ;
     • survol de carte : translateY(-3px) + ombre légère, 250 ms ;
     • survol de bouton : 200 ms.

   Ce qui est volontairement écarté, et pourquoi :
     • « h1 max 60 px, h2 max 36 px » : ces valeurs sont calibrées pour
       MuseoModerno. Le titrage d'APEX est en Bebas Neue, une condensée
       dont la hauteur d'œil est bien plus faible — à 60 px elle
       paraîtrait minuscule. L'échelle d'origine est conservée.
     • « boutons pill » : leur identité est anguleuse (rayon 2 px),
       cohérente d'un bout à l'autre du site. Un bouton pill jurerait.
   ═══════════════════════════════════════════════════════════ */

/* ── Corps de texte ──────────────────────────────────────── */
body { line-height: 1.5; }

/* ── Boutons ─────────────────────────────────────────────── */
.btn {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 12px 24px;
  transition: transform .2s cubic-bezier(.4,0,.2,1),
              background-color .2s cubic-bezier(.4,0,.2,1),
              color .2s cubic-bezier(.4,0,.2,1);
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { font-size: 12px; padding: 10px 18px; }

/* ── Cartes : aucune ombre au repos, la finesse vient du filet ── */
.service-card,
.plan-card,
.gallery-cell,
.faq-item,
.schedule-grid {
  box-shadow: none;
}
.service-card,
.plan-card {
  border: 1px solid var(--line-2);
  border-radius: 10px;
  transition: transform .25s cubic-bezier(.4,0,.2,1),
              border-color .25s cubic-bezier(.4,0,.2,1),
              box-shadow .25s cubic-bezier(.4,0,.2,1);
}
/* survol : le mouvement fait la réponse, l'ombre reste discrète */
.service-card:hover,
.plan-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 6px 14px rgba(0,0,0,.34);
}

/* La règle d'origine imposait une ombre permanente en !important. */
#prestations .service-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#prestations .service-card:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 14px rgba(0,0,0,.34) !important;
}

/* ── Titres de cartes : la notice veut 600, pas 700 partout ── */
.service-card h3,
.plan-card h3,
.faq-q { font-weight: 600; }

/* ── Mouvement réduit : les survols aussi ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .service-card:hover,
  .plan-card:hover { transform: none; }
}

/* ── Boutons : leurs surcharges contextuelles descendaient jusqu'à 9 px,
   sous le seuil de lisibilité. On garde leur parti-pris (mono, capitales,
   interlettrage large, angles vifs) mais on remonte les cas extrêmes et on
   rétablit un padding qui respire — spécificité alignée sur la leur. ── */
.hero-ctas .btn {
  font-size: 12px;
  padding: 13px 22px;
  letter-spacing: .16em;
}
.schedule-note .btn {
  font-size: 11px;
  padding: 11px 18px;
  letter-spacing: .14em;
}
.hero-ctas .btn:hover,
.schedule-note .btn:hover { transform: translateY(-2px); }

/* ── Menu mobile : la notice proscrit les liens géants centrés en overlay.
   Le drawer reste (c'est leur structure), mais les liens passent de 30 px
   à 20 px et le CTA cesse d'être un pavé de 44 px. ── */
.mobile-drawer .drawer-link { font-size: 20px; }
.mobile-drawer .btn { font-size: 13px; padding: 14px 24px; }



/* ═══════════ 2. DÉGRAISSAGE ═══════════ */

/* ═══════════════════════════════════════════════════════════
   APEX CLUB — passe de dégraissage

   1. La police à chasse fixe quitte l'interface. Elle habillait la
      nav, les boutons, les sur-titres et une quarantaine de labels,
      en capitales avec 0,22em d'interlettrage : c'est ce qui donnait
      l'air « terminal des années 2000 ». Inter Tight partout, avec un
      interlettrage rendu discret.
   2. Sur-titres de section supprimés (« SERVICES / 01 »…) : le titre
      suffit à annoncer la section.
   3. Décor retiré : numéros de cartes, flèches d'angle, pastilles,
      séparateurs, bandeaux défilants.
   4. Animations en boucle supprimées — pulsations, balayages,
      dégradés animés. Seules les révélations au défilement restent.
   5. Rythme resserré : sections, titres et cartes.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Sortie de la chasse fixe ──────────────────────────── */
:root { --mono: "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif; }
.mono, .kicker, .btn, .nav-links a, .nav-phone, .hero-top,
.schedule-time, .schedule-head, .pc-period, .pc-note, .legend,
.section-index, .meta, .tag, .eyebrow {
  font-family: var(--sans) !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}
.btn {
  font-family: var(--sans) !important;
  letter-spacing: .015em !important;
  text-transform: none !important;
  font-weight: 600;
  font-size: 14px;
}
.nav-links a { font-size: 14.5px; font-weight: 500; }
/* les en-têtes du planning gardent des capitales, mais discrètes */
.schedule-head { text-transform: uppercase !important; letter-spacing: .08em !important; font-size: 11px; }

/* ── 2. Sur-titres de section ─────────────────────────────── */
.kicker, .section-index, .sec-kicker, .eyebrow { display: none !important; }

/* ── 3. Décor superflu ────────────────────────────────────── */
.service-card .num, .svc-num, .svc-arrow, .svc-sep, .cap,
.marquee, .ticker, .hero-ticker, .svc-banner,
.scroll-cue, .scroll-indicator, .hero-scroll {
  display: none !important;
}
/* les puces décoratives des listes défilantes */
.marquee span::after, .ticker span::after { content: none !important; }

/* ── 4. Plus aucune animation en boucle ───────────────────── */
[class*="marquee"], [class*="ticker"], [class*="band"],
.logo, .nav-logo img, .dot, .pin, .hero-glow, .glow, .sweep {
  animation: none !important;
}
*::before, *::after { animation-iteration-count: 1 !important; }

/* ── 5. Rythme resserré ───────────────────────────────────── */
section { padding-block: clamp(56px, 7vw, 96px) !important; }
.hero { padding-block: clamp(40px, 6vw, 72px) !important; }

/* titres : l'échelle Bebas était démesurée (130 px), on la ramène à une
   valeur qui tient sur une ligne et laisse respirer la page */
h1, .h1 { font-size: clamp(44px, 6.4vw, 92px) !important; line-height: .94 !important; }
h2, .h2 { font-size: clamp(32px, 4.4vw, 64px) !important; line-height: .96 !important; margin-bottom: 20px !important; }
h3 { font-size: 20px !important; line-height: 1.15 !important; }
.section-head, .sec-head { margin-bottom: 28px !important; }
.section-head p, .sec-head p { max-width: 62ch; }

/* cartes : moins de creux interne */

.service-card h3 { margin-top: 10px; }
.plan-card { padding: 24px 22px !important; }
.faq-item { padding-block: 4px; }

/* galerie et planning resserrés */
.gallery-grid, .gallery { gap: 8px !important; }
.schedule-grid { font-size: 12.5px; }

/* ── Mouvement réduit ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* ── Reprise en spécificité ───────────────────────────────
   Leur CSS verrouille ces éléments en #id .classe .classe avec
   !important ; il faut viser au moins aussi précis.
   Les flèches d'angle sont des pastilles rondes ombrées : la notice
   les écarte explicitement (« pastille arrondie derrière l'icône =
   signature design IA », « zéro ombre au repos »). ── */
#prestations .service-card .num,
#prestations .service-card .svc-arrow,
.service-card .num,
.service-card .svc-arrow,
.service-card .svc-sep { display: none !important; }

/* Les icônes se posent nues, sans pastille ni cadre. */
#prestations .service-card .icon,
.service-card .icon {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}

/* Leur règle la plus spécifique sur les numéros utilise :has() —
   on la surclasse à l'identique. */
#prestations .service-card:has(.service-photo) .num,
#prestations .service-card:has(.service-photo) .svc-arrow { display: none !important; }

/* Le canevas d'arrière-plan des tarifs anime des bandes en continu :
   même logique que le champ d'étoiles, il part. */
#pricing-canvas, #starscape, canvas[id*=canvas] { display: none !important; }

/* Le titre de section reste calé à gauche, comme les autres. */
.section-head { justify-items: start !important; text-align: left !important; }
.section-head > div { text-align: left !important; }

/* ── Cartes de tarifs : les icônes en pastille ronde disparaissent
   (« pastille arrondie derrière l'icône » : signature écartée par la
   notice). Le libellé de la formule suffit. ── */
.pc-icon { display: none !important; }

/* Bandeaux de puces décoratifs entre les sections. */
.pc-strip, .plans-strip, .pricing-ticker, [class*=-strip] { display: none !important; }

/* Le titre de section était centré par un flex hérité. */
.section-head { align-items: flex-start !important; text-align: left !important; }

/* La FAQ garde sa grille : le numéro devient invisible sans quitter le flux,
   sinon la question glisse dans la colonne de 80 px et s'enroule mot à mot. */
.faq-q .num { visibility: hidden; }

/* ── Plus aucune animation décorative ─────────────────────
   Restaient douze boucles : brillance de bouton (btnShine), balayage
   lumineux (apexLightSweep), ondulation au clic (rippleAnim), halos
   pulsants (dotPing, fpulse, logoPulse, scrollPulse, pin-pulse),
   bandes de tarifs, bandeaux défilants. La notice les range parmi les
   effets « gadget » ; seules les révélations au défilement subsistent,
   et ce sont des transitions. ── */
*, *::before, *::after { animation: none !important; }

/* ── Icônes : sprite au trait, jamais d'emoji (consigne du template).
   Elles se posent nues, sans pastille derrière. ── */
.ic { width: 20px; height: 20px; flex: none; stroke-width: 1.7; vertical-align: -4px; }
.contact-item-icon .ic { width: 22px; height: 22px; color: rgba(255,255,255,.9); }
.trial-checklist-item { display: inline-flex; align-items: center; gap: 8px; }
.trial-checklist-item .ic { width: 17px; height: 17px; color: rgba(255,255,255,.75); }



/* ═══════════ 3. EN-TÊTE ═══════════ */

/* ═══════════════════════════════════════════════════════════
   En-tête, calé sur le modèle du template
   ───────────────────────────────────────────────────────────
   • transparent au repos, il laisse le visuel monter jusqu'en haut ;
   • au-delà de 24 px de défilement : fond translucide + flou, et un
     simple filet d'1 px en ombre — pas de bordure permanente ;
   • liens 14 px / 500, soulignement accent qui se déploie du bord
     droit vers la gauche et se retire du même côté ;
   • le bouton d'action reprend les proportions du template
     (13 px / 600), en gardant l'angle vif propre à leur identité ;
   • scroll-padding-top pour que les ancres ne passent pas dessous.
   ═══════════════════════════════════════════════════════════ */

html { scroll-padding-top: 6rem; }

/* ── Fond ─────────────────────────────────────────────────── */
.nav, #navbar, .site-header {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  transition: background-color .3s ease, backdrop-filter .3s ease, box-shadow .3s ease, height .3s ease;
}
.nav.scrolled, #navbar.scrolled, .site-header.scrolled {
  background: rgba(10, 10, 13, .82) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) !important;
}

/* ── Hauteur : le bandeau se compacte au défilement ───────── */
.nav-inner, .nav > .container, #navbar > .container {
  padding-block: 20px;
  transition: padding .3s ease;
}
.scrolled .nav-inner, .nav.scrolled > .container, #navbar.scrolled > .container {
  padding-block: 12px;
}

/* ── Séparateurs décoratifs retirés ───────────────────────── */
.nav .divider, .nav-sep, .nav-divider, .nav::after, .nav-inner::after,
.nav-links::before, .nav-links::after { display: none !important; content: none !important; }

/* ── Liens ────────────────────────────────────────────────── */
.nav-links a, .nav a:not(.btn) {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .78);
  position: relative;
  padding-block: .35em;
  transition: color .2s cubic-bezier(.4, 0, .2, 1);
}
.nav-links a:not(.btn):hover, .nav a:not(.btn):hover { color: #fff; }

/* soulignement : entre et sort par la droite */
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.nav-links a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }

/* ── Bouton d'action ──────────────────────────────────────── */
.nav .btn, #navbar .btn {
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 11px 20px !important;
  letter-spacing: .015em !important;
}

/* ── Barre de progression de lecture : hors du vocabulaire du
   template, elle ajoute un trait rouge permanent en haut de page ── */
#scrollProgress, .scroll-progress, .progress-bar { display: none !important; }

/* ── Logo ─────────────────────────────────────────────────── */
.nav .logo img, .nav-logo img { height: 34px; width: auto; }

@media (max-width: 720px) {
  .nav-inner, .nav > .container { padding-block: 14px; }
  .nav .logo img, .nav-logo img { height: 30px; }
}

/* Le filet vertical qui séparait le logo des liens : rien de tel dans le
   vocabulaire du template, et il coupait le bandeau en deux. */
.nav-links { border-left: 0 !important; padding-left: 0 !important; }



/* ═══════════ 4. MISE À PLAT ═══════════ */

/* ═══════════════════════════════════════════════════════════
   Mise à plat — ombres et bordures

   La notice est nette : « zéro ombre au repos », « rayons ≥ 16 px sur
   les cartes » et « halo coloré sous les CTA » sont rangés parmi les
   signatures à éviter. L'audit en trouvait quinze composants porteurs
   d'ombre au repos, dont des halos rouges sous les badges.

   Sur les bordures, j'applique la demande plutôt que la lettre de la
   notice : celle-ci fait reposer la finesse sur des filets d'1 px,
   mais ce vocabulaire est pensé pour un fond clair. Sur fond noir,
   ces filets blancs translucides se multipliaient au point de faire
   du bruit. Les blocs se détachent désormais par leur surface — un
   noir légèrement relevé — et non par un trait. Seuls les champs de
   saisie gardent un contour, sans quoi ils deviennent invisibles.
   ═══════════════════════════════════════════════════════════ */

/* ── Aucune ombre au repos, nulle part ────────────────────── */
*:not(input):not(select):not(textarea),
*::before, *::after { box-shadow: none !important; }

/* ── Aucune bordure décorative ────────────────────────────── */
*:not(input):not(select):not(textarea):not(hr) {
  border-color: transparent !important;
}
.nav, #navbar, .site-header,
.service-card, .plan-card, .pc-dark, .pc-icon, .pc-options, .pc-toggle,
.schedule-shell, .schedule-slot, .schedule-cell, .schedule-head,
.faq-item, .faq-q, .trial-card, .gallery-cell, .contact-card,
.footer, .site-footer, .contact-item, .trial-checklist-item,
.hero, .hero-inner, section, .container {
  border: 0 !important;
}

/* ── Les surfaces prennent le relais des filets ───────────── */
.service-card,
.plan-card, .pc-dark,
.faq-item,
.trial-card,
.contact-card,
.schedule-shell {
  background: #101015 !important;
  border-radius: 10px !important;
}
/* la formule mise en avant se distingue par un fond plus clair,
   plus par un liseré */
.pc-dark--glow, .plan-card--featured, .pc-featured { background: #17171e !important; }

/* le planning : lignes séparées par un très léger contraste de fond */
.schedule-slot { background: rgba(255,255,255,.045) !important; border-radius: 6px !important; }
.schedule-cell { background: transparent !important; }
.schedule-head { background: transparent !important; }

/* la FAQ : séparation par un filet unique, seul trait conservé car il
   porte la structure de la liste */
.faq-item { background: transparent !important; border-radius: 0 !important; }
.faq-item + .faq-item { border-top: 1px solid rgba(255,255,255,.07) !important; }

/* ── Boutons : à plat, sans halo ni liseré ────────────────── */
.btn, .pc-btn {
  box-shadow: none !important;
  border: 0 !important;
}
.btn-primary, .pc-btn--primary { background: var(--red) !important; color: #fff !important; }
.btn-ghost, .btn-secondary, .pc-btn--ghost {
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
}
.btn-ghost:hover, .btn-secondary:hover, .pc-btn--ghost:hover { background: rgba(255,255,255,.13) !important; }

/* ── Survol : le mouvement fait la réponse, l'ombre reste sobre ── */
.service-card, .plan-card, .pc-dark, .gallery-cell {
  transition: transform .25s cubic-bezier(.4,0,.2,1), background-color .25s cubic-bezier(.4,0,.2,1);
}
.service-card:hover, .plan-card:hover, .pc-dark:hover {
  transform: translateY(-3px);
  background: #16161d !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.45) !important;
}

/* ── Badges : plus de halo coloré ─────────────────────────── */
.service-status, .pc-elite-badge, .badge, .pc-badge {
  box-shadow: none !important;
  border: 0 !important;
}

/* ── En-tête : plus aucun trait, même au défilement ───────── */
.nav.scrolled, #navbar.scrolled, .site-header.scrolled {
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* ── Champs de saisie : contour conservé, c'est leur affordance ── */
input, select, textarea {
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 6px !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--red) !important;
  outline: 2px solid rgba(193,18,31,.25);
  outline-offset: 1px;
}

/* ── Reprise en spécificité : leur CSS pose ces liserés internes en
   !important depuis des sélecteurs à id. ── */
#prestations .service-card,
#prestations .service-card:hover,
#abonnements .pc-dark,
#abonnements .pc-icon,
#abonnements .pc-btn,
#abonnements .pc-options,
#abonnements .pc-toggle,
#abonnements .pc-toggle-btn,
#planning-cours .schedule-shell,
#planning-cours .schedule-slot,
#contact .contact-card,
.nav .btn, .nav-inner .btn, a.btn, button.btn {
  box-shadow: none !important;
  border: 0 !important;
}
#prestations .service-card:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,.45) !important;
}

#faq .faq-q, #faq .faq-item, .trial-card, #prestations .trial-card,
.trial-inner, .trial-band { box-shadow: none !important; border: 0 !important; }

/* ── Icônes de cartes : sans leur pastille, elles étaient devenues
   quasi invisibles (rouge sourd sur fond noir). Trait clair, taille
   du template (40 px, trait 1.7). ── */
#prestations .service-card .icon,
.service-card .icon {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 0 12px !important;
  color: rgba(255,255,255,.92) !important;
}
#prestations .service-card .icon svg,
.service-card .icon svg {
  width: 34px !important; height: 34px !important;
  stroke: rgba(255,255,255,.92) !important; stroke-width: 1.6 !important;
}
/* le détail accent reste rouge */
#prestations .service-card .icon svg [fill]:not([fill=none]),
.service-card .icon svg circle[fill]:not([fill=none]) { fill: var(--red) !important; }

/* ── Cartes sans photo : l'emplacement d'image réservé laissait un
   grand vide une fois les halos coupés. ── */
#prestations .service-card:not(:has(.service-photo)) {
  min-height: 0 !important;
  padding: 22px !important;
}
#prestations .service-card:has(.service-photo) { padding: 0 0 22px !important; }
#prestations .service-card:has(.service-photo) .icon { margin: 18px 22px 12px !important; }
#prestations .service-card:has(.service-photo) h3,
#prestations .service-card:has(.service-photo) p { padding-inline: 22px; }

/* dernière pastille : l'icône du message d'erreur du formulaire */
.form-error-icon { background: none !important; border-radius: 0 !important; }

/* ── Effets de brillance et filtres au survol ─────────────
   Restaient hors du champ d'« animation: none » car ce sont des
   transitions : une bande blanche en dégradé traversant le bouton
   (.btn-primary::before, .pc-btn::after), un éclaircissement
   (brightness) et un halo rouge sous le logo (drop-shadow). La notice
   écarte le halo coloré sous les CTA et n'autorise que transform et
   opacity — filter n'est pas composité. ── */
.btn::before, .btn::after,
.btn-primary::before, .btn-primary::after,
.pc-btn::before, .pc-btn::after,
.pc-btn:hover::after, .btn:hover::before, .btn:hover::after {
  content: none !important;
  display: none !important;
  background: none !important;
  transform: none !important;
}
.btn:hover, .pc-btn:hover, .pc-btn--gold:hover,
.brand:hover .brand-logo-img,
.footer-map-img-link:hover .footer-map-img {
  filter: none !important;
}
/* le survol d'une photo garde un léger rapprochement, sans retouche
   colorimétrique (filter n'est pas composité) */
#prestations .service-card:hover .service-photo {
  filter: none !important;
  transform: scale(1.03) !important;
}



/* ═══════════ 5. MOBILE ═══════════ */

/* ═══════════════════════════════════════════════════════════
   Mobile — règles du template, composant par composant

   Deux paliers, comme la notice :
     ≤ 960 px : les grilles de 4 passent à 2, celles de 3 à 1 ;
     ≤ 640 px : tout en une colonne, typographie mobile,
                menu en feuille déroulante.
   ═══════════════════════════════════════════════════════════ */

/* ── Palier intermédiaire ─────────────────────────────────── */
@media (max-width: 960px) {
  .services-grid, .service-grid, #prestations .grid { grid-template-columns: repeat(2, 1fr) !important; }
  .plans-grid, .pc-grid { grid-template-columns: 1fr !important; }
  .gallery-grid, .gallery { grid-template-columns: repeat(2, 1fr) !important; }
  section { padding-block: clamp(44px, 6vw, 72px) !important; }
}

/* ── Palier mobile ────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Typographie : l'échelle desktop écrase l'écran */
  h1, .h1 { font-size: 44px !important; line-height: .96 !important; }
  h2, .h2 { font-size: 30px !important; line-height: .98 !important; margin-bottom: 16px !important; }
  h3 { font-size: 18px !important; }
  .lead, .section-head p, .hero p { font-size: 15px !important; line-height: 1.5 !important; }
  body { font-size: 15.5px; }

  /* Une colonne pour tout ce qui porte du texte */
  .services-grid, .service-grid, #prestations .grid,
  .plans-grid, .pc-grid,
  .section-head, .contact-grid, .footer-grid,
  .trial-inner, .plans-foot { grid-template-columns: 1fr !important; }
  .section-head { gap: 12px !important; }

  /* La galerie reste en deux colonnes : ce sont des vignettes, pas du
     texte — en une colonne la section devient interminable. */
  .gallery-grid, .gallery { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }

  /* Cartes : moins de creux, titres qui ne débordent pas */
  .service-card { min-height: 0 !important; }
  #prestations .service-card:has(.service-photo) { min-height: 0 !important; }
  #prestations .service-card .service-photo { height: 150px !important; }
  .plan-card { padding: 20px 18px !important; }

  /* Boutons : pleine largeur, cible tactile confortable */
  .hero-ctas { display: grid !important; gap: 10px !important; }
  .hero-ctas .btn,
  .trial-actions .btn,
  .plans-cta .btn { width: 100% !important; justify-content: center !important; padding: 14px 20px !important; }

  /* Planning : défilement horizontal assumé et signalé */
  .schedule-wrap, .schedule-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .schedule-grid { min-width: 680px; }
  .schedule-wrap::after {
    content: "Faites glisser pour voir la semaine";
    display: block; margin-top: 8px;
    font-size: 12px; color: rgba(255,255,255,.5);
  }

  /* Contact : la carte et le formulaire l'un sous l'autre */
  .contact-item { align-items: flex-start !important; }
  .trial-checklist-items { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }

  /* Pied de page : colonnes empilées, filets discrets */
  .footer-grid > * + * { margin-top: 22px; }
  .footer-word, .footer-big { font-size: 56px !important; }
}

/* ═══ Menu mobile — feuille déroulante depuis le haut ═══════
   La notice écarte l'overlay plein écran à liens géants : on garde
   leur balisage mais on le transforme en feuille qui descend sous
   l'en-tête, liens alignés à gauche, action en barre pleine largeur. */
@media (max-width: 720px) {
  .mobile-drawer {
    position: fixed !important;
    inset: auto 0 auto 0 !important;
    top: 62px !important;
    height: auto !important;
    max-height: calc(100vh - 62px) !important;
    overflow-y: auto !important;
    background: rgba(10, 10, 13, .97) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    padding: 8px 20px 20px !important;
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
  }
  .mobile-drawer.open { opacity: 1; visibility: visible; transform: none; }

  .mobile-drawer .drawer-link,
  .mobile-drawer a:not(.btn) {
    display: block !important;
    font-family: var(--sans) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .9) !important;
  }
  .mobile-drawer .idx, .mobile-drawer .drawer-num { display: none !important; }

  /* l'action en barre pleine largeur, sans arrondi */
  .mobile-drawer .btn {
    display: block !important;
    width: 100% !important;
    margin-top: 16px !important;
    padding: 15px 20px !important;
    border-radius: 0 !important;
    background: var(--red) !important;
    color: #fff !important;
    font-size: 14px !important;
    text-align: center !important;
  }
}

@media (max-width: 720px) {
  /* L'action principale vit dans la feuille du menu : dans le bandeau elle
     écrase le logo et colle au burger. */
  .nav-inner > .btn, .nav .btn:not(.mobile-drawer .btn) { display: none !important; }
  .nav-inner { justify-content: space-between !important; }
}



/* ═══════════ 6. FINITIONS ═══════════ */

/* ═══════════════════════════════════════════════════════════
   Finitions — halos, polices résiduelles, icônes, planning, pied
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Halos colorés au survol ───────────────────────────
   La notice les écarte explicitement sous les CTA. Il en restait dix,
   posés sur :hover et donc hors de portée des règles précédentes. ── */
.btn:hover, .btn-primary:hover, .plan-btn-primary:hover, .pc-btn:hover,
.form-submit:hover, .form-error-btn:hover, .testi-card:hover,
.pc-card--center:hover .pc-dark--glow, .service-card:hover {
  box-shadow: none !important;
}
.service-card:hover, .plan-card:hover, .pc-dark:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45) !important;
}
/* le survol d'icône remettait un fond dégradé rouge : c'est la pastille
   que l'on vient de retirer */
.service-card:hover .icon, .service-card .icon:hover {
  background: none !important;
  border-color: transparent !important;
}

/* ── 2. Polices résiduelles ───────────────────────────────
   Le bandeau de consentement et deux boutons gardaient la chasse fixe
   ou une police système héritée. ── */
#cookieBanner, #cookieBanner *,
.form-error-btn, .form-error-msg, .form-error-title,
[style*="font-family"] {
  font-family: var(--sans) !important;
}
#cookieBanner {
  background: #101015 !important;
  border-top: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.5;
}
#cookieBanner .btn, #cookieBanner button {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  padding: 11px 20px !important;
  border-radius: 4px !important;
}

/* ── 3. Icônes : intégration ──────────────────────────────
   Elles étaient posées sans alignement ni taille commune. Grille de
   24, trait 1.7, alignées sur la première ligne de texte. ── */
.ic, .contact-item-icon svg, .trial-checklist-item svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto !important;
  stroke-width: 1.7 !important;
  vertical-align: middle;
}
.contact-item {
  display: grid !important;
  grid-template-columns: 24px 1fr !important;
  gap: 14px !important;
  align-items: start !important;
}
.contact-item-icon {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  background: none !important;
  width: auto !important; height: 22px !important;
  margin: 0 !important; padding: 0 !important;
}
.contact-item-icon svg { color: var(--red) !important; }
.trial-checklist-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 9px 14px !important;
  background: rgba(255, 255, 255, .05) !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
}
.trial-checklist-item svg { width: 17px !important; height: 17px !important; color: rgba(255,255,255,.72) !important; }

/* ── 4. Planning : lisibilité ─────────────────────────────
   Le tableau était uniformément sombre, sans repère de ligne ni de
   colonne : on ajoute un contraste de fond une ligne sur deux, une
   colonne d'heures affirmée et des créneaux plus aérés. ── */
.schedule-shell { background: #0e0e13 !important; border-radius: 10px !important; overflow: hidden; }
.schedule-head {
  background: rgba(255, 255, 255, .05) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  color: rgba(255, 255, 255, .72) !important;
  padding: 12px 10px !important;
}
.schedule-time {
  font-weight: 700 !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, .55) !important;
  font-variant-numeric: tabular-nums;
}
/* une ligne sur deux légèrement relevée : le regard suit l'horizontale */
.schedule-grid > .schedule-cell:nth-child(14n+8),
.schedule-grid > .schedule-cell:nth-child(14n+9),
.schedule-grid > .schedule-cell:nth-child(14n+10),
.schedule-grid > .schedule-cell:nth-child(14n+11),
.schedule-grid > .schedule-cell:nth-child(14n+12),
.schedule-grid > .schedule-cell:nth-child(14n+13),
.schedule-grid > .schedule-cell:nth-child(14n+14) { background: rgba(255, 255, 255, .022) !important; }

.schedule-slot {
  background: rgba(255, 255, 255, .06) !important;
  border-radius: 6px !important;
  padding: 9px 10px !important;
  line-height: 1.3;
}
.schedule-slot strong, .schedule-slot .c { font-size: 13px !important; font-weight: 600 !important; }
.schedule-slot span, .schedule-slot .d { font-size: 11.5px !important; color: rgba(255,255,255,.5) !important; }
/* l'intensité se lit sur un filet de gauche, pas sur une icône */
.schedule-slot { border-left: 2px solid transparent !important; }
.level-low   { border-left-color: rgba(255,255,255,.28) !important; }
.level-medium{ border-left-color: var(--sand, #c9a96e) !important; }
.level-high  { border-left-color: var(--red) !important; }
.intensity-icon { display: none !important; }

/* ── 5. Pied de page ──────────────────────────────────────
   Le mot géant en contour et la carte en vignette encombraient. On
   garde une structure en colonnes, un filet de séparation unique et
   une ligne légale discrète. ── */
.footer-word, .footer-big, .footer-brand-huge, .footer-outline { display: none !important; }
.site-footer, footer.footer { background: #0b0b0f !important; padding-top: 56px !important; }
.footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr !important;
  gap: 40px !important;
  align-items: start !important;
}
.footer-grid h4, .footer-col-title {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, .5) !important;
  margin-bottom: 14px !important;
}
.footer-grid a, .footer-grid p, .footer-grid li {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, .78) !important;
}
.footer-grid a:hover { color: #fff !important; }
.footer-map-img-link, .footer-map { border-radius: 8px !important; overflow: hidden; }
.footer-bottom, .footer-legal {
  margin-top: 40px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, .07) !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, .45) !important;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
}

@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr !important; } }

/* Le lettrage géant en contour qui fermait le pied : purement décoratif,
   il occupait 180 px de haut pour ne rien dire. */
.footer-brand-text { display: none !important; }