/* =========================================================
   RUBRIQUE « QUAND LE PROJET DÉPASSE CE CADRE »
   Feuille ADDITIVE, à charger EN DERNIER (après palette.css).
   Elle ne redéfinit aucune règle existante : tous les noms de
   classe commencent par pv__ (pv = « partenaire vizion »).
   Vérifié le 2026-08-01 : aucun « pv » dans style.css,
   premium.css, palette.css, anim-sections.css ni galerie.css.

   Rappel : cette feuille ne fait que POSER des styles nouveaux.
   Si elle n'est pas chargée, le fragment HTML reste lisible,
   simplement sans mise en forme.
   ========================================================= */

/* ---------------------------------------------------------
   LA SECTION
   Fond « papier » (le gris très doux du site) pour marquer une
   respiration entre le périmètre, qui parle de Sitero, et cette
   rubrique, qui parle d'ailleurs. Même rythme vertical que les
   autres sections : la variable --pad-s.
   --------------------------------------------------------- */
.pv__sec{padding:var(--pad-s) 0}

/* ---------------------------------------------------------
   LA CARTE
   Une seule carte blanche, posée sur le papier. Deux colonnes
   sur grand écran : l'identité de l'agence à gauche, ce qu'elle
   fait à droite. Rayon 24 px (var(--r-l)), filet gris fin, pas
   d'ombre portée ni d'effet : la charte demande du calme.
   --------------------------------------------------------- */
.pv__card{
  max-width:920px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:clamp(28px,3.6vw,48px);
  display:grid;
  grid-template-columns:minmax(0,236px) minmax(0,1fr);
  gap:clamp(24px,3.2vw,48px);
  align-items:start;
}

/* ---------------------------------------------------------
   COLONNE DE GAUCHE : LE LOGO
   Le logo fourni est SOMBRE (mot « VIZION » en noir, carré vert
   anis). Il lui faut donc impérativement un fond clair. On le
   force ici en blanc sur son propre bloc : même si un jour la
   carte se retrouvait dans une section foncée, le logo resterait
   lisible et ne serait jamais inversé par un filtre.
   Le fichier est en local (assets/img) : rien n'est chargé
   depuis le serveur de Vizion, le site marche hors ligne.
   --------------------------------------------------------- */
.pv__plaque{
  background:var(--white);
  border-radius:var(--r-s);
  padding:6px 0 18px;
}
.pv__logo{
  display:block;
  width:100%;
  max-width:206px;
  height:auto;
}
.pv__base{
  margin-top:2px;
  font-size:.93rem;
  line-height:1.5;
  color:var(--ink-2);
}
.pv__lieu{
  margin-top:10px;
  font-size:.88rem;
  line-height:1.5;
  color:var(--ink-3);
}

/* ---------------------------------------------------------
   COLONNE DE DROITE
   --------------------------------------------------------- */

/* La phrase de présentation reprise mot pour mot de leur site.
   Le filet bleu à gauche indique qu'il s'agit d'une citation et
   non de nos mots. */
.pv__cit{
  margin:0;
  padding-left:16px;
  border-left:2px solid var(--tint);
  font-size:1rem;
  line-height:1.55;
  color:var(--ink);
  text-wrap:pretty;
}
.pv__cit cite{
  display:block;
  margin-top:8px;
  font-style:normal;
  font-size:.84rem;
  color:var(--ink-3);
}

.pv__titre{
  margin:26px 0 12px;
  font-size:.78rem;
  font-weight:640;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* Les six domaines annoncés sur leur site. Deux colonnes pour
   éviter une liste trop haute ; le petit tiret gris reprend
   exactement le repère utilisé ailleurs sur le site. */
.pv__liste{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px 22px;
  list-style:none;
  margin:0;
  padding:0;
}
.pv__liste li{
  position:relative;
  padding-left:20px;
  font-size:.97rem;
  line-height:1.45;
  color:var(--ink-2);
}
.pv__liste li::before{
  content:'';
  position:absolute;
  left:0;
  top:.6em;
  width:7px;
  height:1.5px;
  background:var(--line);
}

/* Les deux personnes à contacter. Uniquement leurs noms et leur
   rôle tel qu'annoncé sur leur site : pas de photo, pas de
   courriel personnel, pas de numéro direct. */
.pv__gens{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:.97rem;
  line-height:1.6;
  color:var(--ink-2);
}
.pv__gens b{color:var(--ink);font-weight:620}

/* La zone des liens. */
.pv__actions{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 22px;
}

/* Petite flèche « vers l'extérieur » dessinée en CSS : pas
   besoin d'ajouter un symbole au jeu d'icônes du site. */
.pv__ext{
  display:inline-block;
  width:.62em;
  height:.62em;
  margin-left:.1em;
  border-top:1.8px solid currentColor;
  border-right:1.8px solid currentColor;
  transform:rotate(45deg) translateY(.06em);
  transition:transform .35s var(--e-out);
}
.pv__btn:hover .pv__ext{transform:rotate(45deg) translate(.12em,-.06em)}

.pv__lien{
  font-size:.95rem;
  color:var(--tint-txt,var(--tint));
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .25s;
}
.pv__lien:hover{border-bottom-color:currentColor}

/* La mise au point : deux entreprises séparées, aucun accord
   commercial. Discret mais lisible. */
.pv__mise-au-point{
  margin-top:22px;
  font-size:.88rem;
  line-height:1.55;
  color:var(--ink-3);
  max-width:62ch;
}

/* Texte réservé aux lecteurs d'écran (personnes non voyantes) :
   il annonce que le lien ouvre un autre site dans un nouvel
   onglet. Invisible à l'œil, présent pour la synthèse vocale. */
.pv__sr{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------------------------------------------------------
   PETITS ÉCRANS
   Mêmes points de bascule que le reste du site (900 px et 680 px)
   pour que la rubrique se plie au même moment que ses voisines.
   --------------------------------------------------------- */
@media (max-width:900px){
  .pv__card{grid-template-columns:1fr;gap:26px}
  .pv__plaque{padding-bottom:0}
  .pv__logo{max-width:180px}
}
@media (max-width:680px){
  .pv__liste{grid-template-columns:1fr;gap:10px}
  .pv__actions{flex-direction:column;align-items:flex-start;gap:16px}
  .pv__actions .pv__btn{width:100%}
}

/* Quelqu'un qui a demandé « moins d'animations » dans son
   système ne voit plus bouger la flèche. */
@media (prefers-reduced-motion:reduce){
  .pv__ext{transition:none}
  .pv__btn:hover .pv__ext{transform:rotate(45deg) translateY(.06em)}
}

/* À l'impression, on garde le nom et l'adresse du site en clair. */
@media print{
  .pv__card{border-color:#999}
  .pv__btn::after{content:' (by-vizion.com)';font-weight:400}
}

/* =========================================================================
   LA RUBRIQUE VIZION, DANS LEURS COULEURS
   Demande de Thibault : « pour toute leur section, mets tout de leur
   couleur ». Les teintes sont RELEVÉES sur leur logo, pas choisies : le
   vert vaut #D8FE04 (11 472 pixels mesurés), leur fond est noir.

   🔴 LE VERT NE PORTE JAMAIS DE TEXTE. Du blanc dessus mesure 1,1:1, du
   noir 16,4:1. Il sert donc de FOND à du texte noir, ou d'accent sur du
   noir — jamais l'inverse. C'est aussi ainsi qu'ils l'emploient.
   ========================================================================= */
.pv__sec{
  --vz-vert:#D8FE04;
  --vz-noir:#0B0C0A;
  --vz-clair:#F2F4EE;
  background:var(--vz-noir) !important;
}
.pv__card{background:#15170F;border-color:#2A2D26;color:var(--vz-clair)}
.pv__sec .h2,.pv__titre,.pv__card b,.pv__card strong{color:#fff}
.pv__sec p,.pv__liste li,.pv__base,.pv__lieu{color:#C9CEC0}
.pv__sec .eyebrow,.pv__plaque{color:var(--vz-vert)}
.pv__liste li::before{background:var(--vz-vert)}
.pv__cit{border-left-color:var(--vz-vert);color:#E4E8DC}
.pv__sr,.pv__mise-au-point{color:#8F958A}
/* leur logo existe en version claire ET sombre : sur fond noir on prend
   la claire, obtenue en inversant celle qu'on a en local. */
/* On sert la version CLAIRE du logo, fabriquée à part : le fichier
   d'origine a un fond blanc incrusté, qui faisait un bloc blanc sur le
   noir. Un filtre d'inversion n'y pouvait rien, il inversait le fond
   avec le reste. */
.pv__logo{background:transparent !important}
/* la plaque blanche n'a plus lieu d'être : le logo clair se pose
   directement sur le noir de leur charte. */
.pv__plaque{background:transparent !important;padding-left:0}
/* la seconde ligne du titre est en gris pâle par défaut : sur du noir
   elle tombait à 2,1:1. On la remonte. */
.pv__sec .dim{color:#8E958A}

/* LES DEUX FONDATEURS
   La mise en forme de chaque personne appartient maintenant à
   assets/css/fiche.css (.fiche / .fiche--vz) : même geste que la
   fiche de Thibault sur la page Contact, aux couleurs de Vizion.
   🔴 Les anciennes règles « .pv__duo img » et « .pv__duo span » ont
   été RETIRÉES et non pas surchargées : à spécificité égale, elles
   ne se départageaient que par l'ordre de chargement des feuilles,
   ce qui aurait cassé au premier changement dans le <head>. */
.pv__duo{list-style:none;margin:20px 0 0;padding:0;display:flex;
  flex-wrap:wrap;gap:26px;align-items:flex-start}

/* 🔴 LA FICHE FLOTTE, ELLE NE POUSSE PAS — et elle ne réserve rien.
   Elle passe de 76 à 186 px de haut au survol. Laissée libre, elle
   repoussait les boutons de 110 px à chaque passage de souris ; en
   réservant la place de l'état ouvert (min-height:190px, première
   tentative), elle laissait entre Lucas et Hugo un trou de 114 px
   quand personne ne les survolait — c'est ce que Thibault a vu.
   La sortie : la case a la hauteur de l'état FERMÉ, et la fiche reste
   dans le flux. Une boîte de hauteur FIXE ne grandit pas avec son
   contenu : la fiche déborde par-dessus le vide en dessous, sans rien
   déplacer. La largeur, elle, continue de venir de la fiche elle-même
   — aucune valeur en dur, donc rien à recalculer si un nom change. */
@media (hover:hover) and (pointer:fine){
  .pv__duo li{height:78px}
  /* La fiche ouverte doit passer PAR-DESSUS les boutons qui suivent :
     il lui faut un contexte d'empilement, donc une position. */
  .pv__duo .fiche{position:relative;z-index:2}
  .pv__duo .fiche:hover{z-index:4}
}

/* le bouton vers chez eux : leur vert, texte noir — le seul contraste qui
   tienne (16,4:1) */
.pv__btn{background:var(--vz-vert) !important;border-color:var(--vz-vert) !important;
  color:var(--vz-noir) !important;background-image:none !important}
.pv__btn:hover{background:#C4E600 !important;border-color:#C4E600 !important}
.pv__lien,.pv__ext{color:var(--vz-vert)}
@media (max-width:640px){ .pv__duo{gap:18px} }