/* Specific to the profils page.
   Extracted from the mockups by pilotage/extract-css.ts.
   Do not edit by hand while the theme is incomplete: the mockups are still
   the source, and an edit here would be overwritten on the next run. */

/* T13 : resultat de recherche de profils */
  .search-result{margin-bottom:2rem}

.sr-count{font-size:1.1rem;color:var(--ink);font-weight:600}

.sr-followup{margin-top:1.4rem;padding:1.5rem 1.6rem;background:var(--warm);
    border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0}

.sr-followup > p{max-width:var(--measure)}

.sr-form{margin-top:1.1rem;display:grid;gap:.9rem}

.sr-lab{font-weight:600;font-size:.98rem}

.sr-row{display:flex;flex-wrap:wrap;gap:.8rem}

.sr-row input{flex:1;min-width:14rem;min-height:var(--target);padding:.7rem .9rem;
    border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);
    font:inherit;color:var(--ink)}

@media (hover:hover){.sr-row input:hover{border-color:var(--muted)}}

.sr-note{font-size:.9rem;color:var(--muted);max-width:var(--measure)}

.profile-card[hidden]{display:none}

@media (max-width:900px){
    .hero-grid,.founder-grid,.cv-grid{grid-template-columns:1fr}
    .founder-photo{aspect-ratio:16/11;max-width:520px}
    .steps{grid-template-columns:1fr}
    .step{border-left:0;border-top:1px solid var(--line);padding:1.8rem 0}
    .step:first-child{padding-top:0;border-top:0}
    .quotes{grid-template-columns:1fr}
    .cities{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
  }

/* ====== Composants scopés à la page Profils (tokens existants uniquement) ====== */

    /* Hero en bandeau photo. Voile NEUTRE (gris sombre, pas bleu) : il assombrit
       plus qu'une teinte moyenne à opacité égale, donc il peut rester léger et
       laisser la photo garder ses couleurs. Dense sous le texte, nul à droite. */
    /* 06/10: padding cut with the site-wide banner rhythm (base.css, .hero).
       13/10: same veil as base.css .has-bg, darkened together (card 227). */
    /* 23/10: the banner also carries .has-bg.hero-title-only, whose padding and
       bottom veil already won here; the uneven padding and the left veil that
       lost to them are gone.
       23/10, evening, Lucas: « il faut bien qu'on voie le visage des gens ». The
       framing fixed here (50% 32%, 62% 30% on a phone) overrode the page's own
       « Cadrage » setting: it now comes from that field, like every banner
       (base.css, var(--hero-pos)). */
    .p-hero{background-color:#16191C;
      background-size:cover,cover;
      background-repeat:no-repeat,no-repeat}

/* 21/10: the client dropped the pink everywhere. The eyebrow turns white on the
   dark side of the photo, and the logo's exact red sits under it as a 3px rule,
   decoration only. .p-hero is not .has-bg, so base.css's grouped rule does not
   reach it: same rule, repeated here. */
    .p-hero .eyebrow{color:#fff}
/* 22/10: the red rule under this eyebrow is removed, like every rule under a title (base.css). */

/* 23/10: no narrow measure of its own any more, the banner titles are uniform. */
.p-hero h1{color:#fff}

.p-hero .lead{margin-top:1.4rem;color:#E3EBF2;max-width:56ch}

.p-hero .lead strong{color:#fff}


/* Barre de recherche */
    /* 06/10, control pass: « chez moi, c'est plus foncé » (15/09 [10:21]). --tint
       (#E6E2D8) next to the grid's #EDE7DB was a difference nobody could see. */
    .search{background:var(--band);--ink-2:#375C71;--muted:#3F5B6C;--line-strong:#58788B;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
      padding-block:clamp(1.75rem,1.1rem + 1.6vw,2.5rem)}

.s-note{margin-top:1.2rem;color:var(--muted);font-size:1rem}

/* 07/10, « partout pareil »: an intro under a section title, sized like the
   home page's .s-intro. At 16.8 px it was also under the 18 px floor.
   21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page
   takes the same running text size. Was 1.15rem (18.4 px), now the body size. */
.search .s-lede{color:var(--ink-2);font-size:var(--body);margin-bottom:1.6rem;max-width:60ch}

form.finder{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem 1.4rem;align-items:end}

.finder .f-cell label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.45rem;color:var(--ink)}

.finder select{width:100%;min-height:var(--target);padding:.7rem .9rem;
      border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);font:inherit;color:var(--ink)}

@media (hover:hover){.finder select:hover{border-color:var(--muted)}}

/* Âge en bornes libres. Deux champs numériques au lieu d'un menu de paliers :
       elle veut pouvoir demander « exactement de combien à combien », et les bornes
       qu'elle cite en exemple (25-45, 35-45) ne s'exprimaient pas avec les paliers. */
    .finder .f-range{border:0;padding:0;margin:0;min-width:0}

.finder .f-range legend{padding:0;font-weight:600;font-size:.95rem;margin-bottom:.45rem;color:var(--ink)}

.f-range-row{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem}

.finder .f-range-row label{display:inline;margin:0;font-weight:400;color:var(--ink-2)}

.finder .f-range input{width:5.6rem;min-height:var(--target);padding:.7rem .6rem;text-align:center;
      border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);font:inherit;color:var(--ink)}

@media (hover:hover){.finder .f-range input:hover{border-color:var(--muted)}}

.f-range-unit{color:var(--ink-2)}

.f-hint{margin-top:.5rem;font-size:1.02rem;color:var(--ink-2)}

.f-age{grid-column:span 2}

.finder .f-submit .btn{width:100%}

@media (max-width:900px){ form.finder{grid-template-columns:1fr 1fr} }

@media (max-width:560px){ form.finder{grid-template-columns:1fr} .f-age{grid-column:auto} }

/* Grille d'annonces */
    .profiles-head{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:baseline;justify-content:space-between;
      margin-bottom:clamp(1.8rem,1rem + 1.5vw,2.6rem)}

.profiles-head .p-count{color:var(--muted);font-size:1rem}

.profiles-head .p-count b{font-family:"Source Serif 4",Georgia,serif;color:var(--ink);font-weight:600;margin-right:.3rem}

/* 06/10, Lucas: « à la fin ça fait bizarre quand on n'a pas 3 cards sur la rangée ».
   The rules were the grid's own background showing through a 1px gap, so an
   incomplete last row left that background as a dark empty cell. The rules now
   belong to the cards (right and bottom), the grid only closes the top and left:
   an empty cell is plain page, and the last card still closes its own edge. */
.grid-profiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0;
      border-top:1px solid var(--line);border-left:1px solid var(--line)}
.grid-profiles>.profile-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}

.profile-card{background:var(--paper);padding:1.7rem 1.6rem 1.8rem;display:flex;flex-direction:column;gap:.5rem}

@media (hover:hover){.profile-card:hover{background:var(--surface)}}

.pc-medallion{width:56px;height:56px;border:1px solid var(--line-strong);border-radius:50%;
      display:grid;place-items:center;font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:1.7rem;
      color:var(--accent);line-height:1;margin-bottom:.6rem}

.pc-name{font-family:"Source Serif 4",Georgia,serif;font-size:1.3rem;font-weight:500;letter-spacing:-.005em;line-height:1.15}

.pc-meta{color:var(--ink-2);font-size:.98rem;line-height:1.45}

.pc-meta .pc-job{display:block;color:var(--muted)}

/* Compteur de résultats et état vide, posés le 28/09 avec le filtrage sans
     rechargement. Le compteur est discret par construction : il confirme que le
     filtre a mordu, il n'est pas un titre. L'état vide, lui, propose une porte de
     sortie plutôt que d'annoncer un échec, parce que zéro résultat sur une page
     d'annonces est le moment où l'on perd la visiteuse. */
  .pf-count{color:var(--muted);font-size:.95rem;margin-bottom:1.2rem;min-height:1.4em}

.pf-empty{margin:2rem 0;padding:1.6rem 1.8rem;border:1px solid var(--line);border-radius:var(--r);
    background:var(--surface);color:var(--ink-2);max-width:60ch}

.pf-empty a{color:var(--ink);text-decoration:underline;text-underline-offset:.18em}

/* Une carte masquee par le filtre sort de la grille : `hidden` seul ne suffit pas,
     `display:grid` de la grille le surcharge. */
  .profile-card[hidden]{display:none}

/* The reference under each listing's text: hidden from 28/09, shown again on
     30/10 at Valérie's request (she matches it with her software). */
  .pc-ref{margin-top:.6rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size.
   A listing's text is running text. Was 1rem (16 px), line-height 1.5. */
.pc-excerpt{color:var(--ink-2);font-size:var(--body);line-height:1.65;margin-top:.2rem}

.pc-reply{margin-top:auto;padding-top:1rem}

.pc-reply a{display:inline-block;min-height:var(--target);line-height:calc(var(--target) - .2rem);
      color:var(--ink);text-decoration:none;font-weight:600;font-size:.98rem;border-bottom:1px solid var(--line-strong)}

@media (hover:hover){.pc-reply a:hover{color:var(--accent);border-bottom-color:var(--accent)}}

.pc-reply a::after{content:" →";color:var(--accent)}

.more-row{margin-top:clamp(2.2rem,1.4rem + 2vw,3.2rem);display:flex;justify-content:center}

/* Bande de réassurance légère
   21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page
   takes the same running text size. The reassurance sentence is running text.
   Was 1.02rem (16.3 px), line-height 1.5. */
    .reassure-band{margin-top:clamp(2.2rem,1.4rem + 2vw,3.2rem);padding:1.4rem 1.5rem;
      border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
      color:var(--ink-2);font-size:var(--body);line-height:1.65}

.reassure-band b{color:var(--ink);font-weight:600}
/* Who publishes the listings (art. L224-93 Code de la consommation). */
.pf-legal{margin-top:1.4rem;font-size:.9rem;color:var(--ink-2);text-align:center;max-width:none}
/* 29/10, Valérie: « peux tu mettre le numéro de tel sur la même ligne ». The
   sentence wrapped at the paragraph measure and split the number; it now takes
   the full width, and the number never breaks. */
.pf-legal a{white-space:nowrap}

/* Pont vers le rappel */
    .bridge{max-width:52ch;color:var(--ink-2);margin-top:.4rem}

/* ====== 22/10: the old site's listings, whole, with « bonheur trouvé » ====== */

/* The medallion and, on a found happiness, its label on one line. */
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* « Bonheur trouvé »: the old site laid a ribbon over the photo. A label in the
   accent bordeaux, outlined rather than filled: a filled red block reads as an
   alert, and this is good news. 7.45:1 on the cream. */
.pc-found{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;
  border:1px solid var(--accent);border-radius:999px;color:var(--accent);
  font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.pc-found::before{content:"♥";font-size:.95em;letter-spacing:0}
.profile-card.is-found{background:var(--surface)}

/* The old site's tagline, bold above the text, as it printed it. */
.pc-hook{font-weight:600;color:var(--ink);line-height:1.5;margin-top:.2rem}

/* The full text. Under .js it shows seven lines with a fade, and « Lire la
   suite » opens it in place (theme.js, profileTexts). */
.pc-text{color:var(--ink-2);font-size:var(--body);line-height:1.65;margin-top:.2rem}
.pc-text p + p{margin-top:.8rem}
/* 31/10: a listing's video, the site's player at the width of the card. */
.pc-video{margin:.4rem 0 .2rem}
.pc-video .v-play{width:64px;height:64px}
.js .pc-text:not(.is-open){max-height:calc(1.65em * 7);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.pc-more{align-self:flex-start;min-height:var(--target);padding:0;border:0;background:none;cursor:pointer;
  color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:.22em}
@media (hover:hover){.pc-more:hover{color:var(--accent)}}
.pc-more:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* The count, worked out by the server. */
.pf-count b{color:var(--ink);font-weight:600}
.pf-page{margin-left:.6rem;color:var(--muted)}
.pf-page::before{content:"· ";}

/* Pagination, 24 listings a page. Targets at the site's 48px, the current page
   filled in ink. */
.pf-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:clamp(2rem,1.4rem + 2vw,3rem)}
.pf-pages .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:var(--target);min-height:var(--target);
  padding:0 .9rem;border:1px solid var(--line-strong);border-radius:var(--r);color:var(--ink);text-decoration:none;font-weight:600}
.pf-pages .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pf-pages .page-numbers.dots{border-color:transparent}
@media (hover:hover){.pf-pages a.page-numbers:hover{border-color:var(--ink)}}

/* 23/10: the reply window of a listing (page-profils.php, theme.js replyDialog).
   A modal <dialog> over the page; shown open in the page itself when there is no
   JavaScript or when the mail's link opens one listing (.is-inline). The fields
   take the site's own form styles (base.css, .field, .consent). */
/* margin:auto and inset:0: base.css zeroes every margin, and a modal <dialog>
   centres itself with them (same as .short-dialog). */
.reply-dialog{width:min(94vw,680px);max-height:92vh;margin:auto;inset:0;padding:0;border:0;border-radius:var(--r);overflow:auto;
  background:var(--surface);color:var(--ink);box-shadow:0 18px 50px rgba(12,14,16,.28)}
.reply-dialog::backdrop{background:rgba(12,14,16,.6)}
.reply-dialog.is-inline{position:static;display:block;width:auto;max-width:760px;max-height:none;
  margin:clamp(2rem,1.4rem + 2vw,3rem) auto 0;border:1px solid var(--line-strong);box-shadow:none}
.reply-dialog.is-inline .reply-close{display:none}
.reply-box{position:relative;padding:clamp(1.4rem,1rem + 2vw,2.4rem)}
.reply-box h2{font-size:clamp(1.4rem,1.15rem + 1vw,1.9rem);margin-bottom:.6rem;padding-right:2.5rem}
.reply-intro{color:var(--ink-2);margin-bottom:1.4rem}
/* 27/10, mobile review point 9: absolute, the cross scrolled away with the form,
   and a phone has no Escape key. Sticky keeps it at the top of the window; the
   float puts it where the absolute one was, and the negative margins undo the
   box padding. */
.reply-close{position:sticky;top:.6rem;float:right;z-index:1;
  margin:calc(-1 * clamp(1.4rem,1rem + 2vw,2.4rem) + .6rem) calc(-1 * clamp(1.4rem,1rem + 2vw,2.4rem) + .6rem) 0 0;
  background:var(--surface);width:var(--target);height:var(--target);
  display:grid;place-items:center;border:0;border-radius:50%;color:var(--ink);
  font-size:1.9rem;line-height:1;cursor:pointer}
@media (hover:hover){.reply-close:hover{background:var(--tint)}}
.reply-close:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.reply-grid{display:grid;grid-template-columns:1fr;gap:0 1.2rem}
@media (min-width:700px){.reply-grid{grid-template-columns:1fr 1fr}}
.reply-form .field{margin-bottom:1rem}
.reply-form textarea{width:100%;min-height:7rem;padding:.7rem .9rem;font:inherit;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r);resize:vertical}
.reply-form textarea:focus-visible{outline:3px solid var(--brand);outline-offset:1px}
.reply-form .optional{font-weight:400;color:var(--muted)}
.reply-form .consent{margin-top:.4rem}
.reply-form .consent-note{margin:.6rem 0 1.3rem;color:var(--ink-2);font-size:.92rem}

/* 24/10: the way to the questionnaire of three profiles, under the listings. */
.pf-select{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.6rem;
    margin:2.2rem 0 1.4rem;padding:1.4rem 1.6rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.pf-select p{margin:0;max-width:56ch;color:var(--ink-2)}
.pf-select b{color:var(--ink)}

/* 27/10, Valérie: « Pourquoi aucune photo n'est-elle publiée ? » left the
   intro paragraph for a title of its own, set like the search title below. */
.hero-intro .p-photo-title{margin-top:clamp(1.6rem,1.2rem + 1vw,2.2rem)}