/* ==========================================================================
   Pages maison (Qui nous sommes, Partenaires, Rejoindre la ruche, FAQ)
   Même famille que les pages prestations et localités : fond noir, filets,
   or en accent. Ce fichier ne contient que les blocs qui n'existaient nulle
   part ailleurs — tout le reste vient de prestation.css et prestation-blocs.css.
   ========================================================================== */

/* ==========================================================================
   La signature
   Une page « qui nous sommes » finit par une parole tenue par quelqu'un, pas
   par un argumentaire de plus. Le bloc est donc plus étroit que la colonne
   de texte, en italique de titrage, et il porte un nom en bas. C'est le seul
   endroit du site où la maison parle à la première personne du singulier.
   ========================================================================== */

.sig {
  position: relative;
  max-width: 62ch;
  margin-inline: auto;
  padding-left: clamp(22px, 3vw, 38px);
  text-align: left;
}

/* Le filet d'or se remplit du haut vers le bas quand le bloc arrive à
   l'écran — même geste que le liseré de .conf, même durée. */
.sig::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--or);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.1s var(--ez);
}

.sig.on::before { transform: scaleY(1); }

.sig-t {
  font-family: var(--font-b);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--or);
}

.sig-p {
  margin-top: clamp(18px, 2.6vh, 26px);
  font-family: var(--font-h);
  font-size: clamp(1.12rem, 1.8vw, 1.42rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.62;
  color: var(--blanc);
}

.sig-p + .sig-p {
  margin-top: clamp(14px, 2vh, 20px);
  font-family: var(--font-b);
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.78;
  color: var(--blanc-mut);
}

.sig-nom {
  display: block;
  margin-top: clamp(24px, 3.4vh, 34px);
  padding-top: clamp(16px, 2.2vh, 22px);
  border-top: 1px solid var(--filet);
  font-family: var(--font-b);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--blanc);
}

.sig-nom span {
  display: block;
  margin-top: 4px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--blanc-fnt);
}

@media (prefers-reduced-motion: reduce) {
  .sig::before { transform: scaleY(1); transition: none; }
}

/* ==========================================================================
   Une fiche à trois temps
   Les fiches de prestation.css vont par deux — « ce qui est traité », puis
   « comment ». Sur la page « qui nous sommes », chaque volet de gouvernance
   commence par une phrase de principe qui vaut pour les deux points qui
   suivent : elle prend donc toute la largeur de la fiche, et les deux points
   se rangent dessous. Sans cela, la grille à deux colonnes laisse un trou.
   ========================================================================== */

@media (min-width: 760px) {
  .mat-b--intro { grid-column: 1 / -1; }
}

/* ==========================================================================
   Les liens dans le fil du texte
   Le chapô d'une section n'en contenait jusqu'ici jamais. Sur ces pages-ci
   il en porte — les villes, les prestations — et un lien qui ne se voit pas
   n'est pas un lien. Un filet sous le mot, discret au repos, or au survol :
   le même geste que .vl-lien, en plus petit.
   ========================================================================== */

.chap-chapo a,
.gal-lead a,
.vl-cta-p a,
.mat-b a,
.conf-p a,
.sig-p a,
.vlq-r a {
  color: var(--blanc);
  text-decoration: none;
  border-bottom: 1px solid var(--filet-fort);
  transition: color .35s var(--ez), border-color .35s var(--ez);
}

.chap-chapo a:hover,
.chap-chapo a:focus-visible,
.gal-lead a:hover,
.gal-lead a:focus-visible,
.vl-cta-p a:hover,
.vl-cta-p a:focus-visible,
.mat-b a:hover,
.mat-b a:focus-visible,
.conf-p a:hover,
.conf-p a:focus-visible,
.sig-p a:hover,
.sig-p a:focus-visible,
.vlq-r a:hover,
.vlq-r a:focus-visible {
  color: var(--or);
  border-color: var(--or);
}

/* ==========================================================================
   L'annuaire des partenaires
   Six maisons, six logos — et un problème que le reste du site n'a pas :
   ces logos ne nous appartiennent pas. Quatre d'entre eux sont fournis sur
   fond blanc opaque, un seul est détouré. Les poser tels quels sur du noir
   donnerait quatre rectangles blancs et une signature invisible.

   On assume donc la plaque claire : chaque logo est reçu sur un carton
   blanc cassé, de hauteur fixe, où il est contenu sans être déformé. C'est
   le seul endroit du site où le blanc prend de la surface, et c'est voulu :
   une page d'annuaire doit ressembler à une page d'annuaire.
   ========================================================================== */

.part-l {
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
}

.part {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--noir-profond);
  border: 1px solid var(--filet);
}

/* Même liseré que .conf, mais horizontal : il court en tête de la fiche. */
.part::before {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 2px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ez);
}

.part.on::before { transform: scaleX(1); }

.part-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  padding: 16px 22px;
  background: var(--blanc);
}

.part-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.part-n {
  margin-top: clamp(18px, 2.4vh, 24px);
  font-family: var(--font-h);
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--blanc);
}

.part-m {
  margin-top: 7px;
  font-family: var(--font-b);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
}

.part-p {
  margin-top: clamp(12px, 1.8vh, 16px);
  font-family: var(--font-b);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--blanc-mut);
}

/* Le lien est poussé en pied de fiche pour que toutes les fiches d'une
   rangée l'alignent, quelle que soit la longueur du texte au-dessus. */
.part-lnk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: clamp(16px, 2.2vh, 22px);
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
  text-decoration: none;
  transition: color .35s var(--ez);
}

.part-lnk span:last-child { transition: transform .35s var(--ez); }
.part-lnk:hover, .part-lnk:focus-visible { color: var(--or); }
.part-lnk:hover span:last-child { transform: translateX(5px); }

@media (min-width: 760px) {
  .part-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .part-l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .part::before { transform: scaleX(1); transition: none; }
  .part-lnk, .part-lnk span:last-child { transition: none; }
}

/* Un partenaire dont nous n'hébergeons pas le logo garde quand même sa
   plaque : son nom y est composé dans le serif de la maison. C'est plus
   honnête qu'un lien vers une image qui vit sur le serveur d'un tiers, et
   qui disparaît le jour où ce tiers refait son site. Le jour où le fichier
   nous est fourni, on remplace le texte par l'image et rien d'autre ne bouge. */
.part-logo--mot {
  font-family: var(--font-h);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-align: center;
  line-height: 1.25;
  color: var(--noir);
}

.part-logo--mot span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-b);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--noir-creuse);
  opacity: .62;
}

/* ==========================================================================
   Le formulaire de candidature
   Il emprunte tout son vocabulaire à rendez-vous.css : mêmes filets plutôt
   que des boîtes, même étiquette qui passe à l'or quand le champ prend le
   focus. Seules deux choses lui manquaient : une largeur — un formulaire
   étalé sur 1136 px se lit mal, l'œil perd la ligne entre l'étiquette et le
   champ — et une rangée capable de porter deux champs courts côte à côte.
   ========================================================================== */

/* Aligné à gauche, comme le titre et le chapô qui le précèdent. Centré, il
   flottait au milieu d'une colonne de 1136 px et rompait la lecture de la
   page, qui est éditoriale et part toujours du bord gauche. */
.cand { max-width: 640px; }

.rdv-duo { display: grid; gap: clamp(22px, 3vh, 30px); }

@media (min-width: 620px) {
  .rdv-duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(22px, 3vw, 36px);
  }
}

/* ==========================================================================
   Le sommaire d'une page longue
   Vingt-deux questions rangées en six rubriques : sans sommaire, la page se
   parcourt au pouce et on n'y trouve rien. Les six entrées mènent chacune à
   sa section. Le petit hexagone d'or reprend le motif de .vl-note — c'est la
   marque que la maison emploie partout pour dire « voici un repère ».
   ========================================================================== */

.faq-som {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  margin-top: clamp(28px, 4vh, 40px);
}

.faq-s {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px 9px 28px;
  border: 1px solid var(--filet);
  font-family: var(--font-b);
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--blanc-mut);
  text-decoration: none;
  transition: color .35s var(--ez), border-color .35s var(--ez);
}

.faq-s::before {
  content: '';
  position: absolute;
  left: 13px;
  width: 7px;
  height: 8px;
  background: var(--or);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: transform .35s var(--ez);
}

.faq-s:hover,
.faq-s:focus-visible {
  color: var(--blanc);
  border-color: var(--filet-fort);
}

.faq-s:hover::before { transform: scale(1.3); }

/* La cible d'une ancre doit se poser sous l'en-tête collant, sinon le titre
   de la rubrique passe dessous et l'on croit avoir atterri au mauvais
   endroit. */
.vl-sec[id] { scroll-margin-top: clamp(80px, 12vh, 108px); }

@media (prefers-reduced-motion: reduce) {
  .faq-s, .faq-s::before { transition: none; }
  .faq-s:hover::before { transform: none; }
}

/* Une plaque posée entre deux sections, et non juste après l'ouverture, n'a
   personne pour lui donner de l'air : la section qui précède a déjà rendu sa
   marge. Elle porte donc la sienne. */
.vl-plaques--seule { margin-block: clamp(40px, 6vh, 78px); }

/* ==========================================================================
   Le pré-diagnostic
   Quatre questions, une réponse. C'est le seul endroit du site où l'on
   demande quelque chose au visiteur avant de lui donner quoi que ce soit :
   il faut donc que chaque étape se voie finie, et que la suivante arrive
   sans rechargement ni attente. Les étapes sont empilées au même endroit et
   seule celle qui porte `.on` s'affiche — c'est main.js qui la déplace.
   ========================================================================== */

.diag-tool { margin-top: clamp(30px, 4.5vh, 48px); }

/* ---- La jauge d'avancement --------------------------------------------- */

.diag-progress {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-bottom: clamp(34px, 5vh, 54px);
}

/* Le fil qui relie les quatre jalons, posé derrière eux. La largeur est
   donnée explicitement : dans un conteneur en flex, un enfant en position
   absolue avec left et right à zéro se réduit à son contenu au lieu de
   s'étirer, et le fil ne faisait que trente-deux pixels. */
.diag-progress-line {
  position: absolute;
  left: 0;
  top: 11px;
  width: 100%;
  height: 1px;
  background: var(--filet);
}

.diag-progress-step {
  position: relative;
  width: 23px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--noir);
  border: 1px solid var(--filet);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-family: var(--font-b);
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--blanc-fnt);
  transition: background .4s var(--ez), color .4s var(--ez);
}

/* Une alvéole franchie se remplit d'or. La bordure disparaît : sur une forme
   en clip-path elle n'est de toute façon rognée qu'à moitié. */
.diag-progress-step.on {
  background: var(--or);
  border-color: transparent;
  color: var(--noir);
}

/* ---- Les étapes ---------------------------------------------------------- */

.diag-step { display: none; }
.diag-step.on { display: block; animation: diag-entre .5s var(--ez) both; }

@keyframes diag-entre {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.dq-num {
  display: block;
  font-family: var(--font-b);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or);
}

.diag-step h2,
.diag-step h3 {
  margin-top: 12px;
  font-family: var(--font-h);
  font-size: clamp(1.45rem, 2.8vw, 2.1rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--blanc);
}

/* ---- Les réponses -------------------------------------------------------- */

.diag-opts {
  display: grid;
  gap: 12px;
  margin-top: clamp(26px, 3.6vh, 36px);
}

.diag-opt {
  position: relative;
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 17px 44px 17px 20px;
  background: var(--noir-profond);
  border: 1px solid var(--filet);
  border-radius: 0;
  font-family: var(--font-b);
  text-align: left;
  color: var(--blanc);
  cursor: pointer;
  transition: border-color .35s var(--ez), background .35s var(--ez);
}

/* Le chevron d'or, qui avance au survol. */
.diag-opt::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1px solid var(--or);
  border-bottom: 1px solid var(--or);
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity .35s var(--ez), transform .35s var(--ez);
}

.diag-opt:hover,
.diag-opt:focus-visible {
  border-color: var(--filet-fort);
  background: var(--noir-creuse);
  outline: 0;
}

.diag-opt:hover::after,
.diag-opt:focus-visible::after { opacity: 1; transform: rotate(-45deg) translate(3px, 3px); }

/* Le choix retenu garde son liseré d'or le temps que l'étape suivante monte. */
.diag-opt.active { border-color: var(--or); }
.diag-opt.active::after { opacity: 1; }

.diag-opt-lbl { font-size: 0.98rem; font-weight: 400; }

.diag-opt-range {
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--blanc-fnt);
}

@media (min-width: 720px) {
  .diag-opts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---- La réponse ---------------------------------------------------------- */

.diag-result { display: none; }

.diag-result.on {
  display: block;
  position: relative;
  padding: clamp(30px, 4.4vw, 50px) clamp(24px, 3.4vw, 44px);
  background: var(--noir-profond);
  border: 1px solid var(--filet);
  border-left: 2px solid var(--or);
  animation: diag-entre .55s var(--ez) both;
}

#diag-result-title {
  font-family: var(--font-h);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 400;
  line-height: 1.14;
  color: var(--blanc);
}

#diag-result-text,
#diag-result-zone {
  margin-top: clamp(14px, 2vh, 20px);
  font-family: var(--font-b);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.78;
  color: var(--blanc-mut);
}

#diag-result-zone { color: var(--blanc-fnt); }

.diag-result-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(26px, 3.6vh, 36px);
}

.diag-restart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--filet-fort);
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
  cursor: pointer;
  transition: color .35s var(--ez), border-color .35s var(--ez);
}

.diag-restart:hover,
.diag-restart:focus-visible { color: var(--or); border-color: var(--or); }

@media (prefers-reduced-motion: reduce) {
  .diag-step.on, .diag-result.on { animation: none; }
  .diag-opt, .diag-opt::after, .diag-progress-step, .diag-restart { transition: none; }
}

/* ==========================================================================
   Les pages de droit
   Mentions légales, confidentialité, conditions générales. Ce sont les
   seules pages du site qu'on ne lit pas : on y cherche une clause précise,
   souvent après un différend. Elles ne doivent donc rien chercher à séduire.
   Une colonne étroite, des articles numérotés, un filet entre chacun, et un
   sommaire en tête pour atteindre le bon article sans faire défiler.

   Le texte y est plus grand et plus aéré que partout ailleurs sur le site :
   c'est la contrepartie du sérieux, pas un détail de confort.
   ========================================================================== */

.loi { max-width: 74ch; }

.loi-maj {
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
}

.loi-a {
  padding-block: clamp(30px, 4.4vh, 46px);
  border-top: 1px solid var(--filet);
}

.loi-a:last-child { border-bottom: 1px solid var(--filet); }

.loi-n {
  display: block;
  font-family: var(--font-b);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or);
}

.loi-t {
  margin-top: 11px;
  font-family: var(--font-h);
  font-size: clamp(1.28rem, 2.1vw, 1.62rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.005em;
  color: var(--blanc);
}

.loi-a p {
  margin-top: clamp(14px, 2vh, 18px);
  font-family: var(--font-b);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--blanc-mut);
}

.loi-a ul {
  margin-top: clamp(14px, 2vh, 18px);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}

.loi-a li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-b);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--blanc-mut);
}

/* Le même hexagone que partout ailleurs pour dire « voici un point ». */
.loi-a li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 7px;
  height: 8px;
  background: var(--or);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.loi-a strong { font-weight: 500; color: var(--blanc); }

.loi-a a {
  color: var(--blanc);
  text-decoration: none;
  border-bottom: 1px solid var(--filet-fort);
  transition: color .35s var(--ez), border-color .35s var(--ez);
}

.loi-a a:hover,
.loi-a a:focus-visible { color: var(--or); border-color: var(--or); }

/* L'identité de l'éditeur, de l'hébergeur : des couples intitulé / valeur
   qu'on lit en diagonale plutôt qu'en phrases. */
.loi-d { margin-top: clamp(18px, 2.4vh, 24px); display: grid; gap: 14px; }

.loi-d div {
  display: grid;
  gap: 4px;
  padding-top: 13px;
  border-top: 1px solid var(--filet);
}

.loi-d dt, .loi-d-l {
  font-family: var(--font-b);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
}

.loi-d dd, .loi-d-v {
  margin: 0;
  font-family: var(--font-b);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--blanc);
}

@media (min-width: 680px) {
  .loi-d div { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: 4px 28px; }
}