` contenant des `
` quand elle est coupée en plusieurs.
Les deux marchent : aucune de ses règles ne dépend de la balise. */
/* Le titre d'une mise en avant. Un vrai `
` : il coiffe une liste, il
structure la page, et un lecteur d'écran doit pouvoir s'y rendre. Ce qui ne
contredit pas ce qui est dit plus haut — c'est le PARAGRAPHE mis en avant qui
ne doit pas devenir un titre ; celui-ci en est un pour de bon.
Taille en `em` et non en rem : elle se règle sur le corps du bloc, qui n'est
pas le même en rose et en violet. Il reste un peu plus grand que les phrases
qu'il annonce, et il prend la couleur du bloc par héritage.
⚠️ CETTE RÈGLE A ÉTÉ PERDUE PUIS REMISE le 23 août 2026. En retirant les
puces de la liste, la suppression a emporté le bloc voisin sans qu'on s'en
aperçoive : le titre s'est retrouvé sans soulignement ni taille propre, et
c'est Maryline qui l'a vu. Leçon : supprimer un bloc de style par sa borne
de fin, c'est risquer d'emporter ce qui s'est glissé entre-temps. */
.attention__titre {
margin: 0 0 .7em;
font-size: 1.05em;
font-weight: 600;
line-height: 1.3;
color: inherit;
/* Souligné. Un vrai soulignement de texte, et non un filet posé sous le bloc :
il suit les mots, donc il s'arrête où le titre s'arrête, et il se replie
avec lui quand la place manque. Un `border-bottom` aurait tracé une ligne
d'un bord à l'autre de l'encadré, ce qui aurait fait séparateur et non
soulignement.
Épaisseur et écart sont en `em` pour suivre le corps du titre, qui n'est
pas le même dans les deux couleurs de bloc. L'écart évite que le trait ne
coupe les jambages des p, des j et des q. */
text-decoration: underline;
text-decoration-thickness: .05em;
text-underline-offset: .22em;
}
/* Les phrases d'une mise en avant, une par ligne.
⚠️ Elles ont porté une PUCE — un disque plein en `currentColor` — retirée le
23 août 2026 à la demande de Maryline. Le retrait n'est pas seulement
cosmétique : le retrait de gauche (`padding-left`) et le disque en `::before`
allaient ensemble, et laisser l'un sans l'autre aurait décalé le texte sans
raison visible.
La liste reste une VRAIE liste dans le HTML, sans marqueur affiché : un
lecteur d'écran continue d'annoncer « deux éléments », ce qui est exact. */
.attention__liste {
list-style: none;
margin: 0;
padding: 0;
}
.attention__liste li {
margin-bottom: 1.15em;
}
.attention__liste li:last-child { margin-bottom: 0; }
/* ⚠️ Le corps a été réduit le 23 août 2026 — « diminuer la taille de la police
pour que le bloc prenne moins de place ». Il passe de 1,7 à 1,25 rem au
maximum, soit un quart de moins. Avec la phrase supprimée et les puces
retirées, le bloc occupe environ deux fois moins de hauteur qu'avant.
Il reste plus grand que le texte courant, ce qui est le but : c'est une mise
en avant. Le titre suit, puisqu'il est dimensionné en `em` sur ce corps. */
.attention--violet {
--attention-fond: #ece9f9;
--attention-encre: #6255c6;
--attention-corps: clamp(1.05rem, 2.2vw, 1.25rem);
}
/* Une précision qu'on veut voir d'un coup d'œil, centrée sur la page.
Employée sur Guidance pour dire la forme de la séance. Elle n'entre pas dans
la famille `.attention` juste au-dessus, et volontairement : celle-ci pose un
panneau coloré, aligné à gauche, pour du texte suivi. Ici il s'agit d'une
ligne seule, sans fond ni encadrement, posée au milieu de la colonne — ce
n'est pas le même objet, et deux blocs `.attention` sur cette page suffisent
déjà.
Le bleu est celui de la page : #1f5f8c est le bleu ciel de Guidance
(`--teinte: #cfe2f0`) descendu jusqu'à porter du texte. Mesuré à 6,8:1 sur
le panneau blanc et 5,1:1 sur la teinte de la page, donc lisible aux deux
endroits si elle devait servir hors du panneau.
Serif comme les autres mises en avant : sur cette page, tout ce qui doit
ressortir change de police, pas seulement de couleur. */
.precision {
margin-block: clamp(1.75rem, 4vw, 2.5rem);
text-align: center;
font-family: var(--titre);
font-size: clamp(1.25rem, 2.8vw, 1.55rem);
line-height: 1.4;
color: var(--precision-encre, #1f5f8c);
}
/* La même précision sur Écoute bienveillante, dans le violet de sa page.
Le principe est le même que pour le bleu de Guidance : la teinte du fond
(#dedbf5) descendue jusqu'à porter du texte.
⚠️ Elle a suivi deux fois. Assombrie le 23 août quand le panneau blanc a été
retiré — elle valait #6255c6, mesurée sur du blanc, et tombait à 4,28:1 posée
à même la teinte. Puis retournée au bleu le 24, avec la page, et conservée
telle quelle quand celle-ci a foncé : #2d4090 rend 8,1:1 sur le voile du texte
et 5,2:1 à nu sur la teinte — plus juste qu'avant, mais au-dessus du seuil.
⚠️ La classe s'appelle encore `--violet` et ne l'est plus. Elle n'a pas été
renommée pour ne pas disperser la modification dans le HTML. C'est exactement
le genre de règle qu'un changement de fond casse en silence. */
.precision--violet { --precision-encre: #2d4090; }
/* La même précision sur Contact défunt. Sa page est la seule sombre du site
(`--teinte: #2b4157`), et sa teinte pourrait donc porter du texte telle
quelle — 10,5:1 sur le panneau blanc. Mais à cette profondeur elle se lit
comme de l'encre et non comme une couleur, là où le bleu de Guidance et le
violet d'Écoute bienveillante se voient d'emblée. Celle-ci est donc éclaircie
à teinte égale — 210° dans les deux cas — jusqu'à 6,6:1, ce qui la laisse
franchement bleue et largement lisible. */
.precision--defunt { --precision-encre: #376182; }
/* --------------------------------------------------------------------------
13. Encart d'appel au contact
-------------------------------------------------------------------------- */
.appel {
position: relative;
overflow: hidden;
border-radius: var(--arrondi);
/* Largeur et rembourrage réduits sur les sept pages qui portent un encart.
Il vivait dans deux colonnes différentes selon la page — 1120 px sur
l'accueil, 760 px partout ailleurs — donc à taille de police égale il ne
faisait pas du tout le même effet. Il a maintenant sa propre largeur, la
même partout, et ne dépend plus de ce qui l'entoure. */
width: min(720px, 100%);
margin-inline: auto;
padding: clamp(1.8rem, 5vw, 2.6rem) clamp(1.3rem, 4vw, 2.4rem);
background: var(--degrade);
color: var(--blanc);
text-align: center;
box-shadow: var(--ombre-levee);
}
.appel h2 { color: var(--blanc); }
.appel p { color: rgba(255, 255, 255, .92); }
.appel .bouton--trait {
background: var(--blanc);
border-color: transparent;
color: var(--magenta);
}
/* --------------------------------------------------------------------------
14. Pied de page
-------------------------------------------------------------------------- */
.pied {
background: var(--fond-creux);
border-top: 1px solid var(--trait);
padding-block: 3rem 2rem;
font-size: .92rem;
color: var(--encre-doux);
}
.pied__grille {
display: grid;
gap: 2rem;
}
@media (min-width: 760px) {
.pied__grille { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
}
.pied h3 {
font-family: var(--texte);
font-size: .78rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--encre);
margin-bottom: 1rem;
}
.pied__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pied__liens a { color: var(--encre-doux); text-decoration: none; }
.pied__liens a:hover { color: var(--magenta); }
.pied__bas {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--trait);
font-size: .84rem;
color: var(--encre-tres-doux);
text-align: center;
}
/* --------------------------------------------------------------------------
15. Marqueur de contenu provisoire
--------------------------------------------------------------------------
Tout bloc .provisoire est un texte d'attente, à remplacer par le vrai
contenu de Maryline. Pour les retrouver tous : grep -rn "provisoire" .
Quand le site sera prêt, il ne doit plus rester une seule occurrence.
-------------------------------------------------------------------------- */
.provisoire {
position: relative;
border-left: 3px dashed var(--rose);
background: rgba(250, 223, 233, .3);
border-radius: 0 var(--arrondi-doux) var(--arrondi-doux) 0;
padding: 2.4rem 1.3rem 1.3rem;
margin-block: 1.5rem;
}
.provisoire::before {
content: "Texte provisoire — à remplacer";
position: absolute;
top: .7rem;
left: 1.3rem;
font-size: .7rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--magenta);
}
.provisoire > :last-child { margin-bottom: 0; }
/* Bandeau global signalant que le site n'est pas prêt à être mis en ligne.
À supprimer (dans les 8 pages) le jour de la mise en production. */
.bandeau-chantier {
background: var(--encre);
color: var(--blanc);
text-align: center;
font-size: .82rem;
padding: .6rem 1.25rem;
line-height: 1.5;
}
.bandeau-chantier strong { color: var(--peche); }
/* Rubriques masquées.
« Nettoyage énergétique » et « Passage de vie » ont été retirés de
l'affichage le 20 août 2026 sans que rien ne soit supprimé : les deux pages
existent toujours, avec leurs textes, leurs visuels et leurs tarifs ; tous
les endroits qui les nomment portent simplement cette classe. Retirer le mot
`masque` de l'attribut `class` les fait réapparaître tels quels, et remettre
`--colonnes:4` sur la grille des cartes de l'accueil rétablit la ligne de
quatre. Rien d'autre n'est à défaire.
`!important` parce que les éléments masqués ont chacun leur propre règle
d'affichage (`.carte` est en `display: flex`), qui l'emporterait sinon. */
.masque { display: none !important; }
/* --------------------------------------------------------------------------
16. Agenda de réservation (page Tarifs)
--------------------------------------------------------------------------
Le seul bloc du site qui parle au serveur. Il est entièrement construit par
le JavaScript — voir la section 5 de assets/site.js — et n'existe donc que
sur la page Tarifs.
Le principe de mise en forme : **des pastilles qu'on choisit**, jamais de
liste déroulante. Sur un téléphone, une liste déroulante ouvre un panneau
qui cache la page, et il faut deux gestes pour voir ce qu'on peut prendre.
Ici tout est visible d'un coup d'œil, et un doigt suffit.
⚠️ Les étapes 2 à 5 sont `hidden` au départ et le script les révèle une à
une. C'est volontaire : cinq questions posées ensemble découragent, la même
suite posée pas à pas se remplit. `[hidden]` est forcé plus bas parce que
`fieldset` a son propre `display`, qui l'emporterait.
-------------------------------------------------------------------------- */
.reservation[hidden],
.reservation__etape[hidden],
.reservation__repli[hidden] { display: none !important; }
.reservation {
margin-top: 1.8rem;
}
/* Chaque étape est une carte posée sur le fond de la page. Le `fieldset` perd
la bordure et les marges que les navigateurs lui donnent d'office. */
.reservation__etape {
margin: 0 0 1rem;
padding: clamp(1.1rem, 3.4vw, 1.6rem);
border: 1px solid var(--trait);
border-radius: var(--arrondi);
background: rgba(255, 255, 255, .78);
box-shadow: var(--ombre-douce);
}
.reservation__legende {
display: flex;
align-items: center;
gap: .6rem;
padding: 0;
margin-bottom: 1rem;
font-family: var(--titre);
font-size: 1.15rem;
font-weight: 600;
color: var(--encre);
}
/* Le numéro de l'étape, dans une pastille au dégradé du site. */
.reservation__numero {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 1.7rem;
height: 1.7rem;
border-radius: 50%;
background: var(--degrade);
color: var(--blanc);
font-family: var(--texte);
font-size: .85rem;
font-weight: 700;
}
.reservation__choix {
display: flex;
flex-wrap: wrap;
gap: .6rem;
}
/* Une pastille de choix — prestation, durée, heure. Un `button` et non un
`input[type=radio]` : le clavier les parcourt aussi bien, et on garde la
liberté d'y écrire deux lignes (le nom de la séance et son prix). */
.pastille {
flex: 0 1 auto;
padding: .7rem 1.15rem;
border: 1px solid #d9cfd6;
border-radius: 999px;
background: var(--blanc);
color: var(--encre);
font: inherit;
font-size: .95rem;
line-height: 1.35;
text-align: center;
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pastille:hover { border-color: var(--magenta); transform: translateY(-1px); }
.pastille:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
/* Le choix retenu. ⚠️ Le dégradé est posé en `background-image` et la couleur
de repli en `background-color` : si le dégradé n'était pas compris, le texte
blanc resterait lisible sur le violet plutôt que de disparaître sur du blanc. */
.pastille[aria-pressed="true"] {
border-color: transparent;
background-color: var(--violet);
background-image: var(--degrade);
color: var(--blanc);
box-shadow: 0 4px 14px rgba(196, 95, 196, .3);
}
.pastille__prix {
display: block;
margin-top: .15rem;
font-size: .82rem;
opacity: .78;
}
/* Les heures : une grille régulière plutôt qu'un flot, parce qu'elles font
toutes la même largeur et qu'un flot les laisserait en escalier. */
.reservation__heures {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
gap: .5rem;
}
.reservation__heures .pastille { padding: .6rem .4rem; }
/* -------------------------------- calendrier ---------------------------- */
.calendrier {
max-width: 26rem;
margin: 0 auto;
}
.calendrier__barre {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .9rem;
}
.calendrier__mois {
flex: 1 1 auto;
text-align: center;
font-family: var(--titre);
font-size: 1.05rem;
font-weight: 600;
color: var(--encre);
}
.calendrier__fleche {
flex: 0 0 auto;
width: 2.4rem;
height: 2.4rem;
border: 1px solid #d9cfd6;
border-radius: 50%;
background: var(--blanc);
color: var(--encre);
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
}
.calendrier__fleche:hover:not(:disabled) { border-color: var(--magenta); }
.calendrier__fleche:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
.calendrier__fleche:disabled { opacity: .3; cursor: default; }
.calendrier__jours,
.calendrier__grille {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: .3rem;
}
.calendrier__jours {
margin-bottom: .35rem;
font-size: .75rem;
letter-spacing: .04em;
text-align: center;
text-transform: uppercase;
color: var(--encre-tres-doux);
}
/* Une case du calendrier. Les cases vides du début de mois sont des ``
sans classe : elles occupent la place sans rien afficher. */
.calendrier__case {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid transparent;
border-radius: var(--arrondi-doux);
background: var(--blanc);
color: var(--encre);
font: inherit;
font-size: .95rem;
cursor: pointer;
transition: border-color .15s ease, transform .15s ease;
}
.calendrier__case:hover { border-color: var(--magenta); transform: translateY(-1px); }
.calendrier__case:focus-visible { outline: 2px solid var(--magenta); outline-offset: 1px; }
/* Une journée sans place. Éteinte, pas retirée : une case absente déplacerait
toutes les suivantes et le mois deviendrait illisible. */
.calendrier__case--pleine {
background: transparent;
color: var(--encre-tres-doux);
cursor: default;
opacity: .45;
}
.calendrier__case--pleine:hover { border-color: transparent; transform: none; }
.calendrier__case[aria-pressed="true"] {
background-color: var(--violet);
background-image: var(--degrade);
color: var(--blanc);
border-color: transparent;
box-shadow: 0 4px 14px rgba(196, 95, 196, .3);
}
/* ------------------------------ récapitulatif --------------------------- */
.reservation__recapitulatif {
margin: 0 0 1.2rem;
padding: .85rem 1.1rem;
border-left: 3px solid var(--magenta);
border-radius: var(--arrondi-doux);
background: var(--fond-creux);
font-size: .98rem;
line-height: 1.55;
color: var(--encre);
}
.reservation__recapitulatif strong { font-weight: 600; }
.reservation__champs { max-width: 26rem; }
.reservation__note {
margin: 1rem 0 0;
font-size: .85rem;
line-height: 1.55;
color: var(--encre-doux);
}
/* --------------------------------- messages ------------------------------ */
/* La zone reste dans la page même vide : un élément `aria-live` ajouté après
coup n'est pas annoncé par tous les lecteurs d'écran. Même raison que pour
`.formulaire__reponse` de la page Contact. */
.reservation__message {
margin: 1.2rem 0 0;
padding: 0;
font-size: .95rem;
line-height: 1.6;
}
.reservation__message:empty { display: none; }
.reservation__message--erreur,
.reservation__message--succes {
padding: .9rem 1.15rem;
border-radius: var(--arrondi-doux);
}
.reservation__message--erreur {
border: 1px solid rgba(198, 40, 40, .25);
background: #fdf1ef;
color: #a03024;
}
.reservation__message--succes {
border: 1px solid rgba(113, 102, 210, .25);
background: var(--violet-pale);
color: var(--encre);
}
.reservation__attente {
margin: 1rem 0 0;
font-size: .92rem;
color: var(--encre-doux);
}
/* ---------------------------------- repli -------------------------------- */
/* Affiché tant que le script n'a pas pris la main : en `file://`, sans
JavaScript, ou si le serveur ne répond pas. Il est dans la page dès le
départ et c'est le script qui le retire — il n'y a donc aucun instant où la
personne ne voit rien. */
.reservation__repli {
margin-top: 1.8rem;
padding: clamp(1.1rem, 3.4vw, 1.6rem);
border: 1px dashed #d9cfd6;
border-radius: var(--arrondi);
background: rgba(255, 255, 255, .7);
color: var(--encre-doux);
}
.reservation__repli p { margin: 0; }
/* L'avis de paiement de la page Tarifs, dans la rubrique du titre.
⚠️ Pas de dégradé en fond avec du texte blanc dessus, alors que c'est le
réflexe sur ce site : mesuré, le blanc ne tient pas sur les deux premières
couleurs du dégradé — 1,58:1 sur le pêche et 2,35:1 sur le rose, quand il en
faut 4,5. La phrase commencerait lisible et s'effacerait en son milieu.
Le dégradé est donc réduit à un filet, sur le bord gauche, où il ne porte
aucun texte ; la phrase, elle, est en encre du site sur un fond très clair —
10,2:1. La signature visuelle est gardée, la lisibilité aussi.
Le fond est légèrement translucide parce que la tête de cette page est une
photographie de nuages : un blanc plein y ferait une étiquette collée. */
.avis-paiement {
position: relative;
max-width: 34rem;
margin: 1.6rem auto 0;
padding: .9rem 1.15rem .9rem 1.5rem;
border: 1px solid rgba(113, 102, 210, .22);
border-radius: var(--arrondi-doux);
background: rgba(255, 251, 248, .9);
box-shadow: var(--ombre-douce);
font-size: 1rem;
font-weight: 600;
line-height: 1.55;
color: var(--encre);
}
/* Le filet dégradé du bord gauche. En `::before` plutôt qu'en `border-left` :
une bordure ne peut pas porter de dégradé, et `border-image` perdrait
l'arrondi du coin. */
.avis-paiement::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
border-radius: var(--arrondi-doux) 0 0 var(--arrondi-doux);
background: var(--degrade);
}
/* L'avis de règlement de l'étape 5, sous les champs.
Deux tons volontairement distincts : quand il y a quelque chose à payer, le
fond est légèrement teinté et le texte plus appuyé ; quand il n'y a rien à
payer — le contact défunt, seul cas — la phrase reste une note ordinaire.
L'écart de traitement est le message : la personne doit voir tout de suite
dans lequel des deux cas elle est. */
.reservation__paiement {
margin: 1rem 0 0;
padding: .8rem 1rem;
border-radius: var(--arrondi-doux);
background: var(--fond-creux);
font-size: .92rem;
line-height: 1.55;
color: var(--encre-doux);
}
.reservation__paiement--du {
border: 1px solid rgba(113, 102, 210, .25);
background: var(--violet-pale);
font-weight: 600;
color: var(--encre); /* 8,47:1 sur ce fond — mesuré */
}
/* La zone des boutons PayPal.
⚠️ Les boutons eux-mêmes sont dessinés par PayPal, dans une iframe, et leur
apparence ne se retouche pas depuis cette feuille : elle se règle par les
options `style` passées à `paypal.Buttons()` dans assets/site.js. Ici on ne
fait que leur ménager la place et poser la mention qui les accompagne. */
.reservation__paypal {
max-width: 26rem;
margin-top: 1.6rem;
}
.reservation__paypal[hidden] { display: none !important; }
/* La mention sous les boutons. Écrite en CSS et non dans le HTML : elle ne doit
apparaître que lorsque les boutons sont là, et disparaître avec eux — un
paragraphe écrit dans la page resterait visible pour le contact défunt, qui
ne paie rien d'avance. */
.reservation__paypal:not(:empty)::after {
content: "Paiement sécurisé par PayPal. Votre rendez-vous est enregistré "
"dès le règlement reçu, et vous recevez la confirmation par "
"courriel.";
display: block;
margin-top: .9rem;
font-size: .85rem;
line-height: 1.55;
color: var(--encre-doux);
}
/* La fiche du rendez-vous, sur la page d'annulation.
Même traitement que le récapitulatif de l'étape 5 de la réservation : c'est
la même information, à l'autre bout du parcours, et il n'y a aucune raison
qu'elle ne se présente pas de la même façon. */
.annulation__fiche {
max-width: 34rem;
margin: 1.6rem 0 0;
padding: 1.1rem 1.35rem;
border-left: 3px solid var(--magenta);
border-radius: var(--arrondi-doux);
background: var(--fond-creux);
font-size: 1.05rem;
line-height: 1.6;
color: var(--encre);
}
.annulation__fiche[hidden] { display: none !important; }
/* Le chapitre « Règlement et annulation », au bas de l'accueil.
⚠️ Il vit dans `.section--rose`, dont TOUTE la taille a été réduite le 23 août
2026 à la demande de Maryline (« diminuer la taille de toute cette partie »).
Des paragraphes à la taille ordinaire y seraient plus gros que la liste des
repères juste au-dessus, réglée à .95rem — d'où le calage ci-dessous.
⚠️ Les paragraphes ne sont pas justifiés ici, alors qu'ils le sont sur la page
Tarifs : la règle de justification ne regarde que les enfants DIRECTS de
`.etroit`, et ceux-ci sont dans ce bloc. C'est un effet de bord, mais il tombe
juste — trois paragraphes courts et justifiés ouvriraient des blancs. */
.reglement {
margin-top: clamp(2rem, 5vw, 2.8rem);
}
.reglement h2 { margin-bottom: .8rem; }
.reglement p {
font-size: .95rem;
line-height: 1.65;
}
.reglement .repere-seul { margin-top: 1.2rem; }
/* Une prestation pas encore ouverte, dans le choix de l'agenda — « Contact
défunt » depuis le 30 août 2026. Le pendant, en petit, de `.carte--bientot`
sur l'accueil et de `.en-attente` sur la page de la prestation.
⚠️ MÊME PRINCIPE QUE LA CARTE : le fond se grise, mais le TEXTE reste
lisible. Le réflexe serait une `opacity` sur toute la pastille ; mesuré, le
nom tomberait à 2,4:1. Ici le gris est le fond, et l'encre est seulement
adoucie — 5,9:1 pour le nom, 4,9:1 pour la mention.
⚠️ Pas de `pointer-events: none` : le bouton porte `disabled`, ce qui suffit
à l'écarter du clic ET du parcours au clavier, et l'annonce aux lecteurs
d'écran. `pointer-events` ne dirait rien à personne. */
.pastille--bientot {
background: #e9ebf0;
border-color: #d5d8e0;
color: #5a5470;
cursor: default;
}
.pastille--bientot:hover {
border-color: #d5d8e0;
transform: none;
}
.pastille__mention {
display: block;
margin-top: .15rem;
font-size: .78rem;
letter-spacing: .04em;
text-transform: uppercase;
color: #6b6480;
}
/* Une ligne de tarif dont la séance n'est pas encore ouverte — « Contact
défunt » depuis le 30 août 2026. Le troisième et dernier endroit qui porte
cette convention, après `.carte--bientot` (accueil) et `.en-attente` (la page
de la prestation).
⚠️ LE TARIF RESTE LISIBLE. C'est bien le prix qu'aura la séance quand elle
ouvrira, et le masquer laisserait croire qu'il n'est pas fixé. Seul le fond
se grise. Mesuré sur #eef0f4 : le nom rend 7,2:1, le prix 6,3:1, la durée
5,1:1 — tous au-dessus du seuil.
⚠️ Pas d'`opacity` sur la ligne entière : le prix tomberait à 2,3:1, et une
ligne de tarif illisible ne vaut pas mieux qu'une ligne absente. */
.tarif--bientot {
background: #eef0f4;
border-color: #dcdfe7;
box-shadow: none;
}
.tarif--bientot .tarif__nom { color: #4e4864; }
.tarif--bientot .tarif__prix { color: #57506d; }
.tarif--bientot .tarif__duree,
.tarif--bientot .tarif__note { color: #605a76; }
/* La mention elle-même, à côté du nom. Elle ne prend pas le dégradé du site :
ce n'est pas une bonne nouvelle à célébrer, c'est une information. */
.tarif__bientot {
padding: .15rem .6rem;
border: 1px solid #c9ccd6;
border-radius: 999px;
background: var(--blanc);
font-size: .75rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: #5f5975;
}
/* « (facultatif) », à côté du seul champ qui l'est — le téléphone de la page
Contact.
⚠️ On marque le champ FACULTATIF, et non les obligatoires. Quatre astérisques
sur cinq champs feraient un formulaire hérissé pour dire une exception ; une
mention sur le seul champ concerné dit la même chose sans bruit. */
.champ__option {
font-weight: 400;
font-size: .82rem;
color: var(--encre-tres-doux);
}
/* La phrase sur les arrangements, sous la règle d'annulation — sa demande du
30 août 2026 : « une autre phrase en rouge ».
⚠️ PAS le rouge du site. `#c62828`, celui de « Pas de connexion = pas de
paiement », rend 5,62:1 sur le panneau blanc de la page Tarifs mais tombe à
**4,32:1** sur le rose de l'accueil — sous le seuil de 4,5. La phrase vit aux
deux endroits, il lui faut donc un rouge qui tienne sur les deux : `#b3261e`
donne 6,54:1 et 5,02:1. C'est toujours un rouge franc, un cran plus sombre.
⚠️ Pas de fond, pas d'encadré, pas de gras. La règle juste au-dessus est déjà
en gras et centrée ; une seconde ligne aussi appuyée ferait deux avertissements
côte à côte, alors que celle-ci ouvre une porte au lieu d'en fermer une. Le
rouge suffit à la faire voir. */
.arrangement {
max-width: 46ch;
margin: 1.1rem auto 0;
text-align: center;
/* ⚠️ Grossie le 30 août 2026, de .95rem à 1.1rem. Elle passe ainsi au-dessus
du texte courant, sans atteindre la taille de la règle d'annulation
juste au-dessus — celle-ci reste la ligne dominante. */
font-size: 1.1rem;
line-height: 1.55;
color: #b3261e;
}
/* --------------------------------------------------------------------------
17. Préférences d'accessibilité
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}