/* Shared base, present in at least 14 of the 27 pages.
   Extracted from the mockups by pilotage/extract-css.ts.
   Since 15/09 the mockups are frozen and this file is the source: edit it by
   hand, and never regenerate it from the mockups. */

/* ============ RESET ============ */
  *,*::before,*::after{box-sizing:border-box;margin:0}

img{max-width:100%;display:block}

a{color:inherit}

button{font:inherit;color:inherit}

/* ============ BASE ============ */
  body{
    background:var(--paper);color:var(--ink);
    font-family:Figtree,system-ui,sans-serif;
    font-size:var(--body);line-height:1.65;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
  }

h1,h2,h3{font-family:"Source Serif 4",Georgia,serif;font-weight:500;line-height:1.1;letter-spacing:-.012em;color:var(--ink)}

h1{font-size:var(--h1)}

/* 07/10, Valérie: the home page is right, every other page should look the same.
   The home banner title is set in the regular weight, slightly tighter
   (accueil.css, .hero h1); every other page title was medium. Same size since
   this morning, now the same face too. 1.04 is the home title's phone leading,
   kept at every width: inner titles can run to three lines with accented
   capitals, where the desktop .98 would let them touch. */
h1{font-weight:400;letter-spacing:-.02em;line-height:1.04}

h2{font-size:var(--h2)}

h3{font-size:var(--h3);font-weight:600;letter-spacing:-.005em}

p{max-width:var(--measure)}

strong{font-weight:600}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* 07/10, « partout pareil »: every home section opens on the tighter junction
   (--sp-joined, accueil.css .joined-above) and closes on --sp, so two home sections sit
   56 px apart on a phone and 84 px on a desktop. The other pages still had --sp on
   both sides, 64 and 96 px. They now open the same way. */
section{padding-block:var(--sp-joined) var(--sp)}

.eyebrow{font-size:var(--step--1);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}

/* 07/10, same request: an eyebrow written as an h2 (« Rechercher une annonce » on
   /profils/) took the serif and the tight leading of the titles. It is the same
   label as every eyebrow of the home page, so it takes their face and leading. */
.eyebrow{font-family:Figtree,system-ui,sans-serif;line-height:1.65}

/* 07/10, same request: the intro under each page title was 19.6 px on a phone and
   22.4 px on a desktop, larger than any running text of the home page. It keeps
   the 18 px floor. */
.lead{font-size:clamp(1.15rem,1.05rem + .35vw,1.3rem);line-height:1.55;color:var(--ink-2);max-width:60ch}

/* 07/10, « partout pareil »: an intro under a section title, as opposed to the one
   under the page title, is a .s-intro on the home page: 18.4 px at every width.
   Elsewhere it was a .lead and reached 20.8 px on a desktop. The callback block
   keeps its own, more specific size (.cv-intro .lead).
   12/10: « ~ » and not « + »: her segment texts now run to several paragraphs, and
   only the first one came down, smaller than the ones after it.
   21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every
   page takes the same running text size. These intros read as running text, so
   they now take the body size rather than 18.4 px. Was 1.15rem. */
main h2 ~ .lead{font-size:var(--body);line-height:1.65}

.measure{max-width:var(--measure)}

.rule{height:1px;background:var(--line);border:0}

/* skip + focus */
  .skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.8rem 1.2rem;z-index:200}

.skip:focus{left:0}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
    outline:3px solid var(--brand);outline-offset:3px;border-radius:1px}

/* ============ BUTTONS / LINKS ============ */
  .btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--target);
    padding:.85rem 1.6rem;border:1px solid var(--ink);border-radius:var(--r);
    font-weight:600;font-size:var(--body);line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;
    transition:background .18s ease,color .18s ease}

.btn-solid{background:var(--ink);color:var(--paper)}

@media (hover:hover){.btn-solid:hover{background:#062B45}}

.btn-line{background:transparent;color:var(--ink)}

@media (hover:hover){.btn-line:hover{background:var(--ink);color:var(--paper)}}

.link{display:inline-block;min-height:var(--target);line-height:var(--target);
    color:var(--ink);text-decoration:none;font-weight:600;
    border-bottom:1px solid var(--line-strong)}

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

.arrow::after{content:" →";color:var(--accent)}

/* Retour d'appui. La feuille portait une vingtaine de regles de survol et aucun
     etat presse : au doigt le survol n'existe pas, et rien ne confirmait que le
     bouton avait ete touche. Le decalage d'un pixel se voit sans se lire, il ne
     demande aucune couleur de plus et ne depend d'aucun pointeur. */
  .btn:active,.link:active,.mobar a:active{transform:translateY(1px)}

/* L'appui eclaircit vers le bleu exact du logo pendant que le survol assombrit :
     les deux etats partent en sens contraire et ne peuvent pas etre confondus.
     Aucune couleur nouvelle, --brand est deja mesure a 7,28 sur le creme. */
  .btn-solid:active{background:var(--brand)}

.btn-line:active{background:var(--ink);color:var(--paper)}

.link:active{color:var(--accent);border-bottom-color:var(--accent)}

.mobar a:active{background:var(--surface)}

.mobar a.primary:active{background:var(--brand)}

/* ============ HEADER ============ */
  /* 12/09 : la barre repasse au clair. Le rouge de la veille etait « bq trop flash,
     trop rouge », et elle a designe elle-meme son remplacant : le blanc casse du
     bandeau des medias, c'est a dire --surface. C'est le seul aplat de la page plus
     clair que le creme du fond, la barre se detache donc d'elle-meme et reprend le
     filet --line d'origine. Tout ce que le rouge avait inverse en clair redescend a
     ses valeurs de texte, --ink, --ink-2 et --muted, et le bouton plein retrouve le
     bleu commun a tout le site. */
  header.site{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}

  /* 04/10: "Joindre Valérie" now leads to /contact/#rappel from the pages without a
     callback block, and the browser scrolled the form's first field under the sticky
     header. The offset is the header's own height (76px bar plus its 1px rule) and a
     little air. Not on the home page: accueil.css already sets html scroll-padding-top
     to 90px, and the two add up, which dropped the block 187px down.
     06/10: the same fault on every other anchor. The links of « Pourquoi passer par
     une agence matrimoniale aujourd'hui ? » landed each question's title 35px from
     the top, under the 77px header. pourquoi-agence.css did set a scroll-margin, but
     on the h2 while the id sits on its .qa block, and through --header-h, which only
     the home page defines. One offset for the whole site instead, on the scrolling
     element, so every anchor gets it; accueil.css keeps its own 90px. */
  html{scroll-padding-top:calc(77px + 1.25rem)}

/* 31/08 : ecarts, marque et bouton Menu sur des rampes au lieu d'une taille fixe.
     Sous 400 px l'ensemble ne tenait pas, et la premiere correction avait rapetisse le
     NOM de l'agence de 21,12 a 17,92 px. C'est le nom qui doit rester intact : ce sont
     l'ecart, la marque et le pictogramme qui cedent, et ils cedent progressivement. */
  .bar{display:flex;align-items:center;justify-content:space-between;
    gap:clamp(.7rem,5.33vw - .367rem,1.5rem);min-height:76px}

.brand{display:inline-flex;align-items:center;gap:clamp(.45rem,1.33vw + .183rem,.65rem);font-family:"Source Serif 4",Georgia,serif;font-size:1.32rem;font-weight:600;letter-spacing:-.01em;text-decoration:none;color:var(--ink);white-space:nowrap}

.brand-mark{width:clamp(38px,5vw + 22px,50px);height:auto;flex:none}

.brand-text{display:flex;flex-direction:column}

/* 25/09, à sa demande : « mettre en gras AGENCE MATRIMONIALE ». De 600 à 700,
   un cran et pas deux : en capitales, très espacé et à .62rem, le gras plein
   empâte les lettres au lieu de les affirmer. */
.brand small{display:block;font-family:Figtree;font-size:.62rem;font-weight:700;letter-spacing:clamp(.14em,.7vw - .09em,.22em);text-transform:uppercase;color:var(--muted);margin-top:2px}

nav.main{display:flex;gap:1.6rem}

/* 25/09, à sa demande, les rubriques passent en gras. 600 et non 700 : la barre
   porte six entrées sur une seule ligne, et le gras plein les ferait se toucher
   sous 1100 px. */
nav.main a{text-decoration:none;color:var(--ink-2);font-weight:600;font-size:1rem;padding-block:.4rem;white-space:nowrap;border-bottom:1px solid transparent}

@media (hover:hover){nav.main a:hover{color:var(--ink);border-bottom-color:var(--accent)}}

/* Sous-menu des bureaux. Il s'ouvre au clic et jamais au survol : la cible a
     45 ans et plus, et un menu qui se deplie au passage de la souris se referme
     des qu'on devie de quelques pixels en descendant vers les villes. */
  .navsub{position:relative;display:flex}

.navsub-btn{font:inherit;font-weight:600;font-size:1rem;color:var(--ink-2);background:none;border:0;
    border-bottom:1px solid transparent;padding-block:.4rem;cursor:pointer;white-space:nowrap;
    display:inline-flex;align-items:center;gap:.4rem}

.navsub-btn::after{content:"";width:.4rem;height:.4rem;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}

@media (hover:hover){.navsub-btn:hover{color:var(--ink);border-bottom-color:var(--accent)}}

.navsub-btn[aria-expanded="true"]{color:var(--ink)}

.navsub-btn[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}

.navsub-list{position:absolute;top:calc(100% + .55rem);left:-.9rem;z-index:60;min-width:14.5rem;
    background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.4rem;
    box-shadow:0 14px 30px rgba(0,0,0,.14);display:flex;flex-direction:column}

.navsub-list[hidden]{display:none}

nav.main .navsub-list a{padding:.6rem .9rem;border-radius:5px;border-bottom:0;min-height:44px;color:var(--ink-2);
    display:flex;align-items:center}

@media (hover:hover){nav.main .navsub-list a:hover{background:var(--tint);color:var(--ink);border-bottom-color:transparent}}

nav.main .navsub-list .navsub-hub{font-weight:600;color:var(--ink)}

/* La page courante garde son aria-current pour les lecteurs d'ecran, mais aucun
     marqueur visuel : le titre de la page le dit deja, et le filet rouge du reste
     de la nav n'a pas sa place dans une liste de cinq entrees. */
  nav.main .navsub-list a[aria-current="page"]{border-bottom-color:transparent}

.head-cta{display:flex;align-items:center;gap:1.3rem}

/* dans la barre, le CTA reste identifiable sans écraser le header :
     44px de haut, ce qui satisfait encore la cible tactile AAA */
  .head-cta .btn{min-height:44px;padding:.55rem 1.15rem;font-size:.97rem}

.tel{text-decoration:none;color:var(--ink);font-weight:600;white-space:nowrap}

.tel span{color:var(--muted);font-weight:500;font-size:.8rem;display:block;letter-spacing:.04em}

.menu-btn{display:none;min-height:var(--target);padding:.4rem clamp(.75rem,1vw + .55rem,.9rem);background:none;border:1px solid var(--ink);border-radius:var(--r);font-weight:600}

/* ============ SECTION HEAD ============ */
  /* 06/10: heading block to content, 53 px to 41 px at 1440, 40 to 30 on a phone. */
  .s-head{max-width:60ch;margin-bottom:clamp(1.9rem,1.1rem + 1.6vw,2.6rem)}

.s-head h2{margin-bottom:.85rem}

/* ============ STEPS ============ */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0}

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

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

/* 07/10, « partout pareil »: a step title is 1.2rem on the home page (« Ma façon
   de vous accompagner », accueil.css .steps-5). « Comment ça marche » and the visio
   page set theirs, and the « Ce qui est compris » list beside them, at the
   general h3 size, which the home page never uses: 24.8 px against 19.2 on a
   desktop. */
.step h3,.vstep h3,.incl h3{font-size:1.2rem}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size.
   Was 1.05rem (16.8 px). */
.step p{color:var(--ink-2)}

/* ============ VIDEO ============ */
  .video{position:relative;aspect-ratio:16/9;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;
    background:#16191C center/cover no-repeat;cursor:pointer;width:100%;padding:0;display:block}

.video::before{content:"";position:absolute;inset:0;background:rgba(12,14,16,.34)}

/* 28/10: a video hosted elsewhere (BFM) is a link with the same face. */
a.video{text-decoration:none;color:inherit}

/* Une fois la video lancee, la facade a ete remplacee par un conteneur inerte : le voile
   qui rendait la legende lisible sur l'image fixe n'a plus rien a servir, et il assombrissait
   la video. Le curseur redevient normal, il n'y a plus rien a cliquer ici. */
.video.is-playing{cursor:default}

.video.is-playing::before{content:none}

/* 23/10, Valérie: « tu peux enlever le rond au milieu des vidéos ? »; Lucas:
   « enlever juste le cercle, pas le play ». The ring and its dark disc go; the
   triangle stays, a little larger, with a soft shadow so it reads on a bright
   picture as well as on a dark one. The hover nudges it up a size. */
.v-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:82px;height:82px;display:grid;place-items:center;
    filter:drop-shadow(0 1px 6px rgba(12,14,16,.55));transition:transform .18s ease}

@media (hover:hover){.video:hover .v-play{transform:translate(-50%,-50%) scale(1.12)}}

.v-play::after{content:"";margin-left:6px;border-style:solid;border-width:17px 0 17px 28px;border-color:transparent transparent transparent var(--paper)}

.v-cap{position:absolute;left:0;right:0;bottom:0;padding:1.3rem 1.4rem 1.2rem;color:var(--paper);font-weight:600;font-size:1.05rem;background:rgba(12,14,16,.55)}
/* 24/10, after Valérie's « réduire le noir en bas » on the home video: every
   video caption band gets thinner, one step darker to keep its text at about 5:1.
   On a phone a two-line title made the band rise over a third of the picture
   and cover Valérie's chin on the divorce page. `.video .v-cap` so it also beats
   the copy of the rule in article.css; the home video keeps its own (accueil.css). */
.video .v-cap{padding:.65rem 1.1rem .7rem;line-height:1.3;background:rgba(12,14,16,.65)}
@media (max-width:700px){.video .v-cap{padding:.4rem .75rem .45rem;font-size:.92rem}}
/* 25/10, Valérie: « indiquer sur la vidéo : Vidéo réalisée en 2014 », on her
   presentation video. The note shares the caption band, lighter and smaller, on
   the right of the title, and under it when the band is too narrow for both. */
.video .v-cap.has-note{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:1rem}
.video .v-note{font-weight:400;font-size:.86em;opacity:.9}

/* 24/10: the duration badge in the corner of the videos (.v-dur) is gone from every template. */

/* A photo painted under its box: cards and video facades (perinel_cover_image(),
   task 258). They were CSS backgrounds, which get no srcset and are never
   deferred. The box keeps its own rules: zero specificity, so any position it
   already declares wins. The image sits at z-index -1 inside an isolated box,
   above the box's background but under its scrim, play button and caption. */
:where(:has(> .cover-img)){position:relative;isolation:isolate;overflow:hidden}

.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}

.video-meta{margin-top:1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--ink-2)}

/* 24/10, Lucas: « à chaque fois qu'on a une vidéo en grand, il faut faire comme sur
   comment-ca-marche, vidéo plus petite et centrée, sur toutes les pages ». A video
   set straight in the page column (.wrap > .video) ran the full 1180 px: the
   segment pages' video section and intro video, the method page. It now stops at
   820 px and is centred, its caption line with it. Videos inside a grid or a
   column (home, testimonials, offices, articles at 800) are not concerned, and a
   video added later in the same place takes the rule on its own. */
.wrap > .video,.wrap > .video + .video-meta{max-width:820px;margin-inline:auto}

/* ============ SEGMENTS (liste éditoriale) ============ */
  .seg{border-top:1px solid var(--line)}

.seg a{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:baseline;
    padding:1.8rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}

@media (hover:hover){.seg a:hover{background:var(--surface)}}

@media (hover:hover){.seg a:hover .s-title{color:var(--accent)}}

.s-title{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.4rem,1.1rem + 1vw,2rem);font-weight:500;letter-spacing:-.01em}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size.
   Was 1.02rem (16.3 px). */
.s-desc{color:var(--ink-2);max-width:44ch}

.seg .go{color:var(--accent);font-weight:600;white-space:nowrap;align-self:center}

/* 10/10, card 347: the same list on a segment page (« Les autres parcours ») and
   one line of the same links on an agency page (« Nous accompagnons aussi »). */
.segment-others-title{margin-bottom:clamp(1.9rem,1.1rem + 1.6vw,2.6rem)}

.segment-line{padding-block:clamp(2.2rem,1.6rem + 2vw,3.2rem)}

.segment-line-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.9rem 2.4rem}

/* On a phone the five links wrapped two on one line, three on their own: a column
   reads as a list, which it is. */
@media (max-width:560px){.segment-line-list{flex-direction:column;align-items:flex-start;gap:.4rem}}

/* ============ FOUNDER ============ */
  /* 30/09 : « ma photo, elle est redescendue » et « il y a un grand blanc ». Les deux
     descriptions sont le meme fait. La colonne de texte est plus haute que la photo,
     et `center` repartissait l'ecart moitie au-dessus, moitie en dessous : le blanc
     qu'elle voit est cette moitie du haut. `start` la fait affleurer le titre, ce qui
     est aussi ce que la maquette montrait.
     Sans effet quand les deux colonnes ont la meme hauteur, et sans effet sous 900 px,
     ou la grille repasse sur une colonne. */
  .founder-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:start}

/* Ancrage en haut et non au centre, corrigé le 25/09 sur son signalement :
   « ma photo est trop basse, quand je suis sur mon iPhone la tête est coupée ».
   La photo est en 4:5 et le cadre repasse en 16:11 sous 900 px ; à `center`, la
   fenêtre visible va de 22 % à 77 % de l'image alors que son visage occupe 10 % à
   50 %, donc le haut du crâne sort du cadre. `top` montre 0 % à 55 %.
   Sans effet sur grand écran : le cadre y a exactement le rapport de la photo,
   la fenêtre couvre tout, et la position ne décide de rien. */
.founder-photo{aspect-ratio:4/5;border:1px solid var(--line-strong);border-radius:var(--r);
    background:#E6E2D8 center 25%/cover no-repeat}

.sign{font-family:"Source Serif 4",Georgia,serif;font-style:italic;font-size:1.4rem;color:var(--accent);margin-top:1.6rem}

/* ============ TÉMOIGNAGES ============ */
  .quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,1rem + 3vw,3.5rem)}

.quote blockquote{font-family:"Source Serif 4",Georgia,serif;font-weight:400;font-size:clamp(1.3rem,1.1rem + .8vw,1.6rem);line-height:1.36;letter-spacing:-.005em}

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

.tstats{margin-top:clamp(2.5rem,1.5rem + 2vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;gap:1rem 2.6rem;align-items:baseline;color:var(--ink-2)}

.tstats b{font-family:"Source Serif 4",Georgia,serif;color:var(--ink);font-size:1.2rem;margin-right:.4rem}

/* ============ AGENCES ============ */
  /* Le quadrillage est dessine par le fond du conteneur vu a travers des gouttieres de
     1 px. Il suppose donc que chaque cellule existe, ce qui vaut ici : les pages parcours,
     /nos-agences/ et l'archive calculent toutes --cities-cols sur le nombre reel de villes,
     et n'ont jamais de ligne incomplete. L'accueil, lui, en a une, et il surcharge ces deux
     regles dans pages/accueil.css. */
  .cities{display:grid;grid-template-columns:repeat(var(--cities-cols,4),1fr);gap:1px;background:var(--line);border:1px solid var(--line)}

.city{background:var(--paper);padding:1.6rem 1.5rem;text-decoration:none;color:var(--ink);min-height:120px;display:flex;flex-direction:column;justify-content:space-between}

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

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

.city .ca{color:var(--ink-2);font-size:.95rem;margin-top:.4rem}

.city .zone{color:var(--muted);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-top:.7rem}

@media (hover:hover){.city:hover .cn{color:var(--accent)}}

/* ============ CONVERSION ============ */
  .convert{background:var(--surface);border-top:1px solid var(--line)}

.cv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1rem + 4vw,5rem);align-items:start}

.cv-intro h2{margin-bottom:1.1rem}

.cv-intro .lead{margin-bottom:1.8rem}

/* 07/10, « écrit trop gros » on the home callback block, then « uniformiser sur
   toutes les autres pages »: the sizes she approved on the home are the block's
   sizes everywhere. At 390 px: title 23 px, intro at body size, number 26 px. */
.cv-intro h2{font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem)}

/* 07/10, same request: the home page has two section title sizes and this one,
   its smallest. The question titles of /pourquoi-agence/ and the visio box title
   of the department pages were two more sizes of their own (up to 32.8 and 32 px
   on a desktop); they take this one. */
.qa h2,.visio-box h2{font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem)}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size.
   The size was already right, the leading was 1.5. */
.cv-intro .lead{font-size:var(--body);line-height:1.65}

/* 08/10, « le numéro du portable est trop gros »: at 25.6 px on a phone it was the
   largest number on the screen, next to every other phone link at 15 to 19 px. It
   keeps its serif and its red rule, which are what mark it out, at about 20 px on a
   phone and 22 px on a desktop. */
.cv-tel{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.25rem,1.15rem + .35vw,1.4rem);font-weight:600;text-decoration:none;color:var(--ink);border-bottom:3px solid var(--accent);padding-bottom:3px}

.cv-hours{color:var(--muted);margin-top:.9rem}

form.callback{display:grid;gap:1.15rem}

.field label{display:block;font-weight:600;font-size:.98rem;margin-bottom:.4rem}

.field input,.field select{width:100%;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)}

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

/* le fond des champs est le crème soutenu : le gris par défaut du navigateur
     y passe sous le seuil AA, on force le placeholder sur --muted */
  input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}

/* Block, the box pinned in the margin: as a flex row, the privacy link inside
   the label became a column of its own and squeezed the sentence (24/10). */
.consent{display:block;position:relative;padding-left:calc(24px + .8rem);font-size:.92rem;color:var(--ink-2)}

.consent input{position:absolute;left:0;top:0;width:24px;height:24px;min-width:24px;margin-top:2px;accent-color:var(--ink)}

.reassure{font-size:.95rem;color:var(--muted)}

.form-ok{display:none;padding:1.1rem 1.3rem;border:1px solid var(--ink);border-radius:var(--r);background:var(--paper);font-weight:600}

/* ============ FOOTER ============ */
/* 21/10, Valérie: the dark brown goes, the footer takes the taupe of the band she
   pointed at on /label-oncrh/ (the cabinet text). Its text colours move to the
   taupe band's own, measured for that ground: #EFE9DF at 5.95:1 for the text,
   #E3DBD0 at 5.24 for the secondary lines. The old #CFC6B8 drops to 4.25 on the
   taupe and #B5AB9B to 3.17, both under AA for small text. */
  /* 22/10, Valérie: « tout en bas, il n'y a plus de couleur, tout est blanc.
     Remettre le logo en couleur », and in red « Valérie Périnel, Agence, Nos
     bureaux, Contact, Nous suivre ». Neither can be done on the taupe: her logo
     red reaches 1.25:1 there, the blue 1.3:1. The footer goes to the light
     surface, where both read: the red 8.6:1, the blue 10.4:1. A taupe rule on
     top keeps it apart from a light band above it. */
  /* 23/10, Valérie on the phone: « il faut remettre le taupe » for the footer,
     « le texte sera en blanc, comme c'était ». Back on the taupe, with the
     colours measured for it (see above): white headings and links (7.19:1), the
     taupe band's #EFE9DF and #E3DBD0 for the rest. The logo turns white (.f-mark). */
  /* 24/10, Valérie by mail, again: in red « Valérie Périnel, Agence, Nos bureaux,
     Contact, Nous suivre », « et le logo en couleur ». Lucas: back to --deep, the
     dark ground, to carry the red. Her logo red itself reaches 1.55:1 on --deep,
     unreadable as text, so the headings and the name take --foot-red, the same red
     lightened to 4.73:1 (AA for these small capitals). Still a red, not the pink
     she dropped on 21/10. The text colours of the taupe hold on --deep, with more
     margin: #EFE9DF 12.4:1, #E3DBD0 11.1:1, white 14.2:1. */
  /* 24/10, later, Lucas: « dans le footer pour les titres, on met le même rouge que
     "nos agences", le bordeaux ». --foot-red becomes --logo-red, the red of the
     town names on /nos-agences/. Measured on --deep: 1.55:1, under every
     threshold; his decision, taken knowing it. */
  /* 24/10, evening, Lucas, after three mock-ups: « on essaie le lin ». On --deep the
     bordeaux was unreadable (1.55:1). The footer moves to a linen, a light taupe that
     still stands apart from the cream of the pages without a rule: the bordeaux
     reads at 6.2:1, the links in --ink at 7.5:1, the text in --ink-2 at 5.75:1. */
  /* 24/10, later still: « un peu plus foncé, y'a pas assez de contraste ». The linen
     goes one step darker, #CDC0AF (1.45:1 against the page cream, was 1.2): the
     bordeaux 5.1:1, the links 6.2:1, the text darkened to #2B4A5C for 5.3:1. */
  /* 24/10, last, Lucas: « on remet le deep, et pour le rouge, un rouge un peu
     contrasté mais moins orangé ». Back on --deep with its light text. The red is
     #FF5566: pulled towards crimson (hue 354, where #EF6B6B sat at 0 and read as
     salmon), fully saturated, at 4.57:1 on --deep, over the 4.5 these small
     capitals need. A deeper red cannot reach it on this ground. */
  /* 24/10, 16:42, Valérie by mail, the one that stands: « Taupe et tu mets un point
     rouge devant Valérie Périnel - agence - nos bureaux - contact - nous suivre »,
     « tout en blanc », the headings « en gras ». Her model is the taupe list of
     « Ce qui est compris » on /comment-ca-marche/ (.incl). So: the taupe ground,
     every text white (7.19:1), the five headings in the serif, bold, sentence
     case, each with the same 9px dot in --logo-red, hung in a 1.9rem gutter that
     indents the whole column, as the list does. The dot is decoration only (1.28:1
     on the taupe), the white word carries the heading. --deep and --foot-red go. */
  footer.site{background:var(--taupe);color:#fff;
    padding-block:clamp(3.5rem,2rem + 4vw,5rem) 2.5rem}

.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}

.foot-grid > div{padding-left:1.9rem}

footer.site a{color:#fff;text-decoration:none}

@media (hover:hover){footer.site a:hover{color:#fff;border-bottom:1px solid #fff}}
footer.site a:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:2px}

/* 24/10, 16:42: the five headings share the .incl title: serif, bold (600, the
   heaviest the serif file carries), line-height 1.1, and its dot, anchored on the
   heading with a top in em so it stays on the first line. */
.f-brand,.f-h{position:relative;font-family:"Source Serif 4",Georgia,serif;font-weight:600;line-height:1.1;letter-spacing:-.005em;color:#fff}

.f-brand::before,.f-h::before{content:"";position:absolute;left:-1.9rem;top:.55em;
  width:9px;height:9px;border-radius:50%;background:var(--logo-red)}

.f-brand{font-size:1.4rem}

/* 04/10: « le rose pale ne se differencie pas du blanc, peux tu l'accentuer ? Comme
   La fondatrice et Valerie Perinel ». A stronger pink, one step larger and bolder. */
/* 21/10: on the taupe this pink reaches 3.14:1, under the 4.5 AA asks of these small
   caps. Kept knowingly, by the rule Lucas set for the taupe bands' eyebrows on 06/10:
   the same pink everywhere, a label that never carries information alone. */
/* 21/10, later: the client dropped the pink everywhere. The headings go white
   (7.19:1 on the taupe) and the logo's exact red, --logo-red, sits under them as
   a 3px rule (removed 22/10) (grouped rule after .confid .eyebrow). The red is decoration only:
   1.25:1 on the taupe, it could never carry text there. */
/* 24/10, 16:42: the small capitals give way to the .incl title, sentence case, at
   its 1.2rem. */
.f-h{font-size:1.2rem;margin-bottom:1rem}

.f-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;font-size:1rem}

/* 24/10, Lucas: the pitch « en blanc comme le reste » (was #E3DBD0). */
.f-nap{font-size:.95rem;line-height:1.5;color:#fff}

/* Réseaux sociaux du pied de page. Le libellé reste écrit à côté du
     pictogramme : une icône seule n'est pas identifiée par une partie des
     visiteurs, et la cible cliquable garde ses 48 px. */
  .f-social{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0 1.4rem}

.f-social a{display:inline-flex;align-items:center;gap:.55rem;min-height:var(--target);font-size:.95rem}

.f-social svg{flex:none}

.f-bottom{margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.24);display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;font-size:.9rem;color:#fff}

/* mobile action bar */
  .mobar{display:none}

/* champ piege : invisible a l'oeil, atteignable par les robots qui remplissent tout */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent + .consent{margin-top:.7rem}

.consent-note{font-size:.86rem;color:var(--muted);margin-top:.2rem}

/* ============ T5 a T9 : conversion ============ */
  /* Creneau en boutons (T8) */
  .field-label{display:block;font-weight:600;font-size:.98rem;margin-bottom:.4rem}

.choices{display:flex;flex-wrap:wrap;gap:.6rem}

.choice{position:relative}

.choice input{position:absolute;opacity:0;width:1px;height:1px}

.choice span{display:inline-flex;align-items:center;min-height:var(--target);
    padding:.55rem 1.05rem;border:1px solid var(--line-strong);border-radius:var(--r);
    background:var(--surface);color:var(--ink-2);font-weight:600;font-size:1rem;cursor:pointer;
    transition:background .18s ease,color .18s ease,border-color .18s ease}

@media (hover:hover){.choice span:hover{border-color:var(--muted);color:var(--ink)}}

.choice input:checked + span{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.choice input:focus-visible + span{outline:3px solid var(--brand);outline-offset:3px}

.cta-quote blockquote{font-family:"Source Serif 4",Georgia,serif;font-size:1.05rem;
    font-style:italic;line-height:1.4;color:var(--ink)}

.cta-quote figcaption{margin-top:.4rem;font-size:.88rem;color:var(--muted)}

/* Ecran de confirmation (T5) */
  .form-ok{display:none;padding:1.5rem 1.6rem;border:1px solid var(--ink);
    border-radius:var(--r);background:var(--surface)}

.form-ok .ok-title{font-family:"Source Serif 4",Georgia,serif;font-size:1.45rem;
    font-weight:500;color:var(--ink);margin-bottom:.8rem}

.form-ok p + p{margin-top:.7rem}

.form-ok .ok-sub{color:var(--ink-2);font-size:1rem}

/* Errors sent back by the server, task 362. One list at the top of the form,
   rendered the same by PHP and by theme.js. The red is the interface accent, on
   text and a border only: here it does mean something went wrong. */
.form-errors{margin-bottom:1.2rem;padding:1rem 1.2rem;border:1px solid var(--accent);
    border-left-width:4px;border-radius:var(--r);background:var(--surface);color:var(--ink)}

.form-errors p{font-weight:600;margin-bottom:.4rem}

.form-errors ul{margin:0;padding-left:1.2rem;display:grid;gap:.3rem}

form [aria-invalid="true"]{border-color:var(--accent)}

/* ============ MOTION ============ */
  /* Base : tout est visible. Le masquage n'a lieu que si le script a pose .js sur
     <html>. Sans JS, robot d'indexation ou navigateur ancien, la page reste
     entierement lisible et la recherche dans la page fonctionne. */
  @media (prefers-reduced-motion:no-preference){
    .js .reveal{opacity:0;transform:translateY(10px)}
    .js .reveal.is-in{
      opacity:1;transform:none;
      transition:opacity var(--dur-rise) var(--ease-out),
                 transform var(--dur-rise) var(--ease-out);
      transition-delay:calc(var(--i,0) * var(--stagger))
    }
  }

/* "Reduce" ne veut pas dire "none" : le fondu d'opacite n'est pas un declencheur
     vestibulaire, la translation si. On garde donc le fondu, on retire le mouvement. */
  @media (prefers-reduced-motion:reduce){
    .js .reveal{opacity:0}
    .js .reveal.is-in{opacity:1;transition:opacity 180ms linear}
  }

/* Fondu entre pages. Chrome et Safari uniquement ; ailleurs, navigation normale.
     Les view transitions n'honorent pas prefers-reduced-motion d'elles-memes,
     d'ou l'enveloppe @media. Pas de view-transition-name nomme : un nom duplique
     annulerait silencieusement toute la transition. */
  @media (prefers-reduced-motion:no-preference){
    @view-transition{navigation:auto}
    ::view-transition-old(root){animation-duration:140ms}
    ::view-transition-new(root){animation-duration:220ms;animation-delay:40ms}
  }

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

/* ============ TOKENS ============ */
  :root{
    /* Palette entièrement dérivée de son logo : son bleu #004d7a et, depuis le
       22/10, son bordeaux #8c1b1b (le rouge de son logo sur l'ancien site ; le SVG
       du 28/08 portait un cerise #cc0935, abandonné). Le logo et l'interface
       partagent ce même rouge. Tout le reste en dérive. */
    --paper:#EDE7DB;   /* crème soutenu : le quasi-blanc d'avant était trop clair, et elle veut
                          « un ivoire très léger plutôt qu'un blanc pur » */
    --surface:#FAF7F1;
    /* 06/10, Lucas: on /rencontres-gays-lesbiennes/ « Pourquoi une agence » (the page
       cream) and « La discrétion, concrètement » (.band) « sont trop proches, elle ne
       voit pas la différence », and the same pair alternates all over the site.
       --paper #EDE7DB against --tint #E6E2D8 was a 1.05 ratio: no difference at all.
       The alternating band gets its own, clearly darker sand, 1.26 against the cream.
       --tint stays for the small chips and fills that use it.
       10/10, her email: the sand is « trop triste », to be replaced everywhere by the
       lighter cream of « Ma façon de vous accompagner », which is the page itself.
       The band now matches the page; sections are told apart by spacing and titles. */
    --band:var(--paper);
    --tint:#E6E2D8;    /* bande alternée : gris taupe très clair. Le bleu très clair d'avant
                          a été refusé deux fois en rendez-vous (« le fond bleu ne va pas »). */
    --warm:#F2E7E0;    /* beige rosé très clair : « une ambiance douce, humaine et rassurante,
                          sans tomber dans le rose agence matrimoniale » (ses notes du 26/08) */
    --brand:#004d7a;   /* le bleu exact de son logo : focus et éléments identitaires */
    --ink:#003F64;     /* son bleu assombri de 18 % : textes longs et aplats. Contraste 9,0
                          sur le crème, et c'est la même teinte que le logo, pas un voisin. */
    --ink-2:#3A6076;   /* texte secondaire, redérivé du bleu du logo à clarté constante */
    --muted:#47677A;   /* intitulés, méta, redérivé du bleu du logo */
    /* 22/10, Lucas: « le rouge du logo "bordeaux" », everywhere. That is the red of
       her own logo (#8c1b1b, sampled from the logo of the old site), not the
       #cc0935 of the SVG received on 28/08. One red for the whole interface: 7.5
       on the cream, above the 6.4 of the #A50829 it replaces. Was #A50829. */
    --accent:#8c1b1b;  /* son bordeaux : L'ACCENT UNIQUE, le même que dans le logo. 7,45 sur
                          le crème et 7,1 sur la bande grise : le seul des rouges étudiés qui
                          dépasse 7 sur tous les fonds clairs, utile quand les visiteurs ont
                          souvent plus de 60 ans. Seule couleur
                          d'action : liens, survols, intitulés, flèches, numéros d'étapes,
                          filets sous les titres, encadrement du slogan, barre du label.
                          Jamais sur un bouton : un bouton rouge est lu comme un signal de
                          danger, elle l'a admis elle-même. */
    --accent-light:#EDCFD6; /* son rouge éclairci, pour les bandes sombres et le bandeau photo
                          où le rouge plein passerait sous le seuil de contraste. */
    --accent-rose:#E694A8; /* 04/10: the same red, more saturated, for the footer headings.
                          --accent-light did not stand out there: 1.1:1 against the off-white
                          of the links beside it, « le rose pale ne se differencie pas du
                          blanc ». 6.2:1 on --deep. Keep it to --deep grounds: on the taupe it
                          drops to 3.1:1, below the threshold for small text. */
    /* 21/10: the client dropped the pink. --accent-light and --accent-rose are no
       longer used for text in this file: what was pink is now white, with the logo
       red below as a 3px rule (removed 22/10). Both tokens stay defined only while other stylesheets
       may still read them. */
    --logo-red:#8c1b1b; /* 22/10: the bordeaux, like --accent. Was #cc0935.
                          21/10: the logo's exact red. Decorative only on dark grounds
                          (1.25:1 on the taupe), never text there: the 3px rule (removed 22/10)s under
                          the footer headings, the dark-ground eyebrows and the signature. */
    --taupe:#5F564C;   /* marron taupe, demande a l'oral le 30/09 : « tu peux me le faire en
                          taupe et en blanc, on va voir ce que ca donne ». Essai sur les deux
                          bandes de l'accueil le 30/09, reconfirme ; depuis le 06/10, c'est la
                          bande partagee .band-taupe, qui remplace band-warm sur les autres pages.
                          Meme teinte que --tint et --deep, entre les deux en clarte : 7,2 de
                          contraste avec le blanc, ce qui tient largement AA sur une clientele
                          qui a souvent plus de 60 ans. */
    --deep:#2E2A26;    /* encre chaude : couleur des bandes sombres, à la place du bleu nuit.
                          Le bleu n'est plus un fond de section, il reste dans le logo,
                          les boutons, les filets et le focus. */
    --line:#D8CABF;    /* filet 1px, teinté rosé mais aussi visible qu'avant */
    --line-strong:#5F8296;   /* bordures de champs, redérivées du bleu du logo */

    --r:6px;           /* légèrement adouci : 2px donnait un registre sévère */
    /* mouvement */
    --dur-rise:420ms;
    --ease-out:cubic-bezier(.22,.61,.36,1);
    --stagger:60ms;
    --target:48px;
    /* Hauteur de la barre d'action fixe. La meme valeur dimensionne la barre et
       reserve sa place dans le flux : les deux ne peuvent plus diverger. */
    --mobar-h:64px;
    --measure:65ch;
    --wrap:1180px;

    /* type fluide */
    --step--1:clamp(.86rem,.83rem + .15vw,.95rem);
    --body:clamp(1.12rem,1.06rem + .3vw,1.2rem);   /* ~19px */
    --h3:clamp(1.3rem,1.2rem + .5vw,1.55rem);
    /* 27/09, « Laissez votre numero. Valerie vous rappelle : je trouve que c'est
       ecrit trop gros ». Ce n'est pas un gout, c'est une hierarchie a l'envers,
       et de notre fait : le 25/09 le plafond de .h2-strong est descendu de 3,3 a
       2,6rem, sous les 2,7rem du h2 courant. Les deux titres censes prendre « un
       cran de plus » se retrouvaient donc plus petits que les sept autres, et le
       bloc de rappel, qui est un h2 simple, etait le plus gros texte de la page
       apres le h1. Le plafond du rang courant repasse sous celui du rang fort. */
    /* 07/10, Valérie on the phone: the text sizes of the home page are right, every
       other page should match. The home redeclared its own --h2 (up to 2.7rem)
       while the rest of the site used the one above; it is now the only one, and
       accueil.css no longer redeclares the scale. --h1 comes down to what the home
       banner title actually measures: about 30 px on a phone (other pages showed
       44.5 px) and 62 px on a desktop (70 px). */
    --h2:clamp(1.9rem,1.5rem + 1.6vw,2.7rem);
    --h1:clamp(1.85rem,1.1rem + 3.6vw,3.9rem);
    --display:clamp(2.1rem,1.4rem + 3vw,3.4rem);

    /* 06/10: section rhythm cut by about a quarter, site-wide, in one go (« il y a
       trop d'espace », four times in one call; Lucas: « il faut que je réduise
       l'espace de partout sur le site »). Was clamp(4.5rem,3rem + 6vw,8rem): 128 px
       per side at 1440 px, so 256 px between two sections; 72 px per side on a
       phone. Now 96 px and 54 px. */
    /* 06/10, second cut, Lucas: « elle va encore me dire qu'il y en a trop sur toutes
       les pages ». Measured after the first cut: 190 to 220px of blank between two
       content blocks on the inner pages at 1 440px (96 + 96), 107 to 127 at 390,
       against 96 to 170 on the home page, whose bands are linked two by two. Her
       instruction is « what was corrected on the home page applies everywhere »:
       the inner pages come down to the home rhythm, 64 + 64 and 40 + 40. */
    /* 06/10, third cut, Lucas: « elle trouve qu'il y a trop de marge en haut et en
       bas entre les sections, applique ça sur tout le site ». 64 -> 48px a side at
       1 440px, 40 -> 32 at 390: about 96 and 64px between two blocks. */
    --sp:clamp(2rem,1.5rem + 1.8vw,3rem);   /* padding vertical de section */
    /* 07/10: the home page's tighter junction (accueil.css), now the top of every
       section. Same value as accueil.css, which still declares it. */
    --sp-joined:clamp(1.5rem,1rem + 1.6vw,2.25rem);
    --gut:clamp(1.25rem,.6rem + 2.4vw,2.4rem);
  }

/* 07/10, Valérie on her iPhone, three times: « Je crois en l'Amour », « Pourquoi
   passer par une agence matrimoniale aujourd'hui ? » and « Il n'y a pas de profil
   type » should be the same size as « Et si la rencontre commençait autrement ? ».
   On a phone the page title and the section titles therefore share the home
   banner title's own expression (accueil.css, .hero h1 under 900 px): about 29.6 px
   at 390 px. --h2 is capped at its desktop ceiling so a tablet never shows section
   titles larger than a desktop does. The deliberately smaller titles (.s-head-tem,
   .cv-intro) keep their own size. */
@media (max-width:900px){
  :root{
    /* 08/10, « tous les titres sont trop gros » (example: « Un accompagnement de
       proximité »), then « sur téléphone »: the phone scale comes down by a fifth,
       the desktop keeps its sizes. Page and section titles stay equal (her 07/10
       request) and the home banner title reads this token: 29.6 -> 23.6 px at 390 px. */
    --h1:calc(.8 * min(clamp(1.55rem,.58rem + 5.2vw,3.05rem),7.2vh));
    --h2:calc(.8 * min(clamp(1.55rem,.58rem + 5.2vw,3.05rem),7.2vh,2.7rem));
  }
}

/* sur les bandes sombres, le focus bleu serait invisible : on repasse sur une couleur claire.
   21/10: white instead of the pale pink the client dropped, 7.19:1 on the taupe. */
  /* 22/10: the footer left the taupe, its focus is the default blue again. */
  .confid a:focus-visible{
    outline-color:#fff}

.has-bg .btn-solid:active{background:var(--paper);border-color:var(--paper);color:var(--ink)}

.has-bg .btn-line:active{background:#fff;color:var(--ink);border-color:#fff}

.has-bg .arrow::after,.confid .arrow::after{color:#fff}

nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* ============ HERO ============ */
  /* 06/10: about a fifth less, with the section rhythm. Was 96/72 px at 1440 and
     56/48 on a phone. The photo banners keep their floor height below. */
  .hero{padding-block:clamp(2.75rem,1.6rem + 4vw,4.75rem) clamp(2.4rem,1.6rem + 2.4vw,3.5rem)}

.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}

.hero h1{margin-bottom:1.5rem}

.hero .lead{margin-bottom:2.2rem}

/* 12/10: her banner texts on the segment pages now run to three paragraphs. The
   space kept for the buttons fell between each of them, 35 px, twice the gap of
   the paragraphs further down the page. It now only follows the last one. */
.hero .lead:has(+ .lead){margin-bottom:0}

.hero-cta{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:center}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size.
   The facts strip of a hero was 1rem (16 px). */
.hero-note{grid-column:1/-1;margin-top:clamp(2.5rem,1rem + 4vw,4rem);padding-top:1.6rem;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;align-items:baseline;color:var(--ink-2);font-size:var(--body)}

/* No margin after the bold part: the templates write a real space, or none before
   punctuation. The mockup's margin-right pushed "Tram Chavant" away from its comma. */
.hero-note b{font-family:"Source Serif 4",Georgia,serif;font-weight:600;color:var(--ink);font-size:1.15rem}

/* ============ HERO EN BANDEAU PHOTO ============ */
  /* Voile NEUTRE (gris sombre, pas bleu) : il assombrit sans teinter, la photo
     garde ses couleurs. Dense sous le texte, nul du côté du sujet. */
  /* 13/10, card 227: measured at the worst point on four window sizes, the long
     standfirsts ran past the dense part of the veil on large screens (Haute-Savoie
     3.6), and the small pink eyebrows (white since 21/10) fell under 4.5 on phones. The dense part now
     reaches half the width, and the phone veil is a step darker. */
  .has-bg{
    background-color:#16191C;
    background-image:linear-gradient(95deg,
      rgba(12,14,16,.68) 0%,rgba(12,14,16,.65) 52%,
      rgba(12,14,16,.4) 72%,rgba(12,14,16,.12) 90%,rgba(12,14,16,0) 100%),
      var(--hero-img,linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)));
    background-position:center,var(--hero-pos,center 50%);
    background-size:cover,cover;
    background-repeat:no-repeat,no-repeat}

  /* 06/10: the photo banners had no floor, so their height followed their text:
     374px on the ONCRH page (a title and one line) against 504px on « Comment ça
     marche » (eyebrow, three lines, buttons). Lucas asked for one height. The floor
     matches « Comment ça marche »; longer banners still grow, and the text is
     centred so the extra height splits above and below it. */
  .has-bg.hero,.has-bg.contact-hero{min-height:clamp(26rem,20rem + 15vw,32rem);display:flex;flex-direction:column;justify-content:center}
  .has-bg.hero > .wrap,.has-bg.contact-hero > .wrap{width:100%}
  /* 06/10, control pass: the contact banner has its own class and had stayed at
     369px. Same floor as the others. */

/* 21/10: white, the client dropped the pink; the logo red rule is set below .confid. */
.has-bg .eyebrow{color:#fff}

.has-bg h1{color:#fff}

.has-bg .lead{color:#E3EBF2}

.has-bg .lead strong{color:#fff}

/* commandes inversées : le bleu de la charte disparaîtrait sur la photo */
  .has-bg .btn-solid{background:#fff;color:var(--ink);border-color:#fff}

/* Un bouton clair pose sur une photo sombre ne peut pas s'assombrir au survol :
     sa silhouette tombait a 1,55 contre le fond, la moitie du minimum de 3. Il
     reste clair, passe au creme et prend un halo ; la silhouette vaut 14,17 et le
     libelle 9,00, mesures sur les pixels rendus. */
  @media (hover:hover){.has-bg .btn-solid:hover{background:var(--paper);border-color:var(--paper);color:var(--ink);
    box-shadow:0 0 0 3px rgba(255,255,255,.45)}}

.has-bg .btn-line{color:#fff;border-color:rgba(255,255,255,.65)}

@media (hover:hover){.has-bg .btn-line:hover{background:#fff;color:var(--ink);border-color:#fff}}

.has-bg .link{color:#fff;border-bottom-color:rgba(255,255,255,.55)}

@media (hover:hover){.has-bg .link:hover{color:#fff;border-bottom-color:#fff}}

.has-bg a:focus-visible,.has-bg button:focus-visible,.has-bg input:focus-visible{outline-color:#fff}

@media (max-width:900px){
    /* le texte prend toute la largeur : le voile devient uniforme */
    .has-bg{background-image:linear-gradient(180deg,rgba(12,14,16,.7),rgba(12,14,16,.64)),var(--hero-img,linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)));
      background-position:center,var(--hero-pos,center 50%)}
  }

/* 22/10, Lucas: « pour toutes les pages qui ont un bandeau, il faut mettre juste
   le titre sur la photo et en dessous le texte qui l'accompagne ». The rule first
   tried on Divorce (13/10, segment.css until today), now shared by every banner:
   the eyebrow and the title sit at the bottom of the photo, on a veil that rises
   from below, so the photo keeps its light; the standfirst, the buttons and any
   search field move to .hero-intro, a plain section right under it.
   Usage: add .hero-title-only to the .has-bg section, put what followed the h1
   in <section class="hero-intro"><div class="wrap">…</div></section>. */
/* 23/10, evening, Lucas: « sur toutes les pages où il y a un bandeau, on met le
   titre en bas de la photo pour ne pas mettre un voile noir en plein milieu ».
   Valérie on the phone the same day: « légèrement vers le bas, pas collé tout en
   bas », « plus lumineux ». The middle of the morning (title centred, veil dense
   across the middle) is undone: the title sits low again, with the bottom padding
   raised on 22/10, and the veil only rises from the bottom, so the upper part of
   the photo keeps all its light. */
.has-bg.hero-title-only{justify-content:flex-end;
  background-image:linear-gradient(0deg,rgba(12,14,16,.76) 0%,rgba(12,14,16,.64) 38%,rgba(12,14,16,.22) 58%,rgba(12,14,16,0) 76%),
    var(--hero-img,linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)));
  /* 22/10, Valérie on /label-oncrh/: « peux-tu remonter légèrement la phrase ». */
  padding-bottom:clamp(2.6rem,1.6rem + 3.2vw,4.6rem)}
@media (max-width:900px){
  .has-bg.hero-title-only{background-image:linear-gradient(0deg,rgba(12,14,16,.78) 0%,rgba(12,14,16,.66) 42%,rgba(12,14,16,.25) 64%,rgba(12,14,16,0) 82%),
    var(--hero-img,linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)))}
}
.hero-title-only h1{margin-bottom:0}
/* 27/10, Valérie on /nos-agences/: « on ne voit pas bien les immeubles ». The town
   fills the lower half of this photo, right under the rising veil. Here the veil
   is lighter and stops lower, and the title keeps its contrast with a shadow, as
   on the agencies' panoramas (.hero-pano, office.css). */
.post-type-archive-agency .has-bg.hero-title-only{
  background-image:linear-gradient(0deg,rgba(12,14,16,.5) 0%,rgba(12,14,16,.28) 26%,rgba(12,14,16,0) 46%),
    var(--hero-img,linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)))}
.post-type-archive-agency .has-bg.hero-title-only :is(h1,.eyebrow){
  text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 12px rgba(0,0,0,.55),0 0 28px rgba(0,0,0,.4)}
/* 23/10, Lucas on « Pour qui »: « pourquoi le titre est en plusieurs lignes ? ».
   Several templates still cap the banner's text block with an inline max-width
   (44ch to 47ch, 528 to 564 px), set when the standfirst sat on the photo too.
   With the title alone on the photo it broke on three lines where /label-oncrh/
   uses the full width. Every banner title now takes the width of the page; the
   !important is the only way past those inline styles. */
.has-bg.hero-title-only .s-head{max-width:none!important}
.hero-intro{padding-block:clamp(2rem,1.4rem + 2vw,3rem) 0}
.hero-intro .wrap > :first-child{margin-top:0}
.hero-intro .lead{max-width:62ch;margin-bottom:0}
.hero-intro .lead + .lead{margin-top:1rem}
.hero-intro .hero-cta{margin-top:1.8rem}

/* ============ MANIFESTE ============ */
  /* Le slogan est sa marque, et son logo porte le bordeaux : deux filets francs
     l'encadrent, là où un filet gris ne disait rien. */
  .manifesto{border-block:3px solid var(--accent);background:var(--surface)}

.manifesto p{font-family:"Source Serif 4",Georgia,serif;font-weight:400;font-size:var(--display);line-height:1.22;
    letter-spacing:-.01em;color:var(--ink);max-width:none;text-wrap:pretty}

.manifesto .m-sub{font-family:Figtree;font-size:var(--body);color:var(--ink-2);max-width:52ch;margin-top:1.6rem}

/* Le filet bordeaux sous les titres est retiré le 24/09, à sa demande, formulée
     trois fois dans le même mail : sous « Ils témoignent de leur bonheur », sous
     « Pourquoi passer par une agence matrimoniale aujourd'hui ? » et sous « Ma
     façon de vous accompagner ». Trois occurrences nommées sur les sept que
     portait l'accueil : ce n'est pas une retouche locale, c'est le motif qu'elle
     refuse, donc il part d'un coup plutôt que section par section.

     Le filet tenait aussi un rôle typographique, séparer le titre du texte. Sa
     hauteur et sa marge sont rendues au titre sous forme de margin-bottom, sinon
     les paragraphes remontent sur les h2 partout dans le site. */
  main h2{margin-bottom:.9rem}

.band{background:var(--band);
  /* On the darker sand, the two secondary text colours and the field borders lose
     their contrast (4.34, 3.87 and 2.64). They are darkened here, inside the band
     only: 4.61, 4.62 and 3.02. The hairline goes darker too, or the cards' edges
     would melt into the band. */
  --ink-2:#375C71;--muted:#3F5B6C;--line-strong:#58788B;--line:#C2B49F}

.band-warm{background:var(--warm)}

/* 10/10, her email on the ONCRH part of the home page: « remplacer le fond taupe par
   le blanc comme le bandeau en dessous », the white of the callback block. Only the
   founder section leaves the taupe; every other taupe band stays. */
.band-white{background:var(--surface)}

/* ============ BANDE TAUPE ============ */
/* 06/10: the taupe she confirmed on the home page (30/09, then again once her
   screen was set right) becomes a shared band, in place of the pink-beige
   band-warm on every other page: « tout ce qu'on a corrigé sur la home page, on
   l'applique sur les autres pages, les espacements, les couleurs ». Templates
   now say band-taupe instead of band-warm.

   The class stands on its own and does not need band-warm. The home page still
   writes « band-warm band-taupe » and keeps its own, more specific overrides in
   pages/accueil.css (.band-warm.band-taupe ...), which win over these: both
   spellings work. Only what sets a dark colour of its own is overridden here;
   plain paragraphs inherit the band's #EFE9DF (5.95:1 on the taupe). */
.band-taupe{background:var(--taupe);color:#EFE9DF;--line:rgba(255,255,255,.24)}

.band-taupe h2,
.band-taupe h3,
.band-taupe b,
.band-taupe strong{color:#fff}

/* 06/10, Lucas's rule for every taupe band: the eyebrow takes the same pink as the
   name in the founder band, --accent-rose, the footer headings' pink. Decided
   knowingly: on the taupe it reaches 3.14:1, enough for large text (3:1) but under
   the 4.5:1 AA asks of the 14-15 px caps of an eyebrow. She could not tell the
   previous --accent-light from white; the eyebrow is a label, never the only
   carrier of information, and the title under it stays white. */
/* 21/10: the client dropped the pink. The eyebrow and the signature go white
   (7.19:1 on the taupe) and take the logo red as a 3px rule (removed 22/10) under them, see the
   grouped rule after .confid .eyebrow. */
.band-taupe .eyebrow,
.band-taupe .sign{color:#fff}

/* The first paragraph reads at the band's full colour and those after it drop
   to a secondary one, the same gradient the light bands draw with --ink and
   --ink-2. #E3DBD0 and not the #D8CFC1 of the --deep bands: on the lighter taupe
   the latter only reaches 4.66. #E3DBD0 gives 5.24. */
.band-taupe .lead{color:inherit}

.band-taupe .lead ~ .measure,
.band-taupe .measure ~ .measure,
.band-taupe .reassure{color:#E3DBD0}

.band-taupe .link{color:#fff;border-bottom-color:rgba(255,255,255,.55)}

@media (hover:hover){.band-taupe .link:hover{color:#fff;border-bottom-color:#fff}}

.band-taupe .arrow::after{color:#fff}

.band-taupe a:focus-visible,.band-taupe button:focus-visible{outline-color:#fff}

/* 12/10: « Les autres parcours » on the segment pages goes taupe, so the list
   of situations takes the home page's taupe treatment (pages/accueil.css). */
.band-taupe .s-title{color:#fff}

.band-taupe .s-desc{color:#E3DBD0}

.band-taupe .seg .go{color:#fff}

@media (hover:hover){
  .band-taupe .seg a:hover{background:rgba(255,255,255,.1)}

  .band-taupe .seg a:hover .s-title{color:#fff}}

/* 23/10, Valérie, on the phone: the red row of 22/10 is « un peu violent ». The
   row goes back to the taupe; hover, press and keyboard focus light it up by 10 %
   of white, as before 22/10. A red dot per row was tried the same day, then
   dropped by Lucas: only the red hover had to go. */
.band-taupe .seg a{transition:background-color .15s}
.band-taupe .seg a:active,
.band-taupe .seg a:focus-visible{background:rgba(255,255,255,.1)}

/* Light tiles set on the band (towns of an office page) keep their dark text:
   they are cards on the taupe, not text on it. */
.band-taupe .city-list div{color:var(--ink)}

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

.quote{padding-top:1.8rem;border-top:2px solid var(--ink)}

.quote cite{display:block;margin-top:1.3rem;font-style:normal;color:var(--muted);font-size:1rem}

/* ============ CONFIDENTIALITÉ (bande pétrole) ============ */
  /* 21/10, Valérie: no more dark brown anywhere, the band takes the taupe. Its
     #EFE9DF text keeps 5.95:1 and its --accent-light eyebrow 4.96.
     21/10, later: the client dropped the pink. The eyebrow goes white (7.19:1)
     with the logo red as a 3px rule (removed 22/10) under it. */
  .confid{background:var(--taupe);color:#EFE9DF}

.confid .eyebrow{color:#fff}

/* 21/10, a 3px logo-red rule was added under every label that used to be pink on
   a dark ground (footer headings, banner and taupe band eyebrows, the signature).
   22/10, removed: she refused the red rule under titles on 24/09, « partout »
   (see the note under MANIFESTE), and Lucas checked it again on the board. The
   labels stay white, with no rule. */

.confid h2{color:#fff;max-width:20ch}

/* 07/10, « partout pareil »: this rule also caught the band's eyebrow, which came
   out at 18.4 px with a margin on top, against 13.9 to 15.2 px for every other
   eyebrow of the site. The paragraph itself reads at the body size, as the text of
   the home page's bands does. */
.confid p:not(.eyebrow){color:#E3DBD0;max-width:56ch;margin-top:1.2rem;font-size:var(--body)}

/* Temoignage colle au bouton (T7) */
  .cta-quote{margin-top:1.4rem;padding-left:1rem;border-left:2px solid var(--accent)}

/* ============ RESPONSIVE ============ */
  /* L'en-tete complet (logo, six entrees de navigation, numero, bouton) demande
     1 182 px pour tenir. En dessous il debordait : a 960 px la page mesurait
     1 138 px de large et se faisait defiler horizontalement. Le seuil de bascule
     passe donc de 900 a 1 180 px, la ou l'en-tete cesse reellement de tenir, et
     la barre d'action fixe reprend les deux chemins de contact a l'identique.
     Elle ne change plus au meme endroit que la typographie du bandeau. */
  @media (max-width:1180px){
    nav.main,.head-cta .tel,.head-cta .btn{display:none}
    .menu-btn{display:inline-flex}
    nav.main.open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
      background:var(--paper);border-bottom:1px solid var(--line);padding:.5rem var(--gut) 1rem}
    /* Taller than a landscape phone once Agences is open: the menu scrolls on
       its own, the page behind it does not, and the call bar steps aside. */
    nav.main.open{max-height:calc(100dvh - 77px);overflow-y:auto;overscroll-behavior:contain}
    html:has(nav.main.open){overflow:hidden}
    body:has(nav.main.open) .mobar{display:none}
    nav.main.open a{padding:1rem 0;border-bottom:1px solid var(--line)}
    nav.main.open .navsub{flex-direction:column}
    nav.main.open .navsub-btn{width:100%;justify-content:space-between;padding:1rem 0;
      border-bottom:1px solid var(--line)}
    nav.main.open .navsub-list{position:static;min-width:0;background:none;border:0;
      box-shadow:none;padding:0 0 .4rem}
    nav.main.open .navsub-list a{padding:.85rem 0 .85rem 1.2rem;border-bottom:1px solid var(--line)}
    .mobar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
      min-height:var(--mobar-h);border-top:1px solid var(--line-strong)}
    /* 07/10, on her iPhone: « Echangeons au06 50 52 99 51 » and « rappelésans
       engagement ». The two-line layout below only lived in accueil.css, so every
       other page ran the label and the number together on one line. It belongs to
       the bar, wherever the bar is. */
    .mobar a{flex:1;text-align:center;padding:.55rem 1rem;min-height:var(--target);
      display:flex;flex-direction:column;justify-content:center;line-height:1.25;
      font-weight:600;text-decoration:none;background:var(--paper);color:var(--ink)}
    .mobar a i{font-style:normal;font-size:.9rem;font-weight:500;color:var(--muted)}
    .mobar a b{font-size:1.06rem;font-weight:700;white-space:nowrap}
    .mobar a.primary{background:var(--ink);color:var(--paper)}
    .mobar a.primary i{color:#D7E2E9}
    body{padding-bottom:var(--mobar-h)}
  }

/* Sous 640px, le header ne peut pas tenir le logo, le numero, le bouton de
     rappel ET le bouton Menu : l'ensemble deborde et fait defiler toute la page
     horizontalement. La barre d'action fixe en bas d'ecran propose deja
     "Appeler" et "Etre rappele", les deux sont donc redondants ici. */
  @media (max-width:560px){
    .cities{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
    .hero-note,.tstats{gap:.6rem 1.6rem}
  }

@media (max-width:400px){
    /* A cette largeur, un mot comme « accompagnement » mesure 302 px pour 280 px de
       colonne : le titre debordait de 22 px et faisait defiler la page. Seul le
       depassement est traite. La cesure automatique, elle, a ete retiree le 31/08 :
       elle coupait 25 titres qui ne debordaient pas, « Notre bureau gre-noblois »
       entre autres, et un tiret dans un titre de bandeau se lit comme un defaut de
       finition. Sans elle ces titres prennent une ligne de plus, mesure faite. */
    h1,h2,h3{overflow-wrap:break-word}
  }

/* ============ QUI ACCOMPAGNONS-NOUS : blocs éditoriaux ============ */
  .segments{display:grid;gap:clamp(2rem,1rem + 3vw,3.2rem)}

.segblock{display:grid;grid-template-columns:5fr 7fr;gap:clamp(1.5rem,1rem + 3vw,3.5rem);align-items:center;
    border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:clamp(1.5rem,1rem + 2vw,2.6rem)}

.segblock.flip .segblock-media{order:2}

.segblock-media{aspect-ratio:4/5;border:1px solid var(--line-strong);border-radius:var(--r);
    background:#E6E2D8 center/cover no-repeat}

/* 07/10, « partout pareil »: these are the same situations the home page lists
   under « Pour qui ? » (.s-title), and they take the same size. Was 24 to 33.6 px. */
.segblock h3{font-size:clamp(1.4rem,1.1rem + 1vw,2rem);font-weight:500;letter-spacing:-.01em;margin-bottom:.5rem}

.segblock .seg-kicker{font-family:"Source Serif 4",Georgia,serif;font-style:italic;font-size:1.25rem;color:var(--accent);margin-bottom:1rem;max-width:none}

.segblock p{color:var(--ink-2);max-width:48ch}

.segblock .link{margin-top:1.4rem}

/* 06/10, control pass: « Une question, sans rendez-vous ni téléphone » on the five
   /rencontres-* pages sat 175px under the previous block at 1 440px: its section
   added 80px of its own on top of --sp, and the card a 2.2rem margin. The section
   now follows --sp, and the card has no margin when it opens the wrap. */
section > .wrap > .micro:first-child{margin-top:0}

/* 06/10, control pass, « Pour qui »: « pourquoi Comment nous accompagnons pour
   Retraité et Après un divorce, et pas les autres ? » [23:20]. Every block now has
   its link, and the whole block answers the click, not only the small text link:
   the link is stretched over its block. */
.segblock{position:relative}
.segblock .segblock-link::before{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r)}
@media (hover:hover){.segblock:has(.segblock-link):hover{border-color:var(--line-strong)}}
/* 23/10, Lucas: « si je clique sur la card d'un parcours je sois redirigé,
   aujourd'hui je dois cliquer spécifiquement sur le lien ». The whole card already
   took the click, but nothing said so: on hover only its border darkened, a step
   nobody sees. The card now answers as a whole: a light shadow, the title in the
   logo red, the link underlined. z-index keeps the stretched
   link above any child that gets a position later. */
.segblock:has(.segblock-link){transition:box-shadow .18s ease,border-color .18s ease}
.segblock:has(.segblock-link) h3{transition:color .18s ease}
@media (hover:hover){
  .segblock:has(.segblock-link):hover{box-shadow:0 6px 22px rgba(12,14,16,.10)}
  .segblock:has(.segblock-link):hover h3{color:var(--logo-red)}
  .segblock:has(.segblock-link):hover .segblock-link{border-bottom-color:currentColor}}
.segblock:has(.segblock-link:focus-visible){outline:3px solid var(--brand);outline-offset:3px}
.segblock .segblock-link:focus-visible{outline:none}
/* The actual bug. .link:active nudges every link down 1px with a transform, and
   a transform makes the link the containing block of its own ::before: on press
   the card-wide layer shrank to the size of the link, the release landed on the
   photo or the text, and the browser dropped the click (mousedown and mouseup on
   two different elements). A pressed card link keeps still. */
.segblock .segblock-link:active{transform:none}

/* 08/10, « les titres sont trop gros sur téléphone »: the smaller titles come down
   with the phone scale (card titles 22.4 -> 19.2 px, callback and question titles
   23.2 -> 20.8 px at 390 px); a desktop keeps the sizes above. */
@media (max-width:900px){
  .s-title,.segblock h3{font-size:clamp(1.2rem,.95rem + .85vw,1.7rem)}
  .cv-intro h2,.qa h2,.visio-box h2{font-size:clamp(1.3rem,1.08rem + .9vw,1.7rem)}
}

/* Cookie banner (parts/consent-banner.php, inc/consent.php). Pinned to the bottom,
   above the phone bar it covers until the visitor answers: the bar's two contact
   paths come back the moment the banner goes. Not a dialog, nothing behind it is
   dimmed or locked, and it never takes more than two thirds of a phone screen.
   Its text is --ink-2 on --surface, the pair the forms already use (above 6:1). */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:0;
  background:var(--surface);border-top:1px solid var(--line-strong);
  box-shadow:0 -6px 24px rgba(46,42,38,.14);max-height:66vh;overflow-y:auto}
.cookies[hidden],.cookies [hidden],[data-consent-open-wrap][hidden]{display:none}
.cookies-in{max-width:var(--wrap);margin-inline:auto;padding:1.4rem var(--gut) 1.5rem}
.cookies-title{font-size:var(--h3);margin-bottom:.5rem}
.cookies-title:focus{outline:none}
.cookies-text{max-width:none;color:var(--ink-2)}
.cookies-text a{color:var(--ink);font-weight:600}
.cookies-details{display:grid;gap:.9rem;margin:1rem 0 0;padding:0;border:0;min-width:0}
.cookies-legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cookies-purpose{display:flex;gap:.8rem;align-items:flex-start;cursor:pointer;color:var(--ink-2)}
.cookies-purpose input{flex:none;width:24px;height:24px;margin-top:.2rem;accent-color:var(--ink)}
.cookies-purpose strong{display:block;color:var(--ink)}
.cookies-actions{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;margin-top:1.1rem}
.cookies-more{min-height:var(--target);padding:0 .4rem;background:none;border:0;cursor:pointer;
  font:inherit;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
@media (hover:hover){.cookies-more:hover{color:var(--accent)}}
@media (max-width:560px){
  .cookies-actions .btn{flex:1 1 0;padding-inline:.8rem}
}

/* The footer entry that reopens it: a button, drawn as the legal links beside it. */
.f-cookies{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:#fff}
@media (hover:hover){.f-cookies:hover{text-decoration:underline}}
.f-cookies:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:2px}

/* 27/10, mobile review of 24/10, points 6 and 7 (card 430). */

/* 6. A phone held sideways is 390px high: the sticky header and the call bar took
   141px of it, and the banner floor (26rem) was taller than the screen, so the
   title sat under the bar. The header scrolls away, and the banner fits between
   it (about 5rem) and the bar, so a title set at its foot is read on arrival. */
@media (orientation:landscape) and (max-height:500px){
  header.site{position:static}
  .has-bg.hero,.has-bg.contact-hero{min-height:calc(100svh - var(--mobar-h) - 5rem)}
}

/* 7. Under 440px the two halves were equal and the call-back label wrapped onto
   three lines: an 82px bar for a 64px reserve. The number keeps its line, the
   label gets the wider half. */
@media (max-width:440px){
  .mobar a{padding:.45rem .6rem}
  .mobar a:first-child{flex:0 0 44%}
  .mobar a.primary span{font-size:1rem;line-height:1.2}
}