/* Specific to the accueil 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. */
/* L'en-tête est collant : sans cette marge, un lien d'ancre place la cible sous
la barre et on croit que le clic n'a rien fait. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
/* ============ 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;
--tint:#E6E2D8; /* gris taupe très clair : encadrés et vignettes, plus jamais un fond de
section. Le bleu très clair d'avant a été refusé deux fois en
rendez-vous (« le fond bleu ne va pas »). */
--warm:#E6D8C8; /* beige rosé, assombri le 28/08 : « une ambiance douce, humaine et
rassurante, sans tomber dans le rose agence matrimoniale » (ses notes
du 26/08). L'ancienne valeur #F2E7E0 était à 1,013 de rapport avec le
crème : quatre fonds étaient déclarés et un seul se voyait. À 1,15,
la bande devient une bande. Tout ce qui se pose dessus reste au-dessus
de AA, --ink à 7,9, --ink-2 à 4,8, l'accent à 5,6. */
--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. */
/* 21/10: the client dropped the pink and the dark brown. --accent-light and --deep
are kept declared but no longer colour any text, rule or ground on this page:
pink text is now white, --deep is replaced by --taupe. */
--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;
/* Hauteur de l'en-tete colle : 76 px de barre plus son filet. Elle sert a borner
le bandeau sur les fenetres basses, pour que sa derniere ligne ne se glisse pas
sous la barre d'action. */
--header-h:77px;
--measure:65ch;
--wrap:1180px;
/* type fluide */
/* 07/10: the type scale is no longer redeclared here. The home's own --h2 was
the one she approved, so it moved to base.css for every page. */
/* 06/10: --sp is no longer redeclared here. It overrode the site-wide value of
base.css, so the 25 % reduction asked for « de partout sur le site » (card 367)
stopped at the home page. The chapter junction now follows base.css. */
/* Deuxième valeur de jonction, 40 à 64 px. Elle sert à lier deux sections d'un
même chapitre ; --sp reste pour passer d'un chapitre au suivant. Neuf jonctions
identiques à 256 px ne regroupaient rien : rien ne disait que « pour qui » et
« la méthode » racontent la même chose, ni où finissait un chapitre. La page
compte maintenant trois valeurs de jonction et trois chapitres :
qui je suis (bandeau, Valérie, vos questions), la preuve (ils racontent, pour
qui, la méthode), l'action (être rappelé, nos agences). */
--sp-joined:clamp(1.5rem,1rem + 1.6vw,2.25rem); /* 06/10: -25 % then -25 % again, card 367 */
--gut:clamp(1.25rem,.6rem + 2.4vw,2.4rem);
}
/* Les deux moitiés d'une même jonction resserrée : posées de part et d'autre,
elles ramènent la jonction de 256 px à 128 px. Elles marquent l'intérieur d'un
chapitre ; les 256 px restants en marquent les frontières. */
.joined-below{padding-bottom:var(--sp-joined)}
.joined-above{padding-top:var(--sp-joined)}
.lead b{color:var(--ink);font-weight:600}
/* Le pied reste une bande sombre, la bande des questions non : depuis le 28/09
elle est claire, son focus bleu est donc redevenu visible et elle sort de
cette regle. */
/* 22/10: the footer is light again, the default blue focus shows on it. */
/* Les quatre regles « .hero .lead » qui vivaient ici n'ont plus aucun element dans
le document depuis le retrait de l'accroche du bandeau, le 30/08 : code mort
retire. La regle « .lead » de base reste, elle sert encore au bloc de rappel. */
/* ============ SLOGAN ============ */
/* Les trois règles .manifesto qui vivaient ici n'avaient plus aucun élément dans
le document depuis que le slogan est remonté dans le bandeau : code mort retiré. */
/* 30/08 : le slogan tient sur UNE ligne dans le bandeau. C'est une phrase en deux
temps, pas deux propositions empilees : le
qui portait la cesure est retire
et la virgule la porte, aucun de ses mots ne change. Sur les autres pages, ou il
vit sur fond clair et sans butee de voile, il garde le repli naturel ; partout
« balance » repartit le repli au lieu de laisser un mot seul. */
/* Le slogan est une signature de marque, pas un argument de section : elle le
dit d'un seul souffle avec son nom ("Cabinet Valerie Perinel, plus serieux
que..."). Il se lit donc des l'arrivee, au-dessus du titre. */
/* Elle dit de son slogan "c'est ma marque, et il est genial" : il lui faut du
poids. Assez present pour se lire en premier, assez sobre pour ne pas
concurrencer le titre. Le filet reprend la couleur de marque. */
.baseline{font-family:"Source Serif 4",Georgia,serif;
font-size:clamp(1.32rem,1.1rem + .9vw,1.85rem);line-height:1.3;font-weight:500;
color:var(--accent);margin-bottom:1.6rem;max-width:none;text-wrap:balance;
padding-left:1.1rem;border-left:3px solid var(--accent)}
.slogan{max-width:none;text-wrap:balance}
/* Trois rangs de titre au lieu d'un seul. Le bandeau porte le h1 ; « Ils racontent »
et « Laissez votre numéro » sont les deux moments qui décident, ils prennent un
cran de plus ; les autres restent au rang courant. Neuf h2 de taille rigoureusement
identique, c'était une page qui énumère au lieu de hiérarchiser. */
/* 31/08 : son plancher de 2,2rem en faisait le plus gros texte de la page sous
480 px, au-dessus du titre du bandeau. Valeur inchangee a partir de 1 200 px, ou
il vaut toujours 52,8 px. */
/* 25/09, « c'est écrit trop gros » : le plafond descend de 3,3rem à 2,6rem et la
pente s'aplatit. Le plancher mobile ne bouge pas, il était déjà à sa taille. */
.h2-strong{font-size:clamp(1.75rem,1.25rem + 2vw,2.6rem)}
/* 06/10, « enlever le trait fin » above « Ils témoignent de leur bonheur », on the
iPhone and on the Mac. The 04/10 rule that opened the chapter is gone, and so is
the padding that held it away from the title: that padding was most of the gap
she wants tightened under the banner. The rule closing the quotes (.tstats) stays. */
/* 04/10, « c'est un peu trop gros au niveau des caractères ». Dropping h2-strong was
not enough: the plain h2 rank is 43 px at desktop width, larger than the 41.6 px
she was looking at. An explicit size, about a fifth smaller than what she saw. */
.s-head-tem{max-width:none}
.s-head-tem h2{font-size:clamp(1.6rem,1.25rem + 1.2vw,2.15rem);max-width:30ch}
/* 07/10: the callback block sizes moved to base.css, for every page. */
.joined-above.joined-half{padding-top:calc(var(--sp-joined) / 2)}
/* 04/10, « Ils ont accepté de partager leur expérience : en gras ». */
.tstats-strong{font-weight:700;color:var(--ink)}
/* 04/10: the link's own underline sat a few pixels above the red rule that opens
the YouTube block, two lines stacked. The underline goes, the bold weight and
the red arrow still say it is a link, and hovering brings the line back. */
.tstats-link{border-bottom-color:transparent}
/* 10/10, her email: « remplacer la couleur du fond de ce bandeau comme le blanc qui
est au dessous », the white being the callback block (.convert, --surface). The
line becomes a full-width strip of that white: the shadow paints it out to both
edges and the clip keeps it from bleeding above or below. The rule it carried
goes, the change of background now does that job. */
.tstats{background:var(--surface);border-top:0;padding-block:1.6rem;
box-shadow:0 0 0 100vmax var(--surface);clip-path:inset(0 -100vmax)}
/* Le filet part avec celui de base.css le 24/09, à sa demande.
Ce commentaire disait « réservé à deux, il redevient un repère », mais la
règle `main h2::after` de base.css n'avait jamais été annulée ici : les sept
titres de l'accueil le portaient, et celui-ci ne faisait que le repeindre
à l'identique sur deux d'entre eux. L'intention n'avait donc jamais pris
effet, et c'est bien le filet répété qu'elle a vu. */
/* Deux fonds clairs, pas quatre. Le crème et le beige se répondent d'une section
à l'autre ; --line s'assombrit sur la bande pour que les filets de liste
restent visibles sur ce fond plus dense. */
.band-warm{background:var(--warm);--line:#C9B49D}
/* ============ GRILLE DES VILLES, PROPRE A L'ACCUEIL ============ */
/* 30/09 : « il y a ce grand trait, ce grand blanc, sous Voiron-Bourgoin-Jallieu », puis
« tu peux centrer Savoie, Haute-Savoie ».
L'accueil est le SEUL endroit du site ou la grille a une ligne incomplete : les pages
parcours, /nos-agences/ et l'archive calculent --cities-cols sur le nombre reel de
villes et tombent toujours juste. Ici il y a six tuiles pour quatre colonnes, et les
deux cellules restantes montraient le fond --line sur toute leur surface. Aucune valeur
de justify-* ne l'aurait supprime : une cellule vide de grille occupe sa place.
Le quadrillage passe donc du CONTENEUR aux TUILES, bordure par tuile et marges negatives
qui fondent les bordures voisines en une seule. Le dessin est identique, mais une ligne
incomplete ne laisse plus rien derriere elle, et justify-content peut centrer.
CES DEUX REGLES RESTENT ICI. Posees dans base.css, elles s'ajoutaient au quadrillage des
autres pages au lieu de le remplacer, puisque families/segment.css et pages/nos-agences.css
redefinissent .cities sans toucher a .city : les tuiles portaient alors une bordure ET une
gouttiere, d'ou des traits d'epaisseur inegale. Defaut signale le 30/09. */
.cities{display:flex;flex-wrap:wrap;justify-content:center;gap:0;background:transparent;border:0}
.city{flex:0 1 25%;min-width:190px;border:1px solid var(--line);margin:0 -1px -1px 0}
/* ============ ESSAI TAUPE (30/09) ============ */
/* « Tu peux me le faire en taupe et en blanc, la, on va voir ce que ca donne. »
C'est un ESSAI, demande deux fois dans la meme journee, et rien d'autre : la
classe band-taupe se retire des deux sections et la page revient au beige.
Voir pilotage/19-RETOURS-VALERIE-2026-09-30.md.
Ce qu'il faut savoir avant de trancher : le « c'est assez rose » du premier appel
a ete dit sur un Mac dont elle a decouvert 40 minutes plus tard que la luminosite
etait au minimum (« je voyais rien »). Le taupe, lui, elle l'a reconfirme APRES
avoir corrige son ecran, ce qui est la seule raison de le poser ici.
Le taupe ne remplace pas --warm dans la palette : band-warm sert aussi les pages
segment, pourquoi-agence et les villes, qu'elle n'a pas regardees.
10/10 : la fondatrice (bloc ONCRH) quitte le taupe pour le blanc, a sa demande.
Les regles .band-warm.band-taupe qui la visent (signature, distinction, photo)
restent sans effet tant qu'elle n'y revient pas. */
.band-warm.band-taupe{background:var(--taupe);color:#EFE9DF;--line:rgba(255,255,255,.24)}
.band-warm.band-taupe h2,
.band-warm.band-taupe .s-title,
.band-warm.band-taupe .distinction-name{color:#fff}
/* 21/10: white, no more pink. The logo red (#8c1b1b since 22/10, #cc0935 before) comes as a 3px rule (removed 22/10) under the
eyebrow and the signature, from the grouped ::after rule in base.css
(.band-taupe .eyebrow, .band-taupe .sign), which also matches these selectors.
Nothing here overrides that ::after. White on taupe: 7.19:1. */
.band-warm.band-taupe .eyebrow,
.band-warm.band-taupe .sign{color:#fff}
.band-warm.band-taupe .seg .go{color:#fff}
/* 06/10, « La fondatrice » and « Valérie Périnel » in the footer pink, « plus
soutenu »: she cannot tell --accent-light from white, on the Mac or the iPhone.
--accent-rose only reaches 3.14:1 on this taupe, below the 4.5:1 AA asks of normal
text, and no pink light enough to pass is pinker than --accent-light (best case
#F1C1CD, 1.09:1 against it). So it is applied where it can pass:
- her name grows from 22.4 to 24 px, which makes it large text under WCAG, where
the threshold is 3:1. It passes, narrowly.
- the eyebrow is 14 to 15 px caps and cannot be made large text without becoming a
title. Lucas's call, same night: « la fondatrice, il faut mettre la même couleur
que Valérie Périnel », and the rule holds for every taupe band (base.css).
21/10, superseded: the client dropped the pink. The eyebrow and her name are now
white (7.19:1 on the taupe, AA at any size), and the exact red of her logo shows
as a short 3px rule (removed 22/10) under them (base.css ::after). The logo red on this taupe is only
1.25:1, so the rule is decorative and carries no information. The 24 px size is
kept: it no longer serves contrast, but it is the size her name has had since. */
.band-warm.band-taupe .sign{color:#fff;font-size:1.5rem}
.band-warm.band-taupe .measure,
.band-warm.band-taupe .founder-text,
.band-warm.band-taupe .signature-line,
.band-warm.band-taupe .s-intro,
.band-warm.band-taupe .s-desc,
.band-warm.band-taupe .v-cap,
.band-warm.band-taupe .distinction-detail,
.band-warm.band-taupe .distinction-year{color:#E3DBD0}
/* #E3DBD0 et non le #D8CFC1 des bandes --deep : sur le taupe, plus clair que --deep,
ce dernier ne monte qu'a 4,66 contre le fond. Conforme, mais juste, et cette page
s'adresse a des gens qui ont souvent plus de 60 ans. #E3DBD0 donne 5,24 sans que
la nuance se voie. Le corps de la bande, lui, est a #EFE9DF, soit 5,95. */
.band-warm.band-taupe .link{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
/* Tout ce qui porte le bleu de marque dans le bloc de la distinction. Sur le creme il
tient 9,0 ; sur le taupe il tombe a 1,25, c'est-a-dire qu'il disparait purement et
simplement dans le fond. Le laurier est affiche aujourd'hui, les etoiles et le lien
d'avis ne le sont que si le reglage des avis est rempli : ils sont traites quand meme,
parce qu'un defaut qui n'apparait qu'au remplissage d'un champ ne se voit jamais en
recette et toujours en production. */
/* 21/10: white instead of the pink, 7.19:1. */
.band-warm.band-taupe .dist-laurel,
.band-warm.band-taupe .dist-stars{color:#fff;opacity:1}
.band-warm.band-taupe .distinction-reviews a{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
.band-warm.band-taupe .arrow::after{color:#fff} /* 21/10: was the pink */
/* LE SURVOL, et c'etait casse. `.seg a:hover` pose `background:var(--surface)`, un blanc
casse : sur le taupe, la carte survolee devenait quasi blanche pendant que son titre
restait blanc et sa description beige clair. Tout le texte disparaissait au passage de
la souris, sur la section meme qu'elle parcourt pour choisir un parcours.
Le fond s'eclaircit donc DANS le taupe, de 10 % de blanc, ce qui se voit sans rien
effacer, et le titre reste blanc : c'est le fond qui signale, pas la couleur du texte.
Blanc sur le taupe eclairci : 5,6 de contraste. */
@media (hover:hover){
.band-warm.band-taupe .seg a:hover{background:rgba(255,255,255,.1)} /* 23/10: the red row goes, see base.css */
.band-warm.band-taupe .seg a:hover .s-title{color:#fff}
/* 21/10: the pink hover goes. The link is already white at rest, so the hover now
shows as its underline turning from 55 % to solid white. */
.band-warm.band-taupe .link:hover{color:#fff;border-bottom-color:#fff}
/* Le lisere du badge passait a --muted, un bleu-gris invisible sur le taupe. */
.band-warm.band-taupe .distinction-oncrh a:hover img{border-color:#fff}}
/* Le badge ONCRH est un PNG a fond clair : sur le taupe il ressort tout seul, mais
son cadre gris disparaissait dans le fond. */
.band-warm.band-taupe .distinction-oncrh img,
.band-warm.band-taupe .founder-photo{border-color:rgba(255,255,255,.34)}
.band-warm.band-taupe a:focus-visible{outline-color:#fff}
.step{list-style:none;padding:2rem 1.8rem 2.2rem;border-left:1px solid var(--line)}
/* Cinq étapes ne tiennent pas en trois colonnes lisibles : on passe en liste
numérotée verticale, qui raconte mieux une progression de toute façon.
Ceci est le socle, et il vaut tel quel sous 900 px ; au-dessus, la règle de
fin de fichier repasse en deux colonnes. */
.steps-5{grid-template-columns:1fr;counter-reset:etape;gap:0}
.steps-5 .step{border-left:0;border-top:1px solid var(--line);padding:1.5rem 0 1.5rem 4.2rem;position:relative;counter-increment:etape}
.steps-5 .step:first-child{border-top:0;padding-left:4.2rem}
.steps-5 .step::before{content:counter(etape);position:absolute;left:0;top:1.5rem;
width:2.6rem;height:2.6rem;border:1px solid var(--accent);border-radius:50%;
display:grid;place-items:center;color:var(--accent);font-size:1.05rem;font-weight:600}
.steps-5 .step h3{margin-bottom:.35rem;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.
An intro under a section title reads as running text: it takes the body size
(19.2 px at 1 440 px, 18.1 px at 390 px). Was 1.15rem (18.4 px). */
.s-intro{color:var(--ink-2);font-size:var(--body);margin-top:.4rem}
.signature-line{color:var(--ink-2);font-size:1rem;font-style:italic;margin-top:.15rem}
/* 06/10, « Pour une rencontre sérieuse et durable » under her name: « en gras ». */
.signature-line{font-weight:700}
/* Reprise du style inline retire du gabarit le 30/09 : inline, il battait la surcharge
de l'essai taupe et laissait ce paragraphe a 1,07:1 de contraste. */
.founder-text{margin-top:1.2rem;color:var(--ink-2)}
/* Les questions sont des liens de pleine largeur : format question-réponse,
lisible par les moteurs comme par les personnes qui hésitent. */
.qlist{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.qlist li{border-bottom:1px solid var(--line)}
.qlist a{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
min-height:var(--target);padding:1.1rem 0;text-decoration:none;color:var(--ink);
font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.1rem,1rem + .4vw,1.3rem);
transition:color .18s ease,padding-left .18s ease}
.qlist a::after{content:"→";color:var(--accent);flex:none;font-family:Figtree,sans-serif}
@media (hover:hover){.qlist a:hover{color:var(--accent);padding-left:.5rem}}
@media (min-width:900px){
/* 28/09 : RETOUR AU FLUX EN RANGEES, et c'est une correction de fond.
La regle disait `grid-auto-flow:column` avec trois rangees, en expliquant
qu'on lisait ainsi « 1, 2, 3 puis 4, 5 ». C'etait vrai des CONTENUS des
colonnes, pas de l'ORDRE OU L'OEIL PASSE. A l'ecran le flux en colonne
donne
1 4
2 5
3
et personne ne lit une grille de haut en bas : on lit 1, 4, 2, 5, 3. Le
commentaire raisonnait sur quel element tombe dans quelle colonne, pas sur
le trajet du regard, et le defaut a tenu jusqu'a ce que Lucas le releve.
En rangees, 1-2 puis 3-4 puis 5, ce qui est l'ordre annonce par les
pastilles numerotees. La cinquieme prend la largeur entiere plutot que de
laisser un trou a droite : c'est la seule etape qui parle de l'apres
(« je reste a vos cotes »), elle se lit bien comme la conclusion. */
.steps-5{grid-template-columns:1fr 1fr;grid-auto-flow:row;
column-gap:3.5rem}
.steps-5 .step:nth-child(5){grid-column:1/-1}
/* Les deux premieres ouvrent la meme rangee : ni l'une ni l'autre ne porte
de filet. L'ancienne regle dispensait la quatrieme, qui ouvrait la
deuxieme colonne dans l'ancien flux et n'ouvre plus rien. */
.steps-5 .step:nth-child(-n+2){border-top:0}}
/* 30/09 : « si tu peux enlever Cabinet Valerie Perinel et mettre juste Bertrand et
Beatrice en plus gros ». Le texte qu'elle veut retirer etait incruste dans la
miniature venue de YouTube a l'import ; la miniature est remplacee par un aplat
sans aucun texte (voir la carte 355), et le nom qu'elle veut garder est cette
legende, que le site dessine et qu'on peut donc grossir.
1,05 -> 1,35 rem, seulement sur la video vedette de l'accueil : le meme .v-cap
sert les cartes de la piste, ou il doit rester une legende. */
.tem-preview .v-cap{font-size:1.35rem}
/* ============ BANDE VIDÉO (chaîne YouTube) ============ */
/* La chaîne n'est plus une section, c'est le second temps de « ils racontent ».
Un filet et un vide interne remplacent une frontière de section et ses 256 px :
on reste dans le même chapitre, ce que deux titres de même rang ne disaient pas. */
/* 30/09, elle : « pourquoi dans ces cas-la le trait ne serait pas en rouge, le grand
trait ? [...] ca ferait une petite touche ». Le filet garde son role de charniere
entre les deux temps du chapitre, il prend l'accent au lieu du gris.
2 px et non 3 : .quote porte deja un filet rouge de 3 px, mais sur une colonne de
370 px. Le meme trait sur les 1 200 px du bloc n'est plus une touche, c'est une
barre. 2 px se voit et ne crie pas. */
.yt-bloc{margin-top:clamp(2.6rem,1.6rem + 3vw,3.8rem);
padding-top:clamp(2rem,1.2rem + 2vw,2.8rem);border-top:2px solid var(--accent)}
.yt-bloc h3{font-size:clamp(1.4rem,1.15rem + .9vw,1.85rem);font-weight:500;letter-spacing:-.01em}
/* Les fleches remontent au niveau du titre : en bas a gauche, elles etaient a
90 px de la piste qu'elles commandent, et le lien vers la chaine se retrouvait
seul a l'autre bout d'une ligne vide. */
.yt-head{display:flex;align-items:flex-end;justify-content:space-between;
gap:1.5rem;margin-bottom:1.9rem}
.yt-head .s-intro{margin-bottom:0}
/* Le défilement reste déclenché par la personne : rien ne bouge tout seul.
La piste est focalisable au clavier pour que les flèches la fassent défiler
nativement, et les deux boutons servent à la souris comme au clavier. */
.yt-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,320px);
gap:clamp(1rem,.6rem + 1vw,1.6rem);overflow-x:auto;padding-bottom:1.2rem;
scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.yt-track>*{scroll-snap-align:start}
/* 23/10, Valérie: the blurred edges go (« on enlève le flou », phone and
desktop). The arrows on each side of the row now say « there is more ». The
mask stood here, with its .more-before / .more-after widths. */
.yt-track:focus-visible{outline:3px solid var(--brand);outline-offset:4px;border-radius:1px}
@media (prefers-reduced-motion:no-preference){ .yt-track{scroll-behavior:smooth}}
.yt-card{display:flex;flex-direction:column;gap:.6rem}
/* Deux lignes reservees au titre : sans cela, les descriptions demarrent a des
hauteurs differentes d'une carte a l'autre et la bande parait bancale. */
.yt-title{font-weight:600;font-size:1.12rem;line-height:1.35;color:var(--ink);max-width:none;
min-height:2.7em}
/* 10/10, card 226: 1.5, the floor for running text; it was 1.45. */
.yt-meta{font-size:1.02rem;line-height:1.5;color:var(--ink-2);max-width:none}
.yt-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.6rem}
/* 30/09 : les reseaux remontent ici, sous la piste. Ils n'existaient que dans la
colonne Contact du pied, ou elle est allee les chercher sans les trouver.
Alignes a gauche sous le titre plutot qu'etales : quatre icones reparties sur
1 200 px se lisent comme quatre elements sans rapport. */
/* Le bloc respire au-dessus : colle a la piste, « Nous suivre » se lisait comme la legende
de la derniere vignette plutot que comme le pied du chapitre. */
.yt-foot-social{justify-content:space-between;align-items:flex-end;gap:.9rem 2rem;
margin-top:clamp(1.6rem,1.1rem + 1.6vw,2.4rem)}
.yt-follow-block{display:grid;gap:.5rem}
/* 04/10, « NOUS SUIVRE : en gras ». Bolder, larger and in the ink blue rather
than the muted one: at 600 and --muted it read as a caption, not a heading. */
.yt-follow{margin:0;font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;
font-weight:700;color:var(--ink)}
.yt-social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.yt-social a{display:inline-flex;align-items:center;gap:.5rem;min-height:var(--target);
font-size:.98rem;color:var(--ink);text-decoration:none}
.yt-social svg{flex:none;color:var(--accent)}
@media (hover:hover){.yt-social a:hover{color:var(--accent)}}
.yt-social a:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:2px}
/* 23/10, Valérie: « une flèche à gauche, une à droite ». Round buttons on the
edges of the row, centred on the thumbnails (--yt-mid, set by theme.js from the
real thumbnail height). Light on the photos, with a shadow, so they read on any
thumbnail; at an end of the row the button fades out instead of covering a card
while doing nothing. */
.yt-rail{position:relative;--yt-mid:90px}
.yt-fl{position:absolute;z-index:2;top:var(--yt-mid);transform:translateY(-50%);
width:3.25rem;height:3.25rem;display:grid;place-items:center;padding:0 0 .18rem;
border:1px solid var(--ink);border-radius:50%;background:var(--surface);color:var(--ink);
font-size:2rem;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(12,14,16,.28);
transition:background .18s ease,color .18s ease,opacity .18s ease}
.yt-fl-prev{left:-1.6rem}
.yt-fl-next{right:-1.6rem}
@media (hover:hover){.yt-fl:hover{background:var(--ink);color:var(--paper)}}
.yt-fl:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.yt-fl[disabled]{opacity:0;pointer-events:none}
/* Under 1300 px the page margin is too narrow for half a button outside the
row: they sit just inside its edges, over the cards. */
@media (max-width:1299px){
.yt-fl-prev{left:.5rem}
.yt-fl-next{right:.5rem}}
@media (max-width:700px){
.yt-fl{width:2.9rem;height:2.9rem;font-size:1.8rem}}
/* un visage à côté de chaque citation : c'est ce qui réchauffe le plus la page */
/* 30/09 : l'initiale rejoint l'attribution, et le bloc passe EN TETE de la citation.
Ce qui s'arrange. L'initiale ne flotte plus seule au-dessus d'un texte qu'elle
n'annonce pas : elle fait bloc avec le nom qu'elle abrege, ce qui est son seul role.
On sait qui parle avant de lire, ce qui est l'ordre d'un temoignage attribue.
Et les signatures sont alignees d'office, puisqu'elles partent toutes du haut de leur
carte : le desordre venait de la, trois colonnes de longueurs differentes donnaient
trois attributions a trois hauteurs. Placees en tete, aucune regle de grille n'est
necessaire pour les tenir ensemble.
L'initiale en colonne reste exclue : sur un tiers de largeur, une pastille de 64 px
mangeait 280 px des 370 disponibles.
`auto 1fr` n'est PAS decoratif, et son absence a produit un defaut visible. La carte
est etiree a la hauteur de sa rangee de grille ; avec deux lignes en `auto`, le surplus
se repartissait entre elles, et la SIGNATURE grossissait quand la citation etait courte.
Mesure : 60,8 px contre 48, soit une citation qui demarrait 13 px plus bas que ses
voisines. La premiere ligne garde donc sa taille et la seconde absorbe tout le reste. */
.quote{display:grid;grid-template-rows:auto 1fr;gap:1.1rem;
padding-top:1.1rem;border-top:3px solid var(--accent)}
/* La signature : pastille et attribution sur une ligne, centrees l'une sur l'autre. */
.q-sign{display:flex;align-items:center;gap:.75rem}
/* Pas de visage sur les temoignages : une initiale, pas une photo de banque
d'images. Deux raisons. La cliente veut des gens de dos ou pas de visage du
tout, et surtout un vrai temoignage illustre par un visage achete est une
pratique commerciale trompeuse. L'initiale ne ment sur rien. */
.q-face{width:64px;height:64px;border-radius:50%;flex:none;
display:grid;place-items:center;
background:var(--warm);box-shadow:0 0 0 1px var(--line);
font-family:"Source Serif 4",Georgia,serif;font-size:1.5rem;font-weight:600;
color:var(--accent);letter-spacing:.01em}
.q-face:has(+ div) {font-size:1.5rem}
.quote .q-face{width:48px;height:48px;font-size:1.15rem}
/* Le corps descend avec la largeur : le clamp de base monte à 1,6rem, calibré pour
une colonne de 480 px, et faisait six lignes sur un tiers de largeur.
21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page
takes the same running text size. A review excerpt is read as running text, so it
takes the body size; it keeps its serif and its tighter line-height, the quote style
of base.css. Was clamp(1.02rem,.95rem + .3vw,1.18rem): 16.3 px on a phone, under the
18 px floor, and 18.9 px at 1 440 px. */
.quote blockquote{font-size:var(--body)}
.quote cite{display:block;margin:0;font-style:normal;color:var(--ink-2);font-size:.98rem;line-height:1.4}
/* Le nom passe devant, le reste recule d'un cran : « Cedric » et « avis Google · juin 2026 »
ne sont pas de meme nature, et l'oeil doit trouver le nom en premier. */
.quote cite b{display:block;color:var(--ink);font-size:1.05rem;font-weight:600}
/* La provenance sur sa propre ligne, un cran en dessous. */
.quote cite span{display:block;margin-top:.1rem}
/* 15/09: the « avis Google » link under a review extract, discreet but readable as a link. */
.quote cite a{color:inherit;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
/* ============ BANDE SOMBRE PHOTOGRAPHIQUE ============ */
/* Elle porte les sept questions. Trois raisons de la poser ici plutôt qu'en
deuxième section comme avant : la deuxième masse sombre arrive à six écrans de
la première au lieu de la prolonger, le mur de sept liens devient un moment
visuel, et c'est la deuxième image forte du premier tiers, là où il fallait
descendre 3 617 px après le bandeau avant d'en croiser une. Hauteur ajoutée :
aucune, la section existait déjà.
La photo ne montre ni visage ni âge : le parti pris « des gens de dos » vaut
aussi ici, et il évite qu'une image décide à la place du visiteur si la page
s'adresse à lui. */
/* ====== 29/09 AU SOIR : APLAT SEUL, EN ATTENDANT SA PHOTO ======
Cette bande a porte une photo pleine largeur sous voile sombre (09/09), puis
sous voile clair, puis en colonne sans voile. Sept photos et sept reglages en
deux jours, tous arbitres sur notre lecture de ce qu'elle voudrait, et aucun
retour d'elle. Decision de Lucas : on arrete, on pose un aplat, et on lui
DEMANDE la photo. C'est la seule facon de sortir d'une boucle ou chaque essai
repondait a une prediction et pas a une personne.
L'aplat est --tint, la couleur que la charte designe depuis le debut comme
« bande alternee ». Elle est 10 points SOUS le fond de page, donc la bande
creuse au lieu d'eblouir : --surface, essaye le 28/09, etait 33 points
au-dessus et « faisait mal aux yeux ». Le filet haut et bas est necessaire :
a 10 points d'ecart seul, l'oeil ne voit pas de bande.
LA RECETTE DES DEUX COLONNES EST GARDEE, elle marchait. Le jour ou sa photo
arrive, c'est dix minutes : ::before en position absolue, inset:0 0 0 auto,
width:50%, background-size:cover, aucun voile, et le texte plafonne a
min(62ch,46%). Le plafond de 50 % est mesure : a 58 % le texte court sous la
photo, la plus longue question faisant 62 caracteres. Voir la carte 349. */
.photo-band{position:relative;isolation:isolate;background:var(--band);--ink-2:#375C71;--muted:#3F5B6C;color:var(--ink-2);
border-block:1px solid var(--line)}
.photo-band .eyebrow{color:var(--accent)}
.photo-band h2{color:var(--ink)}
/* Revenu a --ink-2, sa couleur normale : il avait ete force a --ink le 29/09
parce que sur le voile clair d'alors il tombait a 4,27:1, sous le seuil AA. Le
texte tient maintenant un aplat plein, ou --ink-2 vaut 5,21:1. Le gabarit
n'affiche toujours pas d'intro ici, la regle vaut pour le jour ou il y en aura une. */
.photo-band .s-intro{color:var(--ink-2)}
/* Le texte tient du côté dense du voile, la photo respire à droite. */
/* 50 % et non 62ch seuls : le wrap est centre alors que la colonne d'image est
calee sur le bord de l'ecran, donc les deux ne se mesurent pas au meme repere.
Le plafond en pourcentage est le seul qui garantisse que le texte s'arrete
avant l'image a toutes les largeurs. */
/* Plus de colonne d'image a eviter : le texte reprend sa mesure normale. Il
repassera a min(62ch,46%) le jour ou sa photo arrive. */
.photo-band .s-head,.photo-band .qlist{max-width:62ch}
.photo-band .qlist{border-top-color:var(--line)}
.photo-band .qlist li{border-bottom-color:var(--line)}
.photo-band .qlist a{color:var(--ink)}
.photo-band .qlist a::after,.photo-band .arrow::after{color:var(--accent)}
@media (hover:hover){.photo-band .qlist a:hover{color:var(--accent)}}
.photo-band .link{color:var(--ink);border-bottom-color:var(--line-strong)}
@media (hover:hover){.photo-band .link:hover{color:var(--accent);border-bottom-color:var(--accent)}}
/* Bandeau medias, refait le 01/09. L'aplat blanc est supprime : il n'etait la que
parce que les logos vivaient dans un JPG unique dont le fond ne se detourait pas,
et la cliente l'a rejete de vive voix (« on n'en peut plus de ce blanc »). Chaque
logo est desormais un SVG pose directement sur le creme, net a toute taille et
porteur de son propre alt. Le halo blanc du logo 8 Mont-Blanc a ete retire du
fichier. YouTube est sorti du bandeau : c'est sa propre chaine, pas un media qui
l'a recue, et sa presence affaiblissait les quatre autres. */
/* 27/09 : « Encadrer en marron foncé pour que ça ressorte plus ». Le marron
foncé de la charte existe deja, c'est --deep (#2E2A26), l'encre chaude des
bandes sombres et du pied de page : le bandeau se cadre donc avec une
couleur qui est deja sur la page, et pas avec un brun invente pour lui. Le
filet passe de 1 a 2 px, c'est ce qui le fait ressortir sur le creme.
21/10: the dark brown goes, at her request; frame and label take --taupe.
Taupe on --surface #FAF7F1: 6.72:1 (border needs 3:1, the 13-14 px caps label
needs 4.5:1, both pass). */
.medias{margin-bottom:clamp(2.4rem,1.6rem + 2vw,3.6rem);padding:1.4rem 1.6rem 1.6rem;
background:var(--surface);border:2px solid var(--taupe);border-radius:var(--r)}
.medias-lab{max-width:none;text-align:center;margin-bottom:1rem;
font-size:var(--step--1);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
/* 22/10: the logos sorted into TV, Presse and Radio, each group one link to the
blog filtered on that kind. Three groups side by side, a hairline between them;
the kind is written above its logos in the accent red, with the arrow every
link on the site carries. */
.medias-groups{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
justify-content:center;align-items:stretch}
.medias-groups > li{display:flex}
.medias-groups > li + li{border-left:1px solid var(--line)}
.medias-group{display:flex;flex-direction:column;align-items:center;gap:1rem;
padding:.5rem clamp(1.2rem,.4rem + 2.6vw,2.8rem);border-radius:var(--r);
color:var(--ink);text-decoration:none}
.medias-kind{font-size:var(--step--1);font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--accent)}
@media (hover:hover){a.medias-group:hover .medias-kind{text-decoration:underline;text-underline-offset:.25em}}
a.medias-group:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.medias-track{display:flex;flex:1;align-items:center;justify-content:center;
gap:1.2rem clamp(1.2rem,.6rem + 2vw,2.4rem)}
/* Hauteurs reglees a l'oeil et non a la regle : un logo carre et un logo en bandeau
n'ont pas le meme poids visuel a hauteur egale. Le Dauphine fait 5,7 fois plus large
que haut, il descend donc a 22 px la ou les carres tiennent 44. */
.ml{display:block;width:auto;height:56px}
/* 04/10, « grossir le logo de France 3 car ce n'est pas très lisible » : the file
is a tall vertical mark, so at the shared height its lettering came out tiny.
It now gets a third more height than the square logos. */
.ml-f3{height:78px}
.ml-dl{height:28px}
.ml-mb{height:60px}
/* A heavy, solid wordmark: at the square logos' height it would outweigh them. */
.ml-rtl{height:34px}
/* 27/09 : « sur mon iPhone 8 mont blanc est en dessous ». Les cinq logos
tenaient a 3 px pres sur 390 px, donc le dernier basculait seul sur une
deuxieme ligne, ce qui se lit comme un oubli plutot que comme une rangee.
Les hauteurs et l'ecart descendent juste assez pour que les cinq tiennent. */
/* 04/10 : six logos with RTL, and six no longer fit on one line at 390 px: the
last one dropped alone again, the exact defect above. Two rows of three read
as a layout rather than a spill, and the logos get some height back. */
@media (max-width:560px){
/* 22/10: the three groups stack, a hairline between them instead of beside. */
.medias-groups{flex-direction:column;align-items:stretch}
.medias-groups > li{justify-content:center}
.medias-groups > li + li{border-left:0;border-top:1px solid var(--line)}
.medias-group{width:100%;padding:1rem .4rem;gap:.8rem}
.medias-track{gap:1.1rem 1.6rem}
.ml{height:38px}.ml-f3{height:52px}.ml-dl{height:17px}.ml-mb{height:40px}.ml-rtl{height:24px}
}
/* Le defilement au doigt et le min-width de 460 px sont supprimes le 01/09 : ils
servaient l'image unique, qui ne pouvait pas se replier. Les logos separes passent
a la ligne d'eux-memes, ce qui evite le debordement horizontal sous 560 px. */
@media (max-width:560px){
.medias{padding-inline:.9rem}
}
/* Temoignage colle au bouton (T7) */
/* Une seule épaisseur de filet bordeaux pour tout ce qui cite ou met en exergue :
3 px. Il y en avait quatre (1, 2, 3 et 5 px) pour un seul et même geste. */
.cta-quote{margin-top:1.4rem;padding-left:1rem;border-left:3px solid var(--accent)}
/* 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 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 porte deja l'ordre pour les lecteurs
d'ecran ; ce compteur ne fait que le rendre visible. */
.steps{counter-reset:etape;list-style:none;padding:0;margin:0}
.step{counter-increment:etape}
.step::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}
/* Apercu temoignages : la video et les citations cote a cote, en une seule
section au lieu de deux. Sur mobile, la video passe au-dessus. */
/* 28/09 : la vidéo prend toute la largeur, les trois avis passent SOUS elle sur une
ligne. Avant, ils tenaient une colonne de droite en 7fr/5fr, et c'est cette colonne
qui créait le défaut qu'elle signalait le 27 : deux colonnes démarrent ensemble et
finissent où elles veulent, donc dès que les avis descendaient plus bas que la
vidéo, le vide qu'elle voyait était sous la vidéo. Le passage en ligne supprime le
problème au lieu de le rogner, et rend à la vidéo toute la largeur, ce qui n'est pas
un dommage collatéral : c'est l'atout qu'elle nomme elle-même sa force. */
.tem-preview{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,1rem + 3vw,3.2rem);align-items:start}
/* 15/09: no written quote yet, so the featured video takes the whole row. */
/* `.single-column` retiré avec la bascule : les deux cas, avec et sans citations,
sont désormais la même colonne unique, la classe ne distinguait plus rien. */
/* 27/09 : « mettre les 3 avis avec moins d'espaces pour qu'il y ait moins
d'espace en dessous de la video ». Les deux colonnes demarrent ensemble et
finissent ou elles veulent : quand celle des avis descend plus bas que la
video, le vide qu'elle voit est sous la video. Resserrer les avis, c'est
rapprocher les deux pieds. */
/* `auto-fit` et non `repeat(3,1fr)` : le nombre d'avis est un champ, et à deux avis
une grille figée à trois laisserait un trou. Le plancher de 15rem les replie tout
seuls sous 900 px. */
.quotes-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
gap:clamp(1.4rem,1rem + 1.4vw,2.2rem)}
@media (max-width:900px){
.tem-preview{grid-template-columns:1fr}}
/* 06/10, card 369: the featured video and the reviews, laid out twice from one
markup. No second copy of the video button: each copy would open its own
YouTube iframe on click, and a screen reader would meet the video twice.
ON THE IPHONE, « la vidéo de Bertrand et Béatrice avant Ils témoignent de leur
bonheur ». The wrap becomes a column and .tem-preview dissolves into it
(display:contents), so the video can be pulled ahead of the title with `order`.
The reviews keep their place under the title. Margins no longer collapse in a
flex column, which is why the video carries the gap that the grid used to. */
@media (max-width:900px){
.tem-wrap{display:flex;flex-direction:column}
.tem-wrap>.tem-preview{display:contents}
/* 23/10, Valérie on her iPhone: « ça fait vraiment bizarre, la phrase Et si la
rencontre commençait autrement se trouve en dessous de la photo et tout de
suite après on a la vidéo ». Since 21/10 the hero title sits under the photo
on a phone, so the video pulled ahead of its own title (06/10) followed it
with nothing in between. The title comes first again: photo, hero title,
« Ils témoignent de leur bonheur », the video, the reviews. */
/* 24/10, Lucas: « sur mobile, la vidéo L'amour éclos entre Evelyne et Philippe
on la met en dessous des témoignages ». Title, the three reviews, then the
video, then the closing line and the channel. */
.tem-wrap .tem-preview>.video{order:1;margin-top:clamp(1.8rem,1rem + 3vw,3.2rem)}
.tem-wrap>:not(.s-head):not(.tem-preview){order:2}
/* « Sur iPhone, rien ne change » apart from the video: the fourth card exists for
the Mac's two-and-two frame, so the phone keeps the three reviews it had. */
.tem-wrap .quote:nth-child(n+4){display:none}}
/* In between, four reviews go two by two rather than three plus an orphan. */
@media (min-width:901px) and (max-width:1099px){
.quotes-col:has(>.quote:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ON THE MAC, « il faut laisser comme tu as fait », but the video shrinks and four
reviews frame it, two on the left and two on the right [07:37]. Two and two is
her answer to the overflow seen when the reviews were all on the right.
The reviews' column dissolves into the grid so each one can be placed. The middle
column comes out near 480 px wide, the native width of the YouTube frame used as
the poster: the blur she saw at 1 100 px (card 365) goes with it.
Only from three reviews up: with fewer there is nothing to frame, and the
full-width video of 28/09 stays. */
@media (min-width:1100px){
.tem-preview:has(>.video):has(.quote:nth-child(3)){
grid-template-columns:minmax(0,1fr) minmax(0,2.2fr) minmax(0,1fr);
column-gap:clamp(1.4rem,.6rem + 1.2vw,2rem);row-gap:clamp(1.2rem,.8rem + .8vw,1.6rem);
align-items:start}
/* 06/10, second pass, Lucas: « la vidéo est petite par rapport aux avis ». At
1 440 px the video was 442 x 249 between two columns of reviews 360 px tall.
The middle column goes from 1.5 to 2.2 parts (544 x 306) and the reviews
tighten instead of shrinking their text: smaller initial, no gap between the
signature and the quote. The quote stays at 18 px, the floor of the site.
21/10: the quote now takes the body size like every running text (/label-oncrh/,
« la typo et la taille sont parfaites »), 19.2 px at 1 440 px. Was 1.125rem. */
.tem-preview:has(>.video):has(.quote:nth-child(3)) .quote{padding-top:1rem;row-gap:.7rem}
.tem-preview:has(>.video):has(.quote:nth-child(3)) .q-face{width:40px;height:40px;font-size:1rem}
.tem-preview:has(>.video):has(.quote:nth-child(3)) .q-sign{margin-bottom:0}
.tem-preview:has(>.video):has(.quote:nth-child(3)) blockquote{font-size:var(--body);line-height:1.45;margin-top:0}
.tem-preview:has(>.video):has(.quote:nth-child(3)) .quotes-col{display:contents}
.tem-preview:has(>.video):has(.quote:nth-child(3))>.video{grid-column:2;grid-row:1/span 2;align-self:center}
.tem-preview:has(>.video):has(.quote:nth-child(3)) .quote:nth-child(-n+2){grid-column:1}
.tem-preview:has(>.video):has(.quote:nth-child(3)) .quote:nth-child(n+3){grid-column:3}
.tem-preview:has(>.video):has(.quote:nth-child(3)) .quote:nth-child(odd){grid-row:1}
.tem-preview:has(>.video):has(.quote:nth-child(3)) .quote:nth-child(even){grid-row:2}}
/* ============ 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}
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)}
/* Le bouton disait « Appeler » sans rien montrer. Cette audience note souvent le
numero pour rappeler d'un fixe, plus tard, au calme : un bouton qui ne montre
rien ne se note pas. Deux lignes plutot qu'une, pour que les quatorze
caracteres tiennent sans reduire la cible sous 48 px. */
.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)}
}
@media (max-width:900px){
.founder-grid,.cv-grid{grid-template-columns:1fr}
/* Rien de particulier sous 900 px tant que la bande est un aplat. La regle
qui y faisait descendre la photo en bandeau de 15 rem est retiree avec elle. */
.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}
.q-face{width:44px;height:44px}
.city{flex-basis:50%}
.foot-grid{grid-template-columns:1fr 1fr}}
/* 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. */
/* Compaction du bandeau sur les fenetres basses, 31/08 au soir : ce qui etait un
palier @media (max-height:720px) est devenu une rampe sur vh, propriete par
propriete. Le palier faisait exactement ce que le defaut 99 faisait sur l'axe des
largeurs : pour UN pixel de hauteur de fenetre, le retrait haut passait de 22 a
80 px et le bandeau gagnait 11 a 15 %. Chaque rampe vaut la valeur compacte a
640 px de haut et la valeur de base a 880, et ne saute nulle part entre les deux.
Deux choses restent volontairement sur la LARGEUR et jamais sur la hauteur :
l'ecart lateral et le retrait lateral du bouton, parce que ce sont eux qui
decident du repli des deux actions, et qu'un repli coute 64 px. */
/* Fenetres basses de 431 px de large et plus : le portable 1 280 x 800 affiche a
125 %, soit 1 024 x 640, est frequent dans cette tranche d'age. Le titre y prend
trois lignes de 68 px. Le troisieme terme du min() le borne a la hauteur de la
fenetre au lieu de sa largeur ; il ne mord jamais au-dessus de 720 px de haut,
donc la valeur de reference du grand ecran ne bouge pas. La condition ne porte
aucune largeur de bascule : 900 et 901 px s'y comportent a l'identique. */
/* Les tout petits ecrans, iPhone SE de premiere generation compris : a 320 px chaque
ligne se replie une fois de plus. */
@media (max-width:340px){
.hero .baseline{margin-bottom:.9rem}
.hero h1{margin-bottom:.55rem}
}
@media (max-width:700px){
/* 23/10: the arrows now show on the phone too, at her request; the heading
just stacks. */
.yt-head{display:block}}
@media (max-width:560px){
.foot-grid{grid-template-columns:1fr}
/* Les villes restent sur deux colonnes ici : en une seule, les huit tuiles
occupaient 1 286 px pour 37 mots. La cible reste bien au-dela de 48 px. */
.city{min-height:104px;padding:1.2rem 1rem}
.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}}
/* La regle de survol du bouton du bandeau est retiree le 09/09 : elle existait
pour un bouton bleu pose sur une photo sombre, qui tombait a 1,55 de silhouette
au survol. Le bouton du bandeau est maintenant .hero-btn, en --deep sur une
photo claire, et son survol est declare avec lui. 21/10: --taupe now, not --deep. */
/* 31/08 au soir : les deux blocs @media (max-height:720px) qui vivaient ici sont
devenus des rampes sur vh, propriete par propriete, dans les regles ci-dessus. En
palier, ils faisaient sur l'axe des hauteurs exactement ce que le defaut 99
faisait sur l'axe des largeurs : a 1 440 px de large, un pixel de hauteur de
fenetre valait 66 px de bandeau et 25 % de corps de titre. Chaque rampe vaut la
valeur compacte a 640 px de haut et la valeur de base a 880. Restent sur la
LARGEUR, volontairement, l'ecart lateral de la ligne d'action et le retrait
lateral du bouton : ce sont eux qui decident du repli, qui coute 54 px. */
/* La distinction se compose comme une mention d'ouvrage, pas comme un encadre.
L'ancienne version en portait trois marques qui la faisaient lire comme un bloc
genere : une etoile en pastille, un filet colore sur le bord gauche, et la note
Google collee dessous. Le filet gauche est, d'apres le detecteur de la skill, le
tell le plus reconnaissable des interfaces generees ; l'etoile ajoutait un
pictogramme decoratif a une preuve qui n'en a pas besoin.
Ce qui reste : un filet horizontal fin qui separe sans encadrer, le nom en serif
dans le bleu de marque, l'annee detachee en petit, et le detail en gris taupe,
la couleur que ses notes du 26/08 reservent au texte secondaire.
La note Google est SEPAREE : un avis de clients et une distinction professionnelle
ne sont pas la meme nature de preuve, les empiler affaiblissait les deux. */
.distinction{margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid var(--line)}
/* 30/09 : « c'est petit, ca, c'est quand meme la seule, je mettrais un peu plus gros ».
Un cran, pas deux : 1,12 -> 1,3 rem reste sous le h2 de la section, qui doit garder
le dessus. Ce qui grossit est la mention d'ADHESION, deja en ligne et deja assumee ;
Le lien vers le Prix qu'elle demandait dans le meme souffle est parti le 30/09 au soir,
sur arbitrage : il mene a /label-oncrh/, dont le bloc du Prix vit sous
show_excellence_award. Carte 118. */
.distinction-name{margin:0;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
font-family:"Source Serif 4",Georgia,serif;font-size:1.3rem;font-weight:500;
color:var(--brand);line-height:1.3}
.distinction-name abbr{text-decoration:none;letter-spacing:.02em}
.distinction-year{font-family:Figtree,system-ui,sans-serif;font-size:.92rem;font-weight:500;
letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.distinction-detail{margin:.4rem 0 0;color:var(--muted);font-size:.95rem;line-height:1.5;
max-width:52ch}
.distinction-reviews{margin:.7rem 0 0;font-size:.95rem}
/* Le bandeau d'adhesion ONCRH, pose le 28/09 a sa demande. 170 px est le plafond :
le fichier fait 284 px de large avec du texte incruste, au-dela il bave. Le fond
du GIF est blanc et non transparent, d'ou le liseré qui l'assied sur le creme de
la bande plutot que de le laisser flotter comme une vignette decoupee. */
.distinction-oncrh{margin:.9rem 0 0;max-width:none}
.distinction-oncrh img{width:170px;height:auto;border:1px solid var(--line);border-radius:4px}
/* 06/10, card 370: the badge gives way to the ONCRH poster, « un peu plus gros ».
A portrait 427 x 640 at 200 px wide is 300 px tall, well above the 93 px of the
old badge: wider would push the review score and the link below the fold of the
band for little gain, the poster's small lines already being legible here. */
.distinction-oncrh img{width:96px}
/* 06/10, second pass, Lucas: « un peu trop grande, elle ne s'intègre pas bien ».
Stacked under the label at 200 x 300, the poster read as a second block, taller
than the text it illustrates. It now sits beside the label name and its two
lines, as a seal: 96 px wide, the two lines of text against it, the link to the
page below spanning the whole band. At this size the Order's phone number no
longer reads as a contact line, which also answers the reserve of card 118. */
.distinction:has(.distinction-oncrh){display:grid;grid-template-columns:auto minmax(0,1fr);
column-gap:clamp(1rem,.6rem + 1vw,1.4rem);align-items:center}
.distinction:has(.distinction-oncrh)>*{grid-column:1/-1}
.distinction:has(.distinction-oncrh)>.distinction-oncrh{grid-column:1;grid-row:1/span 2;margin:0}
.distinction:has(.distinction-oncrh)>.distinction-name{grid-column:2;align-self:end;margin-bottom:.35rem}
.distinction:has(.distinction-oncrh)>.distinction-detail{grid-column:2;align-self:start;margin-top:0}
.distinction-oncrh img{border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
@media (hover:hover){.distinction-oncrh a:hover img{border-color:var(--muted)}}
/* Deux pictogrammes, et deux raisons differentes de les mettre.
Le sceau dit « distinction » sans le mot. Un laurier a d'abord ete essaye : a 21 px
ses feuilles se rejoignaient en une masse indistincte, verifie au zoom. Il remplace l'etoile en pastille de la version
precedente, qui etait un ornement pose a cote d'une preuve, alors que celui-ci
qualifie ce qui suit. Trait fin, couleur du texte, hauteur d'une majuscule : il
accompagne, il ne decore pas.
Les etoiles, elles, PORTENT l'information : elles sont remplies a 84 %, soit
exactement 4,2 sur 5, par un masque et non par un arrondi a l'entier. Une note
arrondie a quatre etoiles pleines serait fausse.
L'emblee de l'ONCRH a ete ecarte : le seul exemplaire disponible est le scan du
diplome, un hexagone bleu ciel en degrade avec ombre portee, illisible sous 40 px
et etranger a la charte. */
.distinction-name .dist-laurel{width:1.35em;height:1.35em;flex:none;
align-self:center;color:var(--brand);opacity:.85}
.distinction-reviews{display:flex;align-items:center;gap:.55rem}
.distinction-reviews .dist-stars{width:5.6rem;height:1.05rem;flex:none;color:var(--brand)}
.distinction-reviews a{color:var(--ink);font-weight:600;
border-bottom:1px solid var(--line-strong);text-decoration:none}
@media (hover:hover){.distinction-reviews a:hover{border-bottom-color:var(--ink)}}
.distinction-reviews a:active{color:var(--brand)}
/* ====== BANDEAU, REFONTE DU 09/09 ======
La mecanique heritee du 01/09 est conservee : la photo occupe toute la largeur,
le sujet tient la gauche, le texte vit dans la zone claire de droite, en fonce
sur clair. Ce qui change tient en quatre points, et tous portent sur la
COMPOSITION, pas sur des reglages.
1. LE CADRAGE OUVRE, IL NE SERRE PLUS.
Le cadrage precedent (crop=1200:600:535:326) donnait au couple 68 % de la
hauteur du cadre : plus aucun ciel, la ligne d'horizon coupee, et une photo
qui se lit comme une vignette serree au lieu d'une image. Le nouveau
(crop=1340:670:460:275 sur la source 1800x1200, meme etalonnage chaud
colorbalance=rm=.08:rh=.10:bm=-.08:bh=-.10) rend les montagnes brumeuses et
la ligne d'eau. Le couple passe a 59 % de la hauteur et reste a 33 % de la
largeur, donc toujours hors de la colonne du texte, et la moitie droite
gagne une vraie plage lumineuse. Fichier dedie, hero-ponton-accueil.jpg :
l'ancien reste en place, le theme WordPress le consomme.
2. LE VOILE PASSE DE .94 A .30, ET IL NE SERT PLUS QU'A ASSEOIR.
Les deux ellipses precedentes existaient pour sauver le slogan rouge, qui
tombait entre 1,0 et 2,2 sur l'ancien cadrage. Le nouveau cadrage donne au
bloc une eau a plus de 210 de luminance : le rouge y tient de lui-meme. La
couche qui reste est une seule ellipse tres douce, dont l'objet n'est plus
le contraste mais la cohesion du bloc. Mesure : voir pilotage/banc-bandeau-page.ts.
3. LE TITRE EST DIMENSIONNE PAR SON BLOC, PAS PAR LA FENETRE.
« commençait autrement ? » mesure 9,62 em en Source Serif 4, letter-spacing
-.02em (mesure au navigateur, pas une estimation). Un corps en vw ignore que
la colonne cesse de grandir quand le wrap est borne : le titre debordait ou
restait timide selon la fenetre. En cqw il occupe toujours 89 a 91 % de sa
colonne, donc 64 px a 1440 et 76 px a 1920. Le repli en vw est declare
d'abord, pour les navigateurs sans unites de conteneur.
4. LA COUPE DU TITRE EST ECRITE, PAS SUBIE, ET A TOUTES LES LARGEURS.
Deux lignes, « Et si la rencontre » puis « commençait autrement ? », portees
par deux spans en bloc et non par un
; le texte lu par un lecteur d'ecran
est le meme. Sur telephone ils RESTENT des blocs, apres l'essai contraire :
rendus inline avec text-wrap:balance, le titre partait sur trois lignes a
360 px et laissait « commençait » seul sur la sienne, exactement ce qu'il
fallait eviter. Le minimum du corps mobile descend donc a 1,7 rem, valeur
calculee pour que « commençait autrement ? », qui mesure 9,62 em, tienne sur
une ligne des 320 px de large.
Le bouton quitte le bleu pour --deep. Ce n'est pas une couleur nouvelle, c'est
celle des bandes sombres du site et celle du titre du bandeau. Sur une photo en
contre-jour dore, le bleu du logo faisait une tache froide isolee, et la mesure
du 09/09 le relevait deja : le contrastemetre le comptait comme un fond sombre.
Le bleu reste ce qu'il est ailleurs, la couleur du logo, du focus et des boutons
sur creme.
21/10: --deep is gone at her request; the title, the button and the focus ring
take --taupe. Desktop: the title sits on the bare water of the photo, measured at
11.4:1 against --deep on 09/09, which puts the water near luminance 0.79 and taupe
at about 5.8:1 on it. Under 1180 px the title sits below the photo on --paper:
5.84:1. The button keeps --paper text on a taupe fill: 5.84:1. */
/* 23/10, Lucas: « sur tous les bandeaux, il faut que le texte soit au milieu du
bandeau ». The rows were 1fr auto 1.45fr, which held the block above the middle
(266 px above, 373 below at 1440). Equal rows now; the title moves about 50 px
down and stays on the calm water, clear of the glare and of the railing. */
.hero{position:relative;isolation:isolate;background:var(--paper);
display:grid;grid-template-rows:1fr auto 1fr;align-items:center;
/* Le bandeau gagne en hauteur : c'est le vide de droite qui fait l'impression
premium, et il ne se fabrique qu'avec de la place. Borne a 88svh pour que la
section suivante reste annoncee par un debut de contenu. */
min-height:min(clamp(30rem,20rem + 30vw,50rem),88svh);
padding-block:clamp(2.6rem,1.8rem + 3vw,4.6rem);
--gut-hero:clamp(1.25rem,.3rem + 3.9vw,5.5rem)}
.hero .hero-media{position:absolute;inset:0;z-index:-1;
background:url("../../img/hero-pier-light.jpg") 50% 35%/cover no-repeat}
/* Deux couches, et la logique du 09/09 est conservee : on ne noie pas la photo,
on sert la ligne de texte qui en a besoin. Le titre n'en a aucun besoin, il
mesure 11,4 sur l'eau nue. C'est le BAS du bloc qui en demande : le fond y passe
de l'eau calme (ecart-type 3) a l'ecume et au sable (ecart-type 28 a 32), et le
numero, qui est du texte clair sans aplat, y tombait sur une ligne de vague
brillante. La couche large a .15 tient la cohesion du bloc, la couche basse a
.42 sert le slogan et la ligne d'action. On reste tres loin du .94 de la version
precedente : l'eau, les pontons du fond et le sable gardent leur matiere. */
.hero .hero-media::after{content:"";position:absolute;inset:0;
background:
radial-gradient(ellipse 40% 30% at 74% 66%,
rgba(237,231,219,.42) 0%, rgba(237,231,219,.28) 52%, rgba(237,231,219,0) 100%),
radial-gradient(ellipse 50% 62% at 74% 48%,
rgba(237,231,219,.15) 0%, rgba(237,231,219,.10) 55%, rgba(237,231,219,0) 100%)}
/* Le bandeau a sa propre grille, plus large que --wrap (1180) qui gouverne le
reste de la page. La photo est en pleine largeur : un texte ramene a 1180 au
milieu d'une image de 1920 se lit comme une boite posee dessus. */
.hero-wrap{grid-row:2;width:100%;max-width:min(100% - 2 * var(--gut-hero),1640px);
margin-inline:auto}
.hero-text{margin-left:51.5%;container-type:inline-size}
/* La coupe en deux lignes ne tient que si la police fait la largeur prevue. Tant
que Source Serif 4 n'est pas arrivee, le titre est compose en Georgia, qui porte
un oeil plus grand : mesure au navigateur, 0,49 de hauteur d'x contre 0,46, donc
6 % plus large a corps egal. A 1440 px cela faisait 640 px de ligne pour 639 px
de colonne, un pixel de trop, et le titre partait sur trois lignes en laissant
« commençait » seul le temps du chargement. font-size-adjust ramene le repli a
l'oeil de la police voulue ; sur Source Serif 4 elle-meme, le rapport valant sa
propre valeur, elle ne change rien. Un navigateur qui ne la connait pas l'ignore
et retrouve le comportement d'avant. */
/* 21/10, Valérie: « Et si la rencontre commençait autrement ? » in red, the exact
red of her logo. Large text, so 3:1 is the bar: 4.66:1 on --paper under the
photo on phones, about 4.5:1 over the light water on desktop. Was --taupe. */
/* 22/10, Valérie: « changer la police de "Et si la rencontre commençait
autrement" par la police utilisée pour Label d'Excellence ». Same family, but
the label is set small, so the browser picks the sturdy text cut of Source
Serif 4 (optical size axis), while at 69 px it picked the thin display cut.
The optical size is pinned to the label's and the weight follows it (500).
That cut is wider: 9.8cqw put « commençait autrement ? » on two lines, 9cqw is
the limit measured at 1600 px, 8.8cqw keeps a margin. The floor drops to
2.1rem: at 2.4rem the column of a 920 px window (398 px) put « autrement ? »
on a third line, which the 2.6rem floor of the display cut already did. */
/* 23/10, Lucas: « le titre sur la home page est trop gras ». Same cut (opsz
20, her choice of 22/10), weight 400 like every banner title. */
.hero h1{color:var(--logo-red);font-weight:400;font-size-adjust:.46;
font-variation-settings:"opsz" 20;
margin:0 0 clamp(.9rem,.7rem + .55vw,1.25rem);
font-size:clamp(2.1rem,.2rem + 3.2vw,4.4rem);
font-size:clamp(2.1rem,8.8cqw,4.4rem);
line-height:1.02;letter-spacing:-.01em}
.hero h1 .l{display:block}
/* 23/10, same request: the slogan and the button are empty since 21/10, so the
title is the last line of the block and its bottom margin was a blank under it,
19 px that pushed it off the middle. Whatever closes the block drops its margin.
Desktop only: under 900 px the text sits below the photo, not on it. */
@media (min-width:901px){
.hero-text > :last-child{margin-bottom:0}
}
/* Le slogan est sa marque, mot pour mot, et il reste dans son rouge. Ce qui change
est son rang : il quitte la serif du titre pour la sans du corps de texte et
descend a 20 px. Deux titres serif l'un sous l'autre se disputaient le regard ;
le changement de famille suffit a le mettre au second plan sans rien lui oter. */
/* 15/09: italic, at her request. On her current site the slogan is set in a script
face, and she finds the upright version too stiff. The real Figtree italic is
loaded in polices.css: a roman slanted by the browser shows. */
.hero .baseline{margin:0 0 clamp(1.6rem,1.2rem + 1.1vw,2.2rem);padding:0;border:0;
font-family:Figtree,system-ui,sans-serif;font-weight:500;font-style:italic;
font-size:clamp(1.12rem,1.02rem + .3vw,1.3rem);
line-height:1.55;color:var(--accent);max-width:36ch;text-wrap:pretty}
.hero-action{display:flex;align-items:center;justify-content:center;
gap:.9rem clamp(1.5rem,.9rem + 1.9vw,2.8rem);flex-wrap:wrap}
/* Le bouton du bandeau ne reprend pas .btn : celui-ci porte le bleu, un rayon de
6 px et une bordure d'un pixel qui ne servent qu'a le detacher du creme. Ici il
vit sur une photo, il lui faut un aplat plein et un rayon presque nul. */
.hero-btn{display:inline-flex;align-items:center;justify-content:center;
min-height:52px;padding:.95rem clamp(1.6rem,1.05rem + 1.5vw,2.4rem);
background:var(--taupe);color:var(--paper);border:1px solid var(--taupe);border-radius:3px;
font-weight:600;font-size:1.06rem;line-height:1.2;letter-spacing:.005em;
text-decoration:none;white-space:nowrap;
transition:background .18s ease,border-color .18s ease}
/* Meme grammaire que les boutons du reste du site : le survol ASSOMBRIT, l'appui
ECLAIRCIT vers le bleu exact du logo. Les deux etats partent en sens contraire et
ne peuvent pas etre confondus. Un survol qui passait directement du brun au bleu
avait ete essaye : le saut de teinte se lisait comme un changement de bouton. */
/* 21/10: the hover darkens the taupe instead of going to a near-black brown.
#4A433B is --taupe darkened about 22 %; --paper on it: 7.91:1. */
@media (hover:hover){.hero-btn:hover{background:#4A433B;border-color:#4A433B}}
.hero-btn:active{background:var(--brand);border-color:var(--brand);transform:translateY(1px)}
/* 12/09 : les six regles « .hero-tel » sont retirees avec l'element qu'elles
habillaient. Elle a demande a ce que son portable ne soit plus pose a cote du
bouton, qui reste donc seul et centre. Le numero n'a pas disparu du site pour
autant : il tient la barre du haut, le pied de page et la barre d'action fixe
du mobile, ou il est un chemin de contact et non une invitation a appeler. */
.hero a:focus-visible{outline:3px solid var(--taupe);outline-offset:3px} /* 21/10: was --deep */
/* Entre 900 et 1180 px, la tentation est de reculer le bloc pour donner du corps
au titre. Essaye a 44 % le 09/09 et rejete a la mesure : la rambarde du ponton
monte jusqu'a 44 % de la largeur a 1024 px, le slogan rouge tombait dessus et
son pire point passait de 5,6 a 1,96, avec onze cellules sous le seuil. La
colonne reste donc a sa place et c'est le titre qui cede, ce qui ne se voit pas.
Seuls les ecarts verticaux se resserrent, le bandeau y etant plus court. */
@media (max-width:1180px){
.hero h1{margin-bottom:.85rem}
.hero .baseline{margin-bottom:1.7rem}
}
/* Sous 900 px la photo cesse d'etre un fond et devient une image a part entiere,
dans son propre cadrage carre ou le couple est centre et grand. Le texte passe
dessous, sur le creme : du texte sur une image etroite redemanderait un voile,
donc le probleme qu'on vient de retirer. Le fondu par le bas soude les deux, de
sorte que le bloc se lise comme la suite de la photo et non comme une seconde
section. */
@media (max-width:900px){
.hero{display:block;grid-template-rows:none;padding-block:0;min-height:0}
/* La hauteur de l'image est ce qui decide si le bouton du bandeau passe ou non
SOUS la barre d'action fixe, defaut deja releve dans pilotage/41-CONVERSION.md.
Elle n'est donc pas une fraction de la fenetre, elle est CE QUI RESTE : la vue
moins l'en-tete collant, le bloc de texte et la barre, soit 27 rem. Une valeur
en vh seule ignorait ce budget et coupait le bouton des 600 px de vue, verifie
a la capture puis au releve des boites.
Le plancher de 11 rem n'est pas un arrondi : sous cette hauteur, la photo en
3:2 recadree en `cover` sur 375 px de large passe au-dela de 2,1 de rapport et
commence a rogner la tete et les pieds du couple. En dessous de 570 px de vue,
c'est donc la PHOTO qui gagne et le bouton qui passe sous la barre : la barre
porte deja « Appeler » et « Etre rappele », l'action n'est jamais hors de
portee, alors qu'un couple tranche ne se rattrape pas. */
.hero .hero-media{position:relative;inset:auto;z-index:auto;width:100%;
height:clamp(11rem,min(38vh,calc(100svh - 27rem)),19rem);
/* Pas de background-position ici, et c'est voulu. Sur le site l'attribut de
style pose background-position:var(--hero-pos) depuis le champ, et un
style en ligne bat une media query : la valeur ecrite ici ne serait
jamais appliquee, elle ne ferait que faire mentir la maquette. Elle n'a
de toute facon aucun effet : l'image en 3:2 dans une bande de rapport 1,47
est rognee sur les COTES, jamais en hauteur. */
background-image:url("../../img/hero-pier-light-mobile.jpg")}
.hero .hero-media::after{background:linear-gradient(180deg,
rgba(237,231,219,0) 56%,rgba(237,231,219,.45) 80%,var(--paper) 100%)}
.hero-wrap{max-width:none;padding-inline:var(--gut);
padding-block:1.35rem clamp(2rem,1.4rem + 2vw,3rem)}
.hero-text{margin-left:0}
/* Le troisieme terme borne le titre a la HAUTEUR de la fenetre et non a sa
largeur, comme les rampes du 31/08 ailleurs dans la feuille. Sur une vue de
497 px, frequente sur un Android de 640 px une fois les barres du navigateur
deduites, un titre de 38 px sur deux lignes mangeait un cinquieme de l'ecran.
Il ne mord qu'en dessous de 540 px de vue, la reference du telephone courant
ne bouge donc pas. */
.hero h1{font-size:var(--h1);margin-bottom:.7rem;
line-height:1.04}
.hero .baseline{font-size:clamp(1.06rem,1rem + .3vw,1.18rem);
line-height:1.5;max-width:34ch;margin-bottom:1.45rem}
}
/* Telephone a ecran court, un iPhone SE ou un Android de 600 px une fois les
barres du navigateur deduites, ou un iPhone SE de 667 px en plein ecran :
l'en-tete, la photo et les quatre fragments ne
tiennent pas au-dessus de la barre d'action fixe, et le bouton du bandeau
passait dessous. La photo cede la premiere, elle reste le fragment le plus
compressible, puis les ecarts. Mesure : bas de la ligne d'action a 534 px pour
une barre qui commence a 536 px. */
@media (max-width:900px) and (max-height:700px){
.hero-wrap{padding-block:1rem 1.6rem}
.hero h1{margin-bottom:.55rem}
.hero .baseline{margin-bottom:1.15rem}
}
/* Sa vidéo de présentation, sous son texte et avant le label, demandée le 24/09.
Bornée en largeur : dans la colonne de texte du bloc fondatrice, une vidéo
pleine largeur pèserait plus que le portrait qui lui fait face. */
.founder-video{margin-top:1.8rem;max-width:30rem}
/* 08/10, « trop gros sur téléphone »: the home's two smaller titles come down with the phone title
scale, the desktop keeps their values. */
@media (max-width:900px){
.s-head-tem h2{font-size:clamp(1.4rem,1.1rem + 1.05vw,1.9rem)}
.yt-bloc h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.65rem)}
}
/* 12/10, her phone screenshot of the banner: « plus d'espace entre les 2 phrases »
and the slogan « en même grosseur de caractère » as the title. Phone only, where
she saw it: on a desktop the slogan sits on the photo, and at the title's 76 px
it would run onto two lines and over the railing, where its contrast was
measured to fail (see the 1180 px block above). It keeps its red italic. */
@media (max-width:900px){
.hero h1{margin-bottom:1.5rem}
.hero .baseline{font-size:var(--h1);line-height:1.15;max-width:none}
}
@media (max-width:900px) and (max-height:700px){
.hero h1{margin-bottom:1.1rem}
}
/* 23/10: at the end of the row the right arrow opens the channel (theme.js): it
takes the logo red, so it reads as the way out to YouTube, not one more step. */
.yt-fl.to-channel{background:var(--logo-red);border-color:var(--logo-red);color:#fff}
@media (hover:hover){.yt-fl.to-channel:hover{background:#6f1515;border-color:#6f1515;color:#fff}}
/* 24/10, Lucas: « sur mobile "et si la rencontre commençait autrement" on met le
texte sur l'image en bas, on enlève l'effet flou également de l'image ». The
rule of every other banner (base.css, .hero-title-only): the title sits at the
bottom of the photo, white on a veil that rises from below, and the cream fade
that melted the photo into the page goes. The slogan and the button stay under
the photo. The wrapper boxes dissolve (display:contents) so the title can share
the photo's grid cell; the photo grows by about the title's height, which no
longer sits under it, so the button keeps its place above the action bar. */
@media (max-width:900px){
.hero{display:grid;grid-template-columns:minmax(0,1fr)}
.hero .hero-media{grid-area:1/1;
height:clamp(16rem,min(50vh,calc(100svh - 22rem)),24rem)}
.hero .hero-media::after{background:linear-gradient(0deg,rgba(12,14,16,.78) 0%,rgba(12,14,16,.66) 30%,rgba(12,14,16,.25) 50%,rgba(12,14,16,0) 66%)}
.hero-wrap,.hero-text{display:contents}
.hero h1{grid-area:1/1;align-self:end;position:relative;z-index:1;color:#fff;
margin:0;padding:0 var(--gut) clamp(1.6rem,1.2rem + 2vw,2.2rem)}
/* With no slogan nor button under it, the photo still needs air before the
next section, which the text block used to give. */
.hero{padding-bottom:clamp(1.4rem,1rem + 2vw,2.2rem)}
.hero .baseline{margin:1.35rem var(--gut) 1.45rem}
.hero-action{margin:0 var(--gut) clamp(2rem,1.4rem + 2vw,3rem)}
}
@media (max-width:900px) and (max-height:700px){
.hero .baseline{margin-block:1rem 1.15rem}
.hero-action{margin-bottom:1.6rem}
}
/* 24/10: the segments band is white now (home-segments.php). The row hover paints
var(--surface), the very white of the band: on it the rows take the cream. */
@media (hover:hover){.band-white .seg a:hover{background:var(--paper)}}
/* 24/10, Lucas: « le titre des liens (jeunes célibataires etc.) en rouge, pas que
au survol », as Valérie asked by mail. The bordeaux reads on the white: 8.6:1. */
.band-white .seg .s-title{color:var(--accent)}
/* 24/10, Valérie: « sur la vidéo Evelyne et Philippe, réduire le noir en bas ».
The caption band covered 38 % of the thumbnail on a 390 px phone (76 of 197 px):
the padding goes from 1.3 rem to about .5 rem and, on the phone, the text drops
to 1.05 rem. The veil darkens a step (.55 -> .65) because a thinner band sits
closer to the light parts of the image: the cream text keeps 5:1 even over a
white frame. Only this video; the track cards keep the base.css caption. */
.tem-preview .v-cap{padding:.55rem 1.1rem .6rem;line-height:1.25;background:rgba(12,14,16,.65)}
@media (max-width:700px){
.tem-preview .v-cap{font-size:1.05rem;padding:.4rem .8rem .45rem}
}
/* 24/10, Valérie: « un peu trop d'espace avant NOUS SUIVRE ». The track kept
1.2 rem under the cards and the social block added 1.6 to 2.4 rem on top of it.
Both shrink: .5 rem is just the room the track's focus ring (3 px, offset
4 px) needs, and the block sits .6 to 1 rem under it.
Most of the gap was not spacing, though: the track is as tall as its tallest
card, and the one card with a summary (« Mes adhérents témoignent », the last of
six) added about 60 px of void under the five others, the ones she sees. The
summary goes from the track; the title still names each video. */
.yt-track{padding-bottom:.5rem}
.yt-track .yt-meta{display:none}
.yt-foot-social{margin-top:clamp(.6rem,.4rem + .6vw,1rem)}
/* 24/10, Valérie: « NOS AGENCES, mettre en rouge Lyon, Grenoble, Voiron, Bourgoin,
Savoie et Haute-Savoie ». The bordeaux of the town names on /nos-agences/.
On the cream tile (--paper) it reads at 7.5:1, on the hover tile (--surface)
at 8.6:1. The hover used to turn the name red; it now underlines it. */
.cities .city .cn{color:var(--accent)}
@media (hover:hover){.cities .city:hover .cn{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}}
/* 24/10, Valérie: « sur le Mac, la partie fondatrice est en beige clair au lieu
d'être en blanc; les personnes que nous accompagnons, pareil; vue et entendue
dans les médias, pareil ». --surface #FAF7F1 reads beige on her screen: the
two white bands (home-founder.php, home-segments.php) and the press band with
the section that holds it (parts/callback.php) go to a true white, here only.
The hovers inside still show: the segment rows take --paper (1.23:1 against the
white, they were 1.15:1 before), the form fields keep their --paper fill. */
.band-white{background:#fff}
/* 25/10, Lucas: « la section Vue et entendue dans les médias doit être en beige,
et du coup Nos agences en fond blanc ». The press band and the callback form
under it are one section (parts/callback.php): it takes the page beige, and the
agencies below go white (band-white, home-agencies.php). The form fields lose
their --paper fill on --paper: they go white, as the questionnaire's would. */
.convert{background:var(--paper)}
/* 25/10, later, Lucas: the press box itself goes white (« juste l'encart »), on
the beige section. */
.medias{background:#fff}
.convert .field input,.convert .field select,.convert .field textarea,.convert .choice span{background:#fff}
/* 25/10, Lucas: « Ils témoignent de leur bonheur sur fond blanc, puis Ils ont
accepté de partager leur expérience fond beige, puis 14 ans de vidéos [...] fond
blanc ». The section goes white like the founder's; the strip of figures takes
the page beige, painted edge to edge by the same shadow as before. */
.tem-band{background:#fff}
.tem-band .tstats{background:var(--paper);box-shadow:0 0 0 100vmax var(--paper)}
/* 28/10, Valérie: on the phone the home opens on the founder, not on the couple
(parts/home-hero.php). Hidden the way a skip link is, not with display:none,
so the h1 is still read. The photo layer itself is display:none, which is what
keeps the browser from downloading it. */
@media (max-width:700px){
.hero.hero-desk-only{position:absolute;width:1px;height:1px;min-height:0;padding:0;
margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hero.hero-desk-only .hero-media{display:none}
}