/*
Theme Name: Climlys
Theme URI: https://climlys.fr
Author: deolys
Description: Thème sur mesure pour Climlys, artisan climatisation dans le Var. Sans dépendance externe : la mise en page, la grille et les composants sont écrits pour ce site, et couvrent le balisage déjà présent dans les pages.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: climlys
License: GPL-2.0-or-later
*/

/* ===========================================================================
   SOMMAIRE
   1.  Jetons
   2.  Réinitialisation et base
   3.  Typographie
   4.  Grille
   5.  Utilitaires
   6.  Boutons
   7.  Cartes et panneaux
   8.  Accordéon
   9.  Tableaux, alertes, badges
   10. En-tête et navigation
   11. Fil d'Ariane
   12. Héros
   13. Titres de section
   14. Blocs éditoriaux du contenu
   15. Devis et formulaires
   16. Pied de page
   17. Barre d'appel mobile
   18. Pages d'index et pagination
   19. Accessibilité, mouvement, impression

   La grille et les utilitaires reprennent les noms de classes déjà présents
   dans les 111 pages (héritées de Bootstrap). Seul ce sous-ensemble réellement
   utilisé est implémenté : 140 classes recensées, contre plusieurs milliers
   dans le framework d'origine.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Jetons
   ------------------------------------------------------------------------- */
:root {
  /* Bleus - registre du froid, cœur de l'identité */
  --c-900: #06263d;
  --c-800: #0a3f63;
  --c-700: #0b5c8f;
  --c-650: #0c72b4;  /* surfaces pleines portant du texte blanc */
  --c-600: #0e7cc0;
  --c-500: #1a95dd;
  --c-300: #7cc4ef;
  --c-200: #a8d8f5;
  --c-100: #d8ebfa;
  --c-50:  #eff7fd;

  /* Ambre - registre du chaud (réversible) et de l'urgence.
     --a-700 est la seule teinte de cette famille qui porte du texte blanc :
     les tons plus clairs plafonnent à 3,2:1, sous le seuil AA. */
  --a-700: #b45309;
  --a-600: #d97706;
  --a-500: #f59e0b;
  --a-100: #fef3c7;

  /* Neutres.
     --n-700 porte le texte courant. Il était auparavant nettement bleuté
     (#33506b) : à 16 px, la teinte se lisait comme du bleu et se confondait
     avec la couleur des liens. Ce gris ardoise, presque neutre, distingue
     clairement le texte des liens et gagne en contraste (11,3:1 sur blanc). */
  --n-ink: #0a1a2a;
  --n-900: #16222c;
  --n-700: #2b3a47;
  --n-500: #5b6b7a;
  --n-300: #cbd6e1;
  --n-200: #e3eaf1;
  --n-100: #f1f5f9;
  --n-50:  #f8fafc;
  --n-0:   #fff;

  --ok:     #15803d;
  --danger: #c81e1e;
  --warn:   #b45309;

  --sh-sm: 0 1px 2px rgba(10,26,42,.06), 0 1px 3px rgba(10,26,42,.08);
  --sh-md: 0 4px 6px -1px rgba(10,26,42,.07), 0 10px 24px -6px rgba(10,26,42,.12);
  --sh-lg: 0 10px 20px -8px rgba(10,26,42,.12), 0 24px 48px -12px rgba(10,26,42,.18);
  --sh-c:  0 8px 24px -8px rgba(14,124,192,.45);

  --r-sm: .5rem;
  --r:    .875rem;
  --r-lg: 1.25rem;
  --r-pill: 999px;

  --gutter: 1.5rem;
  --wrap: 1200px;
  --header-h: 88px;

  /* Manrope pour les titres : grotesque géométrique, resserré, du caractère
     sans excentricité. Inter pour le texte courant : dessiné pour l'écran,
     très lisible en petits corps. Les deux sont des fontes variables, donc
     une seule requête couvre toute la plage de graisses. */
  --ff-titre: 'Manrope', var(--ff);
  --ff: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --step: clamp(2.75rem, 5vw, 5rem);   /* rythme vertical des sections */
}

/* ---------------------------------------------------------------------------
   Fontes - servies depuis le thème, en WOFF2 variable.
   `font-display: swap` : le texte reste lisible pendant le chargement, ce qui
   évite le blanc initial pénalisé par les Core Web Vitals.
   Sous-ensemble latin uniquement : 73 Ko au total, contre 468 Ko pour le seul
   fichier TrueType employé auparavant.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/manrope/manrope-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   2. Réinitialisation et base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  padding-top: var(--header-h);
  font-family: var(--ff);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--n-700);
  background: var(--n-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { border-radius: inherit; }

a { color: var(--c-700); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color .18s ease; }
a:hover { color: var(--c-600); }

:focus-visible { outline: 3px solid var(--c-500); outline-offset: 2px; border-radius: 3px; }

hr { border: 0; height: 1px; background: linear-gradient(90deg, var(--n-200), transparent); margin: 2.5rem 0; }

::selection { background: var(--c-100); color: var(--c-900); }

/* ---------------------------------------------------------------------------
   3. Typographie
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h4, .h5, .h6,
.display-5, .brand-text, .btn, .header-phone {
  font-family: var(--ff-titre);
}

h1, h2, h3, h4, h5, h6,
.h1, .h4, .h5, .h6 {
  margin: 0 0 .6em;
  color: var(--c-900);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* Le plancher de la fourchette est bas : sur un écran de 375 px, un titre de
   trois lignes occupait un tiers de la hauteur visible avant le moindre texte.
   Le plafond est inchangé, l'affichage sur grand écran reste identique. */
h1, .h1 { font-size: clamp(1.6rem, 1.05rem + 2.6vw, 3.15rem); }
h2       { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
h3       { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); font-weight: 700; }
h4, .h4  { font-size: 1.15rem; font-weight: 700; }
h5, .h5  { font-size: 1.05rem; font-weight: 700; }
h6, .h6  { font-size: .95rem; font-weight: 700; letter-spacing: .01em; }

.display-5 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem); font-weight: 800; letter-spacing: -.025em; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(1.075rem, 1rem + .35vw, 1.25rem); line-height: 1.65; color: var(--n-700); }
small, .small { font-size: .875rem; }
.smallcaps { font-variant: small-caps; letter-spacing: .04em; }
strong, b { color: var(--n-900); font-weight: 700; }
em { font-style: italic; }

/* Listes du contenu : puce dessinée, alignée sur la grille typographique. */
.container ul:not([class]) { list-style: none; padding-left: 0; margin: 0 0 1.25rem; }
.container ul:not([class]) > li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; }
.container ul:not([class]) > li::before {
  content: "";
  position: absolute; left: .25rem; top: .62em;
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--c-500); box-shadow: 0 0 0 3px var(--c-100);
}
.container ol { padding-left: 1.35rem; margin: 0 0 1.25rem; }
.container ol li { margin-bottom: .55rem; }

/* ---------------------------------------------------------------------------
   4. Grille
   Reprise des noms Bootstrap présents dans le contenu, en flex.
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--gutter) / -2);
}

.row > * {
  width: 100%;
  padding-inline: calc(var(--gutter) / 2);
}

.g-3 { --gutter: 1rem; row-gap: 1rem; }
.g-4 { --gutter: 1.5rem; row-gap: 1.5rem; }

.col { flex: 1 0 0%; width: auto; }
.col-6  { width: 50%; }
.col-12 { width: 100%; }

/* « col-sm » sans chiffre : colonnes de largeur égale à partir de 576 px. */
@media (min-width: 576px) {
  .col-sm { flex: 1 0 0%; width: auto; }
}

@media (min-width: 768px) {
  .col-md-3  { width: 25%; }
  .col-md-4  { width: 33.3333%; }
  .col-md-5  { width: 41.6667%; }
  .col-md-6  { width: 50%; }
  .col-md-7  { width: 58.3333%; }
  .col-md-8  { width: 66.6667%; }
  .col-md-12 { width: 100%; }
  .p-md-5 { padding: 3rem !important; }
}

@media (min-width: 992px) {
  .col-lg-3  { width: 25%; }
  .col-lg-4  { width: 33.3333%; }
  .col-lg-5  { width: 41.6667%; }
  .col-lg-6  { width: 50%; }
  .col-lg-7  { width: 58.3333%; }
  .col-lg-8  { width: 66.6667%; }
  .col-lg-12 { width: 100%; }
}

/* ---------------------------------------------------------------------------
   5. Utilitaires
   ------------------------------------------------------------------------- */
.d-flex  { display: flex; }
.d-block { display: block; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.align-items-start  { align-items: flex-start; }
.align-items-end    { align-items: flex-end; }
.justify-content-center { justify-content: center; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: 1rem; }
.mx-auto { margin-inline: auto; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }

.mt-1 { margin-top: .25rem; }  .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: .5rem; }   .mb-2 { margin-bottom: .5rem; }
.mt-3 { margin-top: 1rem; }    .mb-3 { margin-bottom: 1rem; }
.mt-4 { margin-top: 1.5rem; }  .mb-4 { margin-bottom: 1.5rem; }
.mt-5 { margin-top: 3rem; }    .mb-5 { margin-bottom: 3rem; }
.my-5 { margin-block: 3rem; }
.me-2 { margin-right: .5rem; } .me-3 { margin-right: 1rem; }

.p-2 { padding: .5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.py-4 { padding-block: 2rem; }
.py-5 { padding-block: var(--step); }
.pb-5 { padding-bottom: var(--step); }

.text-center { text-align: center; }
.text-start  { text-align: left; }
.text-end    { text-align: right; }
.align-middle { vertical-align: middle; }

.fw-semibold { font-weight: 600; }
.fw-bold     { font-weight: 700; }

.text-white   { color: #fff !important; }
.text-dark    { color: var(--n-900) !important; }
.text-muted, .muted { color: var(--n-500) !important; }
.text-primary, .text-primary-custom, .link-primary { color: var(--c-700) !important; }
.text-success { color: var(--ok) !important; }
.text-warning { color: var(--warn) !important; }

.bg-white { background: var(--n-0); }
.bg-light { background: var(--c-50); }
.bg-light-blue { background: var(--c-100); }

.rounded { border-radius: var(--r); }
.rounded-circle { border-radius: 50%; }
.border { border: 1px solid var(--n-200); }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--n-200); }
.border-primary { border-color: var(--c-300) !important; }

.shadow-sm { box-shadow: var(--sh-sm); }
.shadow    { box-shadow: var(--sh-md); }
.shadow-lg { box-shadow: var(--sh-lg); }

.img-fluid { max-width: 100%; height: auto; }

.list-unstyled { list-style: none; padding-left: 0; margin: 0; }
.list-unstyled > li { padding-left: 0; margin-bottom: .55rem; }
.list-unstyled > li::before { content: none !important; }
.list-inline { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.list-inline-item { margin: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   6. Boutons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .78rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  /* Propriétés détaillées plutôt que « font: inherit » : le raccourci
     réinitialisait la famille et ramenait les boutons sur la police de texte. */
  font-family: var(--ff-titre);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: .95rem 2rem; font-size: 1.0625rem; }

.btn-primary { background: var(--c-650); border-color: var(--c-650); color: #fff; box-shadow: var(--sh-c); }
.btn-primary:hover { background: var(--c-700); border-color: var(--c-700); color: #fff; }

.btn-outline-primary { background: transparent; border-color: var(--c-200); color: var(--c-700); }
.btn-outline-primary:hover { background: var(--c-650); border-color: var(--c-650); color: #fff; }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; box-shadow: 0 8px 24px -8px rgba(200,30,30,.45); }
.btn-danger:hover { background: #a91717; border-color: #a91717; color: #fff; }

.btn-light { background: #fff; border-color: #fff; color: var(--c-800); font-weight: 700; }
.btn-light:hover { background: var(--c-50); color: var(--c-900); }

.btn-accent { background: linear-gradient(135deg, var(--a-700), #92400e); border-color: transparent; color: #fff; box-shadow: 0 8px 24px -8px rgba(146,64,14,.55); }
.btn-accent:hover { color: #fff; filter: brightness(1.08); }

/* Icônes automatiques : le masque prend la couleur du texte du bouton, donc un
   seul pictogramme suffit pour toutes les variantes. */
.btn[href^="tel:"]::before,
.btn[href*="/devis"]::before {
  content: "";
  width: 1em; height: 1em; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.btn[href^="tel:"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58z'/%3E%3C/svg%3E");
}

.btn[href*="/devis"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   7. Cartes et panneaux
   ------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--c-200); }
.card-body { padding: 1.6rem; flex: 1 1 auto; }
.card-header { padding: 1.1rem 1.6rem; background: var(--c-50); border-bottom: 1px solid var(--n-200); font-weight: 700; color: var(--c-900); }
.card-title { margin-bottom: .65rem; }
.card-text { color: var(--n-700); }
.card-img-top { width: 100%; border-radius: 0; }

/* Panneaux composés à la main dans le contenu. */
.bg-white.p-4.rounded,
.service-card {
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg) !important;
  background: var(--n-0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.bg-white.p-4.rounded:hover,
.service-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--c-200); }

.bg-light.p-4.rounded {
  border: 1px solid var(--c-200);
  border-radius: var(--r-lg) !important;
  background: linear-gradient(180deg, var(--c-50), var(--n-0));
}

.price-tag {
  display: inline-block;
  padding: .3rem .85rem;
  border-radius: var(--r-pill);
  background: var(--c-50);
  border: 1px solid var(--c-200);
  color: var(--c-800);
  font-weight: 700;
}

.step-number,
.rounded-circle.bg-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-500), var(--c-700));
  color: #fff;
  font-weight: 800;
  box-shadow: var(--sh-c);
}

.tick { color: var(--ok); font-weight: 700; }

/* ---------------------------------------------------------------------------
   8. Accordéon
   Piloté par assets/js/climlys.js, qui lit les attributs data-bs-* déjà
   présents dans les pages : aucun contenu à réécrire.
   ------------------------------------------------------------------------- */
.accordion { max-width: 56rem; margin-inline: auto; }

.accordion-item {
  margin-bottom: .85rem;
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r);
  overflow: hidden;
  transition: box-shadow .22s ease, border-color .22s ease;
}

.accordion-item:hover { border-color: var(--c-200); box-shadow: var(--sh-sm); }
.accordion-header { margin: 0; }

.accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.35rem;
  background: var(--n-0);
  border: 0;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-900);
  text-align: left;
  cursor: pointer;
}

.accordion-button[aria-expanded="true"] { color: var(--c-700); background: var(--c-50); }

/* « + » qui devient « − » : deux dégradés en guise de barres. */
.accordion-button::after {
  content: "";
  flex: 0 0 auto;
  width: 1.6rem; height: 1.6rem;
  border: 1px solid var(--c-200);
  border-radius: 50%;
  background-color: var(--n-0);
  background-image: linear-gradient(var(--c-700), var(--c-700)), linear-gradient(var(--c-700), var(--c-700));
  background-size: .7rem 2px, 2px .7rem;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: background-size .22s ease, background-color .22s ease;
}

.accordion-button[aria-expanded="true"]::after { background-color: var(--c-100); background-size: .7rem 2px, 2px 0; }

.accordion-collapse { display: none; }
.accordion-collapse.show { display: block; }
.accordion-body { padding: .25rem 1.35rem 1.4rem; color: var(--n-700); font-size: 1.0125rem; }
.accordion-body strong { color: var(--n-900); }

/* Repli sans JavaScript : tout reste lisible. */
.no-js .accordion-collapse { display: block; }
.no-js .accordion-button::after { display: none; }

/* ---------------------------------------------------------------------------
   9. Tableaux, alertes, badges
   ------------------------------------------------------------------------- */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.5rem; }

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r);
  overflow: hidden;
}

.table th, .table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--n-200); }
.table th { background: var(--c-50); color: var(--c-900); font-weight: 700; }
.table-light th { background: var(--n-100); }
.table-sm th, .table-sm td { padding: .55rem .75rem; }
.table tbody tr:last-child td { border-bottom: 0; }

.alert {
  padding: 1rem 1.15rem;
  border: 1px solid var(--n-200);
  border-left: 4px solid var(--n-300);
  border-radius: var(--r);
  margin-bottom: 1.25rem;
}

.alert-info { background: var(--c-50); border-color: var(--c-200); border-left-color: var(--c-600); color: var(--c-800); }
.alert-secondary { background: var(--n-50); border-left-color: var(--n-300); color: var(--n-700); }

.badge {
  display: inline-block;
  padding: .35em .75em;
  border-radius: var(--r-pill);
  background: var(--c-100);
  color: var(--c-800);
  font-size: .8125rem;
  font-weight: 700;
}

.badge-custom { background: var(--a-100); color: var(--warn); }

.bg-primary { background: linear-gradient(135deg, var(--c-800), var(--c-600)); color: #fff; }
.bg-danger  { background: linear-gradient(135deg, #d32222, #9d1414); color: #fff; }
.bg-primary h2, .bg-primary h3, .bg-danger h2, .bg-danger h3 { color: #fff; }

/* Un panneau clair imbriqué dans une section colorée reprend les couleurs de
   texte normales : sans cette exception, les titres blancs hérités de la
   section devenaient illisibles sur le fond blanc du panneau. */
.bg-primary .bg-white,
.bg-danger .bg-white,
.bg-primary .bg-light,
.bg-danger .bg-light { color: var(--n-700); }

.bg-primary .bg-white h2, .bg-primary .bg-white h3,
.bg-primary .bg-light h2, .bg-primary .bg-light h3,
.bg-danger .bg-white h2,  .bg-danger .bg-white h3 { color: var(--c-800); }

/* ---------------------------------------------------------------------------
   10. En-tête et navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--n-200);
}

.site-header.is-scrolled { box-shadow: 0 8px 24px -18px rgba(10,26,42,.5); }

.header-inner { display: flex; align-items: center; gap: 1.25rem; width: 100%; }

.brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.brand img { max-height: 62px; width: auto; }
.brand-text { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--c-900); }

.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.main-nav li { margin: 0; }

.main-nav a {
  position: relative;
  display: block;
  padding: .6rem 1rem;
  border-radius: var(--r-sm);
  color: var(--n-900);
  font-weight: 600;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}

.main-nav a:hover { color: var(--c-600); background: var(--c-50); }

.main-nav a::after {
  content: "";
  position: absolute; left: 1rem; right: 1rem; bottom: .35rem;
  height: 2px; border-radius: 2px; background: var(--c-600);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.42,.16,.21,.93);
}

.main-nav a:hover::after,
.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after { transform: scaleX(1); }

.main-nav .current-menu-item > a,
.main-nav .current_page_item > a { color: var(--c-700); }

/* Appel direct dans l'en-tête : première action attendue sur un site d'artisan. */
.header-cta { display: inline-flex; align-items: center; gap: .75rem; flex: 0 0 auto; }
.header-phone {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.3rem;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--c-650), var(--c-800));
  color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: var(--sh-c);
  white-space: nowrap;
  transition: transform .18s ease;
}
.header-phone:hover { color: #fff; transform: translateY(-2px); }
.header-phone svg { width: 1em; height: 1em; flex: 0 0 auto; }

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--n-300);
  border-radius: var(--r-sm);
  background: var(--n-0);
  cursor: pointer;
}

.nav-toggle span { position: relative; width: 20px; height: 2px; background: var(--n-900); border-radius: 2px; transition: background .2s ease; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--n-900); border-radius: 2px; transition: transform .22s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.skip-link {
  position: absolute; left: -9999px;
  z-index: 2000;
}
.skip-link:focus {
  left: .5rem; top: .5rem;
  padding: .7rem 1.1rem;
  background: var(--c-900); color: #fff;
  border-radius: var(--r-sm); text-decoration: none; font-weight: 600;
  box-shadow: var(--sh-lg);
}

/* ---------------------------------------------------------------------------
   11. Fil d'Ariane
   ------------------------------------------------------------------------- */
.breadcrumbs { padding-top: 1.35rem; font-size: .875rem; color: var(--n-500); }
.breadcrumbs a { color: var(--n-500); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-600); text-decoration: underline; }
.breadcrumbs .separator { margin: 0 .45rem; opacity: .55; }
.breadcrumbs .last { color: var(--n-900); font-weight: 600; }

.entry-meta { margin: -.35rem 0 2rem; color: var(--n-500); font-size: .875rem; }
.entry-meta a { color: var(--c-700); text-decoration: none; }
.entry-meta a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   12. Héros
   ------------------------------------------------------------------------- */
.hero,
.hero-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60rem 30rem at 12% -10%, var(--c-100) 0%, transparent 60%),
    radial-gradient(45rem 24rem at 92% 8%, #e9f6ff 0%, transparent 62%),
    linear-gradient(180deg, var(--c-50) 0%, var(--n-0) 78%);
  padding-block: clamp(2.5rem, 4vw, 4.5rem);
}

.hero-gradient { background: linear-gradient(135deg, var(--c-900), var(--c-700)); color: #eaf4fb; }
.hero-gradient h1, .hero-gradient h2 { color: #fff; }

/* Le contenu d'origine centre le héros ; le corps de texte revient à gauche,
   nettement plus lisible sur plusieurs paragraphes. */
.hero-section .row { align-items: center; }
.hero-section [class*="col-"] { text-align: left; }
.hero-section h1 { text-align: left; max-width: 22ch; margin-bottom: 1.1rem; }

.hero-section h1::after {
  content: "";
  display: block;
  width: 5.5rem; height: 4px;
  margin-top: 1.1rem;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-600), var(--a-500));
}

.hero-section p:first-of-type { font-size: 1.125rem; }
.hero-section img { border-radius: var(--r-lg); box-shadow: var(--sh-lg); }

/* Bandeau de réassurance sous le héros. */
.trust-bar { border-block: 1px solid var(--n-200); background: var(--n-0); }
.trust-bar ul { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: center; list-style: none; margin: 0; padding: 1.1rem 0; }
.trust-bar li { display: inline-flex; align-items: center; gap: .55rem; margin: 0; color: var(--n-700); font-weight: 600; font-size: .95rem; }
.trust-bar svg { width: 1.15rem; height: 1.15rem; color: var(--c-600); flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   13. Titres de section
   ------------------------------------------------------------------------- */
.section-title { position: relative; margin-bottom: 1.5rem; }

.section-title::after {
  content: "";
  display: block;
  width: 3.5rem; height: 3px;
  margin-top: .9rem;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-600), var(--c-200));
}

.section-title.text-center::after { margin-inline: auto; }

/* ---------------------------------------------------------------------------
   14. Blocs éditoriaux du contenu
   ------------------------------------------------------------------------- */
.air-brand { filter: grayscale(1); opacity: .62; transition: filter .25s ease, opacity .25s ease, transform .25s ease; }
.air-brand:hover { filter: grayscale(0); opacity: 1; transform: scale(1.04); }

.brand-strip { border-top: 1px solid var(--n-200); }
.brand-strip .row { align-items: center; justify-content: center; row-gap: 1.5rem; }

.internal-links {
  margin-block: clamp(2rem, 4vw, 3rem);
  padding: 1.75rem;
  border: 1px solid var(--n-200);
  border-left: 4px solid var(--c-500);
  border-radius: var(--r);
  background: var(--n-50);
}

.sitemap-page { padding-bottom: 2rem; }
.sitemap-section { margin-top: clamp(2rem, 3.5vw, 3rem); padding-top: 1.75rem; border-top: 1px solid var(--n-200); }
.sitemap-section:first-of-type { border-top: 0; padding-top: 0; }
.sitemap-section > p { color: var(--n-500); margin-bottom: 1.1rem; }

.sitemap-list { list-style: none; padding: 0; margin: 0; columns: 3 15rem; column-gap: 2rem; }
.sitemap-list li { break-inside: avoid; margin-bottom: .55rem; padding-left: 0; }
.sitemap-list li::before { content: none !important; }

.sitemap-list a {
  display: block;
  padding: .5rem .75rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--c-800);
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.sitemap-list a:hover { background: var(--c-50); border-color: var(--c-200); transform: translateX(3px); }

/* Bloc de rappel présent sur chaque page. */
.cta-section,
.request-quote {
  position: relative;
  margin-block: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 3vw, 3rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(40rem 20rem at 15% 0%, rgba(26,149,221,.16) 0%, transparent 60%),
    linear-gradient(135deg, var(--c-900), var(--c-700));
  color: #eaf4fb;
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.cta-section h2, .request-quote h2 { color: #fff; }
.cta-section p, .request-quote p { color: rgba(234,244,251,.9); }
.cta-section strong, .request-quote strong { color: #fff; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: 1.5rem; }

/* ---------------------------------------------------------------------------
   15. Devis et formulaires
   ------------------------------------------------------------------------- */
.form-quote {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--c-50), var(--n-0));
  box-shadow: var(--sh-md);
}

.form-quote label { display: block; width: 100%; margin-bottom: .35rem; color: var(--n-900); font-weight: 600; font-size: .95rem; }

.form-quote input:not([type="submit"]),
.form-quote textarea,
.form-quote select,
.search-form input[type="search"] {
  width: 100%;
  padding: .75rem .9rem;
  margin-bottom: 1rem;
  border: 1px solid var(--n-300);
  border-radius: var(--r-sm);
  background: var(--n-0);
  color: var(--n-900);
  font: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.form-quote input:focus, .form-quote textarea:focus, .form-quote select:focus,
.search-form input[type="search"]:focus {
  outline: none; border-color: var(--c-500); box-shadow: 0 0 0 3px var(--c-100);
}

.form-quote textarea { min-height: 8rem; resize: vertical; }

.form-quote input[type="submit"], .search-form button {
  width: auto; min-width: 12rem;
  padding: .85rem 2rem;
  border: 0; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--c-650), var(--c-800));
  color: #fff; font: inherit; font-weight: 700; font-size: 1.0625rem;
  cursor: pointer; box-shadow: var(--sh-c);
  transition: transform .18s ease;
}

.form-quote input[type="submit"]:hover, .search-form button:hover { transform: translateY(-2px); }

.search-form { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-start; }
.search-form input[type="search"] { flex: 1 1 16rem; margin-bottom: 0; }
.search-form button { min-width: auto; padding: .78rem 1.6rem; }

.wpcf7-not-valid-tip { color: var(--danger); font-size: .875rem; }
.wpcf7-response-output { margin: 1rem 0 0 !important; padding: .9rem 1.1rem !important; border-width: 1px !important; border-radius: var(--r-sm) !important; }

/* ---------------------------------------------------------------------------
   16. Pied de page
   ------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(3rem, 5vw, 4.5rem);
  background: linear-gradient(180deg, var(--c-900) 0%, #061c2e 100%);
  color: #b9cbd9;
}

.site-footer::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--c-600), var(--a-500), var(--c-600));
}

.site-footer h2, .site-footer h3 { margin-bottom: 1.1rem; color: #fff; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; }
.site-footer p { color: #b9cbd9; }
.site-footer a { color: #d5e4ef; text-decoration: none; }
.site-footer a:hover { color: var(--c-200); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .6rem; }
.site-footer li::before { content: none !important; }

.footer-nap address { font-style: normal; line-height: 1.9; color: #b9cbd9; }
.footer-nap address a { color: #fff; font-weight: 600; }
.footer-nap address a:hover { color: var(--c-200); }

.footer-bottom {
  margin-top: 2.5rem;
  padding-block: 1.15rem;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  font-size: .85rem;
}

.footer-bottom .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-bottom p { margin: 0; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.35rem; }
.footer-bottom li { margin: 0; }

/* ---------------------------------------------------------------------------
   17. Barre d'appel mobile
   ------------------------------------------------------------------------- */
.mobile-cta { display: none; }

/* ---------------------------------------------------------------------------
   18. Pages d'index et pagination
   ------------------------------------------------------------------------- */
.post-list { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); margin-block: 2rem; }

.post-card {
  display: flex; flex-direction: column;
  padding: 1.6rem;
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--c-200); }
.post-card h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.post-card h2 a { color: var(--c-900); text-decoration: none; }
.post-card h2 a:hover { color: var(--c-700); }
.post-card p { color: var(--n-700); font-size: .975rem; }
.post-card .more { margin-top: auto; padding-top: 1rem; font-weight: 600; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-block: 3rem; }

.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6rem; height: 2.6rem; padding: 0 .6rem;
  border: 1px solid var(--n-200); border-radius: var(--r-sm);
  color: var(--c-800); font-weight: 600; text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease;
}

.pagination .page-numbers:hover { background: var(--c-50); border-color: var(--c-200); }
.pagination .page-numbers.current { background: var(--c-650); border-color: var(--c-650); color: #fff; }

.widget { margin-bottom: 1.5rem; padding: 1.25rem; background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r); }
.widget-title { font-size: 1.05rem; }

/* ===========================================================================
   RÉACTIVITÉ
   =========================================================================== */
@media (max-width: 991.98px) {
  :root { --header-h: 74px; }

  .nav-toggle { display: inline-flex; order: 3; }
  .header-inner { gap: .75rem; }

  /* Le menu déplié sort du flux : sans cette marge, l'appel et le bouton de
     menu restaient collés au logo au lieu de gagner le bord droit. */
  .header-cta { margin-left: auto; }
  .brand img { max-height: 48px; }
  .header-cta .header-phone span { display: none; }
  .header-cta .header-phone { padding: .6rem .85rem; }

  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    padding: 1rem 1.25rem 1.5rem;
    background: var(--n-0);
    border-bottom: 1px solid var(--n-200);
    box-shadow: var(--sh-lg);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }

  .main-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: .2rem; }
  .main-nav a { padding: .85rem 1rem; font-size: 1.05rem; }
  .main-nav a::after { content: none; }

  .sitemap-list { columns: 2 13rem; }
}

@media (max-width: 767.98px) {
  body { font-size: 1rem; padding-bottom: 4.75rem; }

  /* Le fil d'Ariane passe sur deux lignes et le titre sur trois : sans
     resserrage, près de 230 px s'écoulent avant le premier mot du texte. */
  .breadcrumbs { padding-top: 1rem; line-height: 1.5; }
  .entry > header + section.my-5,
  .entry > header + .container.my-5 { margin-top: 1.5rem; }

  /* Titre de page centré sur mobile : sur une colonne étroite, un titre long
     coupé sur trois lignes tient mieux la page centré qu'aligné à gauche. */
  .entry > header { text-align: center; }
  .entry > header h1 { margin-bottom: .45em; }

  .hero-section h1 { max-width: none; text-align: center; }
  .hero-section h1::after { margin-inline: auto; }
  .hero-section img { margin-top: 1.75rem; }

  .cta-section, .request-quote { padding: 1.75rem 1.15rem; }
  .cta-actions .btn { width: 100%; }

  .accordion-button { padding: 1rem 1.1rem; font-size: 1rem; }
  .accordion-body { padding: .25rem 1.1rem 1.2rem; }

  .sitemap-list { columns: 1; }
  .footer-bottom .container { flex-direction: column; text-align: center; }
  .footer-bottom ul { justify-content: center; gap: .75rem; }

  /* Appel et devis toujours à portée de pouce. */
  .mobile-cta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1040;
    display: flex;
    gap: .6rem;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--n-200);
    box-shadow: 0 -6px 20px -12px rgba(10,26,42,.4);
  }

  .mobile-cta .btn { flex: 1 1 0; padding: .8rem .5rem; font-size: .95rem; }
}

/* ===========================================================================
   ACCESSIBILITÉ, MOUVEMENT, IMPRESSION
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .card:hover, .post-card:hover, .air-brand:hover,
  .sitemap-list a:hover, .header-phone:hover, .service-card:hover { transform: none; }
}

@media print {
  .site-header, .mobile-cta, .cta-section, .request-quote, .skip-link, .pagination, .breadcrumbs { display: none !important; }
  body { padding-top: 0; padding-bottom: 0; color: #000; }
  a { color: #000; text-decoration: underline; }
  .accordion-collapse { display: block !important; }
  .card, .post-card { break-inside: avoid; }
}