/*
Theme Name: Propr'Éclat
Theme URI: https://propreclat.fr
Author: Propr'Éclat
Description: Thème sur mesure, léger et optimisé SEO pour Vesoul Solaire — installateur de panneaux photovoltaïques. Charte : bleu nuit, bleu, accent solaire doré.
Version: 1.67.15
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: propreclat
*/

/* ==========================================================
   CHARTE GRAPHIQUE PROPR'ÉCLAT (cf. CDC : 70% bleu nuit,
   20% blanc, 10% vert en accent)
   Bleu nuit #081B36  fond / header / footer
   Bleu      #2E62A1  primaire
   Bleu clair#66A1CD  secondaire
   Ciel      #A3DBF3  liens sur fond sombre
   Vert éco  #7CCB3A  accent / CTA / pictos écologiques
   Glace     #DEF8FD  texte sur fond sombre
   ========================================================== */

:root {
  /* === COULEURS — charte de la maquette « Vesoul Solaire » === */
  --pc-navy: #1b2a4e;        /* dominante : fonds header/footer/hero, primaire */
  --pc-navy-2: #24386a;      /* dominante, variante claire (dégradés) */
  --pc-blue: #2e6da4;        /* primaire : liens, surtitres */
  --pc-blue-light: #a9c4dd;  /* secondaire : bordures de cartes */
  --pc-sky: #dce8f6;         /* texte clair sur fond navy */
  --pc-green: #f2a71b;       /* accent : CTA, pictos, soulignés (orange solaire) */
  --pc-green-dark: #976406;  /* accent, variante foncée / hover — assombri pour un contraste AA (4.9:1) en texte sur fond clair */
  --pc-ice: #eef5fc;         /* texte principal sur fond sombre */
  --pc-text: #253248;        /* texte principal sur fond clair */
  --pc-text-soft: #5d6a7d;   /* texte atténué */
  --pc-bg: #fbfcfe;          /* fond de page (maquette : "paper", presque blanc) */
  --pc-bg-alt: #eaf2fb;      /* fond des sections alternées (maquette : "sky") */
  --pc-line: #d7e3f0;        /* bordures claires */

  /* Boutons — teintes de la charte du client, reprises telles quelles.
     ⚠️ Ces six teintes se règlent dans Personnaliser → « Couleurs des boutons ».
     Les défauts font autorité dans inc/couleurs.php, qui les réinjecte à chaque
     page ; les valeurs ci-dessous ne servent que de secours et doivent rester
     identiques. Modifier ici seulement ne changerait rien au rendu. */
  --pc-btn-bg: #f2a71b;        /* principal : fond (accent orange solaire) */
  --pc-btn-text: #1b2a4e;      /* principal : texte (les deux états) */
  --pc-btn-bg-hover: #d88f08;  /* principal : fond au survol */
  --pc-btn2-line: #1b2a4e;     /* secondaire : bordure ET texte */
  --pc-btn2-bg: #ffffff;       /* secondaire : fond */
  --pc-btn2-bg-hover: #eaeff6; /* secondaire : fond au survol */
  /* Fond du bouton devis de la barre mobile. Le vert d'accent du client, qui
     porte du texte navy — pas besoin de le foncer comme sur Mister Tshirt,
     dont le bouton est en texte blanc. */
  --pc-barre-cta: #f2a71b;

  /* === DÉRIVÉS (calculés automatiquement, ne pas toucher) === */
  --pc-line-dark: rgba(255, 255, 255, .16);
  --pc-shadow: 0 6px 24px color-mix(in srgb, var(--pc-navy) 10%, transparent);
  --pc-shadow-dark: 0 2px 12px color-mix(in srgb, var(--pc-navy) 40%, transparent);

  /* === TYPO — à adapter par client ===
     Maquette : corps en IBM Plex Sans (Google Fonts, cf. functions.php) ;
     Manrope reste en repli auto-hébergé si les polices Google sont bloquées
     (bannière cookies). */
  --pc-font: "IBM Plex Sans", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Taille unique des formulaires : libellés, champs saisis et textes de
     substitution (placeholders) partagent la même, sinon la carte donne
     l'impression de mélanger deux typographies. */
  --pc-form-font: .92rem;

  /* === FORMES === */
  --pc-radius: 12px;         /* arrondi des cartes */
  --pc-radius-btn: 8px;      /* arrondi des boutons (maquette : rectangle arrondi) */
}

/* ---------- Manrope (auto-hébergée, libre — SIL OFL) ---------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("assets/fonts/manrope-latin.woff2") format("woff2");
  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: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Reset minimal ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* L'attribut hidden doit toujours l'emporter, même sur une classe qui pose un
   display (sinon un bouton/étape masqué par le JS resterait visible). */
[hidden] { display: none !important; }
body { margin: 0; font-family: var(--pc-font); color: var(--pc-text); background: var(--pc-bg); line-height: 1.65; font-size: 1rem; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pc-blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--pc-green-dark); }

h1, h2, h3, h4 { font-family: "Space Grotesk", var(--pc-font); color: var(--pc-navy); margin: 0 0 .6em; }
h1 { font-size: clamp(2.45rem, 4.4vw, 4.2rem); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; }
h2 { font-size: clamp(2rem, 3vw, 3.25rem); font-weight: 600; line-height: 1.08; letter-spacing: -.025em; }
h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
h4 { line-height: 1.2; letter-spacing: -.01em; }
@media (max-width: 560px) {
  h1 { font-size: 2.55rem; }
  h2 { font-size: 2rem; }
}

/* Maquette : gouttière calculée (min(largeur max, 100% - marges)) plutôt
   qu'un max-width + padding fixe, pour retrouver les mêmes marges latérales
   qu'à l'origine à chaque palier. */
.pc-container { width: min(1320px, 100% - 72px); margin-inline: auto; }
@media (max-width: 1080px) { .pc-container { width: min(1180px, 100% - 40px); } }
@media (max-width: 820px)  { .pc-container { width: min(680px, 100% - 28px); } }

/* ---------- Header (maquette : fond blanc, filet bas) ---------- */
.pc-header { background: #fff; color: var(--pc-text); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--pc-line); box-shadow: none; }
.pc-header__inner { display: flex; align-items: center; justify-content: flex-start; gap: 1.6rem; padding-block: .5rem; }
.pc-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--pc-navy); flex: none; }
.pc-brand img { width: auto; height: 84px; }
.pc-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.pc-brand__name { font-weight: 700; font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; }
.pc-brand__tagline { font-size: 0.875rem; color: var(--pc-text-soft); }

/* Bloc contact header (gabarit : téléphone + CTA devis, côte à côte à droite).
   Maquette : « Appel gratuit » sous le numéro, « Rapide et sans engagement »
   en seconde ligne À L'INTÉRIEUR du bouton devis. */
.pc-header__contact { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 1.2rem; margin-left: 1rem; }
.pc-header__block { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.pc-header__mention { padding-left: calc(17px + .5rem); font-size: 0.875rem; color: var(--pc-text-soft); letter-spacing: .02em; white-space: nowrap; }
.pc-header__phone { display: inline-flex; align-items: center; gap: .5rem; color: var(--pc-navy); font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.pc-header__phone svg { width: 16px; height: 16px; flex: none; fill: var(--pc-navy); stroke: none; }
.pc-header__phone:hover { color: var(--pc-green-dark); }
.pc-header__contact .pc-btn--cta { min-height: 44px; padding: .55rem 1rem; }

.pc-nav { margin-left: auto; }
.pc-nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.pc-nav a { color: #43515e; text-decoration: none; font-weight: 600; font-size: .88rem; padding: .35rem 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.pc-nav a:hover { color: var(--pc-green-dark); }
/* Maquette : la rubrique courante est marquée en couleur d'accent + soulignée. */
.pc-nav .current-menu-item > a,
.pc-nav .current-menu-ancestor > a,
.pc-nav .current_page_item > a { color: var(--pc-green-dark); border-bottom-color: var(--pc-green); font-weight: 700; }

/* ---------- Sous-menus du header (« Prestations » et ses pages services) ----------
   Sans ces règles, le `<ul class="sub-menu">` posé par WordPress héritait du
   `display: flex` de `.pc-nav ul` : les six pages services se déversaient à plat
   dans la barre, à côté des rubriques. On en fait un panneau déroulant.
   Pas de JS : `:hover` pour la souris, `:focus-within` pour le clavier. */
.pc-nav .menu-item-has-children { position: relative; }
/* Chevron vers le bas sur la rubrique qui ouvre un panneau. */
.pc-nav .menu-item-has-children > a::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: .45rem;
  vertical-align: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: .7;
}
.pc-nav .sub-menu {
  position: absolute; top: 100%; left: -1.1rem; z-index: 1;
  display: block; min-width: 300px; padding: .5rem 0; margin: 0;
  background: #fff; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); box-shadow: var(--pc-shadow);
  /* `visibility` plutôt que `display: none` : le panneau reste animable, et
     `focus-within` peut l'ouvrir à la tabulation. */
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.pc-nav .menu-item-has-children:hover > .sub-menu,
.pc-nav .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.pc-nav .sub-menu a { display: block; padding: .55rem 1.1rem; font-size: .93rem; border-bottom: 0; }
.pc-nav .sub-menu a:hover { color: var(--pc-green-dark); background: var(--pc-bg-alt); border-bottom-color: transparent; }
.pc-nav .sub-menu .current-menu-item > a,
.pc-nav .sub-menu .current_page_item > a { border-bottom-color: transparent; }

/* Réseaux sociaux du header (maquette « rs »). Le balisage est rendu une seule
   fois, après la case du burger pour que `:checked ~` puisse l'afficher ; les
   `order` ci-dessous lui rendent sa place visuelle : marque, réseaux, menu,
   téléphone. Sans eux il partirait en fin de rangée. */
.pc-brand { order: 0; }
.pc-header__social { order: 1; display: flex; align-items: center; gap: .55rem; margin: 0; }
.pc-nav { order: 2; }
.pc-header__contact { order: 3; }
.pc-social { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--pc-ice); transition: opacity .15s, transform .15s; }
.pc-social:hover, .pc-social:focus { opacity: .82; transform: translateY(-1px); color: var(--pc-ice); }
.pc-social svg { width: 28px; height: 28px; flex: none; display: block; }
/* Sur grand écran la maquette ne montre que les pictos : le libellé ne sert
   qu'au menu mobile. Le nom reste porté par l'`aria-label` du lien. */
.pc-social__label { display: none; }

/* Burger mobile (CSS only) */
.pc-nav-toggle { display: none; }
.pc-nav-label { display: none; cursor: pointer; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: .4rem; box-sizing: border-box; }
.pc-nav-label span, .pc-nav-label span::before, .pc-nav-label span::after {
  display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--pc-navy); position: relative; content: ""; transition: transform .2s;
}
.pc-nav-label span::before { position: absolute; top: -8px; }
.pc-nav-label span::after { position: absolute; top: 8px; }
/* Maquette mobile : barre du haut = logo + téléphone + burger, le menu se
   déplie en dessous, et les CTA passent dans la barre accolée sous le header. */
@media (max-width: 900px) {
  .pc-nav-label { display: flex; order: 3; }
  .pc-nav { display: none; width: 100%; order: 4; }
  .pc-nav-toggle:checked ~ .pc-nav { display: block; }
  /* Maquette : le logo reste à gauche, téléphone et burger sont groupés à
     droite (257px de vide avant le téléphone, 37px seulement avant le burger).
     Un `space-between` à trois éléments répartirait le vide à parts égales :
     on pousse donc tout le mou dans la marge gauche du bloc contact. */
  .pc-header__inner { flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0; }
  .pc-nav ul { flex-direction: column; gap: 0; padding-block: .5rem; }
  /* Rubriques en pleine largeur, chevron à droite, séparateur entre chacune. */
  .pc-nav a { display: flex; align-items: center; justify-content: space-between; padding: .95rem 0; border-bottom: 1px solid var(--pc-line); }
  .pc-nav a::after { content: ""; width: 8px; height: 8px; flex: none; margin-right: 4px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .55; }
  /* Maquette : la dernière rubrique n'a ni chevron ni trait de séparation. */
  .pc-nav li:last-child a { border-bottom: 0; }
  .pc-nav li:last-child a::after { display: none; }
  /* Au doigt il n'y a pas de survol : le sous-menu se déplie en liste indentée
     sous sa rubrique, au lieu de flotter en panneau. */
  .pc-nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 0 0 1.1rem; background: none; box-shadow: none; border-radius: 0;
  }
  .pc-nav .sub-menu a { font-size: .92rem; padding: .8rem 0; }
  /* Le chevron déroulant redevient le chevron « rubrique » de la liste mobile :
     à droite, orienté comme les autres. Sans cette reprise, le sélecteur du
     panneau déroulant (plus spécifique) l'emporterait jusque dans le burger. */
  .pc-nav .menu-item-has-children > a::after {
    width: 8px; height: 8px; margin: 0 4px 0 0; vertical-align: baseline; opacity: .55;
    border: 0; border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  }
  /* La rubrique courante se signale par la couleur du texte seule : le trait
     du bas est ici un séparateur de liste, pas un soulignement d'onglet. */
  .pc-nav .current-menu-item > a,
  .pc-nav .current-menu-ancestor > a,
  .pc-nav .current_page_item > a { border-bottom-color: var(--pc-line); }
  /* Le téléphone reste visible dans la barre ; mention et bouton devis, eux,
     sont repris par la barre sous le header. */
  .pc-header__contact { flex: none; gap: .8rem; }
  .pc-nav-label { flex: none; }
  /* Téléphone et burger doivent rester sur la rangée du logo. Avec
     `flex-wrap`, un bloc trop large est renvoyé à la ligne au lieu d'être
     rétréci — et ici c'est le slogan, plus large que le nom, qui dimensionne
     la marque. On donne donc à celle-ci `flex: 1 1 0` : sa largeur de base
     devient nulle, elle ne peut plus provoquer de retour à la ligne et occupe
     simplement la place restante. Nom et slogan s'y replient sur deux lignes,
     exactement comme « DUPONT / PLOMBERIE » sur la maquette. */
  .pc-brand { flex: 1 1 0; min-width: 0; gap: .55rem; }
  .pc-brand__text { min-width: 0; }
  .pc-brand img { width: auto; height: 52px; }
  .pc-brand__name { font-size: 1rem; letter-spacing: .06em; }
  .pc-brand__tagline { font-size: 0.875rem; }
  .pc-header__mention, .pc-header__contact .pc-btn--stacked { display: none; }
  /* Téléphone et burger restent sur la rangée de la marque (ordres 1 et 3), les
     réseaux puis le menu se déplient dessous (4 et 5). */
  .pc-header__contact { order: 1; }
  .pc-header__social { order: 4; }
  .pc-nav { order: 5; }
  /* Rangée pleine largeur, masquée tant que le menu est fermé. */
  .pc-header__social { display: none; width: 100%; gap: 0; padding: .2rem 0 .1rem; border-bottom: 1px solid var(--pc-line-dark); }
  .pc-nav-toggle:checked ~ .pc-header__social { display: flex; }
  .pc-header__social .pc-social { flex: 1 1 0; justify-content: center; padding: .7rem 0; font-weight: 600; font-size: .95rem; }
  .pc-header__social .pc-social + .pc-social { border-left: 1px solid var(--pc-line-dark); }
  .pc-header__social .pc-social svg { width: 24px; height: 24px; }
  .pc-social__label { display: inline; }
}

/* Sur un écran de téléphone la place manque : on resserre encore la marque et
   le téléphone pour que la rangée logo + téléphone + burger tienne d'un bloc. */
@media (max-width: 560px) {
  .pc-header__inner { column-gap: .8rem; }
  .pc-brand img { width: auto; height: 44px; }
  .pc-brand__name { font-size: 0.875rem; letter-spacing: .03em; }
  .pc-brand__tagline { font-size: 0.875rem; }
  .pc-header__phone { font-size: .9rem; }
  .pc-header__phone svg { width: 15px; height: 15px; }
}

/* Burger → croix quand le menu est ouvert (maquette « menu ouvert »). */
.pc-nav-toggle:checked ~ .pc-nav-label span { background: transparent; }
.pc-nav-toggle:checked ~ .pc-nav-label span::before { transform: translateY(8px) rotate(45deg); }
.pc-nav-toggle:checked ~ .pc-nav-label span::after { transform: translateY(-8px) rotate(-45deg); }

/* Maquette : sur mobile, une seule barre fixe en bas d'écran — un lien d'appel
   « Appeler un conseiller » (`.mobile-call-bar`). */
.pc-mobile-bar { display: none; }
@media (max-width: 820px) {
  body { padding-bottom: 58px; }
  .pc-mobile-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    height: 58px; padding: 0 1rem;
    background: var(--pc-green-dark); color: var(--pc-navy);
    font-weight: 700; font-size: .95rem; text-decoration: none;
    box-shadow: 0 -8px 25px rgba(27,42,78,.18);
  }
  .pc-mobile-bar svg { width: 20px; height: 20px; flex: none; fill: currentColor; stroke: none; }
  .pc-mobile-bar:hover, .pc-mobile-bar:focus, .pc-mobile-bar:active { color: var(--pc-navy); }
}

/* ---------- Hero (fond blanc, texte foncé, accent vert) ---------- */
.pc-hero { background: var(--pc-bg); color: var(--pc-text); text-align: center; padding: clamp(3rem, 8vw, 5.5rem) 20px; }
.pc-hero h1 { color: var(--pc-navy); margin-bottom: .4em; }
.pc-hero__accent { color: var(--pc-green-dark); }
/* Chapô du hero. Le sélecteur passe par `:where()`, qui ne compte pas dans
   la spécificité : la règle vaut donc (0,1,0) au lieu de (0,1,1). Sans cela
   elle l'emportait sur les classes du formulaire — lui-même bâti en <p> —
   et lui imposait sa marge de 1.6em, son centrage `auto` et sa taille de
   1,15rem, y compris sur la mention RGPD. Elle reste le style par défaut
   des paragraphes du hero, mais ne prime plus sur un composant. */
.pc-hero :where(p) { max-width: 640px; margin: 0 auto 1.6em; color: var(--pc-text-soft); font-size: 1.15rem; }
.pc-hero img { margin: 0 auto 1.5rem; width: min(280px, 60vw); }

/* ---------- Boutons ---------- */
/* `.pc-404 a` est joint ici plutôt que dupliqué : le lien de retour de la page
   404 n'a plus de classe, mais doit garder l'aspect exact du bouton. */
.pc-btn, .pc-404 a { display: inline-block; background: var(--pc-btn-bg); color: var(--pc-btn-text); font-weight: 700; padding: .8rem 1.8rem; border-radius: var(--pc-radius-btn); text-decoration: none; transition: background .15s, transform .15s; }
.pc-btn:hover, .pc-404 a:hover { background: var(--pc-btn-bg-hover); color: var(--pc-btn-text); transform: translateY(-1px); }
.pc-btn--outline { background: transparent; border: 2px solid var(--pc-sky); color: var(--pc-sky); }
.pc-btn--outline:hover { background: var(--pc-line-dark); color: #fff; }

/* ATTENTION : les modificateurs ci-dessous doivent rester APRÈS `.pc-btn`.
   À spécificité égale c'est le dernier déclaré qui gagne — placés avant, leurs
   display / padding / border-radius étaient tous écrasés par la classe de base. */
.pc-btn--sm { padding: .55rem 1.2rem; font-size: .95rem; }
/* Maquette : bouton devis = presse-papier + libellé. */
.pc-btn--cta { display: inline-flex; align-items: center; gap: .55rem; color: var(--pc-btn-text); letter-spacing: .01em; box-shadow: 0 2px 6px rgba(8,27,54,.35); }
.pc-btn--cta svg { width: 18px; height: 18px; flex: none; }
.pc-btn--cta:hover { color: var(--pc-btn-text); }
/* Variante « empilée » du CTA : libellé + mention l'un sous l'autre, l'icône à
   gauche centrée sur la HAUTEUR DES DEUX LIGNES (dans la maquette le centre de
   l'icône et celui du bloc de texte tombent au même y). Métriques relevées au
   pixel sur ce modèle (échelle 1:1) : bouton 178x57, padding 16, gouttière 15,
   icône visible 15x20, libellé ~13px, mention ~10px. Le tracé n'occupe que
   15x18.5 des 24 unités du viewBox : rendu à 24px il fait ~17x19px à l'écran. */
.pc-btn--stacked { display: flex; align-items: center; gap: 15px; border-radius: 6px; padding: 15px 16px; }
.pc-btn--stacked svg { width: 24px; height: 24px; stroke-width: 1.6; }
.pc-btn__labels { display: flex; flex-direction: column; align-items: flex-start; }
.pc-btn__label { font-weight: 700; font-size: 0.875rem; line-height: 1.25; white-space: nowrap; }
.pc-btn__mention { font-size: 0.875rem; font-weight: 400; line-height: 1.25; white-space: nowrap; }

/* ---------- Sections / cartes ---------- */
.pc-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.pc-section--alt { background: var(--pc-bg-alt); }
.pc-section__title { text-align: center; }
.pc-section__title::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--pc-green); margin: .5rem auto 0; }

.pc-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 2rem; }
.pc-card { --pc-card-pad: 1.6rem; background: #fff; border-radius: var(--pc-radius); padding: var(--pc-card-pad); box-shadow: var(--pc-shadow); border-top: 4px solid var(--pc-blue-light); }
.pc-card h3 { color: var(--pc-blue); }
.pc-card--green { border-top-color: var(--pc-green); }
/* Réalisations de l'accueil : le visuel du client occupe toute la largeur de la
   carte, en bandeau haut comme les cartes de la page Réalisations. Les marges
   négatives annulent le padding de la carte, que le texte conserve. */
.pc-real__logo { margin: calc(var(--pc-card-pad) * -1) calc(var(--pc-card-pad) * -1) 1.2rem; border-radius: calc(var(--pc-radius) - 3px) calc(var(--pc-radius) - 3px) 0 0; overflow: hidden; background: var(--pc-bg-alt); }
.pc-real__logo img { width: 100%; height: 200px; object-fit: cover; display: block; }

/* ---------- Bandeau Instagram (sous les cartes de réalisations) ----------
   Les cartes ci-dessus sont du texte : ce bandeau apporte les photos. Les
   images sont hébergées ici, pas tirées d'Instagram — l'API publique de Meta
   a fermé fin 2024 (voir inc/repeaters.php). */
.pc-insta { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid var(--pc-line); }
.pc-insta__head { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.1rem; max-width: none; }
.pc-insta__icon { display: flex; flex: none; }
.pc-insta__icon svg { width: 34px; height: 34px; display: block; }
.pc-insta__labels { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pc-insta__handle { font-weight: 700; color: var(--pc-navy); }
.pc-insta__titre { font-size: .9rem; color: var(--pc-text-soft); }
.pc-insta__cta { margin-left: auto; flex: none; }
/* Six vignettes de front, puis trois, puis deux : 6 se divise par 3 et par 2,
   donc jamais de vignette orpheline sur la dernière rangée. */
.pc-insta__grid { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; margin: 0; padding: 0; }
.pc-insta__link { position: relative; display: block; overflow: hidden; border-radius: var(--pc-radius); }
/* `aspect-ratio` plutôt qu'une hauteur fixe : la vignette réserve sa place
   avant même le chargement de l'image, donc aucun saut de mise en page. */
.pc-insta__link img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .25s; }
.pc-insta__link:hover img, .pc-insta__link:focus-visible img { transform: scale(1.06); }
/* Voile navy au survol, pour détacher la légende de la photo. */
.pc-insta__link::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .2s;
  background: linear-gradient(to top, rgba(8, 27, 54, .8), rgba(8, 27, 54, 0) 60%);
}
.pc-insta__link:hover::after, .pc-insta__link:focus-visible::after { opacity: 1; }
.pc-insta__legende {
  position: absolute; left: .7rem; right: .7rem; bottom: .6rem; z-index: 1;
  color: #fff; font-size: 0.875rem; line-height: 1.3;
  opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s;
  /* Deux lignes au plus : une longue légende ne doit pas recouvrir la photo. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-insta__link:hover .pc-insta__legende, .pc-insta__link:focus-visible .pc-insta__legende { opacity: 1; transform: none; }
@media (max-width: 1000px) {
  .pc-insta__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pc-insta__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Le bouton passe sous l'identifiant plutôt que de comprimer les deux. */
  .pc-insta__head { flex-wrap: wrap; }
  .pc-insta__cta { margin-left: 0; }
}

/* ---------- Contenu WordPress ---------- */
/* Gabarits internes : les classes ne sont portées que par les conteneurs, le
   contenu de texte (h1, p, ul, li…) reste sans attribut et se met en forme par
   sélecteur descendant. */
.pc-content { padding: clamp(2rem, 5vw, 3.5rem) 0; }
/* Reprend les marges qu'avait le <p> de la date pour ne rien décaler. */
.pc-meta { margin: 1em 0; }
.pc-404 { text-align: center; }
/* Le titre est frère de .entry-content, pas dedans : il faut le viser à part
   pour qu'il s'aligne sur la même colonne que le corps de texte. */
.pc-content .entry-content > *,
.pc-content h1 { max-width: 760px; margin-inline: auto; }
/* « Large » doit rester plus large que la colonne courante : à 1000px il
   deviendrait plus étroit qu'elle. Il occupe donc toute la largeur du conteneur. */
.pc-content .alignwide { max-width: none; }
.pc-content .alignfull { max-width: none; }
.wp-block-button__link { background: var(--pc-green); color: var(--pc-navy); border-radius: var(--pc-radius-btn); }
blockquote { border-left: 4px solid var(--pc-blue-light); margin: 1.5em 0; padding: .5em 1.2em; background: var(--pc-bg-alt); border-radius: 0 var(--pc-radius) var(--pc-radius) 0; }

/* ---------- Footer (maquette : .site-footer) ---------- */
.pc-footer { position: relative; background: var(--pc-navy-2); color: rgba(255,255,255,.62); margin-top: 0; padding: 3.75rem 0 1.6rem; font-size: 0.875rem; }
.pc-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.pc-footer a:hover { color: #fff; }
/* Maquette : 1.4fr .7fr .9fr, gouttière large. */
.pc-footer__grid { display: grid; gap: 2.5rem 5rem; grid-template-columns: 1.4fr .7fr .9fr; }
@media (max-width: 820px) { .pc-footer__grid { grid-template-columns: 1fr; gap: 2.2rem; } }
.pc-footer__brand { display: flex; align-items: center; gap: .7rem; margin: 0; color: #fff; width: fit-content; }
.pc-footer__logo { width: auto; height: 40px; flex: none; }
.pc-footer__brand-text { font-size: 1.05rem; font-weight: 700; color: #fff; }
.pc-footer__tagline { max-width: 42ch; margin: 1.3rem 0 0; font-size: 0.875rem; line-height: 1.6; }
.pc-footer__nav, .pc-footer__legal-info { display: flex; flex-direction: column; gap: .5rem; }
.pc-footer__title { font-size: 0.875rem; font-weight: 700; color: #fff; margin: 0 0 .3rem; text-transform: none; letter-spacing: 0; padding: 0; border: 0; }
.pc-footer__legal-info span { font-size: 0.875rem; }
.pc-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.8rem; padding-top: 1.4rem; font-size: 0.875rem; }
.pc-footer__copy, .pc-footer__legal-links { margin: 0; }
.pc-footer__legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.pc-footer__legal-links a { white-space: nowrap; }
.pc-footer__call { display: inline-flex; align-items: center; gap: .5rem; color: var(--pc-green-dark); font-weight: 700; }
.pc-footer__call:hover { color: var(--pc-green-dark); filter: brightness(1.15); }
.pc-footer__call svg { width: 16px; height: 16px; fill: currentColor; stroke: none; flex: none; }
@media (max-width: 820px) { .pc-footer__bottom { flex-direction: column; align-items: flex-start; } }

/* ---------- Hero (contenu enrichi) ---------- */
.pc-hero__lead { max-width: 720px; margin: 0 auto 1.2em; }
.pc-hero__lead p { color: var(--pc-text-soft); font-size: 1.12rem; margin: 0 0 .8em; }
.pc-hero__reassure { display: flex; align-items: flex-start; gap: .5rem; max-width: 640px; margin: 0 auto 1.6em; color: var(--pc-navy); font-weight: 600; }
.pc-hero__reassure::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; background: var(--pc-green-dark); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 14-4-4 1.4-1.4 2.6 2.6 5.6-5.6L18 9z'/%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'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 14-4-4 1.4-1.4 2.6 2.6 5.6-5.6L18 9z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pc-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* Boutons hero sur fond clair */
.pc-btn--navy { background: var(--pc-navy); color: #fff; }
.pc-btn--navy:hover { background: var(--pc-navy-2); color: #fff; }
.pc-hero .pc-btn--outline { background: var(--pc-btn2-bg); border: 2px solid var(--pc-btn2-line); color: var(--pc-btn2-line); }
.pc-hero .pc-btn--outline:hover { background: var(--pc-btn2-bg-hover); color: var(--pc-btn2-line); }

/* Hero 2 colonnes : texte à gauche, formulaire de devis à droite */
.pc-hero__grid { display: grid; gap: 2.5rem; grid-template-columns: .9fr 1.1fr; align-items: stretch; text-align: left; }
.pc-hero__grid .pc-hero__lead,
.pc-hero__grid .pc-hero__reassure { max-width: none; margin-inline: 0; }
.pc-hero__grid .pc-hero__actions { justify-content: flex-start; }
.pc-hero__col { min-width: 0; }
@media (max-width: 860px) {
  .pc-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .pc-hero__grid .pc-hero__actions { justify-content: center; }
}

/* ---------- Formulaire « Votre étude solaire » (maquette : .lead-form) ---------- */
.pc-lead { width: 100%; }
.pc-lead__form,
.pc-lead:has(.pc-lead__success) { background: #fff; color: var(--pc-text); border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); padding: 1.5rem; text-align: left; }
.pc-lead__form { display: flex; flex-direction: column; }
.pc-lead__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pc-lead__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0 0 .9rem; }
.pc-lead__eyebrow { margin: 0 0 .2rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--pc-green-dark); }
/* Formulaire du bas de page (CTA final, juste avant le footer) uniquement —
   le formulaire du hero en haut de page garde sa couleur actuelle. */
.pc-sol-final__form .pc-lead__eyebrow { color: #0053b3; }
.pc-sol-final__form .pc-lead__title { color: #1b2a4e; }
.pc-sol-final__form .pc-lead__rgpd { color: #1b2a4e; }
.pc-lead__title { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.pc-lead__step { flex: none; font-size: 0.875rem; font-weight: 700; color: var(--pc-text-soft); white-space: nowrap; }

.pc-lead__progress { height: 4px; border-radius: 999px; background: var(--pc-bg-alt); overflow: hidden; margin: 0 0 1.1rem; }
.pc-lead__progress span { display: block; height: 100%; background: var(--pc-green); transition: width .25s ease; }

.pc-lead__fields { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .9rem; border: 0; padding: 0; margin: 0; }
/* Étapes 2 et 3 masquées tant que JS ne les révèle pas (l'attribut hidden doit
   l'emporter sur le display:grid ci-dessus). */
.pc-lead__fields[hidden] { display: none !important; }
.pc-lead__fields label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: var(--pc-form-font); color: var(--pc-navy); }
.pc-lead__full { grid-column: 1 / -1; }
.pc-lead__fields input,
.pc-lead__fields select,
.pc-lead__fields textarea { width: 100%; font: inherit; font-size: var(--pc-form-font); font-weight: 400; color: var(--pc-text); padding: .6rem .75rem; border: 1px solid color-mix(in srgb, var(--pc-blue-light) 55%, transparent); border-radius: 10px; background: var(--pc-bg); }
.pc-lead__fields select { appearance: none; cursor: pointer; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5a6a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 16px; }
.pc-lead__fields textarea { resize: vertical; }
.pc-lead__fields input:focus,
.pc-lead__fields select:focus,
.pc-lead__fields textarea:focus { outline: none; border-color: var(--pc-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-green) 25%, transparent); }

.pc-lead__consent { flex-direction: row; align-items: flex-start; gap: .55rem; font-weight: 400; font-size: 0.875rem; line-height: 1.5; color: var(--pc-text-soft); }
.pc-lead__consent input { width: 18px; height: 18px; flex: none; margin-top: .1rem; padding: 0; accent-color: var(--pc-green-dark); }

.pc-lead__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.pc-lead__actions .pc-btn { border: 0; cursor: pointer; }
.pc-lead__next, .pc-lead__submit { flex: 1 1 auto; }
.pc-lead__back { flex: 0 0 auto; }
.pc-lead__actions .pc-lead__back.pc-btn--outline { color: #1b2a4e; }
.pc-lead__actions .pc-lead__back.pc-btn--outline:hover { color: #f2a71b; }

.pc-help__body .pc-lead__actions { margin-top: 1.5rem; }

.pc-lead__rgpd { display: flex; align-items: center; gap: .45rem; font-size: 0.875rem; font-style: italic; line-height: 1.45; color: color-mix(in srgb, var(--pc-text-soft) 80%, var(--pc-blue)); margin: .9rem 0 0; }
.pc-lead__rgpd svg { flex: none; width: 16px; height: 16px; }
.pc-lead__error { color: #b3261e; font-size: 0.875rem; font-weight: 400; }
.pc-lead__error--global { background: #fde8e6; border-radius: 10px; padding: .6rem .8rem; margin: 0 0 1rem; }
.pc-lead__success { background: color-mix(in srgb, var(--pc-green) 18%, #fff); border: 1px solid var(--pc-green); border-radius: 10px; padding: 1rem; color: var(--pc-navy); font-weight: 600; margin: 0; }

@media (max-width: 560px) {
  :root { --pc-form-font: 1rem; }
  .pc-lead__fields { grid-template-columns: 1fr; }
}

/* ---------- Bandeau chiffres clés (fond navy, icônes vertes) ---------- */
.pc-stats { background: var(--pc-navy); color: var(--pc-ice); padding: 1.8rem 0; }
.pc-stats__grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pc-stat { position: relative; display: flex; align-items: center; gap: .9rem; justify-content: center; text-align: left; padding: .5rem 1.4rem; }
.pc-stat + .pc-stat::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 62%; background: var(--pc-line-dark); }
.pc-stat__icon { flex: none; width: 42px; height: 42px; color: var(--pc-green); }
.pc-stat__icon svg { width: 100%; height: 100%; display: block; }
.pc-stat__text { display: flex; flex-direction: column; }
.pc-stat__value { font-size: 1.4rem; font-weight: 800; color: #fff; line-height: 1.1; }
.pc-stat__label { font-size: 0.875rem; color: var(--pc-sky); margin-top: .2rem; }
@media (max-width: 800px) {
  .pc-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 0; }
  .pc-stat + .pc-stat::before { display: none; }
  /* Sans les séparateurs verticaux, plus rien ne justifiait de centrer
     chaque bloc dans sa cellule : on cale les chiffres à gauche. Le retrait
     interne saute avec, sinon ils seraient décalés de 1.4rem par rapport au
     reste du contenu, le conteneur portant déjà sa propre gouttière. */
  .pc-stat { justify-content: flex-start; padding-left: 0; }
}
@media (max-width: 460px) {
  .pc-stats__grid { grid-template-columns: 1fr; }
}

/* ---------- Surtitre de section (maquette) ---------- */
.pc-overline { color: var(--pc-green-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 0.875rem; margin: 0 0 .6rem; }
.pc-container > .pc-overline { text-align: center; }
.pc-overline--light { color: var(--pc-green); }

/* ---------- Chapô de section ---------- */
.pc-section__lead { max-width: 720px; margin: 1.4rem auto 0; text-align: center; color: var(--pc-text-soft); }
.pc-center { text-align: center; margin-top: 2rem; }

/* ---------- Cartes : lien « en savoir plus » ---------- */
.pc-card__link { display: inline-block; margin-top: .8rem; font-weight: 600; text-decoration: none; color: var(--pc-green-dark); }
.pc-card__link:hover { text-decoration: underline; }

/* ---------- Texte long lisible ---------- */
.pc-prose { max-width: 1100px; margin-inline: auto; }
.pc-prose p { margin: 0 0 1em; }

/* ---------- Pourquoi nous choisir ---------- */
.pc-why { padding: 1.4rem 1.4rem 1.4rem 1.6rem; background: #fff; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); border-left: 4px solid var(--pc-green); }
.pc-why h3 { color: var(--pc-blue); margin-bottom: .4em; }
.pc-why p { margin: 0; color: var(--pc-text-soft); }

/* ---------- Zone d'intervention ---------- */
.pc-zone { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; align-items: start; margin-top: 2rem; }
.pc-zone__text { margin: 0; }
.pc-communes { list-style: none; padding: 0; margin: 1em 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pc-communes li { background: var(--pc-bg-alt); border: 1px solid color-mix(in srgb, var(--pc-blue-light) 35%, transparent); border-radius: var(--pc-radius-btn); padding: .3rem .9rem; font-size: .92rem; font-weight: 600; color: var(--pc-blue); }
.pc-zone__map iframe { display: block; width: 100%; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); }
@media (max-width: 800px) { .pc-zone { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.pc-faq { max-width: 800px; }
.pc-faq__item { background: #fff; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); margin-top: 1rem; padding: 0 1.4rem; }
.pc-faq__item summary { cursor: pointer; font-weight: 700; color: var(--pc-navy); padding: 1.1rem 0; list-style: none; position: relative; padding-right: 2rem; }
.pc-faq__item summary::-webkit-details-marker { display: none; }
.pc-faq__item summary::after { content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--pc-green-dark); line-height: 1; }
.pc-faq__item[open] summary::after { content: "–"; }
.pc-faq__answer { padding-bottom: 1.1rem; color: var(--pc-text-soft); }
.pc-faq__answer p { margin: 0 0 .8em; }

/* ---------- CTA final ---------- */
.pc-cta-final { background: var(--pc-navy); color: var(--pc-ice); text-align: center; padding: clamp(3.5rem, 8vw, 5.5rem) 20px; }
.pc-cta-final h2 { color: #fff; }
.pc-cta-final p { max-width: 690px; margin: 0 auto 1.6em; color: var(--pc-sky); }

/* ---------- Hero : colonne de droite (visuel + formulaire) ---------- */
.pc-hero__form { display: flex; flex-direction: column; gap: 1rem; }
.pc-hero__form .pc-form-card,
.pc-hero__form .pc-lead { width: 100%; }
.pc-hero__form--photo { background-size: cover; background-position: center; border-radius: var(--pc-radius); overflow: hidden; padding: clamp(1.3rem, 3vw, 2.4rem); align-items: center; }
/* La carte prend toute la largeur disponible en gardant une bande de photo
   visible à sa gauche : elle passe ainsi à deux colonnes sur grand écran (cf.
   requête de conteneur du formulaire) au lieu d'empiler douze champs. La borne
   à 580px l'empêche de s'étirer indéfiniment sur les très larges écrans. */
.pc-hero__form--photo .pc-form-card { max-width: min(580px, 100% - 100px); margin-left: auto; box-shadow: 0 14px 46px rgba(8,27,54,.32); }
@media (max-width: 860px) {
  /* La photo est posée en style inline sur l'élément (l'URL vient du
     Customizer ou de la page locale). Un style inline l'emporte sur toute
     déclaration de la feuille : `background: none` ne l'a jamais annulée,
     la photo restait visible en mobile. `!important` est ici le seul
     moyen de reprendre la main — c'est le cas d'usage prévu pour lui. */
  .pc-hero__form--photo { background-image: none !important; padding: 0; border-radius: 0; }
  /* La photo retirée, la carte n'a plus de raison d'être une carte : son
     retrait interne décalait le formulaire de 1,6rem par rapport au titre
     et au texte du hero, qui s'alignent eux sur la gouttière du conteneur.
     L'ombre et l'arrondi partent avec — ils n'encadrent plus rien, le fond
     de la carte étant déjà celui de la page. */
  .pc-hero__form .pc-form-card { padding: 0; box-shadow: none; border-radius: 0; }
  .pc-hero__form--photo .pc-form-card { max-width: none; margin-left: 0; box-shadow: none; }
}

/* ---------- Cartes prestations (photo + badge icône) ---------- */
.pc-grid--presta { margin-top: 2.2rem; }
.pc-presta { padding: 0; overflow: hidden; border-top: 0; display: flex; flex-direction: column; }
.pc-presta__head { position: relative; min-height: 96px; background: linear-gradient(135deg, var(--pc-navy), var(--pc-blue)); }
.pc-presta__img { width: 100%; height: 180px; object-fit: cover; display: block; }
.pc-presta__badge { position: absolute; left: 1.3rem; bottom: -24px; width: 50px; height: 50px; border-radius: 50%; background: var(--pc-navy); color: #fff; display: grid; place-items: center; box-shadow: var(--pc-shadow); border: 3px solid #fff; }
.pc-presta__badge svg { width: 24px; height: 24px; }
.pc-presta__body { padding: 2.2rem 1.4rem 1.6rem; }
.pc-presta__body h3 { color: var(--pc-blue); }

/* ---------- Présentation 2 colonnes + atouts ---------- */
.pc-present { display: grid; gap: 2.5rem; grid-template-columns: 1fr 1.15fr; align-items: center; }
.pc-present--noimg { grid-template-columns: 1fr; }
.pc-present__media img { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); object-fit: cover; }
.pc-present__body h2 { text-align: left; }
/* Label « Services à la personne » : taille naturelle, jamais étiré. */
.pc-present__badge { margin: 1.4rem 0 0; }
.pc-present__badge img { width: auto; max-width: min(270px, 100%); height: auto; }
.pc-present__body .pc-prose { max-width: none; margin: 0; }
@media (max-width: 860px) { .pc-present { grid-template-columns: 1fr; } }

.pc-features { display: grid; gap: 1.3rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 1.9rem; }
.pc-features__title { margin-top: 1.6rem; }
.pc-feature__icon { display: block; width: 38px; height: 38px; color: var(--pc-green-dark); margin-bottom: .5rem; }
.pc-feature__icon svg { width: 100%; height: 100%; }
.pc-feature h4 { color: var(--pc-navy); font-size: 1rem; margin: 0 0 .3em; }
.pc-feature p { margin: 0; font-size: .9rem; color: var(--pc-text-soft); }

/* ---------- Avis clients ---------- */
.pc-avis { background: var(--pc-navy); color: var(--pc-ice); }
.pc-avis .pc-section__title { color: #fff; }
.pc-avis__lead { color: var(--pc-sky); }
.pc-grid--avis { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pc-review { margin: 0; padding: 1.6rem; background: rgba(255,255,255,.06); border: 1px solid var(--pc-line-dark); border-radius: var(--pc-radius); }
.pc-review__stars { color: var(--pc-green); letter-spacing: 3px; font-size: 1.05rem; margin-bottom: .7rem; }
.pc-review blockquote { margin: 0 0 1rem; padding: 0; border: 0; background: none; border-radius: 0; color: var(--pc-ice); font-style: italic; }
.pc-review figcaption { display: flex; flex-direction: column; }
.pc-review__nom { font-weight: 700; color: #fff; }
.pc-review__role { font-size: 0.875rem; color: var(--pc-sky); }

/* ---------- Footer (maquette, fond blanc) — prime sur le bloc plus haut ---------- */
.pc-footer { position: relative; background: #eaf2fb; color: var(--pc-text-soft); border-top: 1px solid var(--pc-line); margin-top: 0; padding: 3.4rem 0 1.6rem; font-size: 0.875rem; }
.pc-footer a { color: var(--pc-text-soft); text-decoration: none; }
.pc-footer a:hover { color: var(--pc-green-dark); }
.pc-footer__grid { display: grid; grid-template-columns: 1.4fr .7fr .9fr; gap: 2.4rem 5rem; }
@media (max-width: 820px) { .pc-footer__grid { grid-template-columns: 1fr; gap: 2rem; } }
.pc-footer__brand { display: inline-block; margin: 0; padding: 16px; border: 1px solid var(--pc-line); border-radius: 10px; background: #fff; line-height: 0; }
.pc-footer__logo { display: block; width: 200px; max-width: 100%; height: auto; }
.pc-footer__brand-text { display: none; }
.pc-footer__tagline { max-width: 42ch; margin: 1.3rem 0 0; font-size: 0.875rem; line-height: 1.6; }
.pc-footer__nav, .pc-footer__legal-info { display: flex; flex-direction: column; gap: .5rem; }
.pc-footer__title { margin: 0 0 .3rem; font-size: 0.875rem; font-weight: 700; color: var(--pc-navy); text-transform: none; letter-spacing: 0; padding: 0; border: 0; }
.pc-footer__legal-info span { font-size: 0.875rem; }
.pc-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; border-top: 1px solid var(--pc-line); margin-top: 2.6rem; padding-top: 1.4rem; font-size: 0.875rem; }
.pc-footer__copy, .pc-footer__legal-links { margin: 0; }
.pc-footer__legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.pc-footer__legal-links a { white-space: nowrap; }
.pc-footer__call { display: inline-flex; align-items: center; gap: .5rem; color: var(--pc-green-dark); font-weight: 700; }
.pc-footer__call svg { width: 16px; height: 16px; fill: currentColor; stroke: none; flex: none; }
@media (max-width: 820px) {
  .pc-footer__bottom { flex-direction: column; align-items: center; text-align: center; }
  /* Contenus du footer centrés sur mobile (demande explicite). */
  .pc-footer__grid, .pc-footer__col, .pc-footer__nav, .pc-footer__legal-info { align-items: center; text-align: center; }
  .pc-footer__brand { margin-inline: auto; }
  .pc-footer__tagline { margin-inline: auto; }
  .pc-footer__legal-links { justify-content: center; }
  .pc-footer__logo { width: 150px; }
}

/* ---------- Popin devis ---------- */
.pc-popin[hidden] { display: none; }
.pc-popin { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .25s ease; }
.pc-popin.is-open { opacity: 1; }
.pc-popin__backdrop { position: absolute; inset: 0; background: rgba(8,27,54,.6); cursor: pointer; }
.pc-popin__box { position: relative; background: #fff; color: var(--pc-text); border-radius: var(--pc-radius); box-shadow: 0 24px 70px rgba(8,27,54,.45); max-width: 440px; width: 100%; padding: 2.2rem; text-align: center; transform: translateY(12px); transition: transform .25s ease; }
.pc-popin.is-open .pc-popin__box { transform: none; }
/* Logo en tête du popin. Hauteur bornée plutôt que largeur : les logos clients
   vont du format large au format carré, seul le calage vertical doit rester
   constant. L'arrondi habille les déclinaisons sur fond plein. */
.pc-popin__logo { display: block; margin: 0 auto 1.2rem; width: auto; height: auto; max-width: 62%; max-height: 100px; border-radius: var(--pc-radius); }
.pc-popin__box h2 { margin-top: 0; }
.pc-popin__box p { color: var(--pc-text-soft); margin-bottom: 1.4rem; }
.pc-popin__close { position: absolute; top: .2rem; right: .35rem; background: none; border: 0; font-size: 1.9rem; line-height: 1; color: var(--pc-text-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; box-sizing: border-box; }
.pc-popin__close:hover { color: var(--pc-navy); }

/* ---------- Sticky contact (desktop) ---------- */
/* Widget d'aide flottant (maquette « sticky contact »). Même principe que le
   module cookies, mais ancré à droite pour ne pas se chevaucher avec lui.
   Bascule sans JS : la case à cocher ouvre le panneau et masque la pastille. */
/* La case doit rester DANS le viewport, à côté de la pastille : en position
   absolue elle se retrouve tout en bas du document (le widget est rendu dans
   wp_footer) et le clic sur l'étiquette, en lui donnant le focus, fait
   défiler la page jusqu'en bas. En fixed, le focus ne déplace plus rien.
   Elle reste focusable au clavier, d'où le 1×1 px plutôt qu'un display:none. */
.pc-help__toggle { position: fixed; right: 16px; bottom: 16px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }

/* Fond cliquable : refermer en touchant à côté. Transparent sur grand écran
   (le panneau y est petit, l'assombrissement serait intrusif), voilé en mobile
   où il occupe presque tout l'écran. */
.pc-help__backdrop { display: none; position: fixed; inset: 0; z-index: 94; }
.pc-help__toggle:checked ~ .pc-help__backdrop { display: block; }

/* La pastille suit le défilement : posée bas (alignée sur l'onglet cookies) tant
   qu'il reste de la page à lire, elle remonte au-dessus du pied de page dès
   qu'on arrive tout en bas, où elle masquerait les mentions légales. La classe
   est posée par pc-help.js ; sans JS la pastille reste en position basse. */
.pc-help__tab {
  position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: .6rem;
  background: var(--pc-navy); color: #fff; cursor: pointer; padding: .6rem 1.1rem .6rem .8rem;
  border-radius: 999px; box-shadow: var(--pc-shadow-dark);
  transition: bottom .25s ease;
}
.pc-help--bas .pc-help__tab { bottom: 84px; }
@media (prefers-reduced-motion: reduce) {
  .pc-help__tab { transition: none; }
}
.pc-help__tab:hover { background: var(--pc-navy-2); }
.pc-help__tab-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: rgba(255,255,255,.12); }
.pc-help__tab-icon svg { width: 17px; height: 17px; }
.pc-help__tab-text { display: flex; flex-direction: column; line-height: 1.2; }
.pc-help__tab-text strong { font-size: .95rem; }
/* Pastille de statut « en ligne ». */
.pc-help__status { display: flex; align-items: center; gap: .35rem; font-size: 0.875rem; color: var(--pc-green); text-transform: uppercase; letter-spacing: .06em; }
.pc-help__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pc-green); flex: none; }

.pc-help__panel {
  display: none; position: fixed; right: 16px; bottom: 16px; z-index: 95;
  width: min(380px, calc(100vw - 32px)); overflow-y: auto;
  background: var(--pc-bg); color: var(--pc-text); border-radius: var(--pc-radius);
  box-shadow: 0 20px 60px rgba(8,27,54,.35);
  /* `dvh` suit la barre d'adresse mobile, que `vh` ignore : sans lui le bas du
     panneau (bouton d'envoi, mention RGPD) passait sous la barre du navigateur.
     Le `vh` reste en repli pour les navigateurs sans `dvh`. */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
}
.pc-help__toggle:checked ~ .pc-help__panel { display: block; }
.pc-help__toggle:checked ~ .pc-help__tab { display: none; }

/* En-tête collant : le panneau défile (formulaire + horaires), la croix doit
   rester atteignable. Sans cela elle sortait de l'écran dès le premier champ. */
.pc-help__head { position: sticky; top: 0; z-index: 1; background: var(--pc-navy); color: #fff; padding: 1.2rem 2.6rem 1.2rem 1.3rem; border-radius: var(--pc-radius) var(--pc-radius) 0 0; }
.pc-help__head h2 { color: #fff; font-size: 1.2rem; margin: .5rem 0 .4rem; }
.pc-help__intro { margin: 0; font-size: .88rem; color: var(--pc-sky); }
.pc-help__close { position: absolute; top: .6rem; right: .6rem; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.pc-help__close:hover { background: rgba(255,255,255,.26); }

.pc-help__body { padding: 1.1rem 1.3rem 1.3rem; }
.pc-help__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.pc-help__badges span { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; background: var(--pc-bg-alt); color: var(--pc-navy); font-size: 0.875rem; font-weight: 600; }
.pc-help__badges span::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--pc-green-dark); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 14-4-4 1.4-1.4 2.6 2.6 5.6-5.6L18 9z'/%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'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 14-4-4 1.4-1.4 2.6 2.6 5.6-5.6L18 9z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Le formulaire réutilisé apporte sa propre carte : on la neutralise ici, le
   panneau faisant déjà office de carte, et son titre doublonnerait l'en-tête. */
.pc-help__body .pc-form-card { background: none; box-shadow: none; padding: 0; }
.pc-help__body .pc-form__title { display: none; }
.pc-help__body .pc-form__submit { width: 100%; }
.pc-help__body .pc-field--captcha .pc-input { max-width: 130px; }
/* Appel direct, entre le formulaire et les horaires. Bouton secondaire pleine
   largeur : le bouton principal du panneau reste l'envoi du formulaire.
   `.pc-btn--outline` est dessiné pour du texte bleu ciel sur fond sombre ; le
   panneau étant blanc, on reprend ici les teintes « bouton secondaire » de la
   charte, comme le fait déjà le hero. */
.pc-help__call {
  display: flex; justify-content: center; width: 100%; margin-top: .9rem;
  background: var(--pc-btn2-bg); border: 2px solid var(--pc-btn2-line); color: var(--pc-btn2-line);
}
.pc-help__call:hover { background: var(--pc-btn2-bg-hover); color: var(--pc-btn2-line); }
.pc-help__call .pc-btn__labels { align-items: flex-start; }
.pc-help__call .pc-btn__label { font-size: 1rem; }
.pc-help__call .pc-btn__mention { font-size: 0.875rem; }

/* Horaires d'ouverture, en remplacement de l'ancien bouton « Être rappelé ».
   Deux colonnes comme au footer : libellé à gauche, créneau à droite. */
.pc-help__hours { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--pc-line); }
.pc-help__hours-title { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-size: 0.875rem; font-weight: 700; color: var(--pc-navy); text-transform: uppercase; letter-spacing: .04em; }
.pc-help__hours-title svg { width: 15px; height: 15px; flex: none; color: var(--pc-text-soft); }
.pc-help__hours dl { display: grid; grid-template-columns: 1fr auto; gap: .25rem .8rem; margin: 0; font-size: 0.875rem; }
.pc-help__hours dt { color: var(--pc-text-soft); }
.pc-help__hours dd { margin: 0; text-align: right; font-weight: 700; color: var(--pc-navy); }

@media (max-width: 700px) {
  .pc-help__tab { right: 8px; bottom: 12px; }
  .pc-help--bas .pc-help__tab { bottom: 50px; }
  /* `left` ET `right` : avec la seule largeur calculée, le panneau laissait
     24px à gauche contre 8px à droite, visiblement décentré. */
  .pc-help__panel { left: 8px; right: 8px; bottom: 8px; width: auto; }
  .pc-help__backdrop { background: rgba(8, 27, 54, .45); }
  /* Cible tactile confortable pour refermer. */
  .pc-help__close { width: 44px; height: 44px; font-size: 1.5rem; }
  .pc-help__head { padding-right: 3.4rem; }
}

/* ---------- Accessibilité ---------- */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--pc-green); outline-offset: 2px; }

/* ---------- Module cookies (RGPD) ---------- */
.pc-btn--ghost { background: var(--pc-btn2-bg); border: 2px solid var(--pc-btn2-line); color: var(--pc-btn2-line); }
.pc-btn--ghost:hover { background: var(--pc-btn2-bg-hover); color: var(--pc-btn2-line); }

.pc-cookies-tab {
  position: fixed; left: 0; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: .45rem;
  background: var(--pc-navy); color: #fff; border: 0; cursor: pointer; font: inherit; font-size: 0.875rem;
  padding: .55rem .9rem .55rem .7rem; border-radius: 0 10px 10px 0; box-shadow: var(--pc-shadow-dark);
}
.pc-cookies-tab svg { width: 18px; height: 18px; flex: none; }
.pc-cookies-tab:hover { background: var(--pc-navy-2); }

.pc-cookies[hidden] { display: none; }
.pc-cookies {
  position: fixed; left: 16px; bottom: 16px; z-index: 95; width: min(420px, calc(100vw - 32px));
  background: #fff; color: var(--pc-text); border-radius: var(--pc-radius);
  box-shadow: 0 20px 60px rgba(8,27,54,.35); padding: 1.4rem;
}
.pc-cookies__title { font-size: 1.15rem; margin: 0 0 .5rem; }
.pc-cookies__text { margin: 0 0 1rem; font-size: .92rem; color: var(--pc-text-soft); }
.pc-cookies__prefs[hidden] { display: none; }
.pc-cookies__prefs { margin: 0 0 1rem; display: grid; gap: .7rem; max-height: 38vh; overflow-y: auto; }
.pc-cookies__cat { display: flex; gap: .6rem; align-items: flex-start; font-size: 0.875rem; color: var(--pc-text-soft); }
.pc-cookies__cat input { margin-top: .25rem; flex: none; width: 16px; height: 16px; accent-color: var(--pc-green-dark); }
.pc-cookies__cat strong { color: var(--pc-navy); font-weight: 700; }
.pc-cookies__cat--locked { padding-left: 2.2rem; opacity: .75; }
.pc-cookies__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.pc-cookies__actions [hidden] { display: none; }
.pc-cookies__link { background: none; border: 0; padding: 0; font: inherit; font-size: .9rem; color: var(--pc-blue); text-decoration: underline; cursor: pointer; }
.pc-cookies__link:hover { color: var(--pc-green-dark); }
.pc-cookies__more { margin: .9rem 0 0; font-size: 0.875rem; }

/* Contenu tiers bloqué faute de consentement (carte Google Maps). */
.pc-consent-block {
  display: grid; gap: .9rem; place-items: center; text-align: center; min-height: 340px; padding: 1.5rem;
  background: var(--pc-bg-alt); border: 1px dashed color-mix(in srgb, var(--pc-navy) 25%, transparent);
  border-radius: var(--pc-radius); align-content: center;
}
.pc-consent-block p { margin: 0; max-width: 34ch; color: var(--pc-text-soft); font-size: .92rem; }

/* Sur mobile, laisser la place au CTA fixe du bas et au bandeau. */
@media (max-width: 700px) {
  .pc-cookies { left: 8px; bottom: 64px; padding: 1.1rem; }
  .pc-cookies-tab { bottom: 64px; }
}

/* ============================================================
   Page « Réalisations » (gabarit Artisites)
   ============================================================ */

/* Hero de la page */
.pc-realp-hero { background: var(--pc-bg-alt); text-align: center; padding-bottom: clamp(2rem, 5vw, 3rem); }
.pc-realp-hero__title { color: var(--pc-navy); }
.pc-realp-hero__lead { max-width: 760px; margin: 1.2rem auto 0; color: var(--pc-text-soft); }
.pc-realp-hero__lead p { margin: 0 0 .6em; }

/* Galerie de réalisations */
.pc-grid--realp { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pc-realp-card {
  background: #fff; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow);
  overflow: hidden; display: flex; flex-direction: column;
  border-top: 4px solid var(--pc-blue-light);
}
.pc-realp-card__media img { width: 100%; height: 200px; object-fit: cover; display: block; }
.pc-realp-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; }
.pc-realp-card__meta {
  margin: 0; font-size: 0.875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--pc-green-dark);
}
.pc-realp-card__title { margin: 0; color: var(--pc-navy); font-size: 1.15rem; }
.pc-realp-card__text { margin: 0; color: var(--pc-text-soft); }
.pc-realp-card__date { margin: .2rem 0 0; font-size: 0.875rem; color: var(--pc-text-soft); font-style: italic; }

/* Module Avant / Après (sans JS : deux images côte à côte, repérées) */
.pc-grid--ba { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pc-ba { margin: 0; background: #fff; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); overflow: hidden; }
.pc-ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: color-mix(in srgb, var(--pc-navy) 12%, transparent); }
.pc-ba__side { position: relative; }
.pc-ba__side img { width: 100%; height: 220px; object-fit: cover; display: block; }
.pc-ba__tag {
  position: absolute; top: .6rem; left: .6rem; z-index: 1;
  font-size: 0.875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: var(--pc-radius-btn); color: #fff;
}
.pc-ba__tag--before { background: color-mix(in srgb, var(--pc-navy) 82%, transparent); }
.pc-ba__tag--after { background: var(--pc-green-dark); }
.pc-ba__caption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem;
  padding: .9rem 1.2rem; color: var(--pc-navy);
}
.pc-ba__legende { font-weight: 600; }
.pc-ba__date { color: var(--pc-text-soft); font-size: 0.875rem; font-style: italic; }

@media (max-width: 480px) {
  .pc-ba__side img { height: 44vw; }
}

/* ============================================================
   Page « Contact » (gabarit Artisites)
   ============================================================ */

/* Hero de la page */
.pc-contact-hero { background: var(--pc-bg); text-align: center; padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.pc-contact-hero__title { color: var(--pc-navy); }
.pc-contact-hero__lead { max-width: 720px; margin: 1.2rem auto 0; color: var(--pc-text-soft); }
.pc-contact-hero__lead p { margin: 0 0 .6em; }

/* Deux colonnes : coordonnées à gauche, formulaire à droite (comme le hero). */
.pc-contact__grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.15fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }

/* Colonne coordonnées */
.pc-contact__infos-title { color: var(--pc-navy); }
.pc-contact__coords { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.pc-contact__coords li { display: flex; align-items: flex-start; gap: .8rem; }
.pc-contact__coords-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pc-bg-alt); color: var(--pc-green-dark); }
.pc-contact__coords-icon svg { width: 19px; height: 19px; }
.pc-contact__coords li > span:last-child { display: flex; flex-direction: column; }
.pc-contact__coords-label,
.pc-contact__bloc-title { font-size: 0.875rem; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; color: var(--pc-text-soft); }
.pc-contact__coords-value { color: var(--pc-navy); font-weight: 600; }
a.pc-contact__coords-value:hover { color: var(--pc-green-dark); }

/* Horaires et réseaux : mêmes lignes que les coordonnées ci-dessus (pastille de
   40 px puis contenu), pour que pictos, libellés et valeurs restent sur les
   deux mêmes verticales du haut en bas de la colonne. */
.pc-contact__bloc { position: relative; display: flex; align-items: flex-start; gap: .8rem; margin-top: 1rem; }
.pc-contact__bloc-body { flex: 1 1 auto; min-width: 0; }
.pc-contact__bloc-title { margin: 0 0 .3rem; }

/* Colonne des jours au plus juste, horaires alignés à gauche juste après :
   poussés à droite (comme dans le footer, où la colonne est étroite), ils se
   détachaient du reste de la colonne, dont toutes les valeurs sont à gauche. */
.pc-contact__hours-list { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; }
.pc-contact__hours-list dt { color: var(--pc-text-soft); }
.pc-contact__hours-list dd { margin: 0; font-weight: 700; color: var(--pc-navy); }

/* Réseaux : pictos de marque du header, mais libellé visible (sur une page de
   contact, le réseau est un moyen de nous joindre). */
.pc-contact__social-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: .15rem 0 0; }
.pc-contact__social-links .pc-social { gap: .5rem; padding: .4rem .85rem .4rem .4rem; border: 1px solid var(--pc-line); border-radius: 999px; background: #fff; color: var(--pc-navy); font-weight: 600; font-size: .92rem; }
.pc-contact__social-links .pc-social:hover, .pc-contact__social-links .pc-social:focus { opacity: 1; color: var(--pc-green-dark); border-color: var(--pc-green); }
.pc-contact__social-links .pc-social svg { width: 24px; height: 24px; }
.pc-contact__social-links .pc-social__label { display: inline; }

.pc-contact__infos-text { margin-top: 1.4rem; color: var(--pc-text-soft); }

/* Colonne formulaire : la carte du formulaire réutilisé porte déjà son style.
   On masque son titre, le hero « Contactez-nous » servant déjà d'en-tête. */
.pc-contact__form { position: sticky; top: 90px; }
.pc-contact__form .pc-form__title,
.pc-contact__form .pc-lead__head { display: none; }
.pc-contact__form .pc-lead__progress { margin-top: 0; }

@media (max-width: 860px) {
  .pc-contact__grid { grid-template-columns: 1fr; }
  .pc-contact__form { position: static; }
}

/* ============================================================
   Pages locales (CPT pc_locale, gabarit Artisites — maquette)
   ============================================================ */

/* Commune mise en accent vert dans les titres de section. */
.pc-accent { color: var(--pc-green-dark); }

/* ---------- Hero : photo de la commune en fond, voile clair à gauche ----------
   Mise en page encore utilisée par les pages services (page-service.php). Les
   pages locales, elles, suivent maintenant `.pc-hero--locale` ci-dessous. */
.pc-locale-hero { background-size: cover; background-position: center; position: relative; }
.pc-locale-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, #fff 0%, rgba(255, 255, 255, .96) 34%, rgba(255, 255, 255, .55) 55%, rgba(255, 255, 255, .12) 100%);
}
.pc-locale-hero > .pc-container { position: relative; }
@media (max-width: 860px) {
  /* Sur mobile le texte passe sur toute la largeur : voile plus couvrant. */
  .pc-locale-hero::before { background: rgba(255, 255, 255, .93); }
}

/* ============================================================
   Hero des pages locales (maquette `content.png`, relevée au pixel
   sur un cadre de 1672 px : gouttière 68, colonne de texte 633,
   panneau photo 857 × 800, carte de devis posée dessus.)
   Le formulaire lui-même n'est pas touché : la colonne de droite
   reste celle de l'accueil (`.pc-hero__form--photo`).
   ============================================================ */
.pc-hero--locale {
  position: relative; overflow: hidden;
  padding-block: clamp(2.2rem, 4.6vw, 4rem);
  /* Fond quasi blanc, à peine refroidi vers le bas (relevé : #fff en haut à
     gauche, #fafafd en bas). */
  background: linear-gradient(170deg, #fff 0%, #fbfcfe 60%, #f7f9fc 100%);
}
/* Décor de la maquette : semis de points en bas à gauche (pas 19 × 18,
   points de 5 px), estompé en diagonale. Purement décoratif. */
.pc-hero--locale::before {
  content: ""; position: absolute; left: 10px; bottom: 0; width: 190px; height: 150px;
  background-image: radial-gradient(circle, #e9ebf0 2.5px, transparent 2.6px);
  background-size: 19px 18px;
  -webkit-mask-image: linear-gradient(55deg, #000 0%, transparent 72%);
  mask-image: linear-gradient(55deg, #000 0%, transparent 72%);
  pointer-events: none;
}
/* Voile bleuté très pâle derrière le titre, comme la maquette. */
.pc-hero--locale::after {
  content: ""; position: absolute; left: 26%; top: -12%; width: 46%; height: 105%;
  background: radial-gradient(closest-side, rgba(46, 98, 161, .06), transparent 100%);
  pointer-events: none;
}
.pc-hero--locale > .pc-container { position: relative; }
/* Colonnes relevées sur la maquette (633 / 857 pour 1538 de conteneur). */
.pc-hero--locale .pc-hero__grid { grid-template-columns: .86fr 1.14fr; gap: 3rem; }

/* Titre : c'est lui qui porte la maquette, d'où une taille bien au-delà du H1
   courant du thème (relevé : hauteur de capitale 53 px, soit ~74 px de corps).
   `overflow-wrap` protège les noms de commune à rallonge, qui ne peuvent pas
   tenir sur une ligne à cette taille. */
.pc-hero--locale h1 {
  font-size: clamp(2.1rem, 4.4vw, 4.6rem); line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 1.5rem; overflow-wrap: break-word;
}
/* Filet vert sous le titre (relevé : 80 × 5). */
.pc-hero__rule { display: block; width: 80px; height: 5px; border-radius: 3px; background: var(--pc-green-dark); margin: 0 0 1.6rem; }

/* Sous-titre du hero, sous le filet. Sélecteur porté à la même spécificité que
   `.pc-hero p`, sinon le chapô centré du hero l'emporterait. */
.pc-hero .pc-locale__soustitre { font-size: 1.2rem; font-weight: 700; color: var(--pc-navy); max-width: none; margin: 0 0 1.1rem; }

/* Boutons : capitales comme la maquette, arrondi doux (relevé : rayon 18). */
.pc-hero--locale .pc-hero__actions { gap: 1rem; margin-bottom: 2.4rem; }
.pc-hero--locale .pc-hero__actions .pc-btn { text-transform: uppercase; letter-spacing: .03em; font-size: 0.875rem; border-radius: 18px; }
.pc-hero--locale .pc-hero__actions .pc-btn--cta { padding: 15px 24px; }
.pc-hero--locale .pc-hero__actions .pc-btn--stacked { padding: 15px 22px; }
.pc-hero--locale .pc-hero__actions .pc-btn__mention { text-transform: none; letter-spacing: 0; font-size: 0.875rem; font-weight: 700; }

/* Bandeau d'atouts sous les boutons : pastille verte + deux lignes.
   PAS de filet vertical entre les atouts, contrairement à la maquette. Celle-ci
   est dessinée sur un cadre de 1672 px, où la colonne de gauche fait 633 px ;
   en dessous de ~1500 px de large elle tombe à 550-600 px et les trois atouts
   ne tiennent plus côte à côte. Le filet coûtait à lui seul ~110 px (gouttière
   + retrait de part et d'autre), et surtout l'atout renvoyé à la ligne gardait
   son `border-left` et son `padding-left` : filet orphelin et décalage vers la
   droite. Sans lui, le bandeau tient sur une ligne bien plus bas, et s'il finit
   par passer à deux lignes elles sont l'une et l'autre calées à gauche.
   `nowrap` sur les libellés : ils se coupaient au milieu d'un mot. */
.pc-hero__atouts { list-style: none; display: flex; flex-wrap: wrap; gap: .9rem 1.5rem; margin: 0; padding: 0; }
.pc-hero-atout { display: flex; align-items: center; gap: .75rem; }
.pc-hero-atout__icon {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--pc-green) 16%, #fff); color: var(--pc-green-dark);
}
.pc-hero-atout__icon svg { width: 21px; height: 21px; }
.pc-hero-atout__text { display: flex; flex-direction: column; line-height: 1.35; }
.pc-hero-atout__title { font-weight: 700; color: var(--pc-navy); font-size: .94rem; white-space: nowrap; }
.pc-hero-atout__sub { color: var(--pc-text-soft); font-size: .88rem; white-space: nowrap; }

/* Colonne de gauche encore trop étroite pour trois atouts de front : on les
   empile plutôt que de laisser une ligne de deux et une ligne d'un. Le seuil est
   calculé : à 1500 px de fenêtre la colonne fait ~607 px, le bandeau en demande
   ~560 — en dessous la marge disparaît. */
@media (max-width: 1500px) {
  .pc-hero--locale .pc-hero__atouts { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* Panneau photo de droite : la maquette lui ajoute une ombre portée douce. */
.pc-hero--locale .pc-hero__form--photo { box-shadow: 0 24px 60px rgba(8, 27, 54, .16); }

@media (max-width: 860px) {
  /* Une seule colonne. Contrairement aux autres heros du thème, qui centrent
     leur contenu sur petit écran, celui-ci reste ALIGNÉ À GAUCHE : titre sur
     trois ou quatre lignes, chapô sur une dizaine, et surtout un bandeau
     d'atouts qui passe en colonne — centrés, leurs bords en dents de scie
     rendaient le bloc illisible. Les sélecteurs sont portés à une classe de
     plus que les règles centrées de `.pc-hero`, déclarées plus haut. */
  .pc-hero--locale::before, .pc-hero--locale::after { display: none; }
  .pc-hero--locale .pc-hero__grid { grid-template-columns: 1fr; gap: 2rem; text-align: left; }
  .pc-hero--locale .pc-hero__grid .pc-hero__actions { justify-content: flex-start; }
  /* La photo est retirée en dessous de 860 px : son ombre n'encadre plus rien. */
  .pc-hero--locale .pc-hero__form--photo { box-shadow: none; }
}

/* ---------- Carte « Une présence locale » ---------- */
.pc-locale-card {
  display: grid; gap: 2rem; grid-template-columns: 1.1fr 1fr; align-items: center;
  background: #fff; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); padding: 1.8rem;
}
.pc-locale-card--noimg { grid-template-columns: 1fr; }
.pc-locale-card__body { display: grid; gap: 1.2rem; grid-template-columns: 62px 1fr; align-items: start; }
.pc-locale-card__icon { color: var(--pc-green); }
.pc-locale-card__icon svg { width: 62px; height: 62px; }
.pc-locale-card__body h2 { margin: 0 0 .6em; text-align: left; color: var(--pc-navy); }
.pc-locale-card__body .pc-prose { max-width: none; margin: 0; }
.pc-locale-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--pc-radius); display: block; }
@media (max-width: 860px) {
  .pc-locale-card,
  .pc-locale-card__body { grid-template-columns: 1fr; }
  .pc-locale-card__icon svg { width: 48px; height: 48px; }
}

/* Petite note grise (source de la distance, etc.). */
.pc-locale__note { font-size: 0.875rem; color: var(--pc-text-soft); font-style: italic; margin: 1em 0 0; }

/* ---------- Six cartes de prestations, badge numéroté ---------- */
.pc-grid--locale-presta { margin-top: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pc-locale-presta__num {
  position: absolute; left: .9rem; top: .9rem; width: 34px; height: 34px; border-radius: 50%;
  background: var(--pc-green-dark); color: #fff; font-weight: 700; font-size: .95rem;
  display: grid; place-items: center; box-shadow: var(--pc-shadow-dark);
}
.pc-locale-presta .pc-presta__img { height: 150px; }
.pc-locale-presta .pc-presta__body { padding: 1.2rem 1.2rem 1.5rem; }
.pc-locale-presta .pc-presta__body h3 {
  display: grid; gap: .6rem; grid-template-columns: 26px 1fr; align-items: start;
  font-size: 1rem; color: var(--pc-navy); margin: 0 0 .7em;
}
.pc-locale-presta__icon { color: var(--pc-green-dark); }
.pc-locale-presta__icon svg { width: 26px; height: 26px; }
.pc-locale-presta p { color: var(--pc-text-soft); font-size: .94rem; margin: 0; }

/* ---------- Bandeau méthode / avantage fiscal ---------- */
.pc-locale-bandeau__grid {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.4rem;
  background: #fff; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); padding: 1.8rem 2rem;
}
.pc-locale-bandeau__col { display: grid; gap: 1.1rem; grid-template-columns: 44px minmax(0, 1fr); align-items: start; }
/* Le label occupe sa propre colonne : le texte s'arrête avant, jamais dessous. */
.pc-locale-bandeau__col--fiscal { border-left: 2px solid var(--pc-green); padding-left: 2rem; grid-template-columns: 44px minmax(0, 1fr) auto; }
.pc-locale-bandeau__icon { color: var(--pc-green-dark); }
.pc-locale-bandeau__icon svg { width: 44px; height: 44px; }
.pc-locale-bandeau__col h3 { margin: 0 0 .4em; color: var(--pc-navy); font-size: 1.15rem; }
.pc-locale-bandeau__col .pc-prose { max-width: none; margin: 0; font-size: .95rem; }
/* Label « Services à la personne », à la place du « -50 % » écrit en gros : même
   visuel que les pages services, et il porte déjà le taux. Fichier livré en
   270 × 140 — on l'affiche à 200 px pour qu'il n'écrase pas le texte à côté. */
.pc-locale-bandeau__label { align-self: center; display: block; width: 200px; max-width: 100%; height: auto; }
@media (max-width: 1100px) {
  /* Plus assez de largeur pour trois colonnes : le label passe sous le texte. */
  .pc-locale-bandeau__col--fiscal { grid-template-columns: 44px minmax(0, 1fr); }
  .pc-locale-bandeau__label { grid-column: 2; justify-self: start; margin-top: .9rem; }
}
@media (max-width: 860px) {
  .pc-locale-bandeau__grid { grid-template-columns: 1fr; padding: 1.6rem; }
  .pc-locale-bandeau__col--fiscal { border-left: 0; border-top: 2px solid var(--pc-green); padding-left: 0; padding-top: 1.6rem; }
}

/* ---------- Bloc texte + photo (parc immobilier) ---------- */
.pc-locale-split { display: grid; gap: 2.5rem; grid-template-columns: 1fr 1.15fr; align-items: center; }
.pc-locale-split--noimg { grid-template-columns: 1fr; }
.pc-locale-split h2 { text-align: left; margin: 0 0 .6em; color: var(--pc-navy); }
.pc-locale-split .pc-prose { max-width: none; margin: 0; }
.pc-locale-split__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); display: block; }
@media (max-width: 860px) { .pc-locale-split { grid-template-columns: 1fr; } }

/* ---------- Parcours en trois étapes, reliées par une flèche ---------- */
.pc-locale-etapes { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 2.2rem; grid-template-columns: repeat(3, 1fr); }
.pc-locale-etape {
  position: relative; background: #fff; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow);
  padding: 1.5rem 1.4rem; display: grid; gap: .9rem; grid-template-columns: 40px 40px 1fr; align-items: center;
}
.pc-locale-etape__num { width: 40px; height: 40px; border-radius: 50%; background: var(--pc-green-dark); color: #fff; font-weight: 700; display: grid; place-items: center; }
.pc-locale-etape__icon { color: var(--pc-green-dark); }
.pc-locale-etape__icon svg { width: 40px; height: 40px; }
.pc-locale-etape__texte { display: block; }
.pc-locale-etape__texte strong { display: block; color: var(--pc-navy); margin-bottom: .25em; }
.pc-locale-etape__texte span { display: block; color: var(--pc-text-soft); font-size: .92rem; }
/* Flèche entre deux étapes (décorative, jamais lue). */
.pc-locale-etape + .pc-locale-etape::before {
  content: "→"; position: absolute; left: -1.5rem; top: 50%; transform: translateY(-50%);
  color: var(--pc-navy); font-size: 1.4rem; line-height: 1;
}
@media (max-width: 980px) {
  .pc-locale-etapes { grid-template-columns: 1fr; gap: 1.2rem; }
  .pc-locale-etape + .pc-locale-etape::before { display: none; }
}

/* ---------- Réalisation / avis / tarifs ---------- */
.pc-locale-preuves__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr 1.6fr; align-items: stretch; }
.pc-locale-preuve { border-top: 0; display: flex; flex-direction: column; text-align: center; }
.pc-locale-preuve h2 { font-size: 1.1rem; margin: 0 0 1rem; color: var(--pc-navy); }
.pc-locale-preuve__icon { color: var(--pc-green-dark); margin: .4rem auto 1.2rem; }
.pc-locale-preuve__icon svg { width: 56px; height: 56px; }
.pc-locale-preuve p { color: var(--pc-text-soft); font-size: .95rem; margin: 0; }
.pc-locale-preuve--large { text-align: left; }
.pc-locale-preuve--large .pc-prose { max-width: none; margin: 0 0 1.2rem; font-size: .95rem; }
.pc-locale-preuve--large .pc-btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 980px) { .pc-locale-preuves__grid { grid-template-columns: 1fr; } }

/* ---------- Communes alentour (maillage interne) ---------- */
.pc-locale-autour__box { background: #fff; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); padding: 2rem 1.6rem; }
.pc-locale-autour__box .pc-section__title { margin-top: 0; }
.pc-locale-communes { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 1.8rem 0 0; padding: 0; }
.pc-locale-communes a,
.pc-locale-communes span {
  display: block; padding: .6rem 1.6rem; border: 1px solid var(--pc-blue-light);
  border-radius: var(--pc-radius); color: var(--pc-navy); font-weight: 600; text-decoration: none;
}
.pc-locale-communes a:hover { border-color: var(--pc-green); color: var(--pc-green-dark); }
.pc-locale-communes [aria-current="page"] { background: var(--pc-bg-alt); border-color: var(--pc-green); }

/* ---------- FAQ pleine largeur ---------- */
.pc-faq--large { max-width: none; margin-top: 2rem; }
.pc-faq--large .pc-faq__item summary { font-size: 1rem; }

/* ---------- CTA final en carte ---------- */
.pc-cta-final--locale {
  border-radius: var(--pc-radius); padding: 1.8rem 2rem; text-align: left;
  display: grid; gap: 1.6rem; grid-template-columns: 64px 1fr auto; align-items: center;
}
.pc-locale-cta__icon { color: var(--pc-green); }
.pc-locale-cta__icon svg { width: 64px; height: 64px; }
.pc-cta-final--locale h2 { font-size: 1.35rem; margin: 0 0 .3em; }
.pc-cta-final--locale p { margin: 0; max-width: none; }
.pc-cta-final--locale .pc-hero__actions { margin: 0; justify-content: flex-end; }
@media (max-width: 980px) {
  .pc-cta-final--locale { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .pc-cta-final--locale .pc-hero__actions { justify-content: center; }
}

/* Corps éditable : mise en forme de la prose saisie dans l'éditeur. */
.pc-locale__body { max-width: 820px; }
.pc-locale__body h2 { margin: 1.8em 0 .5em; color: var(--pc-navy); }
.pc-locale__body h2:first-child { margin-top: 0; }
.pc-locale__body h2::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--pc-green); margin: .4rem 0 0; }
.pc-locale__body h3 { margin: 1.4em 0 .3em; color: var(--pc-blue); font-size: 1.15rem; }
.pc-locale__body p { margin: 0 0 1em; }
.pc-locale__body ul { margin: 0 0 1em; padding-left: 1.2em; }
.pc-locale__body img { max-width: 100%; height: auto; border-radius: var(--pc-radius); }
/* Petite note grise (source de la distance, etc.). */
.pc-locale__body .pc-locale__note { font-size: 0.875rem; color: var(--pc-text-soft); font-style: italic; }

/* FAQ en accordéon : réutilise le style de la home si le corps utilise
   <details class="pc-faq__item">. */
.pc-locale__body .pc-faq__item summary { margin: 0; }

/* CTA intercalé dans le corps (bouton centré). */
.pc-locale__body .pc-locale__cta { text-align: center; margin: 1.6em 0; }

/* ============================================================
   Pages services (une page par prestation, maquette Artisites)
   ============================================================ */

/* Le hero (photo en fond + voile clair), la FAQ pleine largeur et le CTA final
   sont ceux des pages locales : seuls les blocs propres à la maquette service
   sont stylés ici. */

/* ---------- Hero ---------- */

/* Sous-titre vert sous le H1 (maquette). Même spécificité que `.pc-hero p`,
   sinon le chapô centré du hero l'emporterait. */
.pc-hero .pc-service__soustitre { font-size: 1.05rem; font-weight: 700; color: var(--pc-green-dark); max-width: none; margin: 0 0 1em; }
/* Phrase de conclusion, mise en avant sous l'introduction. */
.pc-hero .pc-service__accroche { font-size: 1rem; font-weight: 700; color: var(--pc-navy); max-width: none; margin: 0 0 1.6em; }

/* Boutons du hero et du CTA final : libellés en capitales comme la maquette. */
.pc-service .pc-hero__actions .pc-btn { text-transform: uppercase; letter-spacing: .03em; font-size: 0.875rem; }
.pc-service .pc-hero__actions .pc-btn--cta { padding: 15px 20px; border-radius: 6px; }
.pc-service .pc-hero__actions .pc-btn__mention { text-transform: none; letter-spacing: 0; font-size: 0.875rem; font-weight: 700; }
/* Bouton d'appel sur le CTA final (fond navy) : plein blanc, comme la maquette —
   la variante `--outline` y est dessinée pour du texte bleu ciel sur sombre. */
.pc-btn--clair { background: #fff; border-color: #fff; color: var(--pc-navy); }
.pc-btn--clair:hover, .pc-btn--clair:focus { background: var(--pc-btn2-bg-hover); color: var(--pc-navy); }

/* ---------- Bande de trois colonnes (quand / comment / pourquoi) ---------- */
/* Trois colonnes à parts égales ; `auto-fit` garde la bande cohérente si une
   colonne est vide (prestation sans étapes, par exemple). */
.pc-service-band__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  background: #fff; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow);
  padding: 1.8rem 1rem;
}
/* Filets de séparation entre colonnes (maquette). */
.pc-service-col + .pc-service-col { border-left: 1px solid var(--pc-line); }
.pc-service-col { padding: 0 1.6rem; min-width: 0; }
.pc-service-col__title {
  display: grid; grid-template-columns: 34px 1fr; gap: .9rem; align-items: center;
  margin: 0 0 1.4rem; color: var(--pc-navy); font-size: 1.05rem; text-align: left;
}
.pc-service-col__icon { color: var(--pc-green-dark); }
.pc-service-col__icon svg { width: 34px; height: 34px; }
.pc-service-col__lead { margin: -.8rem 0 1.2rem; color: var(--pc-text-soft); font-size: .95rem; }

/* Colonne 1 : situations cochées. */
.pc-service-liste,
.pc-service-args { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.pc-service-liste li,
.pc-service-args li { display: grid; grid-template-columns: 26px 1fr; gap: .9rem; align-items: start; color: var(--pc-text-soft); font-size: .95rem; }
.pc-service-liste__icon,
.pc-service-args__icon { color: var(--pc-green-dark); }
.pc-service-liste__icon svg { width: 22px; height: 22px; margin-top: .15rem; }
.pc-service-args__icon svg { width: 26px; height: 26px; }
/* Le picto d'un argument se cale sur la première ligne de texte. */
.pc-service-args li { align-items: center; }

/* Colonne 2 : trois étapes en pastilles, reliées par une flèche. */
.pc-service-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.pc-service-etape { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.pc-service-etape__pastille {
  position: relative; display: grid; place-items: center; width: 62px; height: 62px;
  border: 1px solid var(--pc-line); border-radius: 50%; color: var(--pc-green-dark); margin-bottom: .3rem;
}
.pc-service-etape__pastille svg { width: 28px; height: 28px; }
.pc-service-etape__num {
  position: absolute; top: -6px; left: -6px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--pc-green-dark); color: #fff; font-size: 0.875rem; font-weight: 700;
  display: grid; place-items: center;
}
.pc-service-etape__titre { color: var(--pc-navy); font-size: .95rem; }
.pc-service-etape__texte { color: var(--pc-text-soft); font-size: 0.875rem; line-height: 1.45; }
/* Flèche entre deux étapes (décorative), à hauteur des pastilles. */
.pc-service-etape + .pc-service-etape::before {
  content: "→"; position: absolute; left: -1.1rem; top: 31px; transform: translateY(-50%);
  color: var(--pc-green-dark); font-size: 1.2rem; line-height: 1;
}

@media (max-width: 1080px) {
  .pc-service-band__grid { grid-template-columns: 1fr; gap: 2rem; padding: 1.6rem; }
  .pc-service-col { padding: 0; }
  .pc-service-col + .pc-service-col { border-left: 0; border-top: 1px solid var(--pc-line); padding-top: 2rem; }
}
@media (max-width: 820px) {
  /* Entre 561 et 820px, les 3 colonnes se resserraient à ~170-190px chacune
     sans déborder mais en restant compactes ; on empile plus tôt, comme pour
     le bloc équivalent des pages locales. */
  .pc-service-etapes { grid-template-columns: 1fr; gap: 1.6rem; }
  .pc-service-etape + .pc-service-etape::before { display: none; }
}

/* ---------- Bandeau méthode + avantage fiscal ---------- */
.pc-service-bandeau__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.6rem; align-items: center; }
.pc-service-bandeau__col { display: grid; gap: 1.4rem; grid-template-columns: 90px minmax(0, 1fr); align-items: center; }
.pc-service-bandeau__icon { color: var(--pc-green-dark); }
.pc-service-bandeau__icon svg { width: 90px; height: 90px; stroke-width: 1.2; }
.pc-service-bandeau__titre { margin: 0 0 .5em; color: var(--pc-navy); font-size: 1.1rem; text-align: left; }
.pc-service-bandeau__col .pc-prose { max-width: none; margin: 0; color: var(--pc-text-soft); }
.pc-service-bandeau__col .pc-prose p { margin: 0 0 .6em; }
.pc-service-bandeau__col .pc-prose p:last-child { margin-bottom: 0; }
/* Colonne fiscale : label + pastille au-dessus, texte centré dessous. */
.pc-service-bandeau__col--fiscal { grid-template-columns: 1fr; text-align: center; border-left: 2px solid var(--pc-green); padding-left: 2.6rem; }
.pc-service-bandeau__col--fiscal .pc-service-bandeau__titre { text-align: center; }
.pc-service-fiscal__visuels { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem; margin: 0 0 1.2rem; }
/* Seul visuel de la colonne dans le cas courant : le label porte déjà la
   pastille « 50 % ». Réduit à 190 px si une pastille distincte l'accompagne. */
.pc-service-fiscal__label { width: 270px; max-width: 100%; height: auto; display: block; }
.pc-service-fiscal__label:not(:only-child) { width: 190px; max-width: 55%; }
.pc-service-fiscal__badge {
  display: grid; place-content: center; gap: .1rem; width: 118px; height: 118px; border-radius: 50%;
  background: var(--pc-green-dark); color: #fff; padding: .4rem; text-align: center;
}
.pc-service-fiscal__chiffre { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.pc-service-fiscal__mention { font-size: 0.875rem; font-weight: 600; line-height: 1.25; }
.pc-service-fiscal__texte { text-align: center; }

@media (max-width: 980px) {
  .pc-service-bandeau__grid { grid-template-columns: 1fr; gap: 2rem; }
  .pc-service-bandeau__col--fiscal { border-left: 0; border-top: 2px solid var(--pc-green); padding-left: 0; padding-top: 2rem; }
}
@media (max-width: 560px) {
  .pc-service-bandeau__col { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pc-service-bandeau__titre { text-align: center; }
  .pc-service-bandeau__icon svg { width: 64px; height: 64px; }
}

/* ---------- Zone d'intervention (texte + photo) ---------- */
.pc-service-zone__grid {
  display: grid; grid-template-columns: minmax(240px, .8fr) 1.6fr; gap: 1.6rem; align-items: stretch;
  background: #fff; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); padding: 1.6rem;
}
.pc-service-zone__grid--noimg { grid-template-columns: 1fr; }
.pc-service-zone__body { display: grid; grid-template-columns: 34px 1fr; gap: .5rem .9rem; align-content: start; }
.pc-service-zone__icon { color: var(--pc-green-dark); }
.pc-service-zone__icon svg { width: 34px; height: 34px; }
.pc-service-zone__titre { margin: 0; align-self: center; color: var(--pc-navy); font-size: 1.1rem; text-align: left; }
.pc-service-zone__body .pc-prose { grid-column: 2; max-width: none; margin: 0; color: var(--pc-text-soft); }
.pc-service-zone__body .pc-prose p { margin: 0 0 .5em; }
.pc-service-zone__media img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: var(--pc-radius); display: block; }
@media (max-width: 860px) {
  .pc-service-zone__grid { grid-template-columns: 1fr; }
  .pc-service-zone__media img { min-height: 180px; }
}

/* ---------- Voir aussi (cartes photo + picto) ---------- */
.pc-service-voir__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2.4rem; }
.pc-service-voir__card { background: #fff; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); overflow: hidden; }
.pc-service-voir__card a { display: block; padding: 0 1.3rem 1.5rem; color: inherit; text-decoration: none; text-align: center; }
.pc-service-voir__media { position: relative; display: block; margin: 0 -1.3rem 2.2rem; min-height: 140px; background: var(--pc-bg-alt); }
.pc-service-voir__media img { width: 100%; height: 140px; object-fit: cover; display: block; }
/* Picto rond à cheval sur le bas de la photo (maquette). */
.pc-service-voir__icon {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--pc-green-dark); color: #fff; box-shadow: var(--pc-shadow-dark);
}
.pc-service-voir__icon svg { width: 26px; height: 26px; }
.pc-service-voir__titre { display: block; color: var(--pc-navy); font-weight: 700; }
.pc-service-voir__texte { display: block; margin-top: .5rem; color: var(--pc-text-soft); font-size: .9rem; }
.pc-service-voir__card:hover { box-shadow: var(--pc-shadow-dark); }
.pc-service-voir__card:hover .pc-service-voir__titre { color: var(--pc-green-dark); }

/* =========================================================================
   MAQUETTE « VESOUL SOLAIRE » — mise en page des sections photovoltaïques
   (bloc final : prime sur les règles génériques par ordre de source)
   Valeurs reprises au pixel/rem près de la feuille de style extraite de
   PS.html (base « desktop » ci-dessous, palliers ≤1080 / ≤820 / ≤560 dans
   les media queries en bas de bloc — mêmes seuils que la maquette).
   ========================================================================= */

/* ---- Communs : surtitre, titres, chapô, headings ---- */
.pc-section__title::after { display: none; }
/* Grands chiffres / valeurs : Space Grotesk comme la maquette. */
.pc-sol-config__power, .pc-sol-yield__ref strong, .pc-sol-yield__cards strong,
.pc-sol-calc__main strong, .pc-sol-calc__slabel strong, .pc-sol-calc__row b,
.pc-sol-area__map strong, .pc-lead__title, .pc-sol-step__num, .pc-sol-photostat strong,
.pc-sol-trust__item strong, .pc-sol-case__data strong, .pc-sol-compare strong,
.pc-sol-admin__list h3 { font-family: "Space Grotesk", var(--pc-font); }
.pc-section { padding: 122px 0; }
/* Maquette : hero + bénéfices + prix + démarches + FAQ sur fond « sky » ;
   réalisations sur fond navy (texte clair) ; le reste sur le fond de page
   (« paper »). */
.pc-section:has(.pc-sol-case) { background: var(--pc-navy); color: #fff; }
.pc-section:has(.pc-sol-admin) { background: var(--pc-bg-alt); }
.pc-section:has(.pc-sol-faq) { background: var(--pc-bg-alt); }
/* Pages dédiées /realisations/ et /faq/ : la maquette (Maquette.png, vérifié au
   pixel) place en réalité démarches et FAQ sur le fond de page (« paper »), pas
   « sky ». L'accueil (front-page.php, réutilise les mêmes sections) garde le
   fond sky ci-dessus tel quel — déjà validé, non modifié. */
body.page-template-page-realisations-php .pc-section:has(.pc-sol-admin) { background: var(--pc-bg); }
body.page-template-page-faq-php .pc-section:has(.pc-sol-faq) { background: var(--pc-bg); }
.pc-overline { color: var(--pc-blue); letter-spacing: .13em; text-transform: uppercase; font-size: 0.875rem; font-weight: 700; line-height: 1.2; margin: 0 0 14px; }
.pc-overline--light { color: #f5bf94; }
.pc-section__title { text-align: center; letter-spacing: -.01em; }
.pc-section__title--left { text-align: left; }
.pc-section__lead { color: var(--pc-text-soft); font-size: 1.08rem; max-width: 700px; margin: 1.1rem auto 0; }
.pc-section__lead--left { text-align: left; margin-inline: 0; }
.pc-sol-heading { margin-bottom: 56px; }
/* Aligné à gauche à toutes les tailles, comme les titres des autres encarts
   (page-hero, heading « split ») — demande explicite du client, plutôt que
   le comportement de la maquette source qui centrait ce variant sous 1081px. */
.pc-sol-heading--centre { text-align: left; }
.pc-sol-heading--centre .pc-section__title { text-align: left; }
.pc-sol-heading--centre .pc-section__title,
.pc-sol-heading--centre .pc-section__lead { margin-left: 0; margin-right: 0; max-width: 660px; }
.pc-sol-heading--split { display: grid; grid-template-columns: 1.25fr .65fr; column-gap: 120px; row-gap: 0; align-items: end; margin-bottom: 56px; }
.pc-sol-heading--split .pc-overline { grid-column: 1 / -1; }
.pc-sol-heading--split .pc-section__title { margin-bottom: 0; }
.pc-sol-note { background: var(--pc-bg-alt); border: 1px solid var(--pc-line); border-radius: 12px; padding: 16px 20px; margin-top: 24px; font-size: 0.875rem; color: var(--pc-text-soft); }
/* Variante icône + titre + texte (section Confiance : « Notre engagement de
   transparence »), maquette `promesses.png`. */
.pc-sol-note--icon { display: flex; align-items: flex-start; gap: 12px; }
.pc-sol-note--icon .pc-sol-note__icon { flex: none; color: var(--pc-navy); }
.pc-sol-note--icon .pc-sol-note__icon svg { width: 20px; height: 20px; }
.pc-sol-note--icon strong { display: block; color: var(--pc-navy); font-size: .88rem; margin-bottom: 4px; }
.pc-sol-note--icon p { margin: 0; }
.pc-center { text-align: center; margin-top: 1.8rem; }
.pc-sol-benefit__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 30px; color: var(--pc-blue); background: var(--pc-bg-alt); border-radius: 8px; }
.pc-sol-benefit__icon svg { width: 24px; height: 24px; }

/* ---- Hero ---- */
.pc-hero--sol { background: var(--pc-bg-alt); text-align: left; padding: 72px 0 88px; min-height: 800px; overflow: hidden; }
.pc-hero--sol .pc-hero__grid { grid-template-columns: .84fr 1.16fr; gap: 58px; align-items: center; }
.pc-hero--sol .pc-hero__grid > .pc-hero__col:first-child { padding: 28px 0 0; }
.pc-hero--sol h1 { color: var(--pc-navy); max-width: 21ch; margin-bottom: 31px; }
.pc-hero--sol .pc-hero__lead { color: #58636e; font-size: 1.12rem; line-height: 1.65; max-width: 34ch; }
.pc-sol-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(46,109,164,.06); color: var(--pc-blue); border: 1px solid rgba(46,109,164,.35); border-radius: 6px; padding: 7px 10px; margin-bottom: 31px; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.pc-sol-badge svg { width: 14px; height: 14px; }
.pc-hero__points { list-style: none; padding: 0; margin: 27px 0 31px; display: grid; gap: 10px; }
.pc-hero__points li { display: flex; align-items: center; gap: 10px; color: var(--pc-navy); font-weight: 500; font-size: .9rem; }
.pc-hero__points li::before { content: ""; flex: none; width: 21px; height: 21px; border-radius: 6px; background: rgba(46,109,164,.08); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e6da4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px; }
.pc-hero--sol .pc-hero__actions { display: flex; flex-wrap: nowrap; gap: 12px; justify-content: flex-start; margin-top: 0; }
.pc-hero--sol .pc-hero__actions .pc-btn { font-size: 14px; padding: .7rem 1.05rem; white-space: nowrap; border-radius: var(--pc-radius-btn); }
.pc-hero--sol .pc-btn--outline { background: #fff; border: 1px solid var(--pc-line); color: var(--pc-navy); }
.pc-hero--sol .pc-btn--outline:hover { background: var(--pc-bg-alt); color: var(--pc-navy); }
.pc-hero__reassure { max-width: none; margin: 24px 0 0; font-size: 0.875rem; font-weight: 500; color: var(--pc-text-soft); }

/* colonne droite : la photo (en absolu) est le fond ; le formulaire suit le
   flux normal et chevauche sa moitié basse (maquette : photo pleine hauteur,
   form 430px superposé en bas-gauche, cf. .hero-side / .hero-photo / .lead-form).
   Le `bottom` fixe la position de la carte à l'étape 1 (la plus courte) ;
   pc-lead.js la pige ensuite pour les étapes suivantes (cf. pinCardTop()).
   Valeur baissée le 2026-09-16 pour que le haut de la carte descende
   jusqu'au toit visible sur la photo (voire un peu en dessous), au lieu de
   chevaucher le ciel/les arbres en haut du visuel. */
.pc-hero--sol .pc-hero__form { position: relative; display: block; min-height: 660px; padding-top: 0; }
.pc-hero__form .pc-sol-visuel--hero { position: absolute; top: 0; right: 0; z-index: 1; width: 100%; height: 590px; margin: 0; border-radius: 0; overflow: hidden; box-shadow: none; }
.pc-hero__form .pc-sol-visuel--hero img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.76) contrast(1.03); }
.pc-hero__form .pc-sol-visuel--hero figcaption { position: absolute; left: 20px; right: 20px; bottom: 15px; color: rgba(255,255,255,.74); font-size: 0.875rem; line-height: 1.4; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.pc-sol-photostat { position: absolute; top: 24px; right: 24px; left: auto; z-index: 3; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.91); color: var(--pc-navy); border-radius: 1px; padding: 11px 14px; box-shadow: none; }
.pc-sol-photostat svg { width: 28px; height: 28px; color: var(--pc-green); flex: none; }
.pc-sol-photostat span { font-size: 0.875rem; line-height: 1.25; }
.pc-sol-photostat strong { display: block; margin-top: 3px; font-size: 0.875rem; }
.pc-hero__form .pc-lead { position: absolute; z-index: 4; bottom: -70px; left: -54px; width: 430px; max-width: calc(100% - 20px); }
.pc-hero__form .pc-lead__form { padding: 36px; border: 0; border-radius: var(--pc-radius); box-shadow: 0 28px 62px rgba(12,36,57,.2); }
.pc-hero__form .pc-lead__head { margin-bottom: 0; }
.pc-hero__form .pc-lead__head h2 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.02em; }
.pc-hero__form .pc-lead__progress { margin: 19px 0 36px; border-radius: 0; }
.pc-hero__form .pc-lead__fields { grid-template-columns: 1fr; gap: 14px; }
.pc-hero__form .pc-lead__actions { margin-top: 16px; }
.pc-hero__form .pc-lead__rgpd { margin-top: 28px; }

/* ---- Bandeau de réassurance (4 cartes claires, maquette .trust-strip) ---- */
.pc-sol-trust { background: var(--pc-bg); padding: 18px 0; margin-bottom: 32px; }
.pc-sol-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-block: 0; }
.pc-sol-trust__item { display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px; padding: 10px 15px; min-height: 64px; border: 1px solid rgba(27,42,78,.32); border-radius: 8px; background: #fff; }
.pc-sol-trust__icon { flex: none; }
.pc-sol-trust__icon svg { width: 25px; height: 25px; color: var(--pc-blue); }
.pc-sol-trust__item strong { display: block; color: var(--pc-navy); font-size: 0.875rem; font-weight: 600; line-height: 1.2; }
.pc-sol-trust__item small { display: block; margin-top: 5px; color: var(--pc-text-soft); font-size: 0.875rem; font-weight: 500; line-height: 1.25; }

/* ---- Potentiel : référence + cartes de production (maquette .yield-layout) ---- */
.pc-sol-yield { display: grid; grid-template-columns: .82fr 1.18fr; gap: 0; margin-top: 0; border-block: 1px solid var(--pc-line); }
/* Encart « Référence locale » : carte navy, chiffre en bas (maquette .yield-visual). */
.pc-sol-yield__ref { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 370px; padding: 36px; background: var(--pc-navy); color: #fff; border: 0; border-radius: 8px; box-shadow: none; }
.pc-sol-yield__ref::before { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.11); box-shadow: 0 0 0 50px rgba(255,255,255,.035), 0 0 0 100px rgba(255,255,255,.02); pointer-events: none; top: -85px; right: -55px; width: 250px; height: 250px; }
.pc-sol-yield__ref::after { display: none; }
.pc-sol-yield__ref .pc-sol-yield__icon { position: absolute; top: 12px; right: 28px; color: var(--pc-green); }
.pc-sol-yield__ref .pc-sol-yield__icon svg { width: 78px; height: 78px; stroke-width: 1.1px; }
.pc-sol-yield__ref p { position: relative; margin: 0; color: #9db1c4; font-weight: 400; font-size: 0.875rem; text-transform: uppercase; letter-spacing: .1em; }
.pc-sol-yield__ref strong { position: relative; display: block; margin: 10px 0 3px; font-size: 4.2rem; font-weight: 700; color: #fff; line-height: 1; }
.pc-sol-yield__ref span { position: relative; display: block; color: rgba(255,255,255,.7); font-size: 0.875rem; }
.pc-sol-yield__ref a { position: relative; display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-top: 24px; color: var(--pc-blue); font-weight: 600; font-size: 0.875rem; text-decoration: none; }
.pc-sol-yield__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.pc-sol-yield__cards article { display: flex; flex-direction: column; justify-content: flex-end; min-height: 370px; background: #fff; border: 1px solid var(--pc-line); border-width: 0 0 0 1px; border-top: 2px solid var(--pc-blue); border-radius: 0; padding: 27px; box-shadow: none; }
.pc-sol-yield__cards article span { color: var(--pc-blue); font-weight: 700; font-size: 0.875rem; }
.pc-sol-yield__cards article strong { display: block; margin: 12px 0 4px; font-size: 1.55rem; font-weight: 700; color: var(--pc-navy); }
.pc-sol-yield__cards article p { margin: 0; color: var(--pc-text-soft); font-size: 0.875rem; }
/* Bandeau « Une simulation n'est pas une garantie… » (maquette .info-banner) :
   icône + texte + bouton sur une seule ligne — surcharge de `.pc-sol-note`
   propre à cette section (celui de la section Confiance reste un simple
   encart texte, sans icône ni bouton). */
#potentiel .pc-sol-note { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; background: var(--pc-bg-alt); border: 1px solid #cad7e1; border-radius: 0; padding: 18px 22px; margin: 10px 0 30px; font-size: inherit; color: inherit; }
#potentiel .pc-sol-note__icon { display: flex; color: var(--pc-navy); }
#potentiel .pc-sol-note__icon svg { width: 24px; height: 24px; }
#potentiel .pc-sol-note p { margin: 0; color: #546470; font-size: 0.875rem; }
#potentiel .pc-sol-note .pc-btn { white-space: nowrap; }
/* Page dédiée /potentiel/ : la section n'affiche pas son propre titre
   (with_heading:false, repris par le H1 de l'en-tête de page juste au-dessus)
   — sans quoi le padding-top de `.pc-section` laisse un grand vide blanc avant
   la carte « Référence locale ». L'espace sous le hero (fond ciel) suffit. */
body.page-template-page-potentiel-php #potentiel { padding-top: 0; }
/* Écart voulu entre l'encadré « Une simulation n'est pas une garantie » (fin
   de #potentiel, fond blanc) et « Produire pour mieux consommer » (section
   Bénéfices, fond bleu) : 100px au total, réparti 50px/50px de part et
   d'autre de la frontière des deux sections. */
body.page-template-page-potentiel-php #potentiel { padding-bottom: 50px; }
body.page-template-page-potentiel-php .pc-section:has(.pc-sol-benefits) { padding-top: 50px; }
/* Même cas sur /solutions/ : section rendue sans son propre titre
   (with_heading:false, repris par le H1 du hero au-dessus), mais gardait le
   padding-top de `.pc-section` — grand vide blanc avant les 3 cartes. */
body.page-template-page-solutions-php #solutions { padding-top: 0; }
body.page-template-page-solutions-php .pc-sol-configs { margin-top: 0; }
/* Même cas sur /prix/ : section « Simulation interactive » sans son propre
   titre (with_heading:false), grand vide entre les boutons du hero et
   l'encart (padding-top de section + margin-top du bloc simulateur). */
body.page-template-page-prix-php #prix { padding-top: 0; }
body.page-template-page-prix-php .pc-sol-calc { margin-top: 0; }
/* Écart voulu entre la section Prix (simulateur, fond bleu) et le surtitre
   « Un accompagnement de bout en bout » (section Étapes, fond blanc) : 100px
   au total, réparti 50px/50px de part et d'autre de la frontière. */
body.page-template-page-prix-php #prix { padding-bottom: 50px; }
body.page-template-page-prix-php .pc-section:has(.pc-sol-steps) { padding-top: 50px; }
/* + espacement entre TOUTES les sections de cette page réduit un peu (page
   dédiée uniquement, 5 sections qui s'enchaînent : Réalisations, Confiance,
   Démarches, Zone) — chaque section garde son padding-bottom + le padding-top
   de la suivante s'additionnent, l'écart standard (122/104/76px) devient vite
   très grand cumulé sur autant de transitions. */
body.page-template-page-realisations-php .pc-section { padding: 80px 0; }
/* Écart voulu entre l'encadré de Confiance (« Une simulation n'est pas une
   garantie », fond blanc) et le surtitre de Démarches (« Produire pour mieux
   consommer », fond bleu) : 100px au total, réparti 50px/50px de part et
   d'autre de la frontière des deux sections. */
body.page-template-page-realisations-php .pc-section:has(.pc-sol-pillars) { padding-bottom: 50px; }
body.page-template-page-realisations-php .pc-section:has(.pc-sol-admin) { padding-top: 50px; }
/* Idem avant « Une présence de proximité » (section Zone). */
body.page-template-page-realisations-php #zone-intervention { padding-top: 40px; }

/* ---- Bénéfices : 4 cartes bordées (maquette .four-cards) ---- */
.pc-sol-benefits { grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 2.5rem; background: #fff; border-radius: 12px; overflow: hidden; border-top: 2px solid var(--pc-blue); border-bottom: 1px solid var(--pc-line); }
.pc-sol-benefits .pc-card { border: 0; border-left: 1px solid var(--pc-line); border-radius: 0; background: transparent; box-shadow: none; min-height: 285px; padding: 27px; }
.pc-sol-benefits .pc-card:first-child { border-left: 0; }
.pc-sol-benefits .pc-card h3 { color: var(--pc-navy); font-size: 1.05rem; margin: 0 0 12px; }
.pc-sol-benefits .pc-card p { color: var(--pc-text-soft); font-size: 0.875rem; }

/* ---- Confiance : bande bordée à 4 colonnes (maquette .why-grid) ---- */
.pc-sol-pillars { grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 2.5rem; background: #fff; border-radius: 12px; overflow: hidden; border-top: 2px solid var(--pc-blue); border-bottom: 1px solid var(--pc-line); }
.pc-sol-pillars .pc-card { border: 0; border-right: 1px solid var(--pc-line); border-radius: 0; background: transparent; box-shadow: none; padding: 29px; }
.pc-sol-pillars .pc-card:last-child { border-right: 0; }
.pc-sol-pillars .pc-card h3 { color: var(--pc-navy); font-size: 1.05rem; margin: 0 0 10px; }
.pc-sol-pillars .pc-card p { color: var(--pc-text-soft); font-size: 0.875rem; }
.pc-sol-pillar__mention { display: block; margin-top: .9rem; color: var(--pc-blue); text-transform: uppercase; letter-spacing: .06em; font-size: 0.875rem; font-weight: 700; }

/* ---- Solutions : 3 configurations + comparatif ---- */
.pc-sol-configs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: stretch; margin-top: 2.2rem; border: 1px solid var(--pc-line); }
.pc-sol-config { position: relative; display: flex; flex-direction: column; background: #fff; border: 0; border-width: 0 0 0 1px; border-left: 1px solid var(--pc-line); border-top: 2px solid var(--pc-blue); border-radius: 0; padding: 32px; box-shadow: none; }
.pc-sol-config:first-child { border-left: 0; }
.pc-sol-config--featured { border: 1px solid var(--pc-blue); border-top-width: 2px; box-shadow: 0 18px 40px rgba(20,48,74,.1); transform: translateY(-8px); }
.pc-sol-config__badge { position: absolute; top: 0; right: 25px; left: auto; background: var(--pc-blue); color: #fff; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 7px 10px; border-radius: 0 0 8px 8px; }
.pc-sol-config__name { font-weight: 700; color: var(--pc-blue); text-transform: uppercase; letter-spacing: .08em; font-size: 0.875rem; margin: 0 0 8px; }
.pc-sol-config__power { margin: 0; font-size: 2.5rem; font-weight: 700; color: var(--pc-navy); line-height: 1; letter-spacing: -.05em; }
.pc-sol-config__prod { margin: 0 0 22px; color: var(--pc-blue); font-weight: 700; font-size: 0.875rem; }
.pc-sol-config > p { color: var(--pc-text-soft); font-size: 0.875rem; }
.pc-sol-config ul { list-style: none; margin: auto 0 20px; padding: 21px 0; border-top: 1px solid var(--pc-line); display: grid; gap: 10px; }
.pc-sol-config li { position: relative; padding-left: 1.3rem; color: #52606b; font-size: 0.875rem; }
.pc-sol-config li::before { content: "✓"; position: absolute; left: 0; color: var(--pc-navy); font-weight: 700; }
.pc-sol-config .pc-btn { margin-top: auto; align-self: stretch; text-align: center; }
/* Carte blanche : `.pc-btn--outline` est prévu pour du texte bleu ciel sur
   fond sombre (cf. commentaire de `.pc-help__call` plus haut) — on reprend ici
   les teintes « bouton secondaire » de la charte, comme le hero et l'aide. */
.pc-sol-config .pc-btn--outline { background: var(--pc-btn2-bg); border: 2px solid var(--pc-btn2-line); color: var(--pc-btn2-line); }
.pc-sol-config .pc-btn--outline:hover { background: var(--pc-btn2-bg-hover); color: var(--pc-btn2-line); }
.pc-sol-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--pc-line); border: 1px solid var(--pc-line); border-radius: 12px; overflow: hidden; margin-top: 38px; }
.pc-sol-compare > div { display: flex; align-items: center; gap: 13px; background: var(--pc-bg-alt); padding: 21px; }
.pc-sol-compare__icon { flex: none; color: var(--pc-green-dark); }
.pc-sol-compare__icon svg { width: 25px; height: 25px; }
/* Page dédiée /solutions/ : icônes bleues dans la maquette (le doré est réservé
   aux 3 boutons CTA). L'accueil garde l'orange existant, non modifié. */
body.page-template-page-solutions-php .pc-sol-compare__icon { color: var(--pc-blue); }
.pc-sol-compare > div > span { color: var(--pc-text-soft); font-size: 0.875rem; line-height: 1.45; }
.pc-sol-compare strong { display: block; color: var(--pc-navy); font-size: 0.875rem; }

/* ---- Prix : simulateur (maquette .calculator-card) ---- */
.pc-sol-calc { display: grid; grid-template-columns: 1.45fr .75fr; background: #fff; border: 1px solid #c9d6e0; border-radius: 16px; overflow: hidden; box-shadow: none; margin-top: 2.2rem; }
.pc-sol-calc__fields { display: grid; gap: 27px; padding: 36px; }
.pc-sol-calc__fields h3 { margin: 0; font-size: 1.25rem; }
.pc-sol-calc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.pc-sol-calc label { display: grid; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--pc-navy); }
.pc-sol-calc select { width: 100%; font: inherit; font-size: 0.875rem; padding: .5rem .7rem; border: 1px solid var(--pc-line); border-radius: 1px; background: #fff; }
/* Piste remplie/non remplie en deux couleurs : pas de séparation native
   fiable entre navigateurs, donc dégradé calculé en JS (pc-solaire.js) sur le
   fond de l'input lui-même, pistes natives rendues transparentes. */
.pc-sol-calc__slider input[type="range"] { width: 100%; height: 7px; margin: 8px 0; -webkit-appearance: none; appearance: none; background: linear-gradient(to right, #2e6da4 0%, #eaf2fb 0%); border: 0; border-radius: 999px; outline: none; }
.pc-sol-calc__slider input[type="range"]::-webkit-slider-runnable-track { height: 7px; background: transparent; border: 0; border-radius: 999px; }
.pc-sol-calc__slider input[type="range"]::-moz-range-track { height: 7px; background: transparent; border: 0; border-radius: 999px; }
.pc-sol-calc__slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -4.5px; border: 0; border-radius: 50%; background: #2e6da4; cursor: pointer; }
.pc-sol-calc__slider input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #2e6da4; cursor: pointer; }
.pc-sol-calc__slabel { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin-bottom: 15px; font-size: 0.875rem; color: var(--pc-navy); }
.pc-sol-calc__slabel strong { font-size: .95rem; color: var(--pc-navy); font-family: "Space Grotesk", var(--pc-font); }
.pc-sol-calc__result { display: flex; flex-direction: column; background: var(--pc-navy); color: #fff; padding: 38px; }
.pc-sol-calc__result .pc-overline--light { color: #f5bf94; }
.pc-sol-calc__main { border-bottom: 1px solid rgba(255,255,255,.16); margin: 13px 0 28px; padding-bottom: 27px; }
.pc-sol-calc__main span { display: block; color: rgba(255,255,255,.65); font-size: 0.875rem; }
.pc-sol-calc__main strong { display: block; margin-top: 8px; font-size: 2rem; letter-spacing: -.04em; }
.pc-sol-calc__row { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 15px; color: rgba(255,255,255,.7); font-size: 0.875rem; }
.pc-sol-calc__row b { color: #fff; }
.pc-sol-calc__result .pc-btn { margin-top: 1rem; align-self: flex-start; width: 100%; }
.pc-sol-calc__note { margin: 15px 0 0; color: rgba(255,255,255,.65); font-size: 0.875rem; line-height: 1.55; }
.pc-sol-factors { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 18px; list-style: none; padding: 0; margin: 25px 0 0; }
.pc-sol-factors li { background: transparent; border: 0; border-radius: 0; padding: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 0.875rem; font-weight: 400; color: #52616c; }

/* ---- Étapes (maquette .steps-grid) ---- */
.pc-sol-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; margin-top: 2.6rem; position: relative; }
.pc-sol-steps::before { content: ""; position: absolute; top: 27px; left: 2%; right: 2%; height: 1px; background: var(--pc-line); }
.pc-sol-step { position: relative; padding-top: 72px; }
.pc-sol-step__num { position: absolute; top: 0; left: 0; z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 8px; background: var(--pc-navy); color: #fff; font-weight: 700; font-size: 0.875rem; border: 0; }
.pc-sol-step h3 { margin: 13px 0 9px; font-size: 1.05rem; }
.pc-sol-step p { margin: 0; color: var(--pc-text-soft); font-size: 0.875rem; }

/* ---- Réalisations (maquette .case-section, fond navy) ---- */
.pc-sol-case { display: grid; grid-template-columns: 1.06fr .94fr; gap: 100px; align-items: center; }
.pc-sol-case__gallery { position: relative; min-height: 560px; }
.pc-sol-case__gallery .pc-sol-visuel { position: absolute; margin: 0; background: #213d55; overflow: hidden; }
.pc-sol-case__gallery .pc-sol-visuel--img img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; display: block; filter: saturate(.78) contrast(1.03); }
.pc-sol-case__gallery .pc-sol-visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(27,42,78,.10) 0%, rgba(27,42,78,.18) 55%, rgba(15,26,46,.82) 100%); pointer-events: none; }
.pc-sol-case__gallery .pc-sol-visuel--main { top: 0; left: 0; width: 82%; height: 430px; }
.pc-sol-case__gallery .pc-sol-visuel--detail { right: 0; bottom: 0; left: auto; top: auto; width: 50%; height: 275px; border: 9px solid var(--pc-navy); }
/* Légendes réelles plus longues que la maquette : on les limite à 2 lignes
   pour qu'elles ne débordent jamais dans la zone couverte par le visuel
   secondaire (superposé en bas à droite), sur mobile comme sur desktop. */
.pc-sol-case__gallery figcaption { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 14px; margin-top: 0; color: #fff; font-size: 10px; line-height: 1.45; text-shadow: 0 1px 4px rgba(0,0,0,.55); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pc-sol-case__index { position: absolute; z-index: 2; top: auto; left: 0; bottom: 66px; background: none; color: #f0aa72; font-size: 0.875rem; padding: 0; border-radius: 0; text-transform: uppercase; letter-spacing: .15em; }
.pc-sol-case__copy h2 { color: #fff; max-width: 560px; }
.pc-sol-case__copy > p { color: rgba(255,255,255,.65); }
.pc-sol-case .pc-overline { color: var(--pc-blue); }
.pc-sol-case__data { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; background: transparent; border: 1px solid rgba(255,255,255,.13); border-radius: 0; overflow: hidden; margin: 27px 0; }
.pc-sol-case__data > div { background: transparent; border-bottom: 1px solid rgba(255,255,255,.13); border-right: 1px solid rgba(255,255,255,.13); padding: 16px 18px; }
.pc-sol-case__data span { display: block; color: rgba(255,255,255,.65); font-size: 0.875rem; }
.pc-sol-case__data strong { display: block; margin-top: 4px; color: #fff; font-size: 0.875rem; }
.pc-sol-case__quote { margin: 0; background: var(--pc-navy); border-left: 3px solid var(--pc-green); border-radius: 8px; padding: 18px 20px; font-style: italic; color: #fff; font-size: .88rem; }
.pc-sol-case__quote cite { display: block; margin-top: 9px; font-style: normal; font-size: 0.875rem; color: rgba(255,255,255,.7); }

/* ---- Démarches (maquette .admin-section, fond sky) ---- */
.pc-sol-admin { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: center; }
.pc-sol-update { width: fit-content; margin: 0 0 25px; color: var(--pc-blue); background: rgba(46,109,164,.09); border-radius: 6px; padding: 7px 10px; font-size: 0.875rem; font-weight: 700; }
.pc-sol-admin__intro h2 { margin-bottom: 20px; }
.pc-sol-admin__intro p { color: var(--pc-text-soft); }
.pc-sol-admin__intro a { color: var(--pc-navy); font-weight: 700; font-size: 0.875rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.pc-sol-admin__list { display: grid; gap: 12px; }
.pc-sol-admin__list article { display: flex; align-items: flex-start; gap: 17px; background: #fff; border: 1px solid rgba(20,48,74,.1); border-radius: 11px; padding: 20px; }
.pc-sol-admin__list article svg { flex: none; width: 27px; height: 27px; color: var(--pc-green-dark); }
/* Page dédiée /realisations/ (démarches) : icônes bleues dans la maquette (le
   doré est réservé aux 3 boutons CTA). L'accueil garde l'orange existant. */
body.page-template-page-realisations-php .pc-sol-admin__list article svg { color: var(--pc-blue); }
.pc-sol-admin__list h3 { margin: 0 0 5px; font-size: .91rem; }
.pc-sol-admin__list p { margin: 0; color: var(--pc-text-soft); font-size: 0.875rem; }

/* ---- Zone d'intervention (maquette .area-section, fond paper) ---- */
.pc-sol-area { display: grid; grid-template-columns: .7fr 1.3fr; gap: 85px; align-items: center; }
.pc-sol-area__map { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 360px; margin-inline: auto; border-radius: 50%; background: var(--pc-bg-alt); overflow: hidden; }
.pc-sol-area__ring { position: absolute; border: 1px solid rgba(20,48,74,.12); border-radius: 50%; width: 180px; height: 180px; }
.pc-sol-area__ring--2 { width: 290px; height: 290px; }
.pc-sol-area__pin { z-index: 2; }
.pc-sol-area__pin svg { width: 48px; height: 48px; color: var(--pc-blue); }
.pc-sol-area__map strong { z-index: 2; margin-top: 8px; font-size: 1.3rem; font-family: "Space Grotesk", var(--pc-font); color: var(--pc-navy); }
.pc-sol-area__map small { z-index: 2; color: var(--pc-text-soft); }
/* Pastilles de communes (maquette .town-tags) — surcharge locale de
   `.pc-communes` (classe générique réutilisée telle quelle sur les pages
   locales, dont le style reste inchangé ailleurs). */
.pc-sol-area .pc-communes { margin: 27px 0 0; gap: 9px; }
.pc-sol-area .pc-communes li { background: rgba(46,109,164,.06); border: 1px solid rgba(46,109,164,.35); border-radius: 6px; padding: 8px 12px; font-size: 0.875rem; font-weight: 600; color: var(--pc-blue); }

/* ---- FAQ (maquette .faq-section, fond sky) ---- */
.pc-sol-faq { display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; align-items: start; }
.pc-sol-faq--full { display: block; }
.pc-sol-faq__intro { position: sticky; top: 125px; }
.pc-sol-faq__intro > p:not(.pc-overline) { color: var(--pc-text-soft); }
.pc-sol-faq__intro .pc-btn { margin-top: 1rem; }

/* ---- CTA final (maquette .final-cta-section, navy plein) ---- */
.pc-cta-final { text-align: left; padding: 90px 0; }
.pc-sol-final { display: grid; grid-template-columns: .92fr 1.08fr; gap: 80px; align-items: center; }
.pc-sol-final__copy h2 { color: #fff; }
.pc-sol-final__copy > p { color: rgba(255,255,255,.65); font-size: 1.04rem; }
.pc-sol-final__list { list-style: none; padding: 0; margin: 25px 0 35px; display: grid; gap: 10px; }
.pc-sol-final__list li { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.82); font-size: 0.875rem; }
.pc-sol-final__list li::before { content: "✓"; color: #f3a96e; font-weight: 700; }
.pc-sol-final__form .pc-lead__form { box-shadow: none; border-radius: var(--pc-radius); }

/* ---- Hero des pages dédiées (maquette .hero--page, mêmes réglages que .hero) ---- */
.pc-hero--page { background: var(--pc-bg-alt); text-align: left; padding: 72px 0 88px; }
.pc-hero--page .pc-overline { text-align: left; }
.pc-hero--page h1 { color: var(--pc-navy); }
/* Titres H1 des pages Potentiel / Solutions / Prix (demande explicite) :
   taille fixe plutôt que le clamp() responsive par défaut de h1. */
body.page-template-page-potentiel-php .pc-hero--page h1,
body.page-template-page-solutions-php .pc-hero--page h1,
body.page-template-page-prix-php .pc-hero--page h1 { font-size: 41px; }
.pc-hero--page .pc-hero__lead { color: #58636e; font-size: 1.12rem; line-height: 1.65; max-width: 60ch; margin: 0; }
.pc-hero--page .pc-hero__actions { justify-content: flex-start; margin-top: 1.4rem; }
/* Boutons du hero de page supprimés (demande explicite) sur Potentiel,
   Solutions et Prix. */
body.page-template-page-potentiel-php .pc-hero--page .pc-hero__actions,
body.page-template-page-solutions-php .pc-hero--page .pc-hero__actions,
body.page-template-page-prix-php .pc-hero--page .pc-hero__actions { display: none; }
/* Page /realisations/ : le hero de page (encart fond ciel #eaf2fb — surtitre
   « La preuve par le chantier », titre, chapô, boutons) est supprimé
   visuellement en entier (demande explicite) — le titre/texte de la section
   Réalisations juste en dessous (encart bleu navy) suffit. Le H1 (SEO/lecteurs
   d'écran, une page doit en garder un) reste dans le DOM mais invisible : on
   masque toute la section plutôt que juste certains éléments, pour qu'il ne
   reste aucune trace visuelle (fond, padding) de l'encart. */
body.page-template-page-realisations-php .pc-hero--page {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Page /faq/ (comparée à `Page-FAQ.png`) : même principe — le hero de page
   est redondant avec la colonne intro sticky de la section FAQ elle-même
   (surtitre/titre/chapô/bouton identiques, déjà définis dans le schéma
   `faq`), masqué en entier pour ne garder qu'un H1 accessible/SEO. */
body.page-template-page-faq-php .pc-hero--page {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Liste de questions en style plat (traits fins, sans carte/ombre), comme la
   capture — scopé à cette page : `.pc-faq__item` est réutilisé ailleurs
   (accueil, pages locales/services) en style carte, à ne pas casser. */
body.page-template-page-faq-php .pc-faq__item {
  background: transparent; border-radius: 0; box-shadow: none; margin-top: 0; padding: 0;
  border-bottom: 1px solid var(--pc-line);
}
body.page-template-page-faq-php .pc-faq__item:first-child { border-top: 1px solid var(--pc-line); }
body.page-template-page-faq-php .pc-faq__item summary { padding: 1.1rem 0; }
body.page-template-page-faq-php .pc-faq__item summary::after {
  content: "⌄"; font-weight: 400; color: var(--pc-blue); transition: transform .15s;
}
body.page-template-page-faq-php .pc-faq__item[open] summary::after { transform: translateY(-50%) rotate(180deg); }
/* Page /prix/ : titre + chapô du hero de page en 2 colonnes (comme les
   headings « split » des sections plus bas), surtitre et boutons pleine
   largeur au-dessus/dessous. */
body.page-template-page-prix-php .pc-hero--page .pc-container { display: grid; grid-template-columns: 65fr 35fr; column-gap: 60px; align-items: end; }
body.page-template-page-prix-php .pc-hero--page .pc-overline,
body.page-template-page-prix-php .pc-hero--page .pc-hero__actions { grid-column: 1 / -1; }
body.page-template-page-prix-php .pc-hero--page h1 { margin-bottom: 0; }
@media (max-width: 820px) {
  body.page-template-page-prix-php .pc-hero--page .pc-container { grid-template-columns: 1fr; }
}

/* ---- Responsive : mêmes seuils que la maquette (1080 / 820 / 560) ---- */
@media (max-width: 1080px) {
  .pc-section { padding: 104px 0; }
  /* Bug trouvé via `Page-potentiel-mobile.png` : `.pc-sol-heading--split`
     (titre à gauche / chapô à droite, utilisé par Bénéfices, Solutions,
     Prix…) restait en grille 2 colonnes à toutes les largeurs — sur mobile,
     titre et chapô se retrouvaient chacun écrasés dans une colonne étroite
     illisible. Repasse en 1 colonne empilée. */
  .pc-sol-heading--split { grid-template-columns: 1fr; column-gap: 0; row-gap: 16px; }
  body.page-template-page-realisations-php .pc-section { padding: 68px 0; }
  body.page-template-page-realisations-php #zone-intervention { padding-top: 32px; }
  .pc-hero--sol { min-height: 0; padding: 78px 0 90px; }
  .pc-hero--sol .pc-hero__grid { grid-template-columns: .82fr 1.18fr; gap: 38px; }
  .pc-hero--sol .pc-hero__grid > .pc-hero__col:first-child { padding-top: 0; }
  .pc-hero--sol .pc-hero__form { min-height: 0; }
  .pc-hero__form .pc-sol-visuel--hero { position: relative; inset: auto; height: 410px; width: 94%; border-radius: 18px; box-shadow: 0 25px 70px rgba(20,48,74,.18); }
  .pc-hero__form .pc-sol-visuel--hero img { filter: saturate(.78) contrast(.98); }
  .pc-sol-photostat { top: 20px; right: auto; left: 20px; border-radius: 8px; box-shadow: 0 8px 24px rgba(20,48,74,.15); }
  .pc-hero__form .pc-lead { position: relative; bottom: auto; left: auto; width: 82%; max-width: none; }
  .pc-hero__form .pc-lead__form { border: 1px solid var(--pc-line); border-radius: 14px; box-shadow: 0 25px 65px rgba(20,48,74,.17); padding: 36px; }
  .pc-sol-yield { grid-template-columns: .75fr 1.25fr; gap: 22px; border-block: 0; }
  .pc-sol-yield__ref { min-height: 330px; }
  .pc-sol-yield__cards { gap: 14px; }
  .pc-sol-yield__cards article { min-height: 330px; border-width: 1px; border-top-width: 3px; border-radius: 12px; box-shadow: 0 9px 30px rgba(20,48,74,.05); }
  #potentiel .pc-sol-note { border-radius: 12px; }
  .pc-sol-benefits { grid-template-columns: repeat(2, 1fr); gap: 16px; border-top: 0; border-bottom: 0; border-radius: 0; overflow: visible; background: transparent; }
  .pc-sol-benefits .pc-card { border: 1px solid var(--pc-line); border-top: 3px solid var(--pc-navy); border-radius: 12px; background: var(--pc-bg); box-shadow: 0 9px 30px rgba(20,48,74,.05); min-height: 260px; }
  .pc-sol-pillars { grid-template-columns: repeat(2, 1fr); }
  .pc-sol-pillars .pc-card:nth-child(2) { border-right: 0; }
  .pc-sol-pillars .pc-card:nth-child(-n+2) { border-bottom: 1px solid var(--pc-line); }
  .pc-sol-steps { grid-template-columns: repeat(3, 1fr); }
  .pc-sol-steps::before { display: none; }
  .pc-sol-calc { grid-template-columns: 1fr; }
  .pc-sol-calc__result { min-height: 410px; }
}
@media (max-width: 820px) {
  .pc-section { padding: 76px 0; }
  body.page-template-page-realisations-php .pc-section { padding: 50px 0; }
  body.page-template-page-realisations-php #zone-intervention { padding-top: 24px; }
  .pc-hero--sol { padding: 54px 0 70px; }
  .pc-hero--sol .pc-hero__grid { grid-template-columns: 1fr; gap: 38px; }
  .pc-hero--sol .pc-hero__form { min-height: 0; }
  /* Sur tablette, les deux boutons du hero (« Recevoir mon étude solaire
     gratuite » + « Appeler un conseiller ») ne tenaient plus côte à côte sans
     déborder : on les empile, le bouton d'appel sous le CTA principal. */
  .pc-hero--sol .pc-hero__actions { display: grid; }
  .pc-hero--sol .pc-hero__actions > * { width: 100%; }
  .pc-hero__form .pc-sol-visuel--hero { position: relative; inset: auto; width: 100%; height: 350px; }
  .pc-hero__form .pc-lead { width: 100%; }
  .pc-sol-trust__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pc-sol-yield { grid-template-columns: 1fr; gap: 42px; }
  .pc-sol-yield__cards, .pc-sol-configs, .pc-sol-compare, .pc-sol-case__data, .pc-sol-calc__grid { grid-template-columns: 1fr; }
  .pc-sol-yield__cards article { min-height: 170px; }
  #potentiel .pc-sol-note { grid-template-columns: auto 1fr; }
  #potentiel .pc-sol-note .pc-btn { grid-column: 1 / -1; }
  .pc-sol-configs { border: 0; }
  .pc-sol-config { border: 1px solid var(--pc-line); border-top: 3px solid var(--pc-navy); border-radius: 13px; box-shadow: 0 12px 35px rgba(20,48,74,.06); }
  .pc-sol-config:first-child { border-left: 1px solid var(--pc-line); }
  .pc-sol-config--featured { border-color: var(--pc-blue); transform: none; }
  .pc-sol-steps { grid-template-columns: 1fr 1fr; }
  .pc-sol-case { grid-template-columns: 1fr; gap: 42px; }
  .pc-sol-case__gallery { min-height: 430px; }
  .pc-sol-case__gallery .pc-sol-visuel--main { width: 90%; height: 330px; }
  .pc-sol-case__gallery .pc-sol-visuel--detail { height: 205px; }
  .pc-sol-case__index { bottom: 36px; }
  .pc-sol-admin { grid-template-columns: 1fr; gap: 42px; }
  .pc-sol-area { grid-template-columns: 1fr; gap: 42px; }
  .pc-sol-area__map { width: min(360px, 100%); height: 360px; }
  .pc-sol-faq { grid-template-columns: 1fr; gap: 42px; }
  .pc-sol-faq__intro { position: static; }
  .pc-sol-final { grid-template-columns: 1fr; gap: 42px; }
}
@media (max-width: 560px) {
  .pc-hero__form .pc-sol-visuel--hero { height: 290px; }
  .pc-sol-photostat { padding: 8px 10px; top: 12px; left: 12px; }
  .pc-hero__form .pc-lead__form { padding: 22px; }
  .pc-sol-trust__grid { grid-template-columns: 1fr; }
  .pc-sol-benefits, .pc-sol-pillars, .pc-sol-steps, .pc-sol-calc__grid { grid-template-columns: 1fr; }
  .pc-sol-pillars .pc-card { border-right: 0; border-bottom: 1px solid var(--pc-line); }
  .pc-sol-pillars .pc-card:last-child { border-bottom: 0; }
  .pc-sol-yield__ref { min-height: 310px; }
  .pc-sol-yield__ref strong { font-size: 3.4rem; }
  .pc-sol-calc__fields, .pc-sol-calc__result { padding: 25px; }
  .pc-sol-case__data { grid-template-columns: 1fr; }
  .pc-sol-case__data > div { border-right: 0; }
  .pc-sol-area__map { height: 310px; }
  .pc-sol-final__form .pc-lead__form { min-height: 520px; }
}