/*
Theme Name: VWP
Theme URI: https://www.votre-webmaster.pro/
Author: SeriousWeb
Description: Theme autonome de votre-webmaster.pro — annuaire de prestataires web. Sans parent.
Version: 0.1.0
Requires PHP: 8.1
Text Domain: vwp
*/

/* -------------------------------------------------------------------------
   DIRECTION ARTISTIQUE  (§4.3 — ecrite avant la premiere ligne de CSS)

   CHARTE EXISTANTE CONSERVEE : le bleu #6796BF des disques du logo, le noir du
   mot « Webmaster Pro », Raleway. On ne redessine pas l identite, on la remet
   au propre.
   Registre technique et institutionnel : un annuaire se lit vite et doit
   inspirer confiance. Densite d information elevee, hierarchie par la graisse
   et l espace, la couleur ne hierarchise jamais. Le bleu de marque reste un
   aplat et un reperage ; le texte est noir, les liens dans une variante de la
   meme teinte assez foncee pour etre lisible.
   Aucun degrade, aucune ombre portee decorative, aucun coin tres arrondi.
   ------------------------------------------------------------------------- */

/* =========================================================================
   1. Base
   ========================================================================= */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-texte);
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-titre);
  line-height:1.2;
  color:var(--ink);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:var(--step-4); letter-spacing:-.02em; }
h2{ font-size:var(--step-2); margin-top:1.8em; }
h3{ font-size:var(--step-1); margin-top:1.4em; }

p,ul,ol{ margin:0 0 1em; }
ul,ol{ padding-left:1.25em; }

a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:.15em; }
a:hover{ color:var(--accent-hover); }

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

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

/* Chiffres en tabulaire : les compteurs d une liste ne doivent pas danser. */
.vwp-chiffres,.vwp-data,time,td:has(+ td){ font-variant-numeric:tabular-nums; }

/* =========================================================================
   2. Mise en page
   ========================================================================= */

.vwp-wrap{ width:min(100% - 2rem, var(--wrap)); margin-inline:auto; }
.vwp-section{ padding-block:var(--section); }
.vwp-principal{ min-height:50vh; }

.vwp-evitement{
  position:absolute; left:-9999px;
  background:var(--accent); color:var(--on-accent);
  padding:.6rem 1rem; z-index:100; border-radius:0 0 var(--radius) 0;
}
.vwp-evitement:focus{ left:0; top:0; }

/* =========================================================================
   3. Entete
   ========================================================================= */

.vwp-entete{
  position:sticky; top:0; z-index:50;
  min-height:var(--header-h);
  background:var(--surface);
  border-bottom:1px solid var(--rule);
}
.vwp-entete__inner{
  display:flex; align-items:center; gap:var(--gap-2);
  min-height:var(--header-h);
}
.vwp-marque{ margin:0; font-family:var(--font-titre); font-weight:700; font-size:var(--step-1); }
.vwp-marque a{ color:var(--ink); text-decoration:none; }
.vwp-nav{ margin-inline-start:auto; }
.vwp-nav__liste{ display:flex; flex-wrap:wrap; gap:var(--gap-2); list-style:none; margin:0; padding:0; }
.vwp-nav__liste a{ color:var(--ink-2); text-decoration:none; font-size:var(--step--1); }
.vwp-nav__liste a:hover{ color:var(--accent); text-decoration:underline; }

/* Sous-menus. Sans ces regles, wp_nav_menu( depth 2 ) rend les deux niveaux empiles et
   TOUJOURS visibles : l'en-tete faisait 190 px de haut, avec les sept prestations et les
   deux entrees « votre webmaster » deroulees en permanence. Constate a la capture d'ecran,
   invisible en rendu texte comme en analyse du HTML. */
.vwp-nav__liste li{ position:relative; }
.vwp-nav__liste .sub-menu{
  position:absolute; inset-inline-start:0; top:100%; z-index:20;
  display:grid; gap:.35rem; min-width:15rem; margin:0; padding:.7rem .9rem;
  list-style:none; background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--radius); box-shadow:0 .5rem 1.5rem rgb(0 0 0 / .10);
  opacity:0; visibility:hidden; transition:opacity .12s ease;
}
.vwp-nav__liste li:hover > .sub-menu,
.vwp-nav__liste li:focus-within > .sub-menu{ opacity:1; visibility:visible; }
/* Le parent d'un sous-menu porte un chevron, pour qu'on sache qu'il se deroule. */
.vwp-nav__liste .menu-item-has-children > a::after{ content:" \25BE"; font-size:.8em; }
.vwp-entete__action{ margin:0; display:flex; flex-wrap:wrap; gap:.5rem; }

/* =========================================================================
   4. Boutons
   ========================================================================= */

.vwp-bouton{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:.55rem 1.1rem;
  background:var(--accent); color:var(--on-accent);
  border:1px solid transparent; border-radius:var(--radius);
  font-weight:600; font-size:var(--step--1); text-decoration:none;
}
.vwp-bouton:hover{ background:var(--accent-hover); color:var(--on-accent); }

/* Second geste de l en-tete : meme gabarit, poids visuel moindre, pour que l accent ne
   soit pas porte deux fois cote a cote. */
.vwp-bouton--second{
  background:transparent; color:var(--ink-2); border-color:var(--rule);
}
.vwp-bouton--second:hover{
  background:transparent; color:var(--accent); border-color:var(--accent);
}

/* =========================================================================
   5. Fil d Ariane, entete de zone
   ========================================================================= */

.vwp-ariane{ font-size:var(--step--1); color:var(--ink-3); margin-bottom:1.5rem; }
.vwp-ariane a{ color:var(--ink-3); }
.vwp-ariane span[aria-hidden]{ margin-inline:.35rem; color:var(--rule); }

.vwp-zone__entete{ border-bottom:1px solid var(--rule); padding-bottom:1.25rem; margin-bottom:2rem; }
.vwp-chiffres{ margin:0; color:var(--ink-3); font-size:var(--step--1); }
.vwp-zone__intro{ max-width:var(--wrap-narrow); color:var(--ink-2); }

/* =========================================================================
   6. Grilles de liens : communes, departements
   ========================================================================= */

.vwp-grille{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.15rem 1.5rem;
  grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr));
}
.vwp-grille li{ border-bottom:1px solid var(--rule-soft); }
.vwp-grille a{
  display:block; padding:.5rem .25rem;
  color:var(--ink); text-decoration:none; font-size:var(--step--1);
}
.vwp-grille a:hover{ color:var(--accent); text-decoration:underline; }

/* Metiers : lien + une ligne de besoin (page ville), + villes (page territoire) */
.vwp-metiers{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.75rem 1.5rem;
  grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr));
}
.vwp-metiers li{
  display:flex; flex-direction:column; gap:.2rem;
  padding:.6rem .25rem; border-bottom:1px solid var(--rule-soft);
}
.vwp-metiers a{ color:var(--ink); font-weight:600; }
.vwp-metiers a:hover{ color:var(--accent); }
.vwp-metiers span{ font-size:var(--step--1); color:var(--ink-2); }
.vwp-metiers .vwp-metiers__villes{ color:var(--ink); }
.vwp-metiers .vwp-metiers__villes a{ font-weight:400; }

/* =========================================================================
   7. Prestataires et etat vide
   ========================================================================= */

.vwp-pros{ list-style:none; margin:0; padding:0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr)); }
.vwp-pros li{ background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius-2); padding:1rem; }

.vwp-vide{
  background:var(--surface-2); border:1px dashed var(--rule);
  border-radius:var(--radius-2); padding:1rem 1.25rem;
  color:var(--ink-2); font-size:var(--step--1); margin:0;
}

/* =========================================================================
   8. Bloc de recrutement : l audience PRO sur une page pensee pour le client
   ========================================================================= */

.vwp-recrutement{
  margin-block:var(--section) 0;
  background:var(--accent-soft);
  border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-2);
  padding:1.5rem;
}
.vwp-recrutement h2{ margin-top:0; font-size:var(--step-1); }
.vwp-recrutement p{ color:var(--ink-2); max-width:44ch; }
.vwp-recrutement p:last-child{ margin-bottom:0; }
/* L encadre est suivi du texte de la page : sans marge, le premier paragraphe lui collait (Lyon, 2026-10-03). */
.vwp-recrutement + .vwp-zone__intro{ margin-top:2rem; }

/* =========================================================================
   9. FAQ
   ========================================================================= */

.vwp-faq__item{ border-bottom:1px solid var(--rule-soft); padding:.85rem 0; }
.vwp-faq__item summary{
  cursor:pointer; font-weight:600; color:var(--ink);
  list-style:none; display:flex; gap:.6rem; align-items:baseline;
}
.vwp-faq__item summary::-webkit-details-marker{ display:none; }
.vwp-faq__item summary::before{ content:"+"; color:var(--accent); font-family:var(--font-data); }
.vwp-faq__item[open] summary::before{ content:"\2212"; }
.vwp-faq__item p{ margin:.6rem 0 0 1.5rem; color:var(--ink-2); }

/* =========================================================================
   10. Pied
   ========================================================================= */

.vwp-pied{
  margin-top:var(--section);
  background:var(--surface);
  border-top:1px solid var(--rule);
  padding-block:2rem;
  font-size:var(--step--1);
}
.vwp-pied__liste{ display:flex; flex-wrap:wrap; gap:var(--gap-2); list-style:none; margin:0 0 1rem; padding:0; }
.vwp-pied__liste a{ color:var(--ink-2); text-decoration:none; }
.vwp-pied__mention{ margin:0; color:var(--ink-3); }

/* =========================================================================
   11. Contenu herite (§4.9)
   On style ce que le contenu PEUT contenir, pas ce que l editeur produit
   d habitude : ce corpus vient d un import, pas de l editeur de blocs.
   ========================================================================= */

.vwp-zone__intro h2{ font-size:var(--step-1); margin-top:1.6em; }
.vwp-zone__intro br + br{ display:none; }        /* corps separes par des <br> doubles */

.table{ overflow-x:auto; margin-block:1.25em; }  /* pose par le filtre sur the_content */
table{ border-collapse:collapse; width:100%; font-size:var(--step--1); }
th,td{ border:1px solid var(--rule); padding:.5rem .65rem; text-align:left; }
th{ background:var(--surface-2); font-weight:600; }

/* Le debordement sur grand ecran vient de la somme des largeurs MINIMALES des colonnes,
   pas de la largeur declaree : chaque mot long impose son gabarit. */
td,th{ overflow-wrap:break-word; hyphens:manual; }  /* plus de « Four-chette » : le tableau defile (audit 2026-10-05) */
.vwp-tableau{ overflow-x:auto; margin-block:1.25em; -webkit-overflow-scrolling:touch; }
.vwp-tableau table{ margin:0; }
.vwp-tableau th, .vwp-tableau td{ min-width:7.5rem; }

pre{ overflow-x:auto; background:var(--surface-2); padding:1rem; border-radius:var(--radius); }
code{ font-family:var(--font-data); font-size:.92em; }
blockquote{ margin:1.25em 0; padding-left:1rem; border-left:3px solid var(--rule); color:var(--ink-2); }

/* =========================================================================
   12. Petits ecrans
   ========================================================================= */


/* Le menu bascule en colonne des 64rem, pas 48rem.
   Entre les deux — typiquement 900 px — le logo, les six entrees et le bouton ne tiennent
   plus sur une ligne : « Contactez-nous » tombait seul sur une seconde ligne et le bouton
   « Inscription gratuite » se coupait en deux. Constate a la capture, a 900 px de large. */
/* Bouton de menu : masque au-dessus de 64rem, ou la barre tient sur une ligne. */
.vwp-menu-bouton{ display:none; }

@media (max-width:64rem){
  .vwp-menu-bouton{
    display:block; order:2; font:inherit; cursor:pointer;
    padding:.4rem .8rem; color:var(--ink); background:var(--surface);
    border:1px solid var(--rule); border-radius:var(--radius);
  }
  .vwp-menu-bouton[aria-expanded="true"]{ background:var(--surface-2); }
  .vwp-nav--repliable{ display:none; }
  .vwp-nav--ouvert{ display:block; }
  .vwp-entete__inner{ flex-wrap:wrap; gap:.75rem; padding-block:.75rem; }
  .vwp-nav{ order:3; width:100%; margin-inline-start:0; }
  /* En flex + wrap, chaque sous-menu deroule dans le flux venait s'intercaler entre les
     entrees de premier niveau : « Prestations » a gauche, ses sept enfants a droite, puis
     « Blog » et « Contactez-nous » sur la meme ligne. Une colonne, donc. */
  .vwp-nav__liste{ display:block; }
  .vwp-nav__liste > li{ padding-block:.35rem; border-block-start:1px solid var(--rule-soft); }
  .vwp-nav__liste > li:first-child{ border-block-start:0; }
  /* Au doigt, pas de survol : les sous-menus se deroulent dans le flux, en retrait. */
  .vwp-nav__liste .sub-menu{
    position:static; opacity:1; visibility:visible; min-width:0;
    display:block; padding:.3rem 0 .1rem 1rem; border:0; box-shadow:none; background:none;
  }
  .vwp-nav__liste .sub-menu li{ padding-block:.22rem; }
  .vwp-nav__liste .menu-item-has-children > a::after{ content:""; }
  .vwp-entete{ position:static; }

  /* En-tete mobile sur UNE ligne (2026-10-04, « le header est moche » sur mobile) : logo,
     bascule de theme, bouton Menu. Les deux boutons d action empilaient trois lignes et
     ~275 px avant le titre ; ils passent dans le panneau du menu, en pleine largeur. */
  .vwp-entete__inner{ gap:.5rem; padding-block:.5rem; }
  .vwp-marque{ order:0; margin-inline-end:auto; }
  .vwp-logo{ width:78px; height:auto; }
  .vwp-theme{ order:1; margin-inline-start:0; width:2.6rem; height:2.6rem; }
  .vwp-menu-bouton{
    display:inline-flex; align-items:center; gap:.5rem; min-height:2.6rem; padding:.45rem .9rem;
    font-weight:600;
  }
  .vwp-menu-bouton::before{
    content:""; width:1.1rem; height:.8rem;
    background:
      linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
      linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
      linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
  }
  .vwp-menu-bouton[aria-expanded="true"]::before{
    background:
      linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
      linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  }

  /* Panneau ouvert : vraies zones tactiles, la rubrique parente lue comme un titre. */
  .vwp-nav--ouvert{ padding-block:.25rem .5rem; border-block-start:1px solid var(--rule-soft); }
  .vwp-nav__liste > li{ padding-block:0; }
  .vwp-nav__liste a{ display:block; padding:.75rem .25rem; font-size:var(--step-0); color:var(--ink); }
  .vwp-nav__liste a:hover{ text-decoration:none; color:var(--accent); }
  .vwp-nav__liste .menu-item-has-children > a{
    font-size:var(--step--1); font-weight:600; letter-spacing:.02em; text-transform:uppercase;
    color:var(--ink-2); padding-block-end:.25rem;
  }
  .vwp-nav__liste .sub-menu{ padding:0 0 .35rem .75rem; }
  .vwp-nav__liste .sub-menu li{ padding-block:0; }
  .vwp-nav__liste .sub-menu a{ padding-block:.6rem; }

  /* Boutons d action : seulement menu ouvert (ou sans JS, menu deplie par defaut). */
  .vwp-entete__action{ order:4; width:100%; display:none; flex-direction:column; gap:.5rem; padding-block-end:.75rem; }
  .vwp-nav--ouvert ~ .vwp-entete__action,
  .vwp-nav:not(.vwp-nav--repliable) ~ .vwp-entete__action{ display:flex; }
  .vwp-entete__action .vwp-bouton{ width:100%; justify-content:center; text-align:center; }
}

@media (max-width:48rem){
  .vwp-grille{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.15rem 1rem; }  /* 101 departements sur une colonne = 7 600 px (audit 2026-10-05) */
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Logo de la charte */
.vwp-logo,.custom-logo{ display:block; width:120px; height:auto; }
.vwp-marque a{ display:inline-block; line-height:0; }
.vwp-pied{ background:var(--pied-bg); }

/* Fiche commune */
.vwp-situation{ margin-top:var(--section); }
.vwp-situation .vwp-data{ color:var(--ink-2); font-size:var(--step--1); }
.vwp-maillage{ margin-top:var(--section); padding-top:1.5rem; border-top:1px solid var(--rule); }
.vwp-maillage h2{ margin-top:0; font-size:var(--step-1); }
/* Centre : un bloc de 42rem cale a gauche dans un conteneur de 76rem laissait la moitie
   droite de la page vide, ce que la capture montre immediatement. */
.vwp-contenu{ max-width:var(--wrap-narrow); margin-inline:auto; }

/* Articles et listes */
.vwp-article /* Centre : un bloc de 42rem cale a gauche dans un conteneur de 76rem laissait la moitie
   droite de la page vide, ce que la capture montre immediatement. */
.vwp-contenu{ max-width:var(--wrap-narrow); margin-inline:auto; }
.vwp-article .vwp-contenu h2{ font-size:var(--step-2); }
.vwp-hero{ margin:0 0 2rem; }
.vwp-hero img{ width:100%; border-radius:var(--radius-2); }

.vwp-liste-articles{ list-style:none; margin:0; padding:0; }
.vwp-liste-articles__item{
  display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:baseline;
  padding:.85rem 0; border-bottom:1px solid var(--rule-soft);
}
.vwp-liste-articles__item a{ color:var(--ink); text-decoration:none; font-weight:600; flex:1 1 20rem; }
.vwp-liste-articles__item a:hover{ color:var(--accent); text-decoration:underline; }
.vwp-liste-articles__item time{ color:var(--ink-3); font-size:var(--step--1); }

/* Recherche */
.vwp-recherche{ display:flex; gap:.5rem; margin-bottom:2rem; max-width:32rem; }
.vwp-recherche input[type=search]{
  flex:1; min-height:var(--tap); padding:.5rem .75rem;
  border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--surface); color:var(--ink); font:inherit; font-size:var(--step-0);
}
.screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* Pagination */
.pagination,.nav-links{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:2rem; }
.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--tap); min-height:var(--tap); padding:0 .6rem;
  border:1px solid var(--rule); border-radius:var(--radius);
  color:var(--ink); text-decoration:none; font-size:var(--step--1);
}
.page-numbers.current{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.page-numbers:hover:not(.current){ border-color:var(--accent); color:var(--accent); }

/* Sommaire */
.vwp-toc{
  background:var(--surface-2); border:1px solid var(--rule-soft);
  border-radius:var(--radius-2); padding:1rem 1.25rem; margin:0 0 2rem;
  font-size:var(--step--1);
}
.vwp-toc__titre{ margin:0 0 .5rem; font-weight:700; color:var(--ink); }
.vwp-toc ol{ margin:0; padding-left:1.2em; }
.vwp-toc li{ margin:.3em 0; }
.vwp-toc a{ color:var(--ink-2); }
.vwp-toc a:hover{ color:var(--accent); }
/* L entete est collant : sans ce decalage, une ancre tombe sous l entete. */
:target{ scroll-margin-top:calc(var(--header-h) + 1rem); }

/* Facade video : dessinee en CSS, aucun fichier distant */
.vwp-video{
  position:relative; aspect-ratio:16/9; width:100%;
  background:var(--surface-2); border:1px solid var(--rule);
  border-radius:var(--radius-2); overflow:hidden; margin-block:1.5em;
}
.vwp-video iframe{ width:100%; height:100%; border:0; display:block; }
.vwp-video__lire{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.75rem;
  width:100%; height:100%; border:0; cursor:pointer;
  background:var(--surface-2); color:var(--ink); font:inherit;
}
.vwp-video__lire:hover{ background:var(--marque-soft); }
.vwp-video__triangle{
  width:0; height:0; border-style:solid;
  border-width:1.1rem 0 1.1rem 1.9rem;
  border-color:transparent transparent transparent var(--accent);
}
.vwp-video__titre{ font-size:var(--step--1); color:var(--ink-2); }

/* Fiabilite */
.vwp-relecture{ color:var(--ink-3); font-size:var(--step--1); }
.vwp-sources{ margin-top:var(--section); padding-top:1.25rem; border-top:1px solid var(--rule); }
.vwp-sources h2{ margin-top:0; font-size:var(--step-1); }
.vwp-sources ul{ font-size:var(--step--1); }

/* Accueil */
.vwp-accueil__hero{ text-align:center; padding-block:var(--section); }
.vwp-accueil__accroche{ font-size:var(--step-1); color:var(--ink-2); max-width:48ch; margin-inline:auto; }
.vwp-accueil__hero .vwp-recherche{ margin-inline:auto; margin-top:2rem; }

/* =====================================================================================
   HEROS DE L ACCUEIL (front-page.php, 2026-10-05 : « quelque chose de plus style »)
   Bandeau teinte + trame de points (rappel de la carte), texte a gauche, carte des villes a
   droite. Jetons du site : le mode sombre suit sans regle a part.
   ===================================================================================== */
.vwp-heros{
  position:relative; overflow:hidden; border-bottom:1px solid var(--rule-soft);
  background:linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 100%);
}
.vwp-heros::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(var(--rule) 1px, transparent 1.2px); background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 85%); mask-image:linear-gradient(180deg, #000 0%, transparent 85%);
}
.vwp-heros__grille{
  /* minmax(0, 1fr) : sans lui, la colonne s elargissait au contenu minimal (champ de 20
     caracteres + bouton) et debordait de 26 px en mobile (constate le 2026-10-05). */
  position:relative; display:grid; grid-template-columns:minmax(0, 1fr); gap:2rem; align-items:center;
  padding-block:clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
}
.vwp-heros__texte{ min-width:0; }
@media (min-width:64rem){
  .vwp-heros__grille{ grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:2.5rem; }
}
.vwp-heros__mention{
  display:inline-block; max-width:100%; margin:0 0 1.25rem; padding:.35rem .75rem; border-radius:999px;
  background:var(--surface); border:1px solid var(--rule-soft); box-shadow:var(--shadow);
  font-family:var(--font-data); font-size:.74rem; letter-spacing:.04em; color:var(--ink-2);
}
@media (max-width:30rem){ .vwp-heros__mention{ font-size:.64rem; letter-spacing:.01em; padding-inline:.6rem; } }
.vwp-heros__titre{
  margin:0 0 1.1rem; font-family:var(--font-titre); font-weight:700; color:var(--ink);
  font-size:clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); line-height:1.08; letter-spacing:-.015em; text-wrap:balance;
}
.vwp-heros__accent{
  color:var(--accent); text-decoration:underline; text-decoration-color:var(--marque);
  text-decoration-thickness:.09em; text-underline-offset:.14em; text-decoration-skip-ink:none;
}
.vwp-heros__accroche{ margin:0 0 1.75rem; font-size:var(--step-1); line-height:1.55; color:var(--ink-2); max-width:42ch; }

/* Recherche : barre arrondie, loupe, bouton integre */
.vwp-heros__recherche{
  position:relative; display:flex; align-items:center; gap:.5rem; max-width:34rem; margin:0 0 1.25rem;
  padding:.4rem .4rem .4rem 2.9rem; border-radius:999px; background:var(--surface);
  border:1px solid var(--rule); box-shadow:0 8px 28px rgb(0 0 0 / .08);
}
.vwp-heros__recherche:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft), 0 8px 28px rgb(0 0 0 / .08); }
.vwp-heros__loupe{ position:absolute; left:1.1rem; width:1.15rem; height:1.15rem; fill:none; stroke:var(--ink-3); stroke-width:2; stroke-linecap:round; }
.vwp-heros__recherche input{
  flex:1 1 0; width:100%; min-width:0; border:0; background:none; padding:.65rem .25rem; font:inherit; font-size:var(--step-0); color:var(--ink); outline:none;
}
.vwp-heros__recherche .vwp-bouton{ flex:none; border-radius:999px; padding-inline:1.4rem; min-height:2.9rem; }
@media (max-width:30rem){ .vwp-heros__recherche .vwp-bouton{ padding-inline:1rem; } }

/* Raccourcis vers les grandes villes */
.vwp-heros__villes{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin:0; font-size:var(--step--1); color:var(--ink-3); }
.vwp-heros__villes span{ margin-inline-end:.25rem; }
.vwp-heros__villes a{
  padding:.3rem .75rem; border-radius:999px; background:var(--surface); border:1px solid var(--rule-soft);
  color:var(--ink-2); text-decoration:none; transition:border-color .15s, color .15s;
}
.vwp-heros__villes a:hover{ border-color:var(--accent); color:var(--accent); }

/* Reassurance sous le heros (2026-10-05) : quatre engagements deja ecrits sur le site. */
.vwp-reassurance{ background:var(--surface); border-bottom:1px solid var(--rule-soft); }
/* (la marge apres le bandeau est portee par le bloc suivant, .vwp-section) */
.vwp-reassurance__liste{
  list-style:none; margin:0 auto; padding-block:1.75rem;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)); gap:1.25rem 2rem;
}
.vwp-reassurance__item{ display:flex; gap:.9rem; align-items:flex-start; margin:0; }
.vwp-reassurance__icone{
  flex:none; width:2.6rem; height:2.6rem; padding:.6rem; border-radius:50%;
  background:var(--accent-soft); stroke:var(--accent); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.vwp-reassurance__titre{ margin:.1rem 0 .2rem; font-weight:700; color:var(--ink); font-size:var(--step-0); }
.vwp-reassurance__texte{ margin:0; font-size:var(--step--1); line-height:1.5; color:var(--ink-2); }
@media (min-width:64rem){
  .vwp-reassurance__liste{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .vwp-reassurance__item + .vwp-reassurance__item{ border-left:1px solid var(--rule-soft); padding-left:1.5rem; }
}

/* Carte de toutes les villes couvertes */
.vwp-heros__carte .vwp-carte{ margin:0; }
.vwp-heros__carte .vwp-carte svg{ max-height:30rem; filter:drop-shadow(0 12px 24px rgb(0 0 0 / .07)); }
.vwp-heros__carte .vwp-carte__zone{ fill:var(--surface); stroke:var(--rule); }
.vwp-heros__carte .vwp-carte a:hover .vwp-carte__zone{ fill:var(--accent-soft); }
.vwp-heros__carte .vwp-carte__ville{ fill:var(--accent); opacity:.85; }
.vwp-heros__carte .vwp-carte a:hover .vwp-carte__ville{ fill:var(--ink); opacity:1; }
@media (max-width:63.99rem){
  .vwp-heros__carte .vwp-carte svg{ max-height:20rem; margin-inline:auto; }
}

/* Signature */
.vwp-signature{ color:var(--ink-2); font-size:var(--step--1); margin:0 0 2rem; }
.vwp-signature a{ color:var(--ink); }
.vwp-signature__role{ color:var(--ink-3); }

/* Classes posees par la conversion des pages Fusion Builder. Elles n'avaient AUCUN style :
   les sections s'enchainaient sur les seules marges par defaut des titres, d'ou un grand
   vide sous le bloc de recherche de l'accueil, visible uniquement a la capture d'ecran. */
.vwp-contenu .vwp-bloc{ margin-block:1.6rem; }
.vwp-contenu .vwp-bloc:first-child{ margin-block-start:0; }
.vwp-contenu .vwp-bloc > h2,
.vwp-contenu .vwp-bloc > h3{ margin-block-end:.4rem; }
.vwp-contenu .vwp-bloc > p:last-child{ margin-block-end:0; }

/* Chiffre mis en avant (« 1453 Clients satisfaits »). */
.vwp-chiffre{ margin-block:.3rem; }
.vwp-chiffre strong{ font-size:var(--step-2); color:var(--accent); margin-inline-end:.35rem; }

/* Bouton issu d'un [fusion_button]. */
.vwp-action{ margin-block:1.2rem; }

/* Numero de departement dans la liste, en retrait discret. */
.vwp-numero{ color:var(--ink-3); font-size:var(--step--1); }

/* Pages de lecture : departement, region, commune, article, page.
   Le conteneur general fait 76rem, mais ces pages n'ont qu'une colonne de texte de 42rem :
   la capture montrait le contenu cale a gauche et la moitie droite de l'ecran vide. On
   resserre le conteneur, ce qui recentre l'ensemble — titre, texte et listes restent
   alignes entre eux. */
.vwp-lecture{ --wrap:58rem; }
.vwp-lecture .vwp-zone__intro{ max-width:none; }
.vwp-lecture .vwp-contenu{ max-width:none; }

/* Champs de formulaire. Le theme ne stylait que la recherche : sur la page d'inscription,
   les champs sortaient bruts, etroits et sans rapport avec le reste — visible seulement a
   la capture d'ecran. Vaut pour Contact Form 7 comme pour tout formulaire du site. */
.vwp-contenu input[type="text"],
.vwp-contenu input[type="email"],
.vwp-contenu input[type="tel"],
.vwp-contenu input[type="url"],
.vwp-contenu input[type="number"],
.vwp-contenu textarea,
.vwp-contenu select{
  width:100%; max-width:32rem; box-sizing:border-box;
  padding:.55rem .7rem; font:inherit; color:var(--ink);
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
}
.vwp-contenu textarea{ max-width:100%; min-height:8rem; resize:vertical; }
.vwp-contenu input:focus-visible,
.vwp-contenu textarea:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.vwp-contenu label{ display:block; margin-block-end:.25rem; }
.vwp-contenu .wpcf7-list-item{ display:inline-block; margin:.15rem 1.2rem .15rem 0; }
.vwp-contenu .wpcf7-list-item-label{ margin-inline-start:.35rem; }
.vwp-contenu input[type="submit"]{
  font:inherit; cursor:pointer; padding:.6rem 1.1rem; border:0; border-radius:var(--radius);
  background:var(--accent); color:var(--on-accent);
}
.vwp-contenu input[type="submit"]:hover{ background:var(--accent-hover); }
.vwp-contenu .wpcf7-not-valid-tip{ color:var(--signal); font-size:var(--step--1); }
.vwp-contenu .wpcf7-response-output{
  margin:1rem 0 0; padding:.7rem .9rem; border:1px solid var(--rule); border-radius:var(--radius);
}

/* Equilibrage des titres sur plusieurs lignes.
   Sans cela, un titre casse ou il peut : la capture de l'accueil montrait
   « Freelance, agence ou independant / : ce qui change pour vous », avec le deux-points
   rejete en debut de ligne — fautif en typographie francaise. `balance` repartit les mots
   entre les lignes ; les navigateurs qui l'ignorent retombent sur le comportement actuel. */
h1, h2, h3, .vwp-titre{ text-wrap:balance; }

/* Bascule de theme. L etat visible est choisi en CSS selon `data-theme` sur <html> :
   aucun JavaScript n est necessaire pour tenir l affichage a jour. */
.vwp-theme{
  order:1; display:inline-flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; padding:0; margin-inline-start:.5rem;
  cursor:pointer; color:var(--ink-2); background:transparent;
  border:1px solid var(--rule); border-radius:999px;
  transition:color .12s ease, border-color .12s ease;
}
.vwp-theme:hover{ color:var(--accent); border-color:var(--accent); }
.vwp-theme:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
/* Pas de `display` ici : il ecraserait le masquage de .vwp-theme__etat, qui a la meme
   specificite, et les deux icones s afficheraient en meme temps. */
.vwp-theme svg{ width:1.15rem; height:1.15rem; fill:none;
  stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.vwp-theme__etat{ display:none; }
:root[data-theme="dark"] .vwp-theme__sombre{ display:block; }
/* Sans JavaScript, `data-theme` reste absent : on retombe sur l icone clair, qui correspond
   au theme par defaut de la feuille. */
:root:not([data-theme="dark"]) .vwp-theme__clair{ display:block; }

/* Logo en mode sombre.
   Le logo de la charte porte un texte NOIR qui disparait sur fond sombre. Une pastille
   blanche derriere le rendait lisible mais posait un pave clair dans l en-tete.
   `invert(1) hue-rotate(180deg)` est le couple qui inverse la luminance SANS retourner la
   teinte : le noir devient blanc, et le bleu de marque revient a lui-meme apres la rotation.
   Une version claire du logo, fournie par le client, resterait preferable. */
:root[data-theme="dark"] .vwp-logo,
:root[data-theme="dark"] .custom-logo img,
:root[data-theme="dark"] .custom-logo{
  filter:invert(1) hue-rotate(180deg);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .vwp-logo,
  :root:not([data-theme="light"]) .custom-logo img,
  :root:not([data-theme="light"]) .custom-logo{
    filter:invert(1) hue-rotate(180deg);
  }
}

/* Formulaires : deux champs par ligne quand ils vont par paire, un seul sur mobile.
   Les anciens formulaires portaient des classes du theme precedent (fusion-one-half) qui
   n ont plus de style : tout s empilait dans une colonne etroite, avec la moitie de la
   largeur perdue a droite. */
.vwp-contenu .vwp-form__duo{
  display:grid; gap:0 var(--gap-2);
  grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
}
.vwp-contenu .vwp-form__duo > p{ margin-block:.4rem .9rem; }
.vwp-contenu form p{ margin-block:.4rem .9rem; }
.vwp-contenu label{ font-size:var(--step--1); color:var(--ink-2); }
.vwp-contenu input[type="text"],
.vwp-contenu input[type="email"],
.vwp-contenu input[type="tel"],
.vwp-contenu input[type="url"],
.vwp-contenu textarea,
.vwp-contenu select{ max-width:none; margin-block-start:.25rem; }
.vwp-contenu input[type="submit"]{ margin-block-start:.5rem; font-size:var(--step-0); }

/* L ancien markup reste possible sur d autres formulaires : on le neutralise. */
.vwp-contenu .fusion-one-half,
.vwp-contenu .fusion-layout-column{ width:auto; float:none; margin:0; }

/* Figure de contenu (accueil, 2026-10-04) : image pleine largeur, legende discrete. */
.vwp-figure{ margin:2rem 0; }
.vwp-figure img{ display:block; width:100%; height:auto; border-radius:var(--radius-2); }
.vwp-figure figcaption{ margin-top:.5rem; font-size:var(--step--1); color:var(--ink-2); }

/* Cartes SVG (inc/carte.php, 2026-10-04) : dessinees dans la page, aucun tiers. */
.vwp-carte{ margin:1.5rem 0 2rem; }
.vwp-carte svg{ display:block; width:100%; height:auto; max-height:34rem; }
.vwp-carte__zone{ fill:var(--accent-soft); stroke:var(--rule); stroke-width:.6; vector-effect:non-scaling-stroke; transition:fill .15s; }
.vwp-carte a:hover .vwp-carte__zone, .vwp-carte a:focus .vwp-carte__zone{ fill:var(--accent); }
.vwp-carte a:focus{ outline:none; }
.vwp-carte__zone--active{ fill:var(--accent-soft); stroke:var(--accent); }
.vwp-carte__ville{ fill:var(--accent); stroke:var(--surface, #fff); stroke-width:1; vector-effect:non-scaling-stroke; }
.vwp-carte a:hover .vwp-carte__ville{ fill:var(--ink); }
.vwp-carte__nom{ fill:var(--ink); font-family:inherit; paint-order:stroke; stroke:var(--surface, #fff); stroke-width:3px; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
/* Nom sans place libre (inc/carte.php) : masque, il apparait au survol ou au focus de son point. */
.vwp-carte__nom--masque{ opacity:0; transition:opacity .12s; pointer-events:none; }
.vwp-carte a:hover .vwp-carte__nom--masque, .vwp-carte a:focus .vwp-carte__nom--masque{ opacity:1; }
.vwp-carte a:hover .vwp-carte__nom, .vwp-carte a:focus .vwp-carte__nom{ fill:var(--accent); font-weight:600; }
/* Carte et liste synchronisees (taxonomy-categories.php, assets/js/vwp.js, 2026-10-05) :
   cote a cote sur ecran large, la liste defile a la hauteur de la carte ; empilees sur mobile. */
.vwp-carte-liste{ display:grid; gap:1.5rem; align-items:start; }
.vwp-carte-liste .vwp-carte{ margin:0; }
.vwp-carte-liste__liste{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr)); gap:0 1.25rem; }
.vwp-carte-liste__liste li{ border-bottom:1px solid var(--rule-soft); }
.vwp-carte-liste__liste a{
  display:block; padding:.55rem .6rem; border-radius:var(--radius); color:var(--ink); text-decoration:none;
  transition:background-color .12s, color .12s;
}
.vwp-carte-liste__liste a:hover, .vwp-carte-liste__liste a.is-lie{ background:var(--accent-soft); color:var(--accent); }
@media (min-width:60rem){
  .vwp-carte-liste{ grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:2.5rem; }
  .vwp-carte-liste--seule{ grid-template-columns:1fr; }
  .vwp-carte-liste .vwp-carte svg{ max-height:32rem; }
  .vwp-carte-liste__liste{ grid-template-columns:repeat(auto-fill, minmax(11rem, 1fr)); max-height:32rem; overflow-y:auto; overscroll-behavior:contain; position:relative; }
}
/* Point, pastille ou zone lies a l entree survolee de la liste */
.vwp-carte__ville{ transform-box:fill-box; transform-origin:center; transition:transform .15s, fill .15s; }
.vwp-carte a.is-lie .vwp-carte__ville{ fill:var(--ink); transform:scale(2.2); stroke:var(--accent); stroke-width:6; stroke-opacity:.35; paint-order:stroke; }
.vwp-carte a:hover .vwp-carte__ville{ transform:scale(1.6); }
.vwp-carte a.is-lie .vwp-carte__zone{ fill:var(--accent); }
.vwp-carte__pastille circle{ transform-box:fill-box; transform-origin:center; }
.vwp-carte a.is-lie .vwp-carte__pastille circle{ fill:var(--ink); transform:scale(1.15); }

/* =====================================================================================
   CARTE ZOOMABLE (inc/carto.php, assets/js/carto.js, 2026-10-05) : Leaflet sans fond tiers.
   ===================================================================================== */
.vwp-carto{ margin:0; position:relative; z-index:0; isolation:isolate; }
/* isolation : les calques de Leaflet (z-index 400 a 1000) restent DANS la carte ; sans elle, les
   pastilles passaient par-dessus l en-tete colle (z-index 50) au defilement (2026-10-05). */
.vwp-carto__carte{ width:100%; height:22rem; background:transparent; border-radius:var(--radius-2); font:inherit; }
.vwp-carto--heros .vwp-carto__carte{ height:clamp(20rem, 14rem + 18vw, 32rem); }
@media (min-width:60rem){ .vwp-carto--territoire .vwp-carto__carte{ height:32rem; } }
.vwp-carto .leaflet-container{ background:transparent; outline:none; }
.vwp-carto__carte:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.vwp-carto__aide{ margin:.5rem 0 0; font-size:.72rem; color:var(--ink-3); font-family:var(--font-data); }
.vwp-carto .leaflet-interactive{ cursor:pointer; }
/* Ville. Prefixe .vwp-carto .leaflet-marker-icon : la feuille de Leaflet, chargee APRES celle du
   theme, impose display:block aux icones et cassait le centrage des chiffres (2026-10-05). */
.vwp-carto .leaflet-marker-icon.vwp-carto__point{
  background:var(--accent); border:2px solid var(--surface); border-radius:50%;
  box-shadow:0 1px 3px rgb(0 0 0 / .25); transition:transform .15s, background-color .15s;
}
.vwp-carto .vwp-carto__point:hover, .vwp-carto .vwp-carto__point.is-lie{ background:var(--ink); transform:scale(1.5); }
/* Pastille de villes regroupees */
.vwp-carto .leaflet-marker-icon.vwp-carto__groupe{
  display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--on-accent);
  border:3px solid var(--surface); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent), 0 2px 6px rgb(0 0 0 / .2);
  font-weight:700; font-size:.8rem; line-height:1; transition:transform .15s, background-color .15s;
}
.vwp-carto .vwp-carto__groupe span{ display:block; text-align:center; }
.vwp-carto .vwp-carto__groupe:hover, .vwp-carto .vwp-carto__groupe.is-lie{ background:var(--ink); transform:scale(1.12); }
/* Infobulle */
.vwp-carto .vwp-carto__info{
  background:var(--ink); color:var(--surface); border:0; border-radius:var(--radius); box-shadow:none;
  font:inherit; font-size:.8rem; font-weight:600; padding:.3rem .55rem;
}
.vwp-carto .vwp-carto__info::before{ display:none; }
/* Boutons + / − aux couleurs du site */
.vwp-carto .leaflet-bar{ border:1px solid var(--rule); box-shadow:var(--shadow); border-radius:var(--radius); }
.vwp-carto .leaflet-bar a{ background:var(--surface); color:var(--ink); border-bottom-color:var(--rule-soft); }
.vwp-carto .leaflet-bar a:hover{ background:var(--accent-soft); color:var(--accent); }

/* Pastilles de departement (carte de region) */
.vwp-carte__pastille circle{ fill:var(--accent); stroke:var(--surface, #fff); stroke-width:1.5; vector-effect:non-scaling-stroke; transition:fill .15s; }
.vwp-carte__pastille text{ fill:var(--on-accent); font-family:inherit; font-weight:700; pointer-events:none; }
.vwp-carte a:hover .vwp-carte__pastille circle, .vwp-carte a:focus .vwp-carte__pastille circle{ fill:var(--ink); }

/* =====================================================================================
   PAGES EDITORIALES : guides, hub /guides/, articles d actualite (inc/edito.php)
   Adrien, 2026-10-04 : « je veux ce style de presentation » (windsurf-international.com/
   echelle-de-beaufort/). Repris : l ARCHITECTURE seule (badge, grand titre, chapeau, ligne
   auteur, sommaire numerote colle dans la marge gauche, FAQ ouverte, encadre auteur, cartes).
   La TYPOGRAPHIE reste celle du site (Adrien : « on ne change pas la typo », 2026-10-04) :
   les variables --edito-* pointent sur les polices du site. Couleurs = jetons du site.
   Grille : en-tete et corps dans la colonne de lecture (45rem = 720 px de la reference), le
   sommaire dans la marge de gauche a hauteur du corps, pas du titre.
   ===================================================================================== */
.vwp-edito{
  --edito-titre: var(--font-titre);
  --edito-texte: var(--font-texte);
  --edito-data:  var(--font-data);
  display:grid; grid-template-columns:minmax(0, 1fr);
  max-width:calc(45rem + 2 * var(--gap)); margin-inline:auto;
  padding:clamp(1.75rem, 1.2rem + 2vw, 4rem) var(--gap) var(--section);
}
.vwp-edito--large{ max-width:calc(60rem + 2 * var(--gap)); }
@media (min-width:72rem){
  .vwp-edito{ max-width:none; grid-template-columns:1fr minmax(0, 45rem) 1fr; column-gap:3.5rem; }
  .vwp-edito--large{ grid-template-columns:1fr minmax(0, 60rem) 1fr; }
  .vwp-edito > *{ grid-column:2; }
  .vwp-edito__marge{ grid-column:1; grid-row:2; justify-self:end; width:12.25rem; }
  .vwp-edito__corps{ grid-row:2; }
  /* Specificite renforcee : la regle generale .vwp-edito .vwp-toc (filet a gauche) venait apres. */
  .vwp-edito .vwp-edito__marge .vwp-toc{
    position:sticky; top:calc(var(--header-h) + 1.5rem);
    max-height:calc(100vh - var(--header-h) - 3rem); overflow-y:auto; overflow-x:hidden;  /* jamais de defilement horizontal */
    text-align:right; padding:0 1rem 0 0; border:0; border-right:1px solid var(--rule-soft);
  }
  .vwp-edito .vwp-edito__marge .vwp-toc a{ justify-content:flex-end; }
}

/* En-tete */
.vwp-edito .vwp-ariane{ font-family:var(--edito-data); font-size:.75rem; letter-spacing:.01em; margin-bottom:1.75rem; }
.vwp-edito .vwp-ariane a{ text-decoration:none; }
.vwp-edito .vwp-ariane a:hover{ color:var(--accent); }
.vwp-edito h2, .vwp-edito h3{ font-family:var(--edito-titre); }
.vwp-edito h2{ font-weight:700; letter-spacing:-.005em; }
.vwp-edito__badge{
  display:inline-block; font-family:var(--edito-data); font-size:.72rem; letter-spacing:.09em;
  text-transform:uppercase; background:var(--accent-soft); color:var(--accent);
  padding:.32rem .6rem; border-radius:2px; text-decoration:none;
}
a.vwp-edito__badge:hover{ background:var(--accent); color:var(--on-accent); }
.vwp-edito__titre{
  font-family:var(--edito-titre); font-weight:700; color:var(--ink);
  font-size:clamp(2.1rem, 1.45rem + 2.7vw, 3.6rem); line-height:1.12; letter-spacing:-.005em;
  margin:.85rem 0 1.1rem; text-wrap:balance;
}
.vwp-edito__chapo{
  font-family:var(--edito-texte); font-size:clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
  line-height:1.55; color:var(--ink-2); margin:0 0 1.6rem;
}
.vwp-edito__ligne{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.6rem 1.5rem;
  border-top:1px solid var(--rule-soft); padding-top:1.1rem; margin-bottom:2.25rem;
}
.vwp-edito__auteur{ margin:0; display:flex; align-items:center; gap:.6rem; font-family:var(--edito-texte); color:var(--ink-2); }
.vwp-edito__auteur a, .vwp-edito__bio-nom a{ font-family:var(--edito-titre); font-weight:600; color:var(--ink); text-decoration:none; }
.vwp-edito__auteur a:hover, .vwp-edito__bio-nom a:hover{ color:var(--accent); }
.vwp-edito__role, .vwp-edito__meta{ font-family:var(--edito-data); font-size:.74rem; color:var(--ink-3); }
.vwp-edito__meta{ margin:0; }
.vwp-edito__meta time{ white-space:nowrap; }
.vwp-edito__pastille{
  flex:none; display:inline-grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:50%;
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--rule-soft);
  font-family:var(--edito-titre); font-weight:600; font-size:.78rem; letter-spacing:.02em;
}
.vwp-edito__pastille--grande{ width:3.25rem; height:3.25rem; font-size:1.05rem; }
.vwp-edito__image{ margin:0 0 2.5rem; }
.vwp-edito__image img{ width:100%; height:auto; border-radius:var(--radius); }

/* Sommaire numerote (01, 02...) */
.vwp-edito .vwp-toc{ background:none; border:0; border-left:1px solid var(--rule-soft); border-radius:0; padding:0 0 0 1rem; margin:0 0 2.5rem; }
.vwp-edito .vwp-toc__titre{ font-family:var(--edito-data); font-size:.7rem; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 .9rem; }
.vwp-edito .vwp-toc ol{ list-style:none; padding:0; margin:0; counter-reset:toc; }
.vwp-edito .vwp-toc li{ counter-increment:toc; margin:0 0 .7rem; }
.vwp-edito .vwp-toc a{ display:flex; gap:.6rem; font-family:var(--edito-titre); font-size:.94rem; line-height:1.35; color:var(--ink-2); text-decoration:none; }
.vwp-edito .vwp-toc a::after{ content:counter(toc, decimal-leading-zero); flex:none; font-family:var(--edito-data); font-size:.7rem; color:var(--ink-3); padding-top:.2rem; }
.vwp-edito .vwp-toc a:hover{ color:var(--accent); }
/* Section en cours de lecture (assets/js/vwp.js) */
.vwp-edito .vwp-toc a.is-actif{ color:var(--accent); }  /* couleur seule, pas de gras (Adrien) */
.vwp-edito .vwp-toc a.is-actif::after{ color:var(--accent); }
.vwp-edito .vwp-toc li{ position:relative; }
.vwp-edito .vwp-toc li:has(> a.is-actif)::before{
  content:""; position:absolute; top:.1em; bottom:.1em; width:2px; background:var(--accent);
  left:calc(-1rem - 1px);
}
@media (min-width:72rem){
  .vwp-edito .vwp-edito__marge .vwp-toc li:has(> a.is-actif)::before{ left:auto; right:-1rem;  /* dans la boite : pas de debordement */ }
}
@media (max-width:71.99rem){
  .vwp-edito .vwp-toc a{ flex-direction:row-reverse; justify-content:flex-end; }
}

/* Corps de lecture */
.vwp-edito__corps{ min-width:0; }
.vwp-edito .vwp-contenu{ max-width:none; margin:0; font-family:var(--edito-texte); font-size:clamp(1.08rem, 1.02rem + .25vw, 1.15rem); line-height:1.65; color:var(--ink); }
.vwp-edito .vwp-contenu p, .vwp-edito .vwp-contenu li{ font-size:inherit; }
.vwp-edito .vwp-contenu strong{ font-weight:600; }
.vwp-edito .vwp-contenu h2{
  font-family:var(--edito-titre); font-weight:700; font-size:clamp(1.5rem, 1.2rem + 1.1vw, 1.95rem);
  line-height:1.15; letter-spacing:-.005em; margin:2.75rem 0 1rem; scroll-margin-top:calc(var(--header-h) + 1rem);
}
.vwp-edito .vwp-contenu h3{ font-family:var(--edito-titre); font-weight:700; font-size:1.25rem; line-height:1.25; margin:2rem 0 .6rem; }
.vwp-edito .vwp-contenu table{ font-family:var(--edito-titre); font-size:.86rem; line-height:1.4; margin:1.75rem 0; }
.vwp-edito .vwp-contenu th{ font-weight:600; }
.vwp-edito .vwp-contenu a{ color:var(--accent); text-underline-offset:.15em; }

/* FAQ ouverte, lue comme un texte */
.vwp-edito .vwp-faq{ margin-top:3rem; }
.vwp-edito .vwp-faq h2{ margin-top:0; }
.vwp-edito .vwp-faq__item{ border:0; padding:0; margin:0 0 1.75rem; }
.vwp-edito .vwp-faq__item summary{ font-family:var(--edito-titre); font-weight:600; font-size:clamp(1.15rem, 1.05rem + .4vw, 1.4rem); line-height:1.3; cursor:default; pointer-events:none; }
.vwp-edito .vwp-faq__item summary::before{ content:none; }
.vwp-edito .vwp-faq__item p{ margin:.5rem 0 0; color:var(--ink); }

/* Blocs de fin */
.vwp-edito .vwp-sources{ font-family:var(--edito-texte); }
.vwp-edito .vwp-sources h2, .vwp-edito__liees h2, .vwp-edito .vwp-maillage h2, .vwp-edito .vwp-recrutement h2{
  font-family:var(--edito-titre); font-weight:700; letter-spacing:-.005em;
}
.vwp-edito__bio{
  display:flex; gap:1.1rem; align-items:flex-start; margin:3rem 0;
  background:var(--surface-2); border:1px solid var(--rule-soft); border-radius:3px; padding:1.4rem;
}
.vwp-edito__bio-sur{ margin:0; font-family:var(--edito-data); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.vwp-edito__bio-nom{ margin:.25rem 0 .55rem; font-size:1.1rem; }
.vwp-edito__bio-texte{ font-family:var(--edito-texte); font-size:1rem; line-height:1.6; color:var(--ink-2); }
.vwp-edito__bio-texte p{ margin:0 0 .6rem; }
.vwp-edito__liees{ margin-top:3rem; }
.vwp-edito__tous{ font-family:var(--edito-data); font-size:.8rem; margin-top:1rem; }

/* Cartes d articles (distinctes des cartes geographiques .vwp-carte) */
.vwp-cartes{ list-style:none; padding:0; margin:1rem 0 0; display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:1rem; }
.vwp-carte-lien{
  position:relative; display:flex; flex-direction:column; gap:.45rem; margin:0;
  background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--radius); padding:1.1rem 1.2rem;
  transition:border-color .15s;
}
.vwp-carte-lien:hover{ border-color:var(--accent); }
.vwp-carte-lien__titre{ font-family:var(--edito-titre, var(--font-titre)); font-weight:700; font-size:1.05rem; line-height:1.3; color:var(--ink); text-decoration:none; }
.vwp-carte-lien__titre::after{ content:""; position:absolute; inset:0; }
.vwp-carte-lien__texte{ margin:0; font-family:var(--edito-texte, var(--font-texte)); font-size:.95rem; line-height:1.5; color:var(--ink-2); }
.vwp-carte-lien__meta{ margin:auto 0 0; font-family:var(--edito-data, var(--font-data)); font-size:.7rem; color:var(--ink-3); }
.vwp-edito__groupe{ font-family:var(--edito-titre); font-weight:700; font-size:1.15rem; margin:2.25rem 0 .25rem; }
.vwp-edito__section + .vwp-edito__section{ margin-top:3.5rem; }

/* =====================================================================================
   PAGE ACTUALITES (home.php, 2026-10-05) : une « a la une » en grand, cartes illustrees.
   ===================================================================================== */
.vwp-actu{ position:relative; display:flex; flex-direction:column; min-width:0; }
.vwp-actu__image{ display:block; overflow:hidden; border-radius:var(--radius); background:var(--surface-2); aspect-ratio:16 / 9; }
.vwp-actu__image img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.vwp-actu:hover .vwp-actu__image img{ transform:scale(1.03); }
.vwp-actu__texte{ padding-top:.9rem; display:flex; flex-direction:column; gap:.45rem; }
.vwp-actu__meta{ margin:0; font-family:var(--edito-data); font-size:.72rem; color:var(--ink-3); }
.vwp-actu__meta time{ white-space:nowrap; }
.vwp-actu__titre{ margin:0; font-family:var(--edito-titre); font-weight:700; font-size:1.15rem; line-height:1.3; text-wrap:balance; }
.vwp-actu__titre a{ color:var(--ink); text-decoration:none; }
.vwp-actu__titre a::after{ content:""; position:absolute; inset:0; }  /* toute la carte est cliquable */
.vwp-actu:hover .vwp-actu__titre a{ color:var(--accent); }
.vwp-actu__resume{ margin:0; color:var(--ink-2); font-size:.98rem; line-height:1.55; }
.vwp-actu__lire{ margin:.4rem 0 0; font-weight:600; color:var(--accent); }
.vwp-actu__lire a{ position:relative; z-index:1; color:inherit; }

/* A la une : grand format, image et texte cote a cote sur ecran large */
.vwp-actus__une{ margin:0 0 3.5rem; padding-bottom:3rem; border-bottom:1px solid var(--rule-soft); }
.vwp-actu--une .vwp-actu__titre{ font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height:1.18; letter-spacing:-.005em; }
.vwp-actu--une .vwp-actu__resume{ font-size:clamp(1.02rem, .98rem + .2vw, 1.12rem); }
@media (min-width:48rem){
  .vwp-actu--une{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:2.25rem; align-items:center; }
  .vwp-actu--une .vwp-actu__texte{ padding-top:0; }
}

/* Cartes suivantes */
.vwp-actus__liste h2{ margin:0 0 1.25rem; }
.vwp-actus__grille{ display:grid; grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr)); gap:2.25rem 1.75rem; }

/* Pagination */
.vwp-actus .pagination{ margin-top:3rem; }
.vwp-actus .nav-links{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.vwp-actus .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:2.5rem; min-height:2.5rem; padding:0 .8rem;
  border:1px solid var(--rule-soft); border-radius:var(--radius); color:var(--ink-2); text-decoration:none;
}
.vwp-actus .page-numbers.current{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.vwp-actus a.page-numbers:hover{ border-color:var(--accent); color:var(--accent); }
.vwp-actus__guides{ margin-top:4rem; padding-top:3rem; border-top:1px solid var(--rule-soft); }

/* =====================================================================================
   ACCUEIL — suite restructuree (front-page.php, 2026-10-05) : metiers en cartes, villes et
   regions sur bande teintee, guides en cartes, texte de fond en mise en page editoriale,
   appel aux prestataires en bandeau. Plus de photo d illustration.
   ===================================================================================== */
.vwp-bloc__tete{ max-width:46rem; margin-bottom:2rem; }
.vwp-bloc__tete h2, .vwp-territoires h2, .vwp-pro h2{ margin:0 0 .5rem; font-size:clamp(1.5rem, 1.2rem + 1.1vw, 2rem); letter-spacing:-.01em; }
.vwp-bloc__tete--action{ max-width:none; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 2rem; }
.vwp-bloc__surtitre{
  margin:0 0 .6rem; font-family:var(--font-data); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.vwp-bloc__intro{ margin:0; color:var(--ink-2); font-size:var(--step-1); line-height:1.5; }

/* Six metiers */
.vwp-besoins{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap:1rem; }
.vwp-besoin{
  position:relative; display:flex; flex-direction:column; gap:.5rem; margin:0;
  background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--radius-2);
  padding:1.5rem; transition:border-color .15s, transform .15s;
}
.vwp-besoin:hover{ border-color:var(--accent); transform:translateY(-2px); }
.vwp-besoin__icone{
  width:2.75rem; height:2.75rem; padding:.65rem; margin-bottom:.4rem; border-radius:var(--radius-2);
  background:var(--accent-soft); fill:none; stroke:var(--accent); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.vwp-besoin__nom{ margin:0; font-size:1.15rem; }
.vwp-besoin__texte{ margin:0; color:var(--ink-2); font-size:var(--step--1); line-height:1.55; }
.vwp-besoin__lien{ margin-top:auto; padding-top:.75rem; font-size:var(--step--1); font-weight:600; text-decoration:none; }
.vwp-besoin__lien::after{ content:" →"; }
.vwp-besoin__lien::before{ content:""; position:absolute; inset:0; border-radius:inherit; }  /* toute la carte est cliquable */
.vwp-besoin__lien:focus-visible{ outline:0; }
.vwp-besoin:has(.vwp-besoin__lien:focus-visible){ outline:2px solid var(--focus); outline-offset:2px; }

/* Villes et regions (2026-10-05, 2e version) : tuiles des grandes villes, index des autres, tuiles des regions */
.vwp-territoires{ background:var(--surface-2); border-block:1px solid var(--rule-soft); padding-block:var(--section); }
.vwp-territoires__regions{ margin-top:clamp(2.5rem, 2rem + 2vw, 4rem); }
.vwp-villes-tete{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.vwp-villes-tete{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:40rem){ .vwp-villes-tete{ grid-template-columns:repeat(5, minmax(0, 1fr)); } }  /* 10 villes = 2 rangees de 5 */
.vwp-villes-tete li{ margin:0; }
.vwp-villes-tete a{
  display:flex; height:100%; background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--radius-2);
  color:var(--ink); text-decoration:none; transition:border-color .15s, color .15s;
}
.vwp-villes-tete a{ flex-direction:column; gap:.2rem; padding:1rem 1.1rem; }
.vwp-villes-tete a:hover{ border-color:var(--accent); color:var(--accent); }
.vwp-villes-tete__nom{ font-weight:700; font-size:1.05rem; }
.vwp-villes-tete__meta, .vwp-region-carte__meta{ font-family:var(--font-data); font-size:.72rem; color:var(--ink-3); white-space:nowrap; }

/* Guides : la grille de cartes reprend .vwp-cartes (pages editoriales) */
.vwp-rubrique .vwp-cartes{ margin-top:0; grid-template-columns:repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }  /* 6 guides = 2 rangees de 3 */

/* Regions en cartes (2026-10-05, 3e version) : nom + nombre de villes, puis les villes de la region */
.vwp-regions-cartes{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; grid-template-columns:repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); align-items:stretch; }
.vwp-region-carte{ margin:0; background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--radius-2); }
.vwp-region-carte__tete{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.9rem 1.1rem; color:var(--ink); text-decoration:none; }
.vwp-region-carte:not(.vwp-region-carte--seule) .vwp-region-carte__tete{ border-bottom:1px solid var(--rule-soft); }
.vwp-region-carte__tete:hover{ color:var(--accent); }
.vwp-region-carte__nom{ font-weight:700; font-size:var(--step-0); line-height:1.3; }
.vwp-region-carte__villes{ margin:0; padding:.75rem 1.1rem .9rem; font-size:var(--step--1); line-height:1.8; color:var(--ink-3); }
.vwp-region-carte__villes a{ color:var(--ink-2); text-decoration:none; white-space:nowrap; }
.vwp-region-carte__villes a:hover{ color:var(--accent); text-decoration:underline; }

/* Texte de fond en cartes (2026-10-05, 3e version) : intro, une carte par partie, FAQ repliable */
.vwp-accueil-texte{ border-top:1px solid var(--rule-soft); }
.vwp-accueil-texte .vwp-contenu{ margin:0; max-width:none; }
.vwp-accueil-texte__lead{ max-width:52rem; margin-bottom:2rem; }
.vwp-accueil-texte__lead p{ font-size:var(--step-1); line-height:1.55; color:var(--ink-2); }
.vwp-accueil-cartes{ display:grid; gap:1rem; }
@media (min-width:56rem){
  .vwp-accueil-cartes{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .vwp-accueil-carte:last-child:nth-child(odd){ grid-column:1 / -1; }
}
.vwp-accueil-carte{ background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--radius-2); padding:1.5rem 1.6rem; }
.vwp-accueil-carte h2{ margin:0 0 .75rem; font-size:var(--step-1); }
.vwp-accueil-carte p{ font-size:var(--step--1); line-height:1.65; color:var(--ink-2); }
.vwp-accueil-carte p:last-child{ margin-bottom:0; }
.vwp-accueil-texte__faq{ margin-top:clamp(2.5rem, 2rem + 2vw, 4rem); max-width:52rem; }
.vwp-accueil-texte__faq .vwp-faq{ margin:0; }

/* Appel aux prestataires */
.vwp-pro{ background:var(--accent); color:var(--on-accent); padding-block:clamp(2.5rem, 2rem + 2vw, 4rem); }
.vwp-pro h2{ color:var(--on-accent); }
.vwp-pro p{ margin:0; max-width:52ch; opacity:.92; }
.vwp-pro .vwp-pro__surtitre{ margin:0 0 .6rem; font-family:var(--font-data); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
.vwp-pro__grille{ display:grid; gap:1.5rem; align-items:center; }
@media (min-width:56rem){ .vwp-pro__grille{ grid-template-columns:minmax(0, 1fr) auto; gap:3rem; } }
.vwp-pro .vwp-bouton{ background:var(--on-accent); color:var(--accent); border-color:var(--on-accent); }
.vwp-pro .vwp-bouton:hover{ background:var(--surface); color:var(--accent-hover); }
.vwp-pro .vwp-pro__action{ opacity:1; }
/* La page finit sur le bandeau : pas de blanc entre lui et le pied (Adrien). */
.vwp-principal:has(> .vwp-pro:last-child) + .vwp-pied{ margin-top:0; }

/* =====================================================================================
   PAGES NATIONALES PAR METIER (page-metier.php, inc/metier-national.php, 2026-10-05) : pages de
   l ANNUAIRE. [vwp_metier_villes] = la carte + liste des pages region, villes groupees par region.
   ===================================================================================== */
.vwp-metier-villes{ margin:1.5rem 0 2rem; }
.vwp-metier-villes .vwp-carto{ margin:0; }
.vwp-metier-villes__liste{ display:block; }
.vwp-contenu .vwp-metier-villes__region{
  margin:1rem 0 .25rem; font-family:var(--font-data); font-size:.7rem; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.vwp-contenu .vwp-metier-villes__region:first-child{ margin-top:0; }
.vwp-contenu .vwp-metier-villes__liste ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr)); gap:0 1.25rem; }
.vwp-contenu .vwp-metier-villes__liste li{ margin:0; border-bottom:1px solid var(--rule-soft); }
.vwp-metier-national__guides{ margin-top:var(--section); }

/* =====================================================================================
   BLOC D ENTREE DE L ANNUAIRE (vwp_bloc_duo, inc/annuaire.php, 2026-10-05) : sous le H1 des pages
   region, departement, ville, ville x metier et metier. Client a gauche (prestataires ou depot de
   projet), professionnel a droite (inscription).
   ===================================================================================== */
.vwp-duo{ display:grid; gap:1rem; margin:0 0 var(--section); }
@media (min-width:48rem){ .vwp-duo{ grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); } }
.vwp-duo__client, .vwp-duo__pro{ border-radius:var(--radius-2); padding:1.5rem; }
.vwp-duo__client{ background:var(--accent-soft); border:1px solid var(--rule-soft); border-left:3px solid var(--accent); }
.vwp-duo__pro{ background:var(--surface-2); border:1px solid var(--rule-soft); }
.vwp-duo h2{ margin:0 0 .6rem; font-size:var(--step-1); }
.vwp-duo p{ margin:0 0 1rem; color:var(--ink-2); }
.vwp-duo p:last-child{ margin-bottom:0; }
.vwp-duo p.vwp-duo__mention{ font-size:var(--step--1); color:var(--ink-3); margin-top:-.5rem; }
.vwp-duo .vwp-pros{ margin:0; }

/* Resultats de recherche et sorties utiles (audit 2026-10-05) */
.vwp-resultat{ display:block; }
.vwp-resultat__type{ display:inline-block; margin-right:.6rem; font-family:var(--font-data); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.vwp-resultat__desc{ margin:.3rem 0 0; font-size:var(--step--1); color:var(--ink-2); }
.vwp-sorties{ margin-top:2.5rem; }
.vwp-sorties h2{ font-size:var(--step-1); }
.vwp-sorties__liens{ margin:1.25rem 0; }

/* reCAPTCHA (audit 2026-10-05) : le badge flottant masquait du texte sur mobile. Masque, avec la mention
   exigee par Google posee sous le bouton de chaque formulaire (CF7 12002, 196694, 196711). */
.grecaptcha-badge{ visibility:hidden; }
.vwp-mention-recaptcha{ font-size:var(--step--1); color:var(--ink-3); margin-top:.5rem; }

/* =====================================================================================
   AUDIT 2026-10-05 — pages annuaire
   ===================================================================================== */
/* Numero de departement sur la meme ligne que son nom */
.vwp-grille li:has(> .vwp-numero){ display:flex; align-items:baseline; gap:.4rem; }
.vwp-grille li:has(> .vwp-numero) a{ flex:1 1 auto; min-width:0; }
.vwp-numero{ flex:none; color:var(--ink-3); font-size:var(--step--1); white-space:nowrap; }
/* Texte qui collait a la grille des metiers, au tableau ou aux cartes de guide */
.vwp-zone__metiers + .vwp-zone__intro, .vwp-duo + .vwp-zone__intro{ margin-top:var(--section); }
.vwp-zone__metiers{ margin-bottom:var(--section); }
.vwp-metier-national__guides .vwp-cartes + p{ margin-top:1.25rem; }
/* Hierarchie des titres dans les textes de l annuaire : h2 > h3 */
.vwp-zone__intro h2{ font-size:var(--step-2); }
.vwp-zone__intro h3{ font-size:var(--step-1); margin-top:1.4em; }
/* Pages metier : liste complete (plus de boite a defilement de 512 px), carte collante a cote */
.vwp-metier-villes .vwp-carte-liste__liste{ max-height:none; overflow:visible; }
@media (min-width:64rem){
  .vwp-metier-villes .vwp-carto{ position:sticky; top:calc(var(--header-h) + 1rem); }
}
.vwp-region-carte__villes a.vwp-region-carte__plus{ color:var(--accent); font-weight:600; }
.vwp-carte-liste__liste.vwp-carte-liste__liste--libre{ max-height:none; overflow:visible; }  /* 19 regions : pas de boite a defilement */

/* =====================================================================================
   INTERFACE PRO (inc/pro.php, page-connexion / inscription / mot-de-passe-oublie / espace-pro,
   2026-10-05). Modele : jesuisnumerique.fr/connexion.
   ===================================================================================== */
.vwp-contenu input[type="password"]{
  display:block; width:100%; margin-block-start:.25rem; padding:.6rem .75rem; font:inherit;
  color:var(--ink); background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
}
.vwp-pro-piege{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }  /* champ piege anti-robots */
.vwp-pro-carte{
  max-width:34rem; margin:0 auto; background:var(--surface); border:1px solid var(--rule-soft);
  border-radius:var(--radius-2); padding:clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.vwp-pro-carte--large{ max-width:none; margin:0; }
.vwp-pro-carte__titre{ margin:0 0 .5rem; font-size:var(--step-2); text-align:center; }
.vwp-pro-carte--large .vwp-pro-carte__titre{ text-align:left; font-size:var(--step-1); }
.vwp-pro-carte__intro{ text-align:center; color:var(--ink-2); margin-bottom:1.5rem; }
.vwp-pro-carte__pied{ margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--rule-soft); text-align:center; }
.vwp-pro-carte__pied h2{ margin:0 0 .75rem; font-size:var(--step-1); }
.vwp-pro-bouton{ width:100%; min-height:2.9rem; font-size:var(--step-0); }
.vwp-pro-case label{ display:flex; gap:.6rem; align-items:flex-start; font-size:var(--step--1); color:var(--ink-2); }
.vwp-pro-case input{ margin-top:.25rem; flex:none; }
.vwp-contenu small{ display:block; margin-top:.3rem; color:var(--ink-3); font-size:var(--step--1); }
.vwp-pro-metiers{ border:1px solid var(--rule-soft); border-radius:var(--radius); padding:.75rem 1rem 1rem; margin:0 0 1rem; }
.vwp-pro-metiers legend{ padding:0 .4rem; font-size:var(--step--1); }
.vwp-pro-metiers label{ display:inline-flex; gap:.4rem; align-items:center; margin:.35rem 1.25rem .1rem 0; font-size:var(--step--1); }
.vwp-pro-msg{ border-radius:var(--radius); padding:.85rem 1rem; margin:0 0 1.25rem; font-size:var(--step--1); }
.vwp-pro-msg ul{ margin:0; padding-left:1.1rem; }
.vwp-pro-msg--ok{ background:var(--accent-soft); border:1px solid var(--rule-soft); border-left:3px solid var(--accent); }
.vwp-pro-msg--erreur{ background:var(--surface-2); border:1px solid var(--rule); border-left:3px solid var(--signal, #b42318); }
.vwp-pro-inscription{ display:grid; gap:2rem; align-items:start; }
@media (min-width:60rem){ .vwp-pro-inscription{ grid-template-columns:minmax(0, 1fr) minmax(0, 28rem); gap:3rem; } }
/* Espace pro */
.vwp-espace__statut{ margin-bottom:var(--section); }
.vwp-pro-etat{ border-radius:var(--radius-2); padding:1rem 1.25rem; margin:0 0 .75rem; border:1px solid var(--rule-soft); }
.vwp-pro-etat p{ margin:0 0 .5rem; }
.vwp-pro-etat p:last-child, .vwp-pro-etat form{ margin-bottom:0; }
.vwp-pro-etat--ok{ background:var(--accent-soft); border-left:3px solid var(--accent); }
.vwp-pro-etat--attente{ background:var(--surface-2); border-left:3px solid var(--ink-3); }
.vwp-pro-etat--refus{ background:var(--surface-2); border-left:3px solid var(--signal, #b42318); }
.vwp-espace__siren{ font-size:var(--step--1); color:var(--ink-3); }
.vwp-espace__bloc{ margin-bottom:var(--section); padding-top:var(--section); border-top:1px solid var(--rule-soft); }
.vwp-espace__bloc h2{ margin-top:0; }
.vwp-espace__code{ font-family:var(--font-data); font-size:.8rem; }
.vwp-espace__logo{ display:flex; gap:1rem; align-items:center; }
.vwp-espace__logo img{ width:4.5rem; height:4.5rem; object-fit:contain; border:1px solid var(--rule-soft); border-radius:var(--radius); background:#fff; }
.vwp-espace__supprimer summary{ cursor:pointer; color:var(--ink-2); font-size:var(--step--1); }
/* Fiches sur les pages de l annuaire */
.vwp-duo .vwp-pros{ list-style:none; padding:0; display:grid; gap:.75rem; }
.vwp-duo .vwp-pros li{ margin:0; }
.vwp-fiche{ display:flex; gap:1rem; align-items:flex-start; background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--radius-2); padding:1rem 1.1rem; }
.vwp-fiche__logo img{ width:3.5rem; height:3.5rem; object-fit:contain; border-radius:var(--radius); background:#fff; }
.vwp-fiche__corps{ min-width:0; }
.vwp-fiche__nom{ margin:0 0 .2rem; font-size:var(--step-0); }
.vwp-fiche__meta{ margin:0 0 .4rem; font-size:var(--step--1); color:var(--ink-3); }
.vwp-fiche__desc{ margin:0 0 .5rem; font-size:var(--step--1); color:var(--ink-2); }
.vwp-fiche__liens{ margin:0; font-size:var(--step--1); }
.vwp-espace__code{ display:block; width:100%; min-height:4.5rem; padding:.6rem .75rem; border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface-2); color:var(--ink); }
.vwp-espace__bloc--premier{ border-top:0; padding-top:0; }
.vwp-entete__connexion{ align-self:center; margin-inline-end:.5rem; color:var(--ink-2); font-size:var(--step--1); text-decoration:none; white-space:nowrap; }
.vwp-entete__connexion:hover{ color:var(--accent); text-decoration:underline; }
.vwp-duo .vwp-pros li{ background:none; border:0; padding:0; }  /* la carte .vwp-fiche porte deja son cadre */
.vwp-duo__depot{ margin-top:1rem; font-size:var(--step--1); }
.vwp-fiche__editeur{ display:inline-block; margin:0 0 .35rem; padding:.1rem .5rem; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-family:var(--font-data); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; }

/* Carte Leaflet : plus de « gros carre blanc » au clic (Adrien, 2026-10-05). Le clic donnait le focus au
   conteneur (cadre autour de toute la carte) et au trace de la region (rectangle de sa taille). Au clavier,
   la region ciblee est soulignee par son contour, sans rectangle. */
.vwp-carto .leaflet-container, .vwp-carto .leaflet-container:focus,
.vwp-carto path.leaflet-interactive, .vwp-carto path.leaflet-interactive:focus{ outline:none; }
.vwp-carto .leaflet-container:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.vwp-carto path.leaflet-interactive:focus-visible{ stroke:var(--accent); stroke-width:2.5px; }
/* Mobile : le surlignage du toucher colorait la boite de la region touchee (meme « carre blanc »). */
.vwp-carto, .vwp-carto *{ -webkit-tap-highlight-color:transparent; }

/* Fiche publique d un pro (single-vwp_fiche.php, 2026-10-05) */
.vwp-profil__entete{ display:flex; gap:1.5rem; align-items:center; }
.vwp-profil__logo img{ width:6.5rem; height:6.5rem; object-fit:contain; border:1px solid var(--rule-soft); border-radius:var(--radius-2); background:#fff; padding:.4rem; }
.vwp-profil__entete .vwp-titre{ margin-bottom:.3rem; }
.vwp-profil__contact{ background:var(--accent-soft); border:1px solid var(--rule-soft); border-left:3px solid var(--accent); border-radius:var(--radius-2); padding:1.5rem; margin:0 0 var(--section); }
.vwp-profil__contact h2{ margin:0 0 1rem; font-size:var(--step-1); }
.vwp-profil__actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 .75rem; }
.vwp-profil__note{ margin:0; font-size:var(--step--1); color:var(--ink-3); }
.vwp-profil__bloc{ margin-bottom:var(--section); }
.vwp-profil__bloc h2{ margin-top:0; }
@media (max-width:30rem){ .vwp-profil__entete{ flex-direction:column; align-items:flex-start; } }
.vwp-fiche__nom a{ color:inherit; text-decoration:none; }
.vwp-fiche__nom a:hover{ color:var(--accent); text-decoration:underline; }
/* Fiches sous le bloc d entree, sur toute la largeur (Adrien, 2026-10-05) */
.vwp-pros-zone{ margin:0 0 var(--section); }
.vwp-pros-zone h2{ margin-top:0; }
.vwp-pros-zone .vwp-pros{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:.75rem; }
.vwp-pros-zone .vwp-pros li{ margin:0; background:none; border:0; padding:0; }
.vwp-pros-zone .vwp-fiche{ width:100%; padding:1.25rem 1.5rem; }
.vwp-pros-zone .vwp-fiche__logo img{ width:4.5rem; height:4.5rem; }
.vwp-duo + .vwp-pros-zone{ margin-top:calc(var(--section) * -.5); }
/* Logo des cartes : la vignette ne se retrecit plus au profit du texte (logo « ecrase », Adrien 2026-10-05). */
.vwp-fiche__logo{ flex:none; width:4.5rem; height:4.5rem; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--rule-soft); border-radius:var(--radius); overflow:hidden; }
.vwp-fiche__logo img, .vwp-pros-zone .vwp-fiche__logo img{ width:100%; height:100%; max-width:none; object-fit:contain; border:0; border-radius:0; padding:.25rem; }
.vwp-pros-zone .vwp-fiche__logo{ width:5rem; height:5rem; }
.vwp-fiche__actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 0; }
.vwp-fiche__actions .vwp-bouton{ min-height:2.4rem; padding:.4rem .9rem; }