/*
Theme Name: Blocksy Child — Protège & Moi
Template:   blocksy
Version:    1.28
Author:     Arneys Studio

Historique des versions : voir CHANGELOG.md (hors WordPress).

Le cache navigateur se casse tout seul : functions.php passe filemtime()
en numéro de version à l'enqueue. Ce « Version » ci-dessus ne sert plus
qu'à identifier le thème — inutile de l'incrémenter à chaque retouche.

Plan du fichier
  1. Fondations      variables, resets, conteneurs
  2. Typographie     titres, eyebrows, boutons
  3. Composants      cartes, listes, accordéons, marquee, tooltips, mentions réglementaires
  4. Blocs signature pm-mot, pm-infog, pm-parcours, pm-smart, pm-plan,
                     pm-meth, pm-anim, pm-sign
  5. Zones — topbar, méga-menu, menu mobile, footer
  6. Pages           accueil, à propos, contact, particulier, lexique,
                     plan du site, devis, légales, FAQ
  7. Responsive      paliers globaux
*/


/* ═══════════════════════════════════════════════════════════════
   1. FONDATIONS
═══════════════════════════════════════════════════════════════ */

:root{
  --pm-marine:#3e4c5c;--pm-or:#bc9d45;--pm-or-light:#d4b86a;
  --pm-beige:#f3f1eb;--pm-marine-dark:#2a3340;--pm-marine-light:#5a6e82;
  --pm-or-pale:rgba(188,157,69,.12);

  /* Gouttière latérale unique, fluide et mobile-first.
     20px sur petit écran, 64px au maximum. Portée par les SECTIONS,
     jamais par les conteneurs : la largeur de contenu reste 1140px
     pleins, quel que soit le mode de construction de la page. */
  --pm-gutter:clamp(20px,5vw,64px);

  /* Hauteur du header collant Blocksy. Sert au décalage des ancres
     ET au calage de la barre du Lexique : une seule source de vérité. */
  --pm-header:110px;
}
@media(max-width:781px){:root{--pm-header:80px;}}

/* ⚠️ Blog à venir : .entry-content{padding:0} est global. Si les articles
   doivent garder une gouttière de lecture, remplacer par
   body:not(.single) .entry-content{padding:0!important;} */
.entry-content{padding:0!important;}
.wp-block-group .wp-block-html p{margin-left:0!important;text-align:left!important;}
.wp-block-group .wp-block-paragraph{margin-inline:0!important;}

.is-layout-constrained .wp-block-paragraph,
.is-layout-constrained .wp-block-heading{max-width:none!important;}

/* Fusion des variantes .entry-content > … (child theme) et
   .wp-site-blocks > … (ex-CSS additionnel) — zéro duplication. */
.entry-content > .wp-block-group.alignfull,
.entry-content > .wp-block-cover.alignfull,
.entry-content > .wp-block-html,
.wp-site-blocks > .wp-block-group.alignfull,
.wp-site-blocks > .wp-block-cover.alignfull{margin-top:0!important;margin-bottom:0!important;}
.wp-block-columns{margin-top:0!important;margin-bottom:0!important;}
.entry-content > * + *{margin-top:0!important;}

/* Les ancres internes (sommaire « 3 piliers ») ne passent pas sous
   le header collant de Blocksy Companion. */
html{scroll-padding-top:var(--pm-header);}

/* Équilibrage des lignes (anti-orphelines).
   Appliqué d'office à TOUS les titres : c'était jusqu'ici une classe
   à poser bloc par bloc, donc oubliée une fois sur deux. La classe
   .pm-balance reste disponible pour les paragraphes courts. */
.entry-content h1,.entry-content h2,.entry-content h3,
.pm-balance{text-wrap:balance;hyphens:none;}

/* Conteneurs et sections des pages construites en HTML custom */
.pm-hero{background:#3e4c5c;padding-block:80px 64px;position:relative;overflow:hidden;}
.pm-s-beige{background:#f3f1eb;padding-block:72px;}
.pm-s-white{background:#fff;padding-block:72px;}
.pm-s-marine{background:#3e4c5c;padding-block:72px;}
/* Quatrième fond de section — la CTA dorée de Particulier. */
.pm-s-or{background:#f3cb5f;padding-block:72px;}
/* Modificateurs de rythme vertical — l'échelle figée compte quatre
   gabarits de section en plus du standard 72/72. Ils s'ajoutent à
   .pm-s-* et n'existent pas seuls. */
.pm-s--logos{padding-block:56px;}
.pm-s--cta{padding-block:64px 56px;}
.pm-s--adjacent{padding-block:32px 72px;}
/* Les conteneurs ne portent QUE la largeur. La gouttière est sur la
   section parente (voir la règle universelle juste dessous) : sans ça,
   avec box-sizing:border-box, un padding latéral se déduirait des
   1140px et rétrécirait le contenu. */
.pm-inner{max-width:1140px;margin-inline:auto;}
.pm-inner-sm{max-width:880px;margin-inline:auto;}

/* ── Gouttière universelle ─────────────────────────────────────
   Une seule règle pour les deux façons dont le site est construit :
   les sections en classes (.pm-s-*) et les sections Gutenberg en
   styles inline (.alignfull). Ces dernières ne posent en inline que
   padding-top et padding-bottom : padding-inline reste donc libre.
   Résultat : toutes les pages ont la même respiration latérale. */
.pm-hero,.pm-s-beige,.pm-s-white,.pm-s-marine,.pm-s-or,
.entry-content > .wp-block-group.alignfull,
.entry-content > .wp-block-cover.alignfull,
.wp-site-blocks > .wp-block-group.alignfull,
.wp-site-blocks > .wp-block-cover.alignfull{
  padding-inline:var(--pm-gutter);
}

/* Section qui reçoit une fiche-pont : son padding haut doit laisser
   passer la part de la fiche qui déborde (-148px de marge basse). */
.pm-s--pont{padding-block:200px 72px;}


/* ═══════════════════════════════════════════════════════════════
   2. TYPOGRAPHIE & BOUTONS
═══════════════════════════════════════════════════════════════ */

.pm-eye{font-size:0.75rem!important;text-transform:uppercase!important;letter-spacing:.16em!important;color:#7d6018!important;font-weight:700!important;margin-bottom:16px!important;}
/* sur fond marine : #d4b86a — #bc9d45 échoue au contraste AA */
.pm-eye-w{font-size:0.75rem!important;text-transform:uppercase!important;letter-spacing:.16em!important;color:#d4b86a!important;font-weight:700!important;margin-bottom:16px!important;}
/* Exception assumee : l'eyebrow du hero reste a 13px */
.pm-hero .pm-eye-w,
.pm-hero-cover .pm-eye-w{font-size:0.8125rem!important;}

.pm-hero h1{font-family:'DM Serif Display',serif!important;font-size:clamp(1.75rem,4vw,2.875rem)!important;color:#f3f1eb!important;line-height:1.08!important;letter-spacing:-.02em!important;}
/* mot-clé doré du H1 sur marine : #f3cb5f (AA) */
.pm-hero h1 em{color:#f3cb5f!important;font-style:italic!important;}

/* Le hero de l'accueil est un wp:cover (.pm-hero-cover), pas un
   .pm-hero : aucune des règles de hero ne l'atteignait, et tout son
   habillage vivait en inline dans le markup — treize font-size en px
   sur la page. Bloc séparé plutôt que sélecteur ajouté au-dessus : le
   titre est plus long et l'image de fond charge la lecture, donc corps
   plus petit (26→40 px) et interligne plus ample que les autres heros.
   Le mot-clé doré, lui, passe par .hero-word et son soulignement animé
   (§ Hero de l'accueil, plus bas) et non par le em de .pm-hero h1. */
.pm-hero-cover h1{
  font-family:'DM Serif Display',serif!important;
  font-size:clamp(1.625rem,3.4vw,2.5rem)!important;
  color:#f3f1eb!important;line-height:1.22!important;
  letter-spacing:-.02em!important;font-weight:400!important;
}

/* DM Serif est réservé au H1 du hero ; les H2 sont en Overpass */
.pm-h2{font-family:'Overpass',sans-serif!important;font-weight:700!important;font-size:clamp(1.625rem,3vw,2.25rem)!important;color:#3e4c5c!important;line-height:1.2!important;}
.pm-h2-w{font-family:'Overpass',sans-serif!important;font-weight:700!important;font-size:clamp(1.625rem,3vw,2.25rem)!important;color:#f3f1eb!important;line-height:1.2!important;}

/* Titre de troisième niveau — les piliers des pages produit. */
.pm-h3{
  font-family:'Overpass',sans-serif;font-weight:700;
  font-size:clamp(1.25rem,2.4vw,1.625rem);
  color:#3e4c5c;line-height:1.25;margin:8px 0 4px;
}
/* Sa ligne d'accroche, en italique doré. */
.pm-h3-sub{font-size:0.875rem;font-weight:300;font-style:italic;color:#7d6018;margin:0 0 24px;}

/* Liens dans le texte courant. Chaque occurrence portait jusqu'ici sa
   couleur en inline. Écrit ici, avant les composants : les règles de
   §3 comme .pm-card-link a l'emportent sans effort, grâce au :where()
   qui ramène la spécificité au minimum. */
:where(.pm-inner,.pm-inner-sm) :where(p,li) a{
  color:#7d6018;text-decoration:underline;text-underline-offset:2px;
}
.pm-s-marine :where(p,li) a,
.pm-hero :where(p,li) a,
.pm-hero-cover :where(p,li) a{color:#f3cb5f;}

/* Sur fond doré, le doré du thème serait illisible : #7d6018 sur #f3cb5f
   donne 4,7:1. */
.pm-s-or :where(p,li) a{color:#7d6018;}

/* L'eyebrow de la CTA finale, sur le fond doré des seize pages.
   .pm-eye est en #7d6018, qui ne donne que 3,8:1 sur #f3cb5f — sous le
   seuil AA de 4,5, et d'autant plus pénalisant qu'il s'agit de capitales
   de 12px très espacées. Le marine foncé monte à 8,21:1.
   L'eyebrow reste distinct du texte courant, qui a la même couleur, par
   son corps, sa graisse 700, ses capitales et son interlettrage.
   Sélecteur descendant plutôt qu'une classe dédiée : la section décide de
   l'apparence, le markup n'a rien à porter. */
.pm-s-or .pm-eye{color:#2a3340!important;}

/* SURVOL — il n'était défini nulle part, donc c'est la couleur d'accent
   de Blocksy qui s'appliquait, dorée elle aussi : dans une section
   .pm-s-or, le lien survolé passait doré sur doré et disparaissait.
   Le focus est traité avec le survol : au clavier, un lien qui change
   de couleur doit le faire aussi. */
.entry-content :where(.pm-inner,.pm-inner-sm) :where(p,li) a:hover,
.entry-content :where(.pm-inner,.pm-inner-sm) :where(p,li) a:focus-visible{color:#2a3340;}
.pm-s-marine :where(p,li) a:hover,
.pm-hero :where(p,li) a:hover,
.pm-hero-cover :where(p,li) a:hover,
.pm-s-marine :where(p,li) a:focus-visible,
.pm-hero :where(p,li) a:focus-visible,
.pm-hero-cover :where(p,li) a:focus-visible{color:#f3f1eb;}
.pm-s-or :where(p,li) a:hover,
.pm-s-or :where(p,li) a:focus-visible{color:#2a3340;}

.entry-content p,
.entry-content li,
.wp-block-paragraph,
.wp-block-list li{letter-spacing:0.4px;}

/* Texte courant sur fond sombre.
   La taille et la couleur par défaut du texte sont dans theme.json
   (1rem / #5a6e82) : WordPress les écrit sans spécificité, donc les
   classes de composant les emportent sans effort. theme.json ne sait
   en revanche pas conditionner une couleur au fond de la section —
   c'est le rôle des trois règles ci-dessous.
   Beige à 85% sur marine = 6,15:1, AA. */
/* Le :where() ramène la spécificité à (0,1,0), celle d'une classe de
   composant. Toute règle de composant écrite plus bas l'emporte donc
   naturellement : une carte blanche posée sur une section marine garde
   son texte foncé, sans exception à écrire pour chacune. */
/* .pm-hero-cover inclus : sans lui, le lead du hero de l'accueil sortait
   en #5a6e82 (valeur theme.json) sur #2a3340, soit 2,1:1 — illisible. */
.pm-hero :where(p,li),
.pm-hero-cover :where(p,li),
.pm-s-marine :where(p,li){color:rgba(243,241,235,.85);}
/* Sur fond doré, le texte repasse en marine foncé : #5a6e82 n'y tient
   pas le contraste. #2a3340 sur #f3cb5f donne 9,4:1. */
.pm-s-or :where(p,li){color:#2a3340;}

.entry-content p.has-text-align-center{
  max-width:58ch;margin-left:auto;margin-right:auto;
}


/* Boutons natifs Gutenberg — couleurs par défaut de la charte.
   Le :not([style*="background-color"]) est indispensable : sans lui, le
   !important écrasait la couleur choisie bloc par bloc dans l'éditeur.
   Un bouton marine posé sur une CTA dorée redevenait doré — donc
   invisible. Les boutons qui portent leur propre fond gardent la main. */
.wp-block-button__link:not([style*="background-color"]),
.wp-element-button:not([style*="background-color"]){
  background-color:#f3cb5f!important;color:#2a3340!important;
}
.wp-block-button__link:not([style*="background-color"]):hover,
.wp-element-button:not([style*="background-color"]):hover{
  background-color:#ddb54a!important;color:#2a3340!important;
}
/* Forme et animation : valables pour tous les boutons, quelle que soit
   leur couleur. */
.wp-block-button__link,
.wp-element-button{
  border-radius:4px!important;font-weight:700!important;border:none!important;
  transition:.25s ease!important;
}
.wp-block-button__link:hover,
.wp-element-button:hover{transform:translateY(-1px);}

.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent!important;color:#f3f1eb!important;
  border:1.5px solid rgba(243,241,235,.55)!important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{border-color:#f0d98a!important;color:#f0d98a!important;}

/* Variante sur fond clair : le sélecteur exclut les groupes marine */
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-group:not([style*="background-color:#3e4c5c"]):not([style*="background-color:#2a3340"]) .wp-block-button.is-style-outline .wp-block-button__link{
  color:#2a3340!important;border:2px solid rgba(42,51,64,.55)!important;
}
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-group:not([style*="background-color:#3e4c5c"]):not([style*="background-color:#2a3340"]) .wp-block-button.is-style-outline .wp-block-button__link:hover{
  border-color:#2a3340!important;color:#2a3340!important;
}

/* Variantes sur fond sombre. La couleur des titres vient de theme.json
   (#3e4c5c, sans spécificité) : sans .pm-h3-w, un h3 posé sur marine a
   exactement la couleur de son fond et disparaît. Pour l'accroche,
   #d4b86a remplace le #7d6018 de .pm-h3-sub, qui n'y tient pas l'AA. */
.pm-h3-w{
  font-family:'Overpass',sans-serif;font-weight:700;
  font-size:clamp(1.25rem,2.4vw,1.625rem);
  color:#f3f1eb;line-height:1.25;margin:8px 0 4px;
}
.pm-h3-sub-w{font-size:0.875rem;font-weight:300;font-style:italic;color:#d4b86a;margin:0 0 24px;}

/* Sur fond sombre, le #5a6e82 tombe à 1,4:1. Sélecteur descendant
   (0,2,0) plutôt qu'une classe dédiée : il gagne quel que soit son
   rang dans la feuille, et le markup n'a rien à porter. Même logique
   que le :where() qui adapte les paragraphes au fond de section. */
.pm-s-marine .pm-tothaut{color:rgba(243,241,235,.8);}
.pm-s-marine .pm-tothaut:hover,
.pm-s-marine .pm-tothaut:focus-visible{color:#f3f1eb;}

/* ── Boutons custom (CTA des pages) ─────────────────────────
   Trois variantes, deux écritures acceptées :
   · lien brut  <a class="pm-btn-or">            (pages pas encore migrées)
   · wp:button  <div class="wp-block-button pm-btn-or"><a class="wp-block-button__link">

   ⚠️ Le :not(.wp-block-button) est indispensable. Sans lui, sur un
   wp:button les DEUX branches s'appliquent — le conteneur et le lien —
   et le bouton s'affiche encadré deux fois.

   ⚠️ Ce bloc doit rester APRÈS les boutons natifs Gutenberg : à
   spécificité égale, c'est la dernière règle écrite qui gagne.

   ⚠️ Chaque :hover doit redéclarer TOUTES les propriétés que la règle
   native pose au survol — fond ET couleur. Celle qu'on oublie survit :
   c'est ainsi qu'on a obtenu un texte doré sur fond doré, puis un
   texte marine sur fond marine. */
.pm-btn-or:not(.wp-block-button),
.pm-btn-or .wp-block-button__link{
  background:#f3cb5f!important;color:#2a3340!important;border-radius:4px!important;
  font-size:1rem!important;font-weight:700!important;padding:14px 28px!important;
  border:none!important;display:inline-block!important;text-decoration:none!important;
}
.pm-btn-or:not(.wp-block-button):hover,
.pm-btn-or .wp-block-button__link:hover{background:#d4b86a!important;color:#2a3340!important;}

.pm-btn-outline:not(.wp-block-button),
.pm-btn-outline .wp-block-button__link{
  background:transparent!important;color:#f3f1eb!important;
  border:1.5px solid rgba(243,241,235,.6)!important;border-radius:4px!important;
  font-size:1rem!important;font-weight:500!important;padding:13px 26px!important;
  display:inline-block!important;text-decoration:none!important;
}
.pm-btn-outline:not(.wp-block-button):hover,
.pm-btn-outline .wp-block-button__link:hover{
  background:transparent!important;
  border-color:#d4b86a!important;color:#d4b86a!important;
}

.pm-btn-marine:not(.wp-block-button),
.pm-btn-marine .wp-block-button__link{
  background:#3e4c5c!important;color:#f3f1eb!important;border-radius:4px!important;
  font-size:1rem!important;font-weight:700!important;padding:14px 28px!important;
  display:inline-block!important;text-decoration:none!important;
}
.pm-btn-marine:not(.wp-block-button):hover,
.pm-btn-marine .wp-block-button__link:hover{background:#2a3340!important;color:#f3f1eb!important;}

/* Contour sur fond clair — les CTA dorées. Le .pm-btn-outline standard
   porte un filet et un texte clairs, illisibles sur #f3cb5f. */
.pm-btn-outline-dark:not(.wp-block-button),
.pm-btn-outline-dark .wp-block-button__link{
  background:transparent!important;color:#2a3340!important;
  border:2px solid rgba(42,51,64,.6)!important;border-radius:4px!important;
  font-size:1rem!important;font-weight:600!important;padding:13px 26px!important;
  display:inline-block!important;text-decoration:none!important;
}
.pm-btn-outline-dark:not(.wp-block-button):hover,
.pm-btn-outline-dark .wp-block-button__link:hover{
  background:transparent!important;
  border-color:#2a3340!important;color:#2a3340!important;
}

/* Bloc de boutons détaché de ce qui précède. Le !important est
   nécessaire : .entry-content > * + * {margin-top:0!important} de §1
   écrase toute marge haute posée sur un enfant direct, qu'elle soit
   inline ou en classe simple. Troisième occurrence de ce piège :
   trustbar, pastilles, et maintenant ce bouton. */
.pm-cta-detach{margin-top:56px!important;}

/* Focus clavier — le contour doit rester visible sur fond clair ET sur
   marine, d'où deux couleurs. */
.pm-btn-or:not(.wp-block-button):focus-visible,
.pm-btn-or .wp-block-button__link:focus-visible,
.pm-btn-marine:not(.wp-block-button):focus-visible,
.pm-btn-marine .wp-block-button__link:focus-visible{outline:2px solid #7d6018;outline-offset:3px;}
.pm-btn-outline:not(.wp-block-button):focus-visible,
.pm-btn-outline .wp-block-button__link:focus-visible{outline:2px solid #f3cb5f;outline-offset:3px;}
.pm-btn-outline-dark:not(.wp-block-button):focus-visible,
.pm-btn-outline-dark .wp-block-button__link:focus-visible{outline:2px solid #2a3340;outline-offset:3px;}

/* ── Liens ouvrant un nouvel onglet ─────────────────────────
   Signal visuel automatique. L'icône est un masque, pas du texte :
   elle n'est jamais annoncée par les lecteurs d'écran, qui reçoivent
   déjà l'information par l'aria-label posé au rendu (functions.php §6).
   Exclusion : les liens sociaux du footer, sans libellé texte. */
a[target="_blank"]:not(.pm-foot-social a)::after{
  content:"";display:inline-block;
  width:.72em;height:.72em;margin-left:.4em;
  background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7M9 7h8v8'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7M9 7h8v8'/></svg>");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
}


/* ═══════════════════════════════════════════════════════════════
   3. COMPOSANTS
═══════════════════════════════════════════════════════════════ */

/* ── Cartes ─────────────────────────────────────────────────── */
.pm-card{background:#fff;border:1px solid rgba(62,76,92,.1);border-radius:4px;padding:28px 22px;display:block;text-decoration:none;transition:box-shadow .2s,transform .18s;}
.pm-card:hover{box-shadow:0 6px 24px rgba(62,76,92,.12);transform:translateY(-3px);}
/* La carte est désormais un wp:group : le dernier enfant ne doit pas
   ajouter sa marge basse au padding de la carte. */
.pm-card > *:last-child{margin-bottom:0;}
/* Variante « filet doré » — les cartes de l'accueil, qui portent un
   liseré à gauche plutôt qu'un contour complet, et ne se soulèvent pas
   au survol : leur lien est à l'intérieur, la carte n'est pas cliquable. */
.pm-card--bar{border:none;border-left:3px solid #bc9d45;padding:26px 24px;}
.pm-card--bar:hover{box-shadow:none;transform:none;}
/* Second et troisième filets — la couleur distingue les groupes :
   doré pour les profils, gris-bleu pour les besoins, marine pour les
   responsabilités. */
.pm-card--bar-bleu{border-left-color:#5a6e82;}
.pm-card--bar-marine{border-left-color:#3e4c5c;}
/* Quatrième filet — hors code des piliers. L'or clair est l'accent des
   fonds sombres : il signale le risque cyber, transversal aux trois
   piliers, sans se confondre avec l'un d'eux. */
.pm-card--bar-clair{border-left-color:#f3cb5f;}
/* Variante dense — les grilles de garanties, où les cartes sont
   nombreuses et courtes. Titre au corps de texte, padding réduit. */
.pm-card--compact{padding:24px 20px;}
.pm-card--compact .pm-card-title{font-size:1rem;}
.pm-card-ico{width:40px;height:40px;border-radius:50%;background:rgba(188,157,69,.12);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.pm-card-cat{font-size:0.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#7d6018;margin-bottom:6px;}
.pm-card-title{font-family:'Overpass',sans-serif;font-weight:700;font-size:1.125rem;color:#3e4c5c;margin-top:0;margin-bottom:8px;line-height:1.2;}
.pm-card-desc{font-size:0.875rem;color:#5a6e82;font-weight:300;line-height:1.55;margin-bottom:16px;}
.pm-card-link{font-size:0.875rem;font-weight:600;color:#7d6018;}
/* Le lien de carte hérite de la couleur du paragraphe qui le porte,
   sinon il prend la couleur de lien du thème et casse la charte. */
.pm-card-link a{color:inherit;text-decoration:underline;}

/* Grilles de cartes — largeur minimale de colonne, jamais de nombre
   fixe : le nombre de colonnes se déduit de la place disponible.
   Le min() est indispensable : sans lui, une colonne de 460px reste
   à 460px dans un conteneur de 320px et déborde à droite. Il plafonne
   le minimum à la largeur réellement disponible. */
.pm-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}
.pm-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));}

/* Pastilles de service — page Pro / Indé. Non cliquables : ce sont des
   mentions, pas des filtres. Rayon 4px comme les cartes, plutôt que le
   20px d'origine qui imitait un bouton et créait une attente déçue. */
.pm-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;}
.pm-tag{
  background:#f3f1eb;border:1px solid rgba(62,76,92,.12);border-radius:4px;
  padding:8px 16px;
  font-family:'Overpass',sans-serif;font-size:0.8125rem;font-weight:300;color:#3e4c5c;
}

/* Lien texte autonome — souligné discret plutôt que bouton. Employé
   quand l'action est secondaire : « Découvrir ma méthode SMART » ne
   doit pas peser autant que « Prendre rendez-vous ». */
.pm-link{
  display:inline-block;
  font-family:'Overpass',sans-serif;
  font-size:0.875rem;font-weight:600;color:#3e4c5c;
  text-decoration:none;
  border-bottom:1px solid rgba(62,76,92,.3);
  padding-bottom:2px;
}
.pm-link:hover{color:#7d6018;border-bottom-color:#7d6018;}
.pm-link:focus-visible{outline:2px solid #7d6018;outline-offset:3px;}
/* Sur fond sombre, le libellé (#3e4c5c) et son filet ont exactement la
   couleur du fond : le lien disparaît. Sélecteur descendant plutôt que
   classe .pm-link-w — la spécificité (0,2,0) gagne quel que soit son
   rang dans la feuille, et le markup n'a rien à porter.
   #f3cb5f sur #3e4c5c donne 7,1:1. */
.pm-s-marine .pm-link{color:#f3cb5f;border-bottom-color:rgba(243,203,95,.4);}
.pm-s-marine .pm-link:hover{color:#f3f1eb;border-bottom-color:#f3f1eb;}
.pm-s-marine .pm-link:focus-visible{outline:2px solid #f3cb5f;outline-offset:3px;}

/* Lien vers les avis Google, sous les témoignages. Reste en wp:html :
   le bloc paragraphe ne conserve ni aria-label ni aria-hidden sur un
   span à l'enregistrement, et les étoiles doivent être masquées aux
   lecteurs d'écran — sinon elles sont épelées une à une. */
.pm-avis{text-align:center;margin-top:32px;}
.pm-avis__link{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Overpass',sans-serif;font-size:0.875rem;font-weight:600;
  color:#7d6018;text-decoration:none;
}
.pm-avis__link:hover{text-decoration:underline;}
.pm-avis__link:focus-visible{outline:2px solid #7d6018;outline-offset:3px;border-radius:2px;}
.pm-avis__stars{letter-spacing:2px;font-size:0.9375rem;}

/* Chevauchement du bandeau de confiance sur le hero.
   Cette règle vivait dans un <style> collé au milieu de la page
   d'accueil : deux sources pour un seul comportement, et une balise
   <style> dans du contenu éditorial. Écrite en mobile-first. */
/* ⚠️ WordPress annule la marge haute du premier enfant de tout groupe
   contraint, via
   :where(.wp-block-group-is-layout-constrained) > :first-child:first-child
   dont la spécificité est (0,2,0) — supérieure à une simple classe.
   La barre étant premier enfant de .pm-inner, on monte d'un cran, et on
   écrit la propriété logique, celle que WordPress emploie. */
.pm-trust-overlap{margin-bottom:32px;position:relative;z-index:5;}
.pm-inner > .pm-trust-overlap:first-child{margin-block-start:-52px;}
@media(min-width:769px){
  .pm-inner > .pm-trust-overlap:first-child{margin-block-start:-76px;}
}


/* ── Grilles ────────────────────────────────────────────────── */
.pm-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.pm-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* ── Liens « expertise » ────────────────────────────────────── */
.pm-exp-link{background:#f3f1eb;border-radius:4px;padding:18px 20px;display:flex;align-items:center;gap:16px;text-decoration:none;border:1px solid rgba(62,76,92,.08);transition:border-color .15s;margin-bottom:12px;}
.pm-exp-link:hover{border-color:rgba(188,157,69,.4);}
.pm-exp-ico{width:40px;height:40px;border-radius:50%;background:rgba(188,157,69,.12);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.pm-exp-title{font-size:0.875rem;font-weight:600;color:#3e4c5c;margin-bottom:2px;}
.pm-exp-desc{font-size:0.8125rem;color:#5a6e82;font-weight:300;}

/* ── Témoignages ───────────────────────────────────────────── */
.pm-tcard{background:#f3f1eb;border-radius:4px;padding:28px 24px;height:100%;box-sizing:border-box;}
.pm-tcard-stars{color:#7d6018;font-size:0.9375rem;letter-spacing:3px;margin-bottom:14px;} /* #7d6018 = AA sur beige */
.pm-tcard-text{font-size:0.9375rem;color:#2a3340;line-height:1.72;font-style:italic;font-weight:300;margin-bottom:18px;}
.pm-tcard-name{font-size:0.8125rem;font-weight:600;color:#3e4c5c;}
.pm-tcard-job{font-size:0.8125rem;color:#5a6e82;font-weight:300;}

.wp-block-columns .wp-block-column > .wp-block-group.has-background{height:100%;box-sizing:border-box;}

/* Swipe horizontal sur mobile, zéro JS */
@media(max-width:781px){
  .wp-block-columns:has(.pm-tcard){
    display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-left:16px;
    padding-bottom:10px;-webkit-overflow-scrolling:touch;
  }
  .wp-block-columns:has(.pm-tcard) > .wp-block-column{
    flex:0 0 86%!important;min-width:0!important;scroll-snap-align:start;
  }
}
/* Une zone overflow-x:auto n'entre dans l'ordre de tabulation que
   depuis peu, et pas partout. Le tabindex est posé au rendu par
   functions.php ; il lui faut un focus visible. */
.wp-block-columns:has(.pm-tcard):focus-visible{
  outline:2px solid #7d6018;outline-offset:4px;border-radius:4px;
}

/* ── Accordéons FAQ (wp:details) ───────────────────────────── */
.pm-faq-item{border-bottom:1px solid rgba(62,76,92,.12);margin:0!important;}
.pm-faq-item:first-of-type{border-top:1px solid rgba(62,76,92,.12);}
.pm-faq-item > summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:18px 0;min-height:44px;   /* cible tactile Opquast */
  font-family:'Overpass',sans-serif;font-size:1rem;font-weight:600;
  color:#3e4c5c;line-height:1.4;
}
.pm-faq-item > summary::-webkit-details-marker{display:none;}
.pm-faq-item > summary::after{content:"+";flex-shrink:0;font-size:1.375rem;font-weight:400;line-height:1;color:#7d6018;}
.pm-faq-item[open] > summary::after{content:"\2212";} /* − */
.pm-faq-item[open] > summary{color:#2a3340;}
.pm-faq-item > summary:hover{color:#2a3340;}
.pm-faq-item > summary:focus-visible{outline:2px solid #7d6018;outline-offset:3px;border-radius:2px;}
/* La réponse : ces trois valeurs étaient redéclarées en inline sur les
   trente paragraphes de la FAQ. La couleur, elle, vient de theme.json. */
.pm-faq-item > p{margin:0 0 18px;font-size:0.875rem;font-weight:300;line-height:1.78;}
.pm-faq-item a{color:#7d6018;text-decoration:underline;}

/* La question est enveloppée dans un <h3> par le filtre PHP, pour
   permettre la navigation de titre en titre au lecteur d'écran.
   Le titre ne doit rien changer visuellement : il hérite de tout. */
.pm-faq-item > summary > .pm-faq-q{
  margin:0;padding:0;flex:1;
  font:inherit;color:inherit;letter-spacing:inherit;
}
/* ── Cartes d'expertise (page Expertises assurances) ───────
   Même mécanique que .pm-faq-item — <details> natif, marqueur
   masqué, + / − à droite — mais le résumé porte DEUX lignes :
   le titre de la rubrique et sa phrase de couverture, injectées
   par le filtre PHP §2 bis à partir du <br> saisi dans l'éditeur.
   La phrase reste lisible carte fermée : on choisit quoi ouvrir
   sans avoir à tout déplier. */
.pm-exp-item{border-bottom:1px solid rgba(62,76,92,.12);margin:0!important;}
.pm-exp-item:first-of-type{border-top:1px solid rgba(62,76,92,.12);}
.pm-exp-item > summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:1fr auto;gap:4px 16px;
  padding:26px 0;min-height:44px;
}
.pm-exp-item > summary::-webkit-details-marker{display:none;}
.pm-exp-item > summary::after{
  content:"+";grid-column:2;grid-row:1 / span 2;align-self:center;
  font-size:1.375rem;font-weight:400;line-height:1;color:#7d6018;
}
.pm-exp-item[open] > summary::after{content:"\2212";}
.pm-exp-q{
  margin:0;grid-column:1;
  font-family:'Overpass',sans-serif;font-size:1.1875rem;font-weight:700;
  line-height:1.3;color:#3e4c5c;letter-spacing:inherit;
}
.pm-exp-c{
  grid-column:1;
  font-size:0.84375rem;font-weight:300;line-height:1.55;
}
/* ⚠️ La phrase n'est pas un lien. Sans ce sélecteur à deux crans, elle
   hérite du doré de :where(.pm-inner) :where(p,li) a et se lit comme
   un lien mort — c'était le cas sur la section Particuliers. */
.pm-exp-item > summary .pm-exp-c{color:#5a6e82;}
.pm-exp-item[open] > summary .pm-exp-q{color:#2a3340;}
.pm-exp-item > summary:hover .pm-exp-q{color:#2a3340;}
.pm-exp-item > summary:focus-visible{outline:2px solid #7d6018;outline-offset:3px;border-radius:2px;}
.pm-exp-item ul{margin:0 0 20px;padding:0 0 0 20px;}
.pm-exp-item li{font-size:0.875rem;font-weight:300;line-height:1.7;margin-bottom:6px;}
.pm-exp-item h4{
  font-family:'Overpass',sans-serif;font-size:0.8125rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#7d6018;
  margin:4px 0 10px;
}

/* Numérotation des rubriques : dix-huit lignes identiques ne donnaient
   aucun repère à l'œil. Le reset est posé sur .pm-inner pour que chaque
   section reparte à 1 — sans lui, les Particuliers continueraient à 10. */
.pm-inner{counter-reset:pm-exp;}
.pm-exp-item{counter-increment:pm-exp;}
.pm-exp-q::before{
  content:counter(pm-exp) ".";
  margin-right:12px;color:#7d6018;font-weight:400;
}

/* Sur fond marine, titres et phrases basculent en clair. Le sélecteur
   de la phrase monte à trois crans pour battre celui du dessus. */
.pm-s-marine .pm-exp-item{border-color:rgba(255,255,255,.14);}
.pm-s-marine .pm-exp-q{color:#f3f1eb;}
.pm-s-marine .pm-exp-item > summary .pm-exp-c{color:rgba(243,241,235,.72);}
.pm-s-marine .pm-exp-item > summary::after{color:#f3cb5f;}
.pm-s-marine .pm-exp-item h4{color:#d4b86a;}


/* ── Tableaux ───────────────────────────────────────────────
   .pm-table était employée sur la page Placements sans qu'aucune
   règle ne la définisse : le tableau s'affichait avec le style par
   défaut du thème. Elle sert aussi à la comparaison courtier /
   agent général de la FAQ.

   Le référentiel privilégie le tableau HTML sur l'image : lisible,
   sélectionnable, et exploitable par les moteurs comme par les IA. */
.pm-table{margin:24px 0 0;}
.pm-table table{
  width:100%;border-collapse:collapse;
  font-family:'Overpass',sans-serif;
}
.pm-table th,
.pm-table td{
  padding:12px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(62,76,92,.12);
  font-size:0.84375rem;font-weight:300;line-height:1.5;color:#3e4c5c;
}
.pm-table thead th{
  background:rgba(188,157,69,.12);
  font-size:0.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#7d6018;border-bottom:2px solid #bc9d45;
}
/* Première colonne : c'est le critère, il porte la lecture. */
.pm-table tbody td:first-child{font-weight:600;color:#3e4c5c;}
.pm-table tbody tr:last-child td{border-bottom:0;}
.pm-table figcaption{
  margin-top:10px;font-size:0.78125rem;font-weight:300;
  color:#5a6e82;line-height:1.6;
}
/* Sur fond marine, le tableau bascule en clair. */
.pm-s-marine .pm-table th,
.pm-s-marine .pm-table td{color:rgba(243,241,235,.88);border-bottom-color:rgba(255,255,255,.14);}
.pm-s-marine .pm-table thead th{background:rgba(243,203,95,.14);color:#f3cb5f;border-bottom-color:#bc9d45;}
.pm-s-marine .pm-table tbody td:first-child{color:#f3f1eb;}
.pm-s-marine .pm-table figcaption{color:rgba(243,241,235,.7);}

@media(max-width:520px){
  /* Cellules resserrées plutôt qu'un défilement horizontal : les
     valeurs sont courtes, elles tiennent. */
  .pm-table th,.pm-table td{padding:10px 8px;font-size:0.78125rem;}
  .pm-table thead th{font-size:0.6875rem;letter-spacing:.04em;}
}

/* ── Listes à puce ✓ ───────────────────────────────────────── */
.pm-check{list-style:none;margin:0;padding:0;}                 /* fond sombre */
.pm-check li{position:relative;padding-left:22px;margin-bottom:8px;color:#f3f1eb;}
.pm-check li::before{content:"\2713";position:absolute;left:0;color:#f3cb5f;font-weight:700;}
.pm-check-d{list-style:none;margin:0;padding:0;}               /* fond clair */
.pm-check-d li{position:relative;padding-left:22px;margin-bottom:8px;}
.pm-check-d li::before{content:"\2713";position:absolute;left:0;color:#7d6018;font-weight:700;}

/* Liste de preuves de la section « Votre courtière » (fond marine) */
.pm-checks-light,
ul.wp-block-list.pm-checks-light{
  list-style:none;margin:0 0 22px;padding:0;
  display:flex;flex-direction:column;flex-wrap:wrap;gap:8px;
  font-family:'Overpass',sans-serif;font-size:1rem;font-weight:400;
  color:rgba(243,241,235,.92);
}
.pm-checks-light li{position:relative;padding-left:22px;line-height:1.5}
.pm-checks-light li::before{
  content:"\2713";position:absolute;left:0;top:0;color:#f3cb5f;font-weight:700;
}
/* Blocksy applique une puce disc sur .entry-content ul : on renforce */
.entry-content ul.pm-checks-light,
.entry-content ul.wp-block-list.pm-checks-light,
ul.wp-block-list.pm-checks-light{
  list-style:none!important;margin:0 0 24px!important;padding:0!important;
}
.entry-content ul.pm-checks-light li,
ul.wp-block-list.pm-checks-light li{
  list-style:none!important;position:relative;
  padding-left:24px!important;margin-bottom:8px;line-height:1.5;
}
.entry-content ul.pm-checks-light li::marker,
ul.wp-block-list.pm-checks-light li::marker{content:""}
.entry-content ul.pm-checks-light li::before,
ul.wp-block-list.pm-checks-light li::before{
  content:"\2713";position:absolute;left:0;top:0;color:#f3cb5f;font-weight:700;
}

/* ── Bandeau partenaires défilant ──────────────────────────── */
.pm-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.pm-marquee__track{display:flex;align-items:center;gap:56px;width:max-content;animation:pm-scroll 32s linear infinite;}
.pm-marquee__track span{font-family:'Overpass',sans-serif;font-size:1.125rem;font-weight:700;color:#3e4c5c;opacity:.6;white-space:nowrap;}
.pm-marquee__track img{height:40px;width:auto;object-fit:contain;filter:grayscale(100%);opacity:.7;transition:filter .25s,opacity .25s;flex-shrink:0;}
.pm-marquee__track img:hover{filter:none;opacity:1;}
.pm-marquee:hover .pm-marquee__track{animation-play-state:paused;}
.pm-partners-badge{width:max-content;margin:0 auto 32px;padding:8px 16px;background:#3e4c5c;color:#fff;font-size:0.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;border-radius:3px;}
@keyframes pm-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){
  .pm-marquee__track{animation:none;flex-wrap:wrap;justify-content:center;gap:24px 40px;}
}

/* ── Sommaire 3 piliers + retour haut (pages produit) ──────── */
.pm-piliers{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:48px}
.pm-pilier{display:inline-flex;align-items:center;background:#fff;border:1px solid rgba(62,76,92,.18);color:#3e4c5c;font-family:'Overpass',sans-serif;font-size:0.8125rem;font-weight:600;padding:8px 16px;border-radius:999px;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.pm-pilier:hover,.pm-pilier:focus-visible{border-color:#bc9d45;box-shadow:0 0 0 2px rgba(188,157,69,.25);text-decoration:underline}
.pm-pilier .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}
.pm-tothaut{display:inline-flex;align-items:center;gap:6px;color:#5a6e82;font-family:'Overpass',sans-serif;font-size:0.8125rem;font-weight:600;text-decoration:none}
.pm-tothaut:hover,.pm-tothaut:focus-visible{color:#3e4c5c;text-decoration:underline}

/* ── Tooltips du Lexique ───────────────────────────────────── */
/* Le terme est un lien vers son entrée du Lexique, mais il ne doit pas se
   lire comme un lien de texte courant : ceux-là sont dorés et soulignés en
   trait plein. Ici, pointillé discret et couleur héritée du paragraphe —
   la promesse est « ce mot est défini », pas « clique ici ».
   cursor:help n'a de sens qu'à la souris ; sur tactile il n'y a pas de
   curseur, et le tap mène au Lexique. */
.pm-lex-tip{
  border-bottom:1px dashed rgba(188,157,69,.6);
  color:inherit;cursor:help;text-decoration:none;
}
.pm-lex-tip abbr{text-decoration:none;border:0;}
/* WCAG 1.4.13 : l'infobulle s'ouvre aussi au focus, il faut donc que le
   focus se voie. */
.pm-lex-tip:focus-visible{
  outline:2px solid #7d6018;outline-offset:2px;border-radius:2px;
}
.pm-lex-tip:hover{border-bottom-color:#bc9d45;}
#pm-tooltip{position:fixed;background:#2a3340;color:#f3f1eb;font-size:0.75rem;font-weight:300;font-family:'Overpass',sans-serif;line-height:1.5;padding:8px 12px;border-radius:4px;width:220px;white-space:normal;pointer-events:none;opacity:0;transition:opacity .18s ease;z-index:99999;box-shadow:0 4px 16px rgba(0,0,0,.25);}
#pm-tooltip.visible{opacity:1;}

/* ── Fil d'Ariane RankMath ──────────────────────────────────
   Écart sous le fil défini ICI plutôt que par une marge haute sur
   chaque eyebrow : une seule valeur pour les seize pages, et rien
   à penser en créant la suivante.

   ⚠️ Ces couleurs supposent un hero SOMBRE. C'est le cas partout —
   la page Devis, seule à avoir eu un hero beige, a été repassée en
   marine pour cette raison. Un futur hero clair demanderait une
   règle d'inversion, pas un changement de celle-ci.

   ⚠️ Le beige à 50% donnait 3,24:1 sur marine, sous le seuil AA — et
   à 11px, aucune tolérance « grand texte » ne s'applique. 75% monte
   à 5,22:1 sans que le fil cesse d'être discret : c'est sa taille et
   ses capitales espacées qui le mettent en retrait, pas sa pâleur.
   Le séparateur passe de 30% (2,12:1) à 55% — décoratif, mais il
   sépare deux liens, autant qu'il reste perceptible. */
.rank-math-breadcrumb p,.rank-math-breadcrumb{
  font-size:0.6875rem!important;font-family:'Overpass',sans-serif!important;
  font-weight:400!important;color:rgba(243,241,235,.75)!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;
  margin:0 0 16px!important;
}
.rank-math-breadcrumb a{color:rgba(243,241,235,.75)!important;text-decoration:none!important;}
.rank-math-breadcrumb a:hover{color:#f3cb5f!important;}
.rank-math-breadcrumb .separator{color:rgba(243,241,235,.75)!important;}
.rank-math-breadcrumb span:last-child{color:rgba(243,241,235,.9)!important;}

/* ── Mentions réglementaires (épargne, placements, assurance-vie) ──
   Rendues par [pm_mentions_fi_court] et [pm_mentions_fi_complet]
   (functions.php §9) : le texte n'existe qu'à un seul endroit, une
   évolution réglementaire ne se répercute jamais page par page.

   Ni la couleur du texte ni le corps de la version longue ne sont
   déclarés ici — theme.json porte déjà #5a6e82 et 1rem, sans
   spécificité. Seul l'interligne est repris : 1.6 au lieu du 1.7
   global, resserré parce que le corps est plus petit.

   ⚠️ Prévu pour un fond CLAIR. Sur .pm-s-marine, les paragraphes
   hériteraient du beige de §2 posé sur un fond presque transparent —
   illisible. Une variante serait à écrire avant tout usage sur
   fond sombre. */
.pm-mentions-fi{
  margin:48px auto 0;
  max-width:880px;
  padding:20px 24px;
  border-top:2px solid #bc9d45;
  background:rgba(62,76,92,.04);
  border-radius:0 0 6px 6px;
}
.pm-mentions-fi__t{
  margin:0 0 10px;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#7d6018;
}
.pm-mentions-fi p{
  margin:0 0 8px;
  font-size:0.8125rem;
  line-height:1.6;
}
.pm-mentions-fi p:last-child{margin-bottom:0;}

/* Sur la page dédiée, ce n'est plus une mention en marge : c'est le
   contenu principal. Ni cadre, ni réduction de corps. */
.pm-mentions-fi--full{
  margin:0;
  max-width:none;
  padding:0;
  border:0;
  background:none;
}
.pm-mentions-fi--full p{margin-bottom:16px;}

/* ═══════════════════════════════════════════════════════════════
   4. BLOCS SIGNATURE
═══════════════════════════════════════════════════════════════ */

/* Police manuscrite auto-hébergée (RGPD : pas d'appel Google Fonts).
   Fichier attendu dans blocksy-child/fonts/ */
/* ── RÈGLE — Caveat, c'est la main de Leslie ─────────────────
   Cette police n'est employée que pour ce qui vient d'elle, jamais
   pour de l'interface ni du texte courant. Deux emplois, un seul
   traitement : Caveat 700, terracotta #c96f4c, légèrement incliné.

   · .pm-mot__label   « Le mot de Leslie » — ses paroles
   · .pm-anim__new    « New ! »            — son annotation

   Le « New ! » vient de sa présentation Canva : c'est bien son
   geste, pas une mention commerciale ajoutée après coup.
   Tout nouvel usage de Caveat doit relever du même registre. */
/* ⚠️ FICHIER SOUS-ENSEMBLÉ — 35 glyphes (9,7 Ko au lieu de 51 Ko).
   Couvre « Le mot de Leslie », « New ! », « Nouveau », les accents
   français et l'apostrophe typographique.
   Tout caractère absent s'affiche dans la police de repli, SANS
   ERREUR VISIBLE. Avant de modifier un libellé en Caveat, vérifier
   la couverture — sinon régénérer depuis
   caveat-v23-latin-700-COMPLET.woff2, conservé dans le même dossier. */
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/caveat-v23-latin-700.woff2') format('woff2');}

/* ── « Le mot de Leslie » — fiches épinglées ───────────────────
   Usage : <figure class="pm-mot pm-mot--tl"> + une attache .pm-att--*
   Inclinaisons : --tl --tr --tl2 --tr2 --tl3
   Attaches    : --tape --clip --needle --binder --pin
   Répartition (set5 v3) : Accueil --binder · À propos --tape
                 Méthode --clip · Entreprise --needle · Pro/Dirigeant --pin */
.pm-mot{position:relative;max-width:420px;margin:0 auto;background:#fffdf7;
  border:1px solid #ece3cf;border-radius:8px;padding:40px 26px 24px;
  box-shadow:0 12px 28px rgba(62,76,92,.12)}
.pm-mot__label{font-family:'Caveat',cursive;font-weight:700;font-size:1.375rem;color:#c96f4c;text-align:center;margin:0 0 10px}
.pm-mot__q{font-size:0.9375rem;font-style:italic;line-height:1.5;color:#3e4c5c;margin:0 0 14px;text-align:center;text-wrap:balance;hyphens:none}
.pm-mot__by{font-size:0.75rem;font-weight:700;color:#7d6018;text-align:center;margin:0} /* actuellement inutilisée */

.pm-mot--tl{transform:rotate(-1.6deg)}
.pm-mot--tr{transform:rotate(1.5deg)}
.pm-mot--tl2{transform:rotate(-1deg)}
.pm-mot--tr2{transform:rotate(2deg)}
.pm-mot--tl3{transform:rotate(-1.3deg)}

.pm-att{position:absolute}
/* --tape : le ruban est dessiné en CSS, le <svg> ne sert que de support */
.pm-att--tape{top:-13px;left:50%;width:98px;height:28px;transform:translateX(-50%) rotate(-4deg);
  clip-path:polygon(3% 12%,0 55%,4% 92%,97% 88%,100% 45%,96% 8%);
  background:linear-gradient(120deg,rgba(210,218,226,.55),rgba(235,240,244,.30));
  border-top:1px solid rgba(255,255,255,.5);box-shadow:0 2px 5px rgba(62,76,92,.10)}
.pm-att--clip{top:-13px;right:6px;transform:rotate(44deg)}
.pm-att--needle{top:-16px;left:18px}
.pm-att--binder{top:-16px;left:50%;transform:translateX(-50%)}
.pm-att--pin{top:-13px;right:14px;transform:rotate(22deg)}

/* Neutralise le style <blockquote> du thème (bordure, retrait,
   fond, guillemets automatiques). */
.pm-mot blockquote.pm-mot__q,
.pm-mot .pm-mot__q{
  border:0!important;border-left:0!important;padding:0!important;
  background:none!important;quotes:none;
}
.pm-mot .pm-mot__q::before,
.pm-mot .pm-mot__q::after{content:none!important}
.pm-mot figure,.pm-mot blockquote{margin:0}

/* Variante encart latéral (page Pro / Indé / Dirigeant) */
.pm-mot--aside{max-width:340px;margin:0 auto;padding:32px 20px 18px}
.pm-mot--aside .pm-mot__label{font-size:1.1875rem}
.pm-mot--aside .pm-mot__q{font-size:0.84375rem}

/* Variante fiche-pont : chevauche deux sections (page À propos).
   !important nécessaire : WordPress applique
   .is-layout-constrained > * { margin-block-end:0 } avec une
   spécificité supérieure (0,2,0 contre 0,1,0), ce qui annulait
   toute marge négative. */
.pm-mot-bridge{
  position:relative;z-index:5;
  margin:96px auto -148px!important;
  max-width:640px!important;   /* même raison que la marge : la règle
                                  WordPress a une spécificité supérieure
                                  et imposait la largeur de contenu */
}
.pm-mot-bridge .pm-mot{max-width:none}
.pm-mot-bridge .pm-mot__q{font-size:1rem;line-height:1.6;text-wrap:pretty;}

/* ── Cartes de réservation (page Prendre RDV) ────────────────
   Reprend l'anatomie de .pm-espace — icône ronde, titre, description,
   CTA poussé en bas par margin-top:auto — mais en cartes séparées :
   sur l'accueil, .pm-espaces soude ses deux moitiés dans un bloc blanc
   unique. Ici les cartes sont indépendantes et posées sur deux fonds
   différents (beige puis marine), d'où le fond et le contour portés par
   la carte elle-même. */
.pm-rdv{
  display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
}
.pm-rdv .pm-espace{
  background:#fff;border:1px solid rgba(62,76,92,.08);border-radius:6px;
}
/* Le filet de séparation de .pm-espace n'a pas de sens ici : les cartes
   ne sont pas empilées dans un même bloc. */
.pm-rdv .pm-espace + .pm-espace{border-top:1px solid rgba(62,76,92,.08);}
/* Le CTA occupe toute la largeur de la carte, au lieu du flex-start de
   .pm-espace__cta : les cinq boutons s'alignent alors quelle que soit la
   longueur de leur libellé, et la cible tactile couvre le bas de la carte.
   Sans ça, « Réserver — Pro / Indé / Dirigeant » passait sur deux lignes
   et décalait sa carte par rapport aux deux autres. */
.pm-rdv .pm-espace__cta{align-self:stretch;justify-content:center;text-align:center;}

/* Mention sous une grille de cartes. Deux occurrences par page, sur fond
   clair comme sur fond sombre : la couleur vient de la section. */
.pm-rdv-note{font-size:0.8125rem;font-weight:300;line-height:1.7;margin:20px 0 0;}

/* ── Encarts de la page À propos ────────────────────────────── */

/* Badge d'identité posé sous un titre de section. Distinct de
   .pm-partners-badge, qui est centré et sert de compteur. */
.pm-tag-id{
  display:inline-block;margin:0 0 22px;padding:5px 13px;
  background:#3e4c5c;color:#f3f1eb;border-radius:2px;
  font-size:0.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}

/* Mention d'immatriculation sous le portrait. La pastille dorée est un
   ::before positionné, pas un <div> dans le markup : un point purement
   décoratif n'a rien à faire dans le contenu, et Leslie garde un
   paragraphe éditable. Position absolue plutôt que flex — un paragraphe
   ne peut pas fournir deux items flex propres avec un <br>. */
.pm-orias{
  position:relative;
  margin-top:16px;padding:14px 16px 14px 34px;
  background:rgba(62,76,92,.06);
  border:1px solid rgba(62,76,92,.12);border-radius:4px;
  font-size:0.8125rem;font-weight:300;color:#3e4c5c;line-height:1.45;
}
.pm-orias::before{
  content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:#f3cb5f;
}
.pm-orias strong{display:block;font-weight:600;}

/* Encart de renvoi (FAQ). S'appuie sur .pm-card--bar pour le filet doré :
   seule la disposition texte / bouton est propre à l'encart. */
.pm-encart{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
.pm-encart > div{flex:1 1 320px;}

/* ── Infographies (tabouret / parapluie) ───────────────────── */
.pm-infog{background:#fff;border-radius:14px;padding:32px 20px}
.pm-infog__eye{font-size:0.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#7d6018;text-align:center;margin:0 0 8px}
.pm-infog__title{font-size:clamp(1.5rem,3vw,2rem);font-weight:400;line-height:1.2;color:#3e4c5c;
  text-align:center;margin:0 0 10px;text-wrap:balance;hyphens:none}
.pm-infog__sub{text-align:center;font-size:1rem;font-weight:600;color:#3e4c5c;margin:0 0 14px;
  text-wrap:balance;hyphens:none}
.pm-infog__sub b{color:#7d6018}
.pm-infog__rule{width:110px;height:2px;background:#bc9d45;margin:0 auto 32px;border:0}
.pm-infog__grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.pm-infog__fig{margin:0;display:flex;justify-content:center}
.pm-infog__img{width:100%;max-width:290px;height:auto;display:block}
/* illustration verticale : largeur réduite pour égaliser la hauteur perçue */
.pm-infog__img--tall{max-width:240px}
.pm-infog__cards{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.pm-infog__card{background:#fffdf7;border:1.5px solid #bc9d45;border-radius:12px;padding:16px 20px}
.pm-infog__q{font-size:0.78125rem;font-weight:700;color:#7d6018;margin:0 0 4px}
.pm-infog__a{font-size:1rem;font-weight:700;color:#3e4c5c;margin:0 0 2px}
.pm-infog__d{font-size:0.84375rem;font-weight:300;color:#5a6e82;margin:0;line-height:1.5}
/* note de clôture : referme le message sur la maîtrise après
   l'énoncé du risque (motif GEO « à retenir ») */
.pm-infog__note{
  margin:28px auto 0;max-width:58ch;text-align:center;
  font-size:0.875rem;font-weight:300;line-height:1.7;color:#5a6e82;
}
@media(min-width:761px){
  .pm-infog{padding:40px 32px}
  .pm-infog__grid{grid-template-columns:.9fr 1.1fr;gap:40px}
}

/* ── Parcours numéroté (bloc réutilisable ref:785) ────────────
   Numéros et filet en compteurs CSS : zéro JS. MOBILE-FIRST. */
ol.wp-block-list.pm-parcours{list-style:none;counter-reset:pm-etape;margin:0;padding:0;}
.pm-parcours li{
  counter-increment:pm-etape;position:relative;
  padding:0 0 22px 52px;
  font-size:0.90625rem;font-weight:300;line-height:1.6;color:#5a6e82;
}
.pm-parcours li:last-child{padding-bottom:0}
.pm-parcours li strong{
  display:block;font-size:1rem;font-weight:700;color:#3e4c5c;
  margin-bottom:4px;text-wrap:balance;hyphens:none;
}
.pm-parcours li::before{
  content:counter(pm-etape);
  position:absolute;left:0;top:0;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:#3e4c5c;border:2px solid #f3cb5f;color:#f3cb5f;
  font-family:'Overpass',sans-serif;font-size:0.875rem;font-weight:800;
}
.pm-parcours li::after{
  content:"";position:absolute;left:16px;top:38px;bottom:4px;
  width:2px;background:linear-gradient(#f3cb5f,rgba(243,203,95,.3));
}
.pm-parcours li:last-child::after{display:none}
@media(min-width:782px){
  .pm-parcours li{padding:0 0 24px 60px;font-size:0.84375rem}
  .pm-parcours li::before{width:40px;height:40px;font-size:0.9375rem}
  .pm-parcours li::after{left:19px;top:44px}
}

/* Sur fond marine, le parcours inverse ses couleurs. La pastille et le
   filet sont déjà dorés, ils fonctionnent sur les deux fonds — seuls le
   titre et le texte doivent basculer. */
.pm-s-marine .pm-parcours li{color:rgba(243,241,235,.85);}
.pm-s-marine .pm-parcours li strong{color:#f3f1eb;}

/* ── Acrostiche SMART (page Méthode) ──────────────────────────
   Même principe que .pm-parcours juste au-dessus : un repère à
   gauche, un filet qui relie, le contenu à droite. Ici des lettres
   au lieu de numéros.

   Pourquoi une <ol> : les cinq critères forment une séquence, et
   leur ordre porte le mot SMART. Une liste ordonnée le dit au
   lecteur d'écran. Le HTML porte role="list" — Safari retire la
   sémantique de liste dès que list-style:none est appliqué.

   Aucune image : l'information EST typographique. Zéro requête,
   zéro poids, EcoIndex intact. */
.pm-smart{list-style:none;margin:0;padding:0;}
.pm-smart__row{
  position:relative;
  display:grid;grid-template-columns:56px 1fr;gap:0 16px;
  padding-bottom:28px;
}
.pm-smart__row:last-child{padding-bottom:0;}

/* La lettre. DM Serif Display : même police que les H1 de hero, ce qui
   rattache le bloc à l'identité plutôt qu'à un pictogramme.
   Dimensions en em : la pastille suit la taille de sa propre lettre,
   donc pas de débordement si le corps change. */
.pm-smart__letter{
  display:flex;align-items:center;justify-content:center;
  width:1.9em;height:1.9em;flex-shrink:0;
  font-family:'DM Serif Display',serif;
  font-size:1.875rem;line-height:1;
  color:#f3cb5f;background:#3e4c5c;
  border:2px solid #f3cb5f;border-radius:50%;
  user-select:none;
}

/* Le filet qui relie les lettres : c'est lui qui transforme cinq
   critères en une seule méthode. */
.pm-smart__row::after{
  content:"";position:absolute;
  left:27px;top:60px;bottom:-4px;width:2px;
  background:linear-gradient(#f3cb5f,rgba(243,203,95,.28));
}
.pm-smart__row:last-child::after{display:none;}

.pm-smart__body{padding-top:4px;}
.pm-smart__title{
  font-family:'Overpass',sans-serif;
  font-size:1.0625rem;font-weight:700;line-height:1.25;
  color:#3e4c5c;margin:0 0 6px;
  text-wrap:balance;hyphens:none;
}
/* L'initiale reste dans le mot pour les lecteurs d'écran — la pastille
   est décorative (aria-hidden). On la colore pour faire le lien. */
.pm-smart__initial{color:#7d6018;}
.pm-smart__desc{
  font-family:'Overpass',sans-serif;
  font-size:0.90625rem;font-weight:300;line-height:1.65;
  color:#5a6e82;margin:0;
}
@media(min-width:600px){
  .pm-smart__row{grid-template-columns:72px 1fr;gap:0 24px;padding-bottom:32px;}
  .pm-smart__letter{font-size:2.375rem;}
  .pm-smart__row::after{left:35px;top:78px;}
  .pm-smart__title{font-size:1.1875rem;}
}

/* Variante compacte, pour la colonne « Ma méthode » de l'accueil :
   les lettres et les mots, sans les descriptions — elles sont sur la
   page Méthode, c'est là qu'on les lit. */
.pm-smart--mini .pm-smart__row{grid-template-columns:44px 1fr;gap:0 14px;padding-bottom:18px;align-items:center;}
.pm-smart--mini .pm-smart__letter{font-size:1.375rem;}
.pm-smart--mini .pm-smart__row::after{left:21px;top:48px;}
.pm-smart--mini .pm-smart__title{font-size:1rem;margin:0;}
@media(min-width:600px){
  .pm-smart--mini .pm-smart__row{grid-template-columns:52px 1fr;gap:0 16px;padding-bottom:20px;}
  .pm-smart--mini .pm-smart__letter{font-size:1.625rem;}
  .pm-smart--mini .pm-smart__row::after{left:25px;top:56px;}
  .pm-smart--mini .pm-smart__title{font-size:1.0625rem;}
}


/* ── Plan d'action bloc par bloc (page Méthode SMART) ──────────
   Ce bloc avait disparu du fichier lors d'une régénération : le
   marqueur ▶ natif réapparaissait sur les <summary> et les cartes
   s'affichaient en texte brut. Restauré et allégé.

   Trois choses pour le rendre digeste — 45 puces au total :
   · un compteur sur le résumé, pour savoir où l'on met les pieds
   · les puces sur deux colonnes au-delà de 900px
   · le détail replié par défaut, la carte reste courte */

.pm-plan{color:#3e4c5c;font-family:'Overpass',sans-serif;}
.pm-plan__title{
  font-weight:700;font-size:clamp(1.375rem,2.6vw,1.75rem);
  color:#3e4c5c;margin:0 0 8px;line-height:1.2;
}
/* Même largeur que le chapô de section juste au-dessus : deux
   paragraphes voisins qui ne s'alignent pas se voient tout de suite.
   Le confort de lecture est assuré par les deux colonnes de cartes
   qui suivent, pas par un rétrécissement du chapô. */
.pm-plan__intro{
  color:#5a6e82;margin:0 0 32px;
  font-size:0.9375rem;font-weight:300;line-height:1.75;
}
.pm-plan__grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:720px){.pm-plan__grid{grid-template-columns:1fr 1fr;}}

.pm-plan__card{
  background:#fff;border:1px solid #e4e0d6;border-top:4px solid #bc9d45;
  border-radius:10px;padding:24px 24px 20px;
  display:flex;flex-direction:column;
}
.pm-plan__card-title{
  font-weight:700;font-size:1.0625rem;color:#3e4c5c;
  margin:0 0 8px;line-height:1.2;
}
.pm-plan__coverage{
  font-size:0.84375rem;color:#5a6e82;font-weight:300;
  margin:0 0 18px;line-height:1.55;
}

.pm-plan__details{border-top:1px solid #e4e0d6;margin-top:auto;}
.pm-plan__summary{
  display:flex;align-items:center;gap:10px;
  cursor:pointer;list-style:none;
  padding:14px 4px 4px;min-height:44px;   /* cible tactile Opquast */
  font-weight:600;color:#3e4c5c;font-size:0.90625rem;
}
.pm-plan__summary::-webkit-details-marker{display:none;}

/* Le compteur annonce l'ampleur avant d'ouvrir : on sait si l'on
   déplie trois lignes ou treize. */
.pm-plan__count{
  font-size:0.75rem;font-weight:700;color:#7d6018;
  background:rgba(188,157,69,.14);
  padding:3px 9px;border-radius:999px;white-space:nowrap;
}
/* Le chevron pousse à droite et pivote à l'ouverture. */
.pm-plan__summary::after{
  content:"";margin-left:auto;flex:0 0 auto;width:9px;height:9px;
  border-right:2px solid #bc9d45;border-bottom:2px solid #bc9d45;
  transform:rotate(45deg);transition:transform .2s ease;
}
.pm-plan__details[open] .pm-plan__summary::after{transform:rotate(-135deg);}
.pm-plan__summary:hover{color:#2a3340;}
.pm-plan__summary:focus-visible{outline:2px solid #7d6018;outline-offset:2px;border-radius:4px;}

.pm-plan__list{list-style:none;margin:8px 0 4px;padding:0;display:grid;gap:9px;}
.pm-plan__list li{
  position:relative;padding-left:26px;
  font-size:0.84375rem;line-height:1.5;color:#3e4c5c;
  break-inside:avoid;
}
.pm-plan__list li::before{
  content:"";position:absolute;left:2px;top:5px;
  width:6px;height:11px;
  border-right:2px solid #bc9d45;border-bottom:2px solid #bc9d45;
  transform:rotate(45deg);
}
/* Deux colonnes dès qu'il y a la place : treize puces en file
   indienne font un mur, en deux colonnes elles se lisent. */
@media(min-width:900px){
  .pm-plan__list{grid-template-columns:1fr 1fr;gap:9px 24px;}
}

@media(prefers-reduced-motion:reduce){
  .pm-plan__summary::after{transition:none;}
}

/* ── Cartes méthode (page Pro / Indé / Dirigeant) ──────────── */
.pm-meth-card{background:#f3f1eb;border-radius:8px;padding:24px 20px;height:100%;box-sizing:border-box}
.pm-meth-card__title{
  font-size:0.75rem!important;font-weight:800!important;letter-spacing:.16em;
  text-transform:uppercase;color:#7d6018!important;margin:0 0 16px!important;
}
ul.wp-block-list.pm-meth-list{list-style:none!important;margin:0!important;padding:0!important}
.pm-meth-list li{
  list-style:none!important;position:relative;
  padding-left:24px!important;margin-bottom:12px;
  font-size:0.875rem;font-weight:300;line-height:1.55;color:#3e4c5c;
}
.pm-meth-list li:last-child{margin-bottom:0}
.pm-meth-list li::marker{content:""}
.pm-meth-list li::before{position:absolute;left:0;top:0;font-weight:700;color:#bc9d45}
/* puces différenciées : constat (✓) vs action (→) */
.pm-meth-card--a .pm-meth-list li::before{content:"\2713"}
.pm-meth-card--o .pm-meth-list li::before{content:"\2192"}

.pm-meth-note{
  font-size:0.875rem;font-weight:300;line-height:1.7;color:#5a6e82;
  margin:0 auto;padding-top:16px;border-top:1px solid rgba(62,76,92,.12);
  max-width:1140px;   /* garde la note dans le cadre, quoi qu'il arrive */
}
.pm-meth-note strong{font-weight:700;color:#3e4c5c}
@media(min-width:782px){
  .pm-meth-card{padding:26px 24px}
  .pm-mot--aside{margin:0 0 0 auto}
}

/* ── Fiche « Chiens & Chats » (page Particulier) ───────────── */
.pm-anim{position:relative;max-width:280px;margin:0 auto;background:#fff;
  border:1px solid #e7e0d0;border-radius:14px;padding:24px 22px 26px;
  box-shadow:0 12px 30px rgba(62,76,92,.10);text-align:center}
.pm-anim__title{font-size:0.9375rem;font-weight:800;color:#3e4c5c;line-height:1.3;margin:0 0 8px;text-wrap:balance;hyphens:none}
.pm-anim__img{width:210px;height:auto;display:block;margin:6px auto}
/* Même traitement que .pm-mot__label : Caveat 700, terracotta.
   Contraste 3,17 sur beige — conforme AA pour du grand texte (36px). */
.pm-anim__new{font-family:'Caveat',cursive;font-weight:700;font-size:2.25rem;
  color:#c96f4c;transform:rotate(-9deg);display:block;margin-top:6px}


/* ── Signature de marque ───────────────────────────────────────
   « À vos côtés pour choisir, présents pour vous suivre »
   Guillemet en filigrane : même motif que les lettres SMART.
   Les guillemets sont décoratifs (aria-hidden côté HTML) — c'est
   la signature de l'agence, pas la citation d'un tiers.
   Emplois : page Bilan assurance (version complète) et footer
   (variante --foot, sur toutes les pages). */
.pm-sign{position:relative;max-width:640px;margin:48px auto 0;padding-top:28px;text-align:center;}
.pm-sign__mark{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  font-family:'Overpass',sans-serif;font-size:5.75rem;font-weight:700;line-height:1;
  color:rgba(188,157,69,.15);pointer-events:none;user-select:none;
}
.pm-sign__text{
  position:relative;z-index:1;margin:0;
  font-family:'Overpass',sans-serif;font-style:italic;font-weight:300;
  font-size:clamp(1.25rem,2.4vw,1.6875rem);line-height:1.35;color:#3e4c5c;
  letter-spacing:-.01em;   /* neutralise le +0.4px global : trop lâche à ce corps */
  text-wrap:balance;hyphens:none;
}
.pm-sign__text em{color:#7d6018;font-weight:600;font-style:italic;}
.pm-sign__rule{display:block;width:56px;height:2px;margin:24px auto 0;background:#bc9d45;border-radius:2px;}
/* Deux lignes au-delà de 768px, repli naturel en dessous (cf. .hero-br) */
.pm-sign__br{display:none;}
@media(min-width:768px){.pm-sign__br{display:inline;}}

/* Variante footer : ni filigrane, ni filet, corps réduit.
   Cohabite avec .pm-foot (§5).

   Placée sous le logo depuis le 06/08/2026, dans la zone de marque.
   Elle était en fin de footer et masquée sous 600px, le pied de page
   y étant déjà très long ; à cette nouvelle place elle accompagne le
   logo et n'a plus de raison de disparaître. */
.pm-sign--foot{display:block;max-width:none;margin:12px 0 0;padding-top:0;text-align:left;}
.pm-sign--foot .pm-sign__mark,
.pm-sign--foot .pm-sign__rule{display:none;}
.pm-sign--foot .pm-sign__text{font-size:0.9375rem;color:rgba(243,241,235,.75);text-align:left;}
.pm-sign--foot .pm-sign__text em{color:#d4b86a;}

/* ═══════════════════════════════════════════════════════════════
   5. ZONES
═══════════════════════════════════════════════════════════════ */

/* ── Barre supérieure : Espaces client / entreprise ────────────
   Cible UNIQUEMENT #menu-barre-top — n'affecte pas le menu principal. */
#menu-barre-top{
  display:flex;align-items:center;justify-content:flex-end;
  gap:10px;margin:0;padding:0;list-style:none;
}
#menu-barre-top .menu-item{margin:0;}
#menu-barre-top .ct-menu-link{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Overpass',sans-serif;font-size:0.78125rem;font-weight:500;
  color:var(--pm-marine);text-decoration:none;
  padding:5px 14px;border:1px solid var(--pm-or);border-radius:999px;
  transition:color .15s,border-color .15s,background-color .15s;
}
#menu-barre-top .ct-menu-link:hover,
#menu-barre-top .ct-menu-link:focus-visible{
  color:#7d6018;border-color:#7d6018;background-color:var(--pm-or-pale);
}
#menu-barre-top .ct-menu-link:focus-visible{outline:2px solid #7d6018;outline-offset:2px;}

/* Icônes injectées via ::before — évite de toucher au HTML du menu WP */
#menu-barre-top .menu-item:nth-child(1) .ct-menu-link::before,
#menu-barre-top .menu-item:nth-child(2) .ct-menu-link::before{
  content:"";width:14px;height:14px;flex-shrink:0;
  background-color:#7d6018;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
#menu-barre-top .menu-item:nth-child(1) .ct-menu-link::before{ /* utilisateur */
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}
#menu-barre-top .menu-item:nth-child(2) .ct-menu-link::before{ /* immeuble */
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V7l7-4 7 4v14'/><path d='M9 9h.01M9 12h.01M9 15h.01M15 9h.01M15 12h.01M15 15h.01'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V7l7-4 7 4v14'/><path d='M9 9h.01M9 12h.01M9 15h.01M15 9h.01M15 12h.01M15 15h.01'/></svg>");
}
@media(max-width:600px){
  #menu-barre-top{gap:6px;}
  #menu-barre-top .ct-menu-link{font-size:0.71875rem;padding:4px 11px;}
}

/* ── Méga-menu (Max Mega Menu) ─────────────────────────────────
   Titres de colonne = widgets Texte contenant <span class="pm-mm-head">.
   ⚠️ À conserver dans UN SEUL endroit : ici OU MMM → Custom Styling. */
.pm-mm-head{
  display:block;font-family:'Overpass',sans-serif;
  font-size:0.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#7d6018;padding-bottom:8px;
  margin:0 0 4px;                 /* titre collé à ses liens */
  border-bottom:2px solid rgba(188,157,69,.35);
}
.mega-menu .mega-menu-column + .mega-menu-column{
  border-left:1px solid rgba(62,76,92,.28);padding-left:48px;margin-left:24px;
}
.mega-menu .mega-menu-column .widget{margin-bottom:4px;}

/* ── Flèche de sous-menu (Max Mega Menu) ────────────────────
   MMM dessine sa propre flèche via son réglage Arrows → Icon Set
   (Thèmes de menu → Réglages généraux). Elle ne dépend pas des
   dashicons, retirées du front en functions.php §13 — elle a donc
   survécu à leur suppression.

   Un chevron CSS maison a été tenté puis abandonné : deux marqueurs
   se superposaient. On garde celui du plugin et on l'accorde à la
   charte.

   ⚠️ Si l'Icon Set change dans les réglages MMM, la taille et le
   rendu changent aussi — cette règle ne fait qu'ajuster couleur
   et corps. */
#mega-menu-wrap-menu_1 #mega-menu-menu_1 li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator{
  color:#7d6018;
  font-size:0.75rem;
  margin-left:8px;
}

/* ── Menu mobile (Blocksy) ────────────────────────────────────
   Rendu par Blocksy, pas par Max Mega Menu — l'emplacement « Menu
   mobile » est désactivé côté MMM. Le fond du panneau se règle dans
   Personnaliser → Hors-canevas, pas ici : Blocksy y gère aussi sa
   hauteur.
   Liste À PLAT, sans sous-menu : les ouvreurs de Blocksy sont des
   <a> sans href doublés d'un <button> au même aria-label — deux
   items indiscernables au lecteur d'écran, et un libellé hors
   tabulation. Supprimer les parents supprime le problème à la
   source ; le regroupement passe par des filets. */
.mobile-menu .ct-menu-link{
  font-family:'Overpass',sans-serif;
  font-size:1rem;font-weight:400;
  color:rgba(243,241,235,.88);
}
.mobile-menu .ct-menu-link:focus-visible{
  outline:2px solid #f3cb5f;outline-offset:2px;
}
/* Premier item d'un groupe : le filet le détache du précédent. */
.pm-nav-sep{
  border-top:1px solid rgba(243,241,235,.16);
  margin-top:10px;padding-top:10px;
}
/* « Prendre RDV » : seul CTA du menu. En desktop c'est un bouton
   détaché ; en mobile il doit garder ce statut, sinon il se lit
   comme la seizième page de la liste.
   Le :hover redéclare fond ET couleur — deuxième piège de cascade. */
.mobile-menu .pm-nav-cta .ct-menu-link{
  display:block;margin:0 0 8px;
  padding:13px 20px;border-radius:4px;
  background:#f3cb5f;color:#2a3340;
  font-weight:700;text-align:center;
}
.mobile-menu .pm-nav-cta .ct-menu-link:hover{background:#ddb54a;color:#2a3340;}
.mobile-menu .pm-nav-cta .ct-menu-link:focus-visible{
  outline:2px solid #f3f1eb;outline-offset:3px;
}

/* ── Footer custom (.pm-foot) ─────────────────────────────────
   Le footer natif Blocksy n'est pas utilisé.

   Réorganisé le 06/08/2026, en trois temps : la marque et le contact
   en haut, les liens au milieu, les deux espaces en bas.

   ⚠️ LES LIENS SONT ALIGNÉS À GAUCHE, et c'est le point important.
   Ils étaient centrés : un libellé long replié sur deux lignes formait
   alors un bloc en pointe, très visible, qui donnait l'impression d'un
   défaut d'alignement entre colonnes. Aligné à gauche, le même libellé
   se replie sans qu'on le remarque — ce qui permet de garder les
   intitulés complets, donc les mots-clés dans les ancres. */
.pm-foot{
  font-family:'Overpass',sans-serif;
  margin-bottom:-24px;
  max-width:1140px;
  margin-inline:auto;
  padding-inline:64px;
}

/* Zone haute : marque à gauche, contact à droite. */
.pm-foot-top{
  display:grid;grid-template-columns:1fr;gap:24px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(243,241,235,.14);
}
.pm-foot-siglink{display:block;width:max-content;border-radius:4px;}
.pm-foot-siglink:focus-visible{outline:2px solid #f3cb5f;outline-offset:4px;}
.pm-foot-sig{display:block;max-width:190px;height:auto;}

/* Lien de tête, au-dessus des colonnes. La page Expertises est un
   catalogue transversal aux quatre rubriques : la loger dans l'une
   d'elles la rangeait au même niveau qu'une page de destination. */
.pm-foot-lead{margin:24px 0 0;}
.pm-foot-lead a{
  font-size:1rem;font-weight:600;
  color:#f3f1eb;text-decoration:none;
  border-bottom:1px solid rgba(212,184,106,.5);
  padding-bottom:2px;
  transition:color .15s,border-color .15s;
}
 .pm-foot-lead a:hover,
 .pm-foot-lead a:focus{color:#f3cb5f;border-color:#f3cb5f;}

/* Colonnes de liens.

   ⚠️ min-width:0 — INDISPENSABLE. Une piste de grille a un
   min-width:auto implicite : elle ne descend jamais sous la largeur
   de son plus long mot insécable. « Assurances de biens et de
   responsabilités » élargissait donc sa colonne au-delà de sa
   fraction, la grille dépassait ses 1140px, et TOUTE LA PAGE se
   décalait avec une bande vide à gauche — symptôme trompeur, la
   cause étant ici et non dans le hero. */
.pm-foot-cols{
  display:grid;grid-template-columns:1fr;gap:28px;
  padding:28px 0 24px;
  align-items:start;text-align:left;
  min-width:0;
}

/* Titre de colonne : un <p>, pas un <h3>. Le footer est sur toutes les
   pages — cinq titres de niveau 3 décrivant de la navigation faussaient
   la hiérarchie Hn de chaque page. Les <nav aria-label> annoncent déjà
   la zone. */
.pm-foot-head{font-size:0.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#d4b86a;margin:0 0 16px;}
.pm-foot-cols ul{list-style:none;margin:0;padding:0;}
.pm-foot-cols li{margin-bottom:10px;}
.pm-foot-cols li:last-child{margin-bottom:0;}
.pm-foot-cols a{
  font-size:0.875rem;line-height:1.45;
  color:rgba(243,241,235,.85);text-decoration:none;font-weight:300;
  transition:color .15s;
}
.pm-foot-cols a:hover,.pm-foot-cols a:focus{color:#f3cb5f;}

/* Ligne de contact, dans la zone haute. */
.pm-foot-contact{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:10px 24px;
}
.pm-foot-contact a{
  font-size:0.875rem;color:rgba(243,241,235,.85);text-decoration:none;font-weight:400;
  display:inline-flex;align-items:center;gap:8px;transition:color .15s;
}
.pm-foot-contact a:hover,.pm-foot-contact a:focus{color:#f3cb5f;}
/* Les trois liens sociaux n'ont pas de texte : sans zone minimale, la
   cible se réduit au picto de 22px. Les autres liens de cette ligne
   sont portés par leur libellé. */
.pm-foot-social{display:flex;gap:4px;}
.pm-foot-social a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;
  color:rgba(243,241,235,.85);transition:color .15s;
}
.pm-foot-social a:focus-visible{outline:2px solid #f3cb5f;outline-offset:2px;border-radius:4px;}
.pm-foot-social a:hover,.pm-foot-social a:focus{color:#f3cb5f;}
.pm-foot-social svg{width:22px;height:22px;}

/* Les deux espaces en ligne, sous les colonnes. Ils étaient dans
   « L'agence », qui montait alors à six items face à trois — le
   déséquilibre venait de là. Sortis de la grille, ils forment une
   ligne de service qui clôt la navigation, avec un filet pour la
   détacher. */
.pm-foot-espaces{
  display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px 28px;
  padding-top:20px;
  border-top:1px solid rgba(243,241,235,.14);
}
.pm-foot-espaces a{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;
  font-size:0.875rem;font-weight:400;
  color:rgba(243,241,235,.85);text-decoration:none;
  transition:color .15s;
}
.pm-foot-espaces a:hover,.pm-foot-espaces a:focus{color:#f3cb5f;}
.pm-foot-espaces a:focus-visible{outline:2px solid #f3cb5f;outline-offset:3px;border-radius:2px;}

@media(min-width:600px){
  .pm-foot-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
}
@media(min-width:900px){
  .pm-foot-top{grid-template-columns:1fr auto;align-items:center;}
  .pm-foot-top .pm-foot-contact{justify-content:flex-end;}
  /* Colonnes pondérées, pas égales. « Par besoin » porte trois
     libellés longs — c'est lui qui déclenche les replis ; « L'agence »
     n'aligne que des libellés courts. Quatre fractions identiques
     donnaient donc une colonne étranglée à côté d'une colonne à moitié
     vide. Les poids suivent la longueur réelle des ancres.
     minmax(0,…) et non …fr seul : voir le commentaire de .pm-foot-cols. */
  .pm-foot-cols{
    grid-template-columns:minmax(0,2fr) minmax(0,2.64fr) minmax(0,1.5fr) minmax(0,1fr);
    gap:24px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   6. PAGES
═══════════════════════════════════════════════════════════════ */

/* ── Accueil : hero cover ──────────────────────────────────────
   Distinct de .pm-hero (hero des pages intérieures). */
.pm-hero-cover{position:relative;overflow:hidden;}
.pm-hero-cover::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,
    rgba(30,40,55,.82) 0%,
    rgba(30,40,55,.72) 35%,
    rgba(30,40,55,.35) 65%,
    rgba(30,40,55,0) 100%);
}
.pm-hero-cover .wp-block-cover__inner-container{position:relative;z-index:2;}
.pm-hero-cover h1{opacity:0;animation:fadeUp .8s ease forwards;animation-delay:.1s;}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* Mot-clé du H1 : doré, italique, souligné animé.
   Le trait est un background-image (et non un ::after) pour suivre le
   texte quand le mot-clé passe sur 2 lignes ; box-decoration-break:clone
   répète le soulignement sur chaque ligne. */
.hero-word{
  color:#f3cb5f;font-style:italic;
  background-image:linear-gradient(#f3cb5f,#f3cb5f);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
  padding-bottom:2px;              /* 6px mordait la ligne suivante */
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
  animation:underlineHero .9s ease .7s forwards;
}
@keyframes underlineHero{to{background-size:100% 2px;}}

/* Césure du H1 : le <br> n'est actif qu'au-delà de 1000px, sinon
   le titre produit 3 lignes bancales. */
.hero-br{display:none;}
@media(min-width:1000px){.hero-br{display:inline;}}

@media(prefers-reduced-motion:reduce){
  .pm-hero-cover h1{opacity:1;animation:none;}
  .hero-word{background-size:100% 2px;animation:none;}
}
@media(max-width:781px){
  .pm-hero-cover .wp-block-columns{gap:48px!important;}
}

/* ── Encart de hero ─────────────────────────────────────────
   La colonne de droite des heros de page produit — « Vous êtes
   concerné si vous êtes… ». Employée sur Particulier et
   Pro / Indépendant / Dirigeant. La classe existait sur le bloc sans
   qu'aucune règle ne la définisse : tout était en inline. */
.pm-hero-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px;
  padding:28px 24px;
}
.pm-hero-card__t{
  font-family:'Overpass',sans-serif;
  font-size:0.8125rem;font-weight:700;color:#f3cb5f;
  margin:0 0 16px;
}
.pm-hero-card ul{font-size:0.875rem;font-weight:300;line-height:1.9;margin:0;}

/* ── Accueil : barre de confiance ──────────────────────────────
   Le chevauchement (.pm-trust-overlap) est défini en §3 avec les
   composants — il vivait auparavant dans un <style> collé au milieu
   de la page d'accueil.
   Les valeurs 30+ / 100% / 1 sont en dur dans le HTML : plus aucun
   JS d'animation de compteur. */
.pm-trust-bar{
  max-width:none;margin:0;background:#fff;border-radius:8px;
  box-shadow:0 16px 44px rgba(42,51,64,.16);
  display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;
}
.pm-trust-item{text-align:center;padding:28px 22px;display:flex;flex-direction:column;justify-content:center;}
.pm-trust-item--text .pm-trust-number{font-size:clamp(1.625rem,3.8vw,2.375rem);}
.pm-trust-item:not(:last-child){border-right:1px solid rgba(62,76,92,.10);}
.pm-trust-number{font-family:'Overpass',sans-serif;font-weight:800;font-size:clamp(1.875rem,4vw,2.625rem);line-height:1;color:#7d6018;margin-bottom:6px;}
.pm-trust-label{font-family:'Overpass',sans-serif;font-size:0.8125rem;font-weight:500;color:#5a6e82;line-height:1.4;}
/* Sous 560px les trois items s'empilent : le filet vertical devient
   horizontal, et le padding se resserre — trois chiffres empilés
   occupaient près de 40% du premier écran d'un téléphone. */
@media(max-width:560px){
  .pm-trust-bar{grid-template-columns:1fr;}
  .pm-trust-item{padding:18px 22px;}
  .pm-trust-item:not(:last-child){border-right:none;border-bottom:1px solid rgba(62,76,92,.10);}
}

/* ── Accueil : section « Votre courtière » ─────────────────── */
.pm-courtiere__aside{text-align:center}
.pm-courtiere__photo{
  width:180px;height:180px;border-radius:50%;object-fit:cover;
  border:3px solid rgba(188,157,69,.5);display:block;margin:0 auto;
}
.pm-courtiere__aside .pm-mot{margin:24px auto 0;max-width:370px}
@media(min-width:782px){
  .pm-courtiere__photo{width:220px;height:220px}
}

/* ── À propos : « Mon modèle » ──────────────────────────────
   Quatre points, dont le dernier n'est pas un quatrième argument :
   c'est la somme des trois. Deux gestes le disent, sans recourir au
   doré en aplat — la couleur est déjà très employée ailleurs et
   perdrait son pouvoir de signal.

   · un filet doré au-dessus, comme le trait d'une addition
   · le numéro remplacé par un « = »

   Le fond reste identique aux trois autres : la distinction se lit
   dans le geste, pas dans la teinte. */
.pm-modele{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:16px;
}
.pm-modele li{
  display:flex;gap:20px;align-items:flex-start;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);border-radius:4px;
  padding:22px 20px;
}
.pm-modele__num{
  font-family:'Overpass',sans-serif;
  font-size:1.75rem;line-height:1;
  color:rgba(188,157,69,.35);
  flex-shrink:0;min-width:36px;
  user-select:none;
}
.pm-modele__t{
  font-family:'Overpass',sans-serif;
  font-size:0.875rem;font-weight:600;line-height:1.35;
  color:#f3f1eb;margin:0 0 6px;
}
.pm-modele__d{
  font-family:'Overpass',sans-serif;
  font-size:0.84375rem;font-weight:300;line-height:1.65;
  color:rgba(243,241,235,.7);margin:0;
}

/* Le trait de conclusion. Il coiffe la carte, donc son angle
   supérieur cesse d'être arrondi : c'est une barre, pas une bordure. */
.pm-modele__final{
  margin-top:20px;padding-top:26px;
  border-top:2px solid #bc9d45;
  border-radius:0 0 4px 4px;
}
.pm-modele__final .pm-modele__num{color:#f3cb5f;font-size:1.875rem;}

/* ── Particulier : mutuelle chiens & chats ──────────────────
   Traitement distinct parce que c'est une nouveauté : illustration
   et « New! » manuscrit, là où les autres garanties sont des cartes.
   Placée dans le pilier « Protéger vos biens », à la suite de sa
   grille.

   Mobile-first : le texte d'abord, l'illustration ensuite — c'est
   l'information qui prime quand la place manque. */
.pm-neuf{
  display:grid;grid-template-columns:1fr;gap:24px;align-items:center;
  background:#f3f1eb;border-radius:8px;padding:24px 22px;
}
.pm-neuf__t{
  font-family:'Overpass',sans-serif;
  font-size:clamp(1.125rem,2vw,1.375rem);font-weight:700;line-height:1.25;
  color:#3e4c5c;margin:0 0 10px;
}
.pm-neuf__d{
  font-family:'Overpass',sans-serif;
  font-size:0.875rem;font-weight:300;line-height:1.65;
  color:#5a6e82;margin:0 0 12px;
}
.pm-neuf__note{
  font-family:'Overpass',sans-serif;
  font-size:0.8125rem;font-weight:300;line-height:1.6;
  color:#5a6e82;margin:0 0 18px;
  padding-left:14px;border-left:2px solid #bc9d45;
}
.pm-neuf__note strong{color:#3e4c5c;font-weight:700;}
.pm-neuf__cta{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:11px 22px;border-radius:4px;
  background:#3e4c5c;color:#f3f1eb;
  font-family:'Overpass',sans-serif;font-size:0.875rem;font-weight:700;
  text-decoration:none;transition:background-color .2s;
}
.pm-neuf__cta:hover{background:#2a3340;color:#f3f1eb;}
.pm-neuf__cta:focus-visible{outline:2px solid #7d6018;outline-offset:3px;}

/* Le « New ! » manuscrit sous l'illustration reprend .pm-anim__new,
   déjà défini en §4 — même Caveat, même inclinaison. C'est le geste
   du document Canva de Leslie : décalé vers la droite, comme une
   annotation portée à la main après coup. Réduit à 28px pour suivre
   la carte : c'est la limite basse, sous 24px le seuil « grand
   texte » de l'AA ne s'applique plus. */
.pm-neuf__img{
  position:relative;justify-self:center;
  width:100%;max-width:200px;
  padding-bottom:30px;   /* bande réservée : le « New ! » ne croise
                            jamais la queue du chien */
}
.pm-neuf__img svg{display:block;width:100%;height:auto;}
.pm-neuf__img .pm-anim__new{
  position:absolute;right:4%;bottom:0;
  margin:0;line-height:1;font-size:1.75rem;
}

@media(min-width:820px){
  .pm-neuf{grid-template-columns:1.5fr 1fr;gap:32px;padding:28px 32px;}
  .pm-neuf__img{max-width:230px;}
}

/* Posée sur le fond beige des piliers, son propre beige la rendait
   invisible. Blanc et filet gris-bleu, code couleur du pilier
   « vos biens » qu'elle rejoint. */
.pm-s-beige .pm-neuf{
  background:#fff;
  border-left:3px solid #5a6e82;
}

/* ── Accueil : les deux espaces en ligne ────────────────────
   Deux boutons figurent depuis toujours dans la barre supérieure et
   le footer, sans que rien n'explique ce qu'il y a derrière. C'est
   pourtant un différenciateur : plusieurs compagnies, un seul
   endroit pour tout retrouver.

   Section marine, carte blanche — sans quoi ce bloc et les
   témoignages, tous deux blancs, se confondaient en un seul pavé.

   Une seule carte fendue par une diagonale, et non deux cartes côte
   à côte : les deux espaces sont un même service, pas deux offres
   concurrentes. */
.pm-espaces{
  position:relative;overflow:hidden;
  background:#fff;border-radius:8px;
  display:grid;grid-template-columns:1fr;
}
.pm-espace{
  position:relative;z-index:1;
  padding:30px 28px;
  display:flex;flex-direction:column;
}
/* Sur mobile la diagonale disparaît : un filet horizontal sépare les
   deux moitiés empilées. */
.pm-espace + .pm-espace{border-top:1px solid rgba(62,76,92,.12);}
.pm-espace__ico{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-bottom:18px;
  border-radius:50%;background:rgba(188,157,69,.16);color:#7d6018;
}
.pm-espace__ico svg{width:20px;height:20px;}
.pm-espace__t{
  font-family:'Overpass',sans-serif;
  font-size:1.125rem;font-weight:700;line-height:1.25;
  color:#3e4c5c;margin:0 0 8px;
}
.pm-espace__d{
  font-family:'Overpass',sans-serif;
  font-size:0.875rem;font-weight:300;line-height:1.7;
  color:#5a6e82;margin:0 0 22px;
}
.pm-espace__cta{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:12px 24px;border-radius:4px;
  background:#3e4c5c;color:#f3f1eb;
  font-family:'Overpass',sans-serif;font-size:0.875rem;font-weight:700;
  text-decoration:none;transition:background-color .2s;
}
.pm-espace__cta:hover{background:#2a3340;color:#f3f1eb;}
.pm-espace__cta:focus-visible{outline:2px solid #7d6018;outline-offset:3px;}
@media(min-width:720px){
  .pm-espaces{grid-template-columns:1fr 1fr;}
  .pm-espace + .pm-espace{border-top:0;}
  /* Plus haute que la carte pour atteindre les deux angles ; l'excédent
     est rogné par l'overflow du conteneur. */
  .pm-espaces::after{
    content:"";position:absolute;z-index:0;
    top:-15%;left:50%;width:1px;height:130%;
    background:rgba(62,76,92,.16);
    transform:rotate(9deg);
  }
  /* Paddings asymétriques : le texte ne vient jamais toucher la
     diagonale. */
  .pm-espace:first-child{padding:36px 52px 36px 36px;}
  .pm-espace:last-child{padding:36px 36px 36px 52px;}
}

/* ── Accueil : les objections d'avant-contact ───────────────
   Pas une FAQ — la page /faq existe et porte le schema. Ce bloc
   traite les hésitations qui empêchent le premier contact, absentes
   de la FAQ. Placé juste avant la CTA : il lève les dernières
   réserves au moment où l'on décide. */
.pm-objections{display:grid;grid-template-columns:1fr;gap:16px;}
.pm-objection{
  background:#f3f1eb;border-radius:8px;padding:24px 22px;
  border-left:3px solid #bc9d45;
}
.pm-objection__q{
  font-family:'Overpass',sans-serif;
  font-size:0.9375rem;font-weight:700;font-style:italic;line-height:1.4;
  color:#3e4c5c;margin:0 0 10px;
}
.pm-objection__a{
  font-family:'Overpass',sans-serif;
  font-size:0.875rem;font-weight:300;line-height:1.7;
  color:#5a6e82;margin:0;
}
.pm-objections__more{
  margin:28px 0 0;text-align:center;
  font-family:'Overpass',sans-serif;font-size:0.875rem;font-weight:600;
}
.pm-objections__more a{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  color:#7d6018;text-decoration:underline;text-underline-offset:3px;
}
.pm-objections__more a:focus-visible{outline:2px solid #7d6018;outline-offset:3px;border-radius:2px;}
@media(min-width:820px){.pm-objections{grid-template-columns:repeat(3,1fr);}}

/* ── Contact : liste de coordonnées du hero ─────────────────
   <ul> plutôt que des <div> empilés : liste d'éléments homogènes,
   annoncée comme telle par les lecteurs d'écran. */
.pm-contact-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:16px;
}
.pm-contact-list li{
  display:flex;align-items:flex-start;gap:12px;
  font-family:'Overpass',sans-serif;font-size:0.875rem;line-height:1.5;
  color:rgba(243,241,235,.82);
}
.pm-contact-list li::marker{content:"";}
.pm-contact-list svg{flex-shrink:0;margin-top:2px;}
.pm-contact-list a{
  color:rgba(243,241,235,.82);
  text-decoration:underline;text-underline-offset:3px;
}
.pm-contact-list a:hover{color:#f3cb5f;}
.pm-contact-list a:focus-visible{
  outline:2px solid #f3cb5f;outline-offset:3px;border-radius:2px;
}

/* ── Page Lexique ───────────────────────────────────────────
   Mobile-first : la base vaut pour le téléphone, la media query
   n'ajoute que ce qui a besoin de plus de place. */

/* Barre de lettres collante. Elle reste accessible pendant tout le
   défilement — sans ça, sur 45 entrées, il faut remonter la page
   entière pour changer de lettre. */
.lex-toolbar{
  position:sticky;top:var(--pm-header);   /* sous le header, pas derrière */
  z-index:10;                             /* le header du site reste au-dessus */
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  /* Fond et absence de padding vertical : c'était en inline sur le bloc.
     Marine foncé plutôt que #3e4c5c, pour se détacher du hero et de la
     liste qui l'encadrent tous deux en marine. */
  background:#2a3340;
  padding-block:0;
}
/* Le fond de la barre reste pleine largeur (porté par .lex-toolbar),
   mais les lettres s'alignent sur la colonne de texte : même 1140 px
   centrés que .pm-inner du hero et de la liste. Sans ça, les lettres
   filent jusqu'aux bords et ne tombent pas sur les entrées. */
.lex-toolbar__inner{
  display:flex;flex-direction:column;gap:12px;
  padding-block:14px;
  font-family:'Overpass',sans-serif;
  max-width:1140px;
  margin-inline:auto;
}
/* Gutenberg contraint .wp-block-html à contentSize et le centre : on le
   libère ici pour que la contrainte de largeur soit posée une seule fois,
   par .lex-toolbar__inner ci-dessus. */
.lex-toolbar .wp-block-html{max-width:none;}

/* ── Navigation par lettre ──────────────────────────────────
   Cibles 44×44 px (WCAG 2.5.8 / Opquast). L'ancienne version
   faisait ~25 px de haut : intapable au pouce. */
/* min-width:0 — sans ça, un élément flex refuse de rétrécir sous la
   largeur de son contenu : les 14 pastilles débordaient à droite au
   lieu de passer à la ligne. */
.lex-nav{min-width:0;}
.lex-nav ul{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0;padding:0;list-style:none;
}
.lex-nav li{margin:0;}
.lex-nav a{
  display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;
  font-size:0.875rem;font-weight:700;line-height:1;
  color:rgba(243,241,235,.82);text-decoration:none;
  border:1px solid rgba(255,255,255,.2);border-radius:3px;
  transition:color .15s,border-color .15s,background-color .15s;
}
.lex-nav a:hover,.lex-nav a:focus-visible{
  color:#2a3340;background:#f3cb5f;border-color:#f3cb5f;
}
.lex-nav a:focus-visible{outline:2px solid #f3cb5f;outline-offset:2px;}

/* ── Sections par lettre ────────────────────────────────────
   <h2> pour la lettre, <h3> pour le terme : la page devient
   navigable au lecteur d'écran et lisible par les moteurs. */
.lex-section{margin-bottom:48px;}
.lex-section:last-of-type{margin-bottom:0;}
.lex-letter{
  font-family:'Overpass',sans-serif;
  font-size:1.75rem;font-weight:800;color:#f3cb5f;
  margin:0 0 20px;padding-bottom:8px;
  border-bottom:2px solid rgba(255,255,255,.15);
  scroll-margin-top:calc(var(--pm-header) + 84px);   /* header + barre collante */
}
.lex-entries{display:flex;flex-direction:column;gap:16px;}

.lex-entry-block{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:4px;
  padding:20px 22px;
  scroll-margin-top:calc(var(--pm-header) + 84px);
}
.lex-term{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  font-family:'Overpass',sans-serif;
  font-size:0.9375rem;font-weight:700;color:#f3cb5f;
  margin:0 0 8px;line-height:1.3;
}
/* Le développement du sigle : même ligne sur grand écran,
   passe dessous quand la place manque. */
.lex-full{
  font-size:0.75rem;font-weight:300;color:rgba(243,241,235,.72);
}
.lex-def{
  margin:0;
  font-family:'Overpass',sans-serif;
  font-size:0.84375rem;font-weight:300;line-height:1.7;
  color:rgba(243,241,235,.82);
}
.lex-link{
  color:#f3cb5f;
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;
}
.lex-link:hover,.lex-link:focus-visible{opacity:.82;}
.lex-link:focus-visible{outline:2px solid #f3cb5f;outline-offset:2px;border-radius:2px;}

@media(min-width:600px){
  .lex-toolbar__inner{padding-block:16px;}
}

/* ── Plan du site ───────────────────────────────────────────
   Rendu par [pm_plan_du_site] à partir du menu du même nom.
   Mobile-first : une colonne, puis deux, puis trois. */
.pm-plan-site{display:grid;grid-template-columns:1fr;gap:40px 32px;}
.pm-plan-site .pm-foot-head{
  color:#7d6018;
  padding-bottom:10px;margin-bottom:16px;
  border-bottom:1px solid rgba(62,76,92,.15);
}
.pm-plan-site ul{list-style:none;margin:0;padding:0;}
.pm-plan-site li{margin-bottom:10px;}
/* padding vertical : la cible tactile atteint 44px sans écarter
   visuellement les liens plus que nécessaire. */
.pm-plan-site a{
  display:inline-block;padding:9px 0;
  font-family:'Overpass',sans-serif;font-size:0.9375rem;font-weight:300;
  color:#3e4c5c;text-decoration:none;
}
.pm-plan-site a:hover{color:#7d6018;text-decoration:underline;}
.pm-plan-site a:focus-visible{outline:2px solid #7d6018;outline-offset:2px;border-radius:2px;}
@media(min-width:600px){.pm-plan-site{grid-template-columns:1fr 1fr;}}
@media(min-width:900px){.pm-plan-site{grid-template-columns:repeat(3,1fr);}}

/* ── Devis : comparatif des trois voies ─────────────────────
   La carte « Votre courtière » n'est pas une option parmi trois :
   c'est la réponse. Elle est donc plus large, plus fournie, et
   surtout PLACÉE EN PREMIER dans le HTML.

   Ce choix d'ordre est délibéré : mettre la carte au centre en
   desktop aurait demandé un order:2 CSS, donc un ordre visuel
   différent de l'ordre de lecture — ce que WCAG 1.3.2 proscrit.
   Ici l'ordre est le même partout : la réponse, puis les deux
   alternatives. */

.pm-vs{display:grid;grid-template-columns:1fr;gap:16px;}
/* ⚠️ SIXIÈME PIÈGE DE CASCADE. Le comparatif est un wp:group, donc
   Gutenberg lui ajoute is-layout-flow et pose une margin-block-start sur
   chacun de ses enfants sauf le premier. Sur une grille, ces marges
   s'ajoutent au row-gap et décalent les items : les deux alternatives
   descendaient sous la carte principale au lieu de se caler sur son
   grid-row:1/span 2, et l'écart de 6px devenait 30px.
   Même famille que le piège n°3 (.pm-cta-detach) : le !important est
   nécessaire, la règle de Gutenberg étant écrite avec :where() mais
   appliquée par une classe générée qu'on ne peut pas cibler. */
.pm-vs > *{margin-block-start:0!important;margin-block-end:0!important;}

/* ── La carte principale ───────────────────────────────────── */
.pm-vs__main{
  background:#3e4c5c;border:1px solid rgba(188,157,69,.55);
  border-radius:8px;padding:32px 28px;
  box-shadow:0 12px 32px rgba(42,51,64,.14);
}
.pm-vs__badge{
  display:inline-block;margin:0 0 16px;
  padding:5px 12px;border-radius:999px;
  background:rgba(243,203,95,.16);
  font-family:'Overpass',sans-serif;
  font-size:0.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#f3cb5f;
}
.pm-vs__main h3{
  font-family:'Overpass',sans-serif;
  font-size:clamp(1.25rem,2.4vw,1.5rem);font-weight:700;line-height:1.25;
  color:#f3f1eb;margin:0 0 12px;
}
.pm-vs__main p{
  font-family:'Overpass',sans-serif;
  font-size:0.9375rem;font-weight:300;line-height:1.75;
  color:rgba(243,241,235,.9);margin:0 0 20px;
}
/* ⚠️ Déclaré APRÈS .pm-vs__main p, et avec deux classes : la règle des
   paragraphes de la carte (0,1,1) l'emportait sur .pm-vs__badge (0,1,0),
   qui perdait son doré, sa graisse 700 et son corps de 12px. Le badge
   sortait donc en beige fin — et le doré à 16% sous ce beige donnait un
   gris terne sur le marine.
   Le fond disparaît : un aplat n'apportait rien qu'un eyebrow ne fasse
   déjà, et #d4b86a est le doré des eyebrows sur fond sombre.
   width:max-content — un inline-block suffit en principe, mais le layout
   contraint de Gutenberg étire le paragraphe sur toute la largeur. */
.pm-vs__main .pm-vs__badge{
  display:inline-block;width:max-content;max-width:100%;
  margin:0 0 16px;padding:0;background:transparent;border-radius:0;
  font-size:0.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#d4b86a;
}
/* Les trois bénéfices : c'est ce que le visiteur obtient, pas ce
   que l'agence est. */
.pm-vs__gains{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px;}
.pm-vs__gains li{
  position:relative;padding-left:26px;
  font-family:'Overpass',sans-serif;
  font-size:0.90625rem;font-weight:400;line-height:1.5;
  color:#f3f1eb;
}
.pm-vs__gains li::before{
  content:"\2713";position:absolute;left:0;top:0;
  color:#f3cb5f;font-weight:700;
}
/* Deux sélecteurs, comme les .pm-btn-* : la classe est portée par le
   <a> quand le lien est brut, et par le <div> wrapper quand c'est un
   wp:button — auquel cas c'est .wp-block-button__link qu'il faut viser. */
.pm-vs__cta .wp-block-button__link,
.pm-vs__cta:not(.wp-block-button){
  display:inline-flex!important;align-items:center;gap:8px;
  min-height:44px;padding:12px 26px!important;border-radius:4px!important;
  background:#f3cb5f!important;color:#2a3340!important;
  font-family:'Overpass',sans-serif;font-size:0.9375rem!important;font-weight:700!important;
  text-decoration:none!important;transition:background-color .2s;
}
.pm-vs__cta:hover .wp-block-button__link,
.pm-vs__cta:not(.wp-block-button):hover{background:#ddb54a!important;color:#2a3340!important;}
.pm-vs__cta .wp-block-button__link:focus-visible,
.pm-vs__cta:not(.wp-block-button):focus-visible{outline:2px solid #f3f1eb;outline-offset:3px;}

/* ── Les deux alternatives ─────────────────────────────────── */
.pm-vs__alt{
  background:#f3f1eb;border:1px solid rgba(62,76,92,.10);
  border-radius:8px;padding:24px 22px;
}
.pm-vs__kicker{
  font-family:'Overpass',sans-serif;
  font-size:0.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#7d6018;margin:0 0 10px;
}
.pm-vs__alt h3{
  font-family:'Overpass',sans-serif;
  font-size:1rem;font-weight:700;line-height:1.25;
  color:#3e4c5c;margin:0 0 8px;
}
.pm-vs__alt p{
  font-family:'Overpass',sans-serif;
  font-size:0.875rem;font-weight:300;line-height:1.7;
  color:#5a6e82;margin:0;
}

/* Les deux alternatives se resserrent sur petit écran : leur texte est
   court, elles n'ont pas besoin de la respiration de la carte
   principale. Environ 90px gagnés sans rien masquer — un carrousel
   aurait caché les repoussoirs, donc supprimé la comparaison. */
@media(max-width:599px){
  .pm-vs__main{padding:26px 22px;}
  .pm-vs__alt{padding:18px 20px;}
  .pm-vs__kicker{margin-bottom:6px;}
  .pm-vs__alt h3{font-size:0.9375rem;margin-bottom:6px;}
  .pm-vs__alt p{font-size:0.84375rem;line-height:1.6;}
}

@media(min-width:900px){
  /* La carte principale déborde en haut et en bas des deux autres :
     elle ne partage plus leur ligne, elle est devant. C'est le geste
     des grilles tarifaires, où l'offre recommandée sort du cadre.
     Il fonctionne parce que la carte est déjà marine et ombrée — le
     débordement confirme ce que la couleur annonce.

     Le padding de la grille compense la marge négative, sinon
     l'ombre serait rognée par la section.

     column-gap et row-gap dissociés : l'écart avec la carte
     principale reste large, celui entre les deux alternatives se
     resserre pour qu'elles se lisent comme un seul bloc. */
  .pm-vs{
    grid-template-columns:1.35fr 1fr;
    column-gap:0;
    row-gap:6px;
    padding:14px 0;
  }
  /* z-index 2 : la carte principale passe devant, son ombre comprise. */
  .pm-vs__main{
    position:relative;z-index:2;
    grid-row:1 / span 2;
    padding:44px 36px;margin:-14px 0;
  }
  /* Les deux alternatives glissent SOUS la carte principale : elles
     semblent en sortir plutôt que de se ranger à côté. La marge
     négative les fait passer derrière, le padding gauche ramène leur
     texte au-delà du bord de la carte marine. */
  .pm-vs__alt{
    position:relative;z-index:1;
    margin-left:-52px;
    padding-left:74px;
    display:flex;flex-direction:column;justify-content:center;
  }
}

/* ── Pages légales ─────────────────────────────────────────── */
.pm-legal h1{font-family:'DM Serif Display',serif!important;font-size:clamp(1.75rem,4vw,2.875rem)!important;color:#2a3340!important;font-weight:400!important;line-height:1.2!important;margin:0 0 12px!important;}
.pm-legal h2{font-family:'Overpass',sans-serif!important;font-size:1.25rem!important;font-weight:700!important;color:#3e4c5c!important;line-height:1.3!important;margin:40px 0 14px!important;padding-bottom:10px;border-bottom:2px solid #d4b86a;}
.pm-legal p,.pm-legal li{font-family:'Overpass',sans-serif;font-size:0.875rem;font-weight:300;color:#3e4c5c;line-height:1.8;}
.pm-legal a{color:#7d6018;}
.pm-legal .pm-legal-eyebrow{font-size:0.75rem!important;font-weight:700!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#7d6018!important;margin:0 0 8px!important;}
.pm-legal .pm-legal-credit{font-size:0.75rem;color:#5a6e82;font-weight:300;text-align:center;padding-top:24px;border-top:1px solid rgba(62,76,92,.12);margin-top:48px;}
.pm-legal .pm-legal-date{font-size:0.8125rem!important;color:#5a6e82!important;margin:0 0 8px!important;}

/* ── Page 404 ───────────────────────────────────────────────
   Contenu rendu par functions.php §11. Fond beige et non marine :
   le visiteur est déjà en situation d'échec, l'accueillir sur un
   écran sombre ajoute à la sanction.
   Le H1 reprend DM Serif Display comme les heros, mais en marine
   foncé — il n'est pas sur fond sombre. */
.pm-404{text-align:center;}
.pm-404__t{
  font-family:'DM Serif Display',serif;font-weight:400;
  font-size:clamp(1.75rem,4vw,2.875rem);
  color:#2a3340;line-height:1.15;margin:0 0 16px;
}
.pm-404__lead{
  font-size:1rem;font-weight:300;line-height:1.75;
  max-width:52ch;margin:0 auto 32px;
}
.pm-404__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:0 0 28px;}
.pm-404__more{font-size:0.875rem;margin:0;}

/* ═══════════════════════════════════════════════════════════════
   7. RESPONSIVE — paliers globaux
═══════════════════════════════════════════════════════════════ */

@media(max-width:900px){
  .pm-s--pont{padding-block:170px 56px;}

  /* Les modificateurs .pm-s--* sont exclus : ils portent un rythme
     voulu que ce palier écrasait, étant écrit plus bas à spécificité
     égale. */
  .pm-hero,
  .pm-s-beige:not([class*="pm-s--"]),
  .pm-s-white:not([class*="pm-s--"]),
  .pm-s-marine:not([class*="pm-s--"]),
  .pm-s-or:not([class*="pm-s--"]){padding-block:56px;}
  .pm-s--logos{padding-block:40px;}
  .pm-s--cta{padding-block:48px 40px;}
  .pm-s--adjacent{padding-block:24px 56px;}
  .pm-grid-4{grid-template-columns:1fr 1fr!important;}
  .pm-grid-3{grid-template-columns:1fr!important;}
  .wp-block-columns{flex-wrap:wrap!important;}
  .wp-block-column{flex-basis:100%!important;min-width:100%!important;}
}
@media(max-width:781px){
  .pm-mot-bridge{margin:56px auto -128px!important;max-width:none}
}

/* Blocksy met chaque colonne du pied de page en flex column avec
   align-items:center. .pm-foot y est donc centré par son parent, et
   ni margin-inline:auto ni max-width ne peuvent le recaler — d'où
   l'écart avec les sections, insensible à toutes les valeurs testées.
   On neutralise l'alignement du conteneur pour que le footer reprenne
   la main sur sa propre largeur.
   ⚠️ Sélecteur interne au thème : à revérifier après mise à jour. */
[data-footer*="type-1"] .ct-footer [data-column="widget-area-2"]{
  --horizontal-alignment:stretch;
  --text-horizontal-alignment:left;
}

/* ── Hero de l'accueil — cadrage mobile ─────────────────────
   Le point focal 50%/50% est un style INLINE posé par le bloc
   wp:cover : seul !important peut le surcharger. Sous 781px le
   format devient vertical et le cadrage centré sortait Leslie du
   champ. Le bureau garde son cadrage d'origine, la règle étant
   enfermée dans la media query.
   Seule la valeur horizontale agit : l'image est panoramique et
   le conteneur vertical, donc `cover` ne laisse aucune marge de
   déplacement en hauteur. La seconde valeur est sans effet ici,
   conservée pour la lisibilité de la propriété.
   ⚠️ Si le point focal est modifié dans l'éditeur, la valeur
   inline change mais celle-ci reste : penser à les aligner. */
@media (max-width: 781px){
  .pm-hero-cover .wp-block-cover__image-background{
    background-position: 66% 54% !important;
  }
}

/* ── Bandeau cookies : bouton « refuser » retiré ────────────
   Les seuls cookies du site sont techniques (session o2switch,
   mémorisation de la fermeture du bandeau) : ils sont exemptés de
   consentement, il n'y a donc rien à refuser. Les deux boutons
   faisaient la même chose — fermer le bandeau — ce qui promet un
   choix inexistant.
   Le libellé a été vidé dans le Customizer, mais Blocksy rend le
   bouton quand même : un <button> sans nom accessible, annoncé
   « bouton » et rien d'autre (WCAG 4.1.2).
   display:none le retire de l'affichage, de la tabulation ET de
   l'arbre d'accessibilité — ce que ne feraient ni visibility ni
   opacity.
   ⚠️ Si un traceur soumis à consentement est ajouté un jour
   (mesure d'audience non exemptée, pixel), cette règle doit être
   SUPPRIMÉE et un vrai gestionnaire mis en place : le bandeau
   Blocksy ne bloque aucun script avant acceptation. */
.ct-cookies-decline-button{display:none!important;}