/* Family segment: rencontres-apres-divorce, rencontres-apres-veuvage, rencontres-gays-lesbiennes, rencontres-seniors.
   Pages by life situation. Overlap measured at extraction, once the hero was pulled out into variables: 100.0 %.
   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. */

/* .cf-photo : règle conservée à l'identique des autres pages de segment, mais
     non utilisée sur celle-ci. La seule image retenue part en bandeau de hero, et
     une même photo ne peut pas servir deux fois sur la même page. */
  .cf-photo{aspect-ratio:3/2;border:1px solid var(--line-strong);border-radius:var(--r);
    background:#E6E2D8 center/cover no-repeat}

/* ============ AGENCES ============ */
  /* Le nombre de colonnes vient de la page, par une variable et non par un style
     inline sur la grille : un style inline battait les deux media queries qui
     repliaient la grille, et les villes debordaient de 126 px a 390 px. */
  .cities{display:grid;grid-template-columns:repeat(var(--cities-cols,4),1fr);gap:1px;background:var(--line);border:1px solid var(--line)}

/* T14 a T16 : micro-conversions */
  .micro{margin-top:2.2rem;padding:1.6rem 1.7rem;border:1px solid var(--line);
    border-radius:var(--r);background:var(--surface)}

.micro h3{font-size:1.2rem;margin-bottom:.6rem}

.micro p{color:var(--ink-2);max-width:var(--measure)}

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

.micro .m-row{display:flex;flex-wrap:wrap;gap:.8rem}
.micro form > .btn{justify-self:start}

.micro input[type=text],.micro input[type=email],.micro textarea{
    flex:1;min-width:13rem;min-height:var(--target);padding:.7rem .9rem;
    border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);
    font:inherit;color:var(--ink)}

.micro textarea{min-height:110px;width:100%}

@media (hover:hover){.micro input:hover,.micro textarea:hover{border-color:var(--muted)}}

.micro .m-note{font-size:.9rem;color:var(--muted)}

.micro .m-neutral{font-weight:600;color:var(--ink)}

/* Numerotation des stages. Le <ol> porte deja l'ordre pour les lecteurs
     d'ecran ; ce compteur ne fait que le rendre visible. */
  .vsteps{counter-reset:etape;list-style:none;padding:0;margin:0}

.vstep{counter-increment:etape}

.vstep::before{content:counter(etape);display:block;
    font-family:"Source Serif 4",Georgia,serif;font-size:2.1rem;font-weight:500;
    line-height:1;color:var(--accent);margin-bottom:.8rem}

@media (max-width:900px){
    .hero-grid,.founder-grid,.cv-grid{grid-template-columns:1fr}
    .founder-photo{aspect-ratio:16/11;max-width:520px}
    .cf-photo{aspect-ratio:16/10;max-width:560px}
    .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}
    .segblock,.segblock.flip{grid-template-columns:1fr}
    .segblock-media,.segblock.flip .segblock-media{order:-1;aspect-ratio:16/11;max-width:520px}
  }

/* ====== Composants des pages territoire (tokens existants uniquement) ====== */
    /* L'encadre qui remplace l'adresse et les horaires : ici il n'y a pas de bureau,
       ce qu'on affiche a la place, c'est la facon dont le premier rendez-vous se passe. */
    .visio-box{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
      padding:clamp(1.6rem,1rem + 2vw,2.4rem);max-width:none}

.visio-box .kicker{font-size:var(--step--1);font-weight:600;letter-spacing:.14em;
      text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}

/* 07/10: the size moved to base.css, the home page's smallest section title. */
.visio-box h2{margin-bottom:.8rem}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size. The box text inherits the body size (var(--body), line-height 1.65). Was 1.05rem (16.8 px). */
.visio-box p{color:var(--ink-2);max-width:60ch}

.visio-box .row{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
      display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center}

/* 10/10: the hairlines were the container's background showing through the 1px
   gaps, so an empty track (four towns in five columns) painted a whole block of
   that darker sand. Each tile now draws its own outline, the 1px gap and the 1px
   padding make neighbouring outlines land on the same pixel, and an empty track
   stays plain. */
.city-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px;
      padding:1px;margin-top:clamp(2rem,1.2rem + 2vw,3rem)}

.city-list div{background:var(--paper);padding:1.3rem 1.4rem;outline:1px solid var(--line)}

.city-list .cn{font-family:"Source Serif 4",Georgia,serif;font-size:1.25rem;font-weight:500}

.city-list .cd{color:var(--muted);font-size:.95rem;margin-top:.25rem}

.vsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(2rem,1.2rem + 2vw,3rem)}

.vstep{list-style:none;padding:2rem 1.8rem 2.2rem;border-left:1px solid var(--line)}

.vstep:first-child{border-left:0;padding-left:0}

.vstep h3{margin-bottom:.6rem}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size. Step texts and list items inherit the body size (var(--body), line-height 1.65). Both were 1.05rem (16.8 px). */
.vstep p{color:var(--ink-2)}

.vlist{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.9rem;max-width:56ch}

.vlist li{padding-left:1.6rem;position:relative;color:var(--ink-2)}

.vlist li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
      border-radius:50%;background:var(--accent)}

.vlist b{color:var(--ink);font-weight:600}

/* 12/10, her phone screenshots of the young singles page. The size of the list
   above is the one she called « parfaite », and everything above it « trop gros »:
   the section titles drop a step, and the standfirsts and step texts take the
   list's size and line height. That is 16.8 px, under the project's 18 px body
   floor, at her explicit request. The banner and the callback block keep theirs:
   she said nothing about them. */
main > section:not(.hero):not(.convert) h2:not(.eyebrow){font-size:calc(.85 * var(--h2))}
/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes
   the same running text size. Her newer word supersedes the 12/10 standfirst size above:
   the standfirsts go back up to var(--body). Was 1.05rem (16.8 px). The section titles are
   untouched. */
main > section:not(.hero):not(.convert):not(.hero-intro) .lead{font-size:var(--body);line-height:1.65}
/* The step titles were 19.2 px under section titles now at 20.1 px on a phone:
   they come down with them, so the order still reads. */
.vstep h3{font-size:1.1rem}

@media (max-width:900px){
      .vsteps{grid-template-columns:1fr}
      .vstep{border-left:0;border-top:1px solid var(--line);padding:1.8rem 0}
      .vstep:first-child{padding-top:0;border-top:0}
    }

/* La ligne des departements couverts en visio, sous la grille des bureaux. Une phrase
   et non des cartes : une carte de cette grille porte une adresse, et ces trois-la n'en
   ont pas. Voir parts/segment-offices.php. */
/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size. The sentence inherits the body size; its .link keeps its 48 px line box. Was 1.02rem (16.3 px). */
.seg-zones{margin:1.4rem 0 0;color:var(--ink-2);display:flex;
    flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem}

/* 13/10, the title-only banner first made here for Divorce: moved to base.css on
   22/10, when it became the rule for every banner. */

/* 22/10: a Short under the text of the banner (gay and lesbian page): a compact
   card, its portrait picture and its title; it plays large in a window over the
   page (theme.js, shortPlayer). One link, the whole card. */
.short-card{display:inline-flex;align-items:center;gap:clamp(1rem,.6rem + 1.4vw,1.6rem);margin-top:clamp(1.6rem,1.2rem + 1vw,2.2rem);
  padding:.75rem clamp(1rem,.6rem + 1.4vw,1.6rem) .75rem .75rem;max-width:34rem;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);color:var(--ink);text-decoration:none}
@media (hover:hover){.short-card:hover{border-color:var(--ink)}.short-card:hover .short-cta{color:var(--accent)}}
.short-card:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.short-thumb{position:relative;flex:none;width:clamp(84px,6vw + 50px,112px);aspect-ratio:9/16;border-radius:calc(var(--r) - 2px);
  background:var(--tint) center/cover no-repeat;overflow:hidden}
.short-thumb::before{content:"";position:absolute;inset:0;background:rgba(12,14,16,.22)}
.short-thumb .v-play{transform:translate(-50%,-50%) scale(.62)}
.short-text{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.short-text .eyebrow{margin:0}
.short-title{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.1rem,1rem + .4vw,1.3rem);line-height:1.3}
.short-cta{font-weight:600;margin-top:.2rem}

/* The window the Short plays in. */
.short-dialog{padding:0;border:0;background:transparent;max-width:none;max-height:none;overflow:visible;
  margin:auto;inset:0} /* base.css zeroes every margin, and a <dialog> centres itself with margin:auto */
.short-dialog::backdrop{background:rgba(12,14,16,.82)}
.short-wrap{position:relative}
.short-frame{position:relative;width:min(92vw,calc(78vh * 9 / 16));aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:#000}
.short-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.short-close{position:absolute;right:0;bottom:calc(100% + .6rem);min-height:var(--target);padding:0 1rem;border:1px solid rgba(255,255,255,.6);
  border-radius:var(--r);background:transparent;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.short-close:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* 22/10: two taupe bands in a row (« Entre femmes aussi », then the question)
   read as one long dark block since the question band left the dark brown on
   21/10. A light hairline marks where the second one starts. */
.band-taupe + .confid{border-top:1px solid rgba(255,255,255,.2)}

/* 23/10, Valérie: « Quatre bureaux en Rhône-Alpes », « tu mets plus petit »,
   « comme le texte en bas ». The heading under « Où nous rencontrer ? » takes the
   running text: same family, size and colour as the paragraph that follows.
   The selector outranks the « .85 * --h2 » rule of the section headings above. */
main > section:not(.hero) .s-head h2.s-offices-title:not(.eyebrow){font-family:Figtree,system-ui,sans-serif;font-size:var(--body);
  font-weight:400;line-height:1.65;letter-spacing:0;color:var(--ink-2);max-width:62ch}

/* 23/10, Lucas on « Jeunes célibataires »: « trop d'espacement entre les
   paragraphes », between « Comment nous accompagnons » and « Concrètement,
   comment ça se passe ? ». That section is a heading block only, its paragraphs
   inside it: the block's own bottom margin (2.5rem) came on top of the section
   padding, 125 px of void at 1440 against 84 between the other sections. */
main > section > .wrap > .s-head:last-child{margin-bottom:0}

/* 23/10: the gay and lesbian page's video is the site's standard player now,
   under the text of the banner (template-segment.php); the .short-* rules above
   no longer have a caller. */
.hero-intro .intro-video{margin-top:clamp(1.6rem,1.2rem + 1vw,2.2rem)}

/* 28/10: long steps as rows (template-segment.php, past 400 characters). The
   number keeps its column on the left, the title and the paragraphs read across
   at a comfortable measure. Under 900 px the steps already stack. */
@media (min-width:901px){
  .vsteps-rows{grid-template-columns:1fr}
  .vsteps-rows .vstep{display:grid;grid-template-columns:3.2rem minmax(0,1fr);column-gap:1.4rem;
    border-left:0;border-top:1px solid var(--line);padding:1.9rem 0}
  .vsteps-rows .vstep:first-child{border-top:0;padding-top:0}
  .vsteps-rows .vstep::before{grid-column:1;grid-row:1 / span 20;margin:0}
  .vsteps-rows .vstep > *{grid-column:2;max-width:72ch}
}

/* 28/10, Valérie on Divorce: the points of « Un accompagnement fondé sur la
   confiance » in columns (switch setup_columns). One column per point, as many
   as there are; two by two on a laptop, where four would be a few words wide;
   one under the other on a phone. The bold lead-in becomes the title of its
   point. Same day, Lucas: « enlève les points rouges », at every width. */
.vlist-cols li{padding-left:0}
.vlist-cols li::before{content:none}
.vlist-cols b{display:block;margin-bottom:.45rem}
@media (min-width:701px){
  .vlist-cols{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem 2.4rem;
    margin-top:clamp(1.8rem,1.2rem + 1.5vw,2.6rem)}
}
@media (min-width:1101px){
  .vlist-cols{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}
  .vlist-cols li{padding:0 1.6rem;border-left:1px solid var(--line)}
  .vlist-cols li:first-child{padding-left:0;border-left:0}
  .vlist-cols li:last-child{padding-right:0}
}

/* 28/10, Valérie on Divorce: the text under the banner as a white block (switch
   intro_white). The white of the callback block, closed at the bottom too. */
.hero-intro.intro-white{padding-block:clamp(2rem,1.4rem + 2vw,3rem)}

/* 28/10, Valérie on Divorce: the home page's colour order (switch home_rhythm,
   template-segment.php). The banner photo first, then white and beige in turn,
   counted on the sections actually printed. The taupe bands stay taupe, each one
   standing in for a beige. The whites are the home's true white
   (accueil.css, 24/10), not --surface, which reads beige on her Mac. The text under
   the banner becomes a block of its own, closed at the bottom. Form fields go
   white, as on the home page, so they still show on the beige. */
.segment-rhythm main > section:nth-of-type(even):not(.band-taupe){background:#fff}
.segment-rhythm main > section:nth-of-type(odd):not(:first-of-type):not(.band-taupe){background:var(--paper)}
.segment-rhythm .hero-intro{padding-block:clamp(2rem,1.4rem + 2vw,3rem)}
.segment-rhythm .convert{border-top:0}
.segment-rhythm main .field input,.segment-rhythm main .field select,.segment-rhythm main .field textarea,
.segment-rhythm main .choice span,.segment-rhythm .micro input,.segment-rhythm .micro textarea{background:#fff}