/* ==========================================================================
   Flexitel — Pont « blocs Gutenberg » ↔ design du site
   Donne aux blocs natifs (boutons, navigation, parties de modèle, listes)
   l'apparence exacte du site d'origine, afin que passer en édition par blocs
   ne change rien au rendu. Chargé APRÈS les feuilles de style d'origine.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN PILOTABLE DEPUIS WORDPRESS
   Le site utilise ses propres variables (--color-*, --font-*). On les branche
   sur les réglages de WordPress (Apparence → Éditeur → Styles) : changer une
   couleur ou une police dans l'interface se répercute alors sur TOUT le site.
   La valeur après la virgule reste le repli d'origine.
   -------------------------------------------------------------------------- */

:root {
  --color-primary: var(--wp--preset--color--primary, #008ac5);
  --color-primary-dark: var(--wp--preset--color--primary-dark, #076087);
  --color-navy: var(--wp--preset--color--navy, #071c26);
  --color-accent: var(--wp--preset--color--accent, #33b9df);
  --color-accent-soft: var(--wp--preset--color--accent-soft, #a9dcf0);
  --color-background: var(--wp--preset--color--background, #f6f8fa);
  --color-background-light: var(--wp--preset--color--background-light, #e8f4fb);
  --color-white: var(--wp--preset--color--white, #ffffff);
  --color-text: var(--wp--preset--color--text, #0f2535);
  --color-text-muted: var(--wp--preset--color--text-muted, #51626c);
  --color-border: var(--wp--preset--color--border, #e2e8f0);

  --font-body: var(--wp--preset--font-family--body, "Manrope", sans-serif);
  --font-heading: var(--wp--preset--font-family--heading, "Plus Jakarta Sans", "Manrope", sans-serif);

  /* Les dégradés suivent la couleur principale au lieu d'être figés */
  --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
}

/* --------------------------------------------------------------------------
   2. BLOCS NATIFS ↔ DESIGN DU SITE
   -------------------------------------------------------------------------- */

/* Les parties de modèle ne doivent pas introduire de conteneur de mise en page */
.wp-block-template-part {
  display: contents;
}

/* Listes à coches écrites comme de simples listes (blocs natifs) :
   la coche est dessinée en CSS, il n'y a donc plus de SVG à conserver
   dans le contenu — le texte s'édite comme n'importe quelle liste. */
.check-item--css {
  list-style: none;
}

.check-item--css::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  background-color: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Sur fond sombre, la coche passe en bleu clair pour rester lisible */
.section--deep .check-item--css::before,
.cta-band .check-item--css::before {
  background-color: var(--color-accent);
}

/* Une liste native ne doit pas garder les puces / l'indentation par défaut
   dans les contextes où les puces sont dessinées par le CSS du site. */
.hero__reassurance.wp-block-list,
.check-list.wp-block-list,
.trait-list.wp-block-list,
.stack-sm.wp-block-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Boutons natifs (core/button) — apparence .btn
   La classe utilitaire est posée sur .wp-block-button ; on style le lien interne.
   -------------------------------------------------------------------------- */

/* La classe utilitaire .btn est posée par Gutenberg sur le CONTENEUR
   (.wp-block-button), pas sur le lien. Sans cette remise à zéro, le CSS
   d'origine peindrait DEUX boutons superposés (le conteneur + le lien).
   On neutralise le conteneur : seul le lien interne est peint. */
.wp-block-button.btn {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  transform: none !important;
}

.wp-block-button.btn > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.975rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition),
    color var(--transition), border-color var(--transition);
}

.wp-block-button.btn > .wp-block-button__link:hover {
  transform: translateY(-2px);
}

.wp-block-button.btn > .wp-block-button__link:active {
  transform: translateY(0);
}

.wp-block-button.btn--primary > .wp-block-button__link {
  background: var(--color-primary-dark);
  color: var(--color-white);
  box-shadow: 0 8px 18px -8px rgba(7, 96, 135, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.wp-block-button.btn--primary > .wp-block-button__link:hover {
  background: #045a80;
  box-shadow: 0 16px 30px -12px rgba(7, 96, 135, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.wp-block-button.btn--secondary > .wp-block-button__link {
  background: var(--color-white);
  color: var(--color-primary-dark);
  border-color: var(--color-border-strong);
}

.wp-block-button.btn--secondary > .wp-block-button__link:hover {
  border-color: var(--color-primary);
  background: var(--color-background-light);
}

.wp-block-button.btn--ghost > .wp-block-button__link {
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  background: transparent;
  color: var(--color-text);
  font-weight: 600;
}

.wp-block-button.btn--ghost > .wp-block-button__link:hover {
  color: var(--color-primary-dark);
  background: var(--color-background-light);
}

.wp-block-button.btn--light > .wp-block-button__link {
  background: var(--color-white);
  color: var(--color-primary-dark);
}

.wp-block-button.btn--outline-light > .wp-block-button__link {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--color-white);
}

/* Les groupes de boutons ne doivent pas hériter des marges par défaut */
.wp-block-buttons.hero__actions,
.wp-block-buttons.page-hero__actions,
.wp-block-buttons.cta-band__actions,
.wp-block-buttons.primary-nav__cta {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Navigation native (core/navigation) — apparence .primary-nav
   -------------------------------------------------------------------------- */

.primary-nav.wp-block-navigation {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.primary-nav .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 1vw, 1rem);
}

.primary-nav .wp-block-navigation-item__content {
  display: block;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-decoration: none;
}

.primary-nav .wp-block-navigation-item__content:hover {
  color: var(--color-primary-dark);
  background: var(--color-background-light);
}

.primary-nav .current-menu-item > .wp-block-navigation-item__content {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* Menu mobile natif aux couleurs du site */
.primary-nav .wp-block-navigation__responsive-container-open,
.primary-nav .wp-block-navigation__responsive-container-close {
  color: var(--color-text);
}

.primary-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--color-white);
  padding: var(--space-xl) clamp(1rem, 4vw, 2rem);
}

.primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--color-text);
  font-size: 1.08rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Logo, listes et colonnes natives
   -------------------------------------------------------------------------- */

.site-header .wp-block-site-logo img,
.site-footer .wp-block-site-logo img {
  height: auto;
  display: block;
}

.site-footer__links.wp-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__grid.wp-block-columns {
  gap: var(--space-xl);
}

/* Le fil d'Ariane en blocs : titre de page sur la même ligne que « Accueil » */
.breadcrumb .wp-block-post-title {
  margin: 0;
  font-size: inherit;
  font-weight: 500;
  color: var(--color-text-muted);
}