/* Réservation des séances régulières.
* Tout est préfixé .ccsr pour ne rien casser dans le thème ni dans Elementor.
*/
.ccsr {
/* Relevées sur rebeccavandal.com : le vert des titres (#354535), le doré
des filets (#D6AE7B), l'encre des textes. Rien d'inventé. */
--ccsr-papier: #FAF6F0;
--ccsr-papier-2: #F2EBDF;
--ccsr-blanc: #FFFFFF;
--ccsr-encre: #2F2A24;
--ccsr-doux: #5E5850;
--ccsr-pale: #8C8378;
--ccsr-bord: #E6DCCB;
--ccsr-bord-fort: #D6AE7B;
--ccsr-sauge: #354535;
--ccsr-sauge-clair: #4A5E4A;
--ccsr-or: #D6AE7B;
--ccsr-or-fonce: #A8834F;
--ccsr-rouge: #9C4A3E;
/* Trois teintes qui vivaient en clair dans la feuille, sans nom :
une crème écrite quatorze fois à la main, une quinzième presque
identique à un cheveu près, et un rouge sombre pour les alertes.
Elles font le même travail que les autres et portent un nom. */
--ccsr-creme: #F6F2E9;
--ccsr-creme-doux: #EDE5D7;
--ccsr-rouge-texte: #7A3328;
--ccsr-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--ccsr-sans: "Montserrat", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
font-family: var(--ccsr-sans);
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: var(--ccsr-encre);
background: var(--ccsr-papier);
box-sizing: border-box;
margin-bottom: clamp(40px, 6vw, 80px);
}
.ccsr *,
.ccsr *::before,
.ccsr *::after { box-sizing: border-box; }
.ccsr [hidden] { display: none !important; }
/* ---------------- la bannière ---------------- */
.ccsr-banniere {
padding: clamp(46px, 8vw, 92px) clamp(20px, 5vw, 56px);
background: var(--ccsr-sauge);
background-size: cover;
background-position: center 35%;
text-align: center;
color: var(--ccsr-creme);
}
.ccsr .ccsr-surtitre {
margin: 0 0 14px;
font-size: .66rem;
font-weight: 600;
letter-spacing: .28em;
text-transform: uppercase;
color: #E3D5BB;
}
.ccsr .ccsr-titre {
margin: 0;
font-family: var(--ccsr-serif);
font-size: clamp(2.1rem, 5.4vw, 3.3rem);
font-weight: 500;
line-height: 1.12;
letter-spacing: .01em;
text-transform: none;
color: #FBF8F1;
}
.ccsr .ccsr-intro {
max-width: 620px;
margin: 18px auto 0;
font-size: 1.02rem;
line-height: 1.75;
color: var(--ccsr-creme-doux);
}
/* ---------------- le corps ---------------- */
.ccsr-corps {
max-width: 1180px;
margin: 0 auto;
padding: clamp(28px, 5vw, 52px) clamp(18px, 4vw, 44px) clamp(34px, 5vw, 56px);
}
/* Le formulaire et le résumé côte à côte. Le résumé suit la cliente : elle
ne découvre pas le total à la fin, elle le voit se construire. */
.ccsr .ccsr-plan {
display: grid;
grid-template-columns: minmax(0, 1fr) 306px;
gap: clamp(26px, 4vw, 48px);
align-items: start;
}
.ccsr .ccsr-resume-dedans {
position: sticky;
top: 24px;
padding: 24px 24px 26px;
background: var(--ccsr-blanc);
border: 1px solid var(--ccsr-bord);
border-radius: 14px;
}
.ccsr .ccsr-resume-titre {
margin: 0 0 14px;
font-size: .7rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ccsr-pale);
}
.ccsr .ccsr-resume-vide {
margin: 0;
font-size: .88rem;
line-height: 1.6;
color: var(--ccsr-pale);
}
/* Sous 980 pixels, le résumé passe au-dessus du formulaire et cesse de
suivre : sur une tablette tenue à la main, une colonne collante mange
la moitié de l'écran. */
@media (max-width: 980px) {
.ccsr .ccsr-plan {
grid-template-columns: minmax(0, 1fr);
}
/* Sous le formulaire, et non au-dessus : sur un téléphone, la question
posée doit arriver en premier. Le résumé se lit juste après, au moment
où la cliente s'apprête à continuer. */
.ccsr .ccsr-resume-dedans {
position: static;
padding: 20px 20px 22px;
background: var(--ccsr-papier-2);
}
}
/* ---------------- le fil des étapes ---------------- */
/* Cinq segments d'une même ligne fine, qui se remplissent au fur et à
mesure. Pas de ronds numérotés : ils donnaient au tout un air de
formulaire administratif, là où le reste de la page est une invitation. */
.ccsr .ccsr-fil {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 10px;
margin: 0 0 clamp(26px, 4vw, 40px);
padding: 0;
list-style: none;
}
.ccsr .ccsr-fil li {
display: block;
margin: 0;
padding-top: 11px;
border-top: 2px solid var(--ccsr-bord);
font-size: .66rem;
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--ccsr-pale);
transition: color .3s, border-color .3s;
}
/* Le rang reste lisible par les lecteurs d'écran et sur téléphone, mais il
ne prend plus la vedette sur grand écran. */
.ccsr .ccsr-fil-rang {
display: none;
}
.ccsr .ccsr-fil li.actif {
color: var(--ccsr-sauge);
border-top-color: var(--ccsr-sauge);
}
.ccsr .ccsr-fil li.complet {
color: var(--ccsr-doux);
border-top-color: var(--ccsr-or);
}
.ccsr .ccsr-fil li.manque {
color: var(--ccsr-pale);
border-top-color: var(--ccsr-bord-fort);
}
@media (max-width: 640px) {
/* Sur téléphone, cinq noms ne tiennent pas : la ligne reste, et seul le
nom de l'étape en cours s'écrit. */
.ccsr .ccsr-fil {
gap: 6px;
}
.ccsr .ccsr-fil li {
font-size: 0;
padding-top: 8px;
}
.ccsr .ccsr-fil li.actif {
font-size: .62rem;
}
.ccsr .ccsr-fil li.actif .ccsr-fil-rang {
display: inline;
}
.ccsr .ccsr-fil li.actif .ccsr-fil-rang::after {
content: ' · ';
}
}
/* ---------------- un bloc d'étape ---------------- */
.ccsr .ccsr-pas { display: none; }
.ccsr .ccsr-pas.actif { display: block; animation: ccsr-entree .32s ease both; }
@keyframes ccsr-entree {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.ccsr .ccsr-pas.actif { animation: none; }
}
.ccsr .ccsr-pas-titre {
margin: 0 0 6px;
font-family: var(--ccsr-serif);
font-size: clamp(1.6rem, 3.6vw, 2.15rem);
font-weight: 500;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
color: var(--ccsr-sauge);
}
.ccsr .ccsr-pas-mot {
margin: 0 0 clamp(22px, 3vw, 32px);
max-width: 620px;
font-size: .97rem;
line-height: 1.7;
color: var(--ccsr-doux);
}
/* ---------------- les cartes de forfaits ---------------- */
.ccsr-forfaits {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
gap: 20px;
}
.ccsr .ccsr-forfait {
position: relative;
display: flex;
flex-direction: column;
background: var(--ccsr-blanc);
border: 1px solid var(--ccsr-bord);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: border-color .18s, box-shadow .18s, transform .18s;
margin: 0;
text-transform: none;
letter-spacing: normal;
font-weight: 400;
}
.ccsr .ccsr-forfait:hover {
border-color: var(--ccsr-bord-fort);
box-shadow: 0 6px 22px rgba(63, 79, 69, .11);
transform: translateY(-2px);
}
.ccsr .ccsr-forfait input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.ccsr .ccsr-forfait:focus-within {
outline: 2px solid var(--ccsr-sauge-clair);
outline-offset: 2px;
}
.ccsr .ccsr-forfait:has(input:checked) {
border-color: var(--ccsr-sauge);
box-shadow: 0 0 0 2px var(--ccsr-sauge) inset, 0 8px 26px rgba(63, 79, 69, .14);
}
.ccsr .ccsr-forfait-image {
position: relative;
display: block;
aspect-ratio: 4 / 3;
background: var(--ccsr-papier-2) center / cover no-repeat;
}
/* Le prix en verre dépoli : la photographie passe derrière, le chiffre reste
net. Un aplat opaque était la première chose que l'œil voyait sur chaque
carte, avant l'image — ce qui est l'inverse de ce qu'on vend ici. */
.ccsr .ccsr-forfait-prix {
position: absolute;
right: 12px;
bottom: 12px;
display: inline-flex;
align-items: center;
/* Un pixel de plus en haut qu'en bas : Montserrat laisse plus de place
sous la ligne de base qu'au-dessus des capitales, et le centrage en
flex centre la boîte, pas l'encre. Mesuré à 8 px en haut contre 10
en bas, corrigé ici. */
padding: 10px 13px 8px;
border-radius: 999px;
/* Hauteur de ligne à 1 et centrage en flex : la pastille mêle deux
tailles de texte, et la boîte de ligne par défaut laissait 1,8 px de
plus sous le chiffre que dessus. Mesuré, pas supposé. */
line-height: 1;
/* Repli : sans flou, il faut de l'opacité pour rester lisible sur une
photo claire — la séance d'hiver est presque blanche à cet endroit. */
background: rgba(35, 48, 42, .78);
color: var(--ccsr-creme);
font-size: .86rem;
font-weight: 600;
letter-spacing: .02em;
}
@supports ( backdrop-filter: blur(1px) ) or ( -webkit-backdrop-filter: blur(1px) ) {
.ccsr .ccsr-forfait-prix {
background: rgba(35, 48, 42, .38);
border: 1px solid rgba(255, 255, 255, .3);
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
}
}
.ccsr .ccsr-forfait-corps {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px 20px 22px;
flex: 1;
}
.ccsr .ccsr-forfait-nom {
font-family: var(--ccsr-serif);
font-size: 1.42rem;
font-weight: 500;
line-height: 1.2;
color: var(--ccsr-sauge);
}
.ccsr .ccsr-forfait-resume {
font-size: .88rem;
line-height: 1.62;
color: var(--ccsr-doux);
}
.ccsr .ccsr-forfait-duree {
font-size: .76rem;
font-weight: 500;
letter-spacing: .04em;
color: var(--ccsr-or-fonce);
}
.ccsr .ccsr-forfait-inclus {
display: flex;
flex-direction: column;
gap: 5px;
margin-top: 4px;
padding-top: 12px;
border-top: 1px solid var(--ccsr-bord);
font-size: .87rem;
line-height: 1.55;
color: var(--ccsr-encre);
}
.ccsr .ccsr-forfait-inclus span {
position: relative;
padding-left: 18px;
}
.ccsr .ccsr-forfait-inclus span::before {
content: "";
position: absolute;
left: 2px;
top: .58em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ccsr-or);
}
.ccsr .ccsr-forfait-depot {
margin-top: auto;
padding-top: 12px;
font-size: .82rem;
line-height: 1.5;
color: var(--ccsr-pale);
}
.ccsr .ccsr-choisi {
display: none;
margin-top: 10px;
padding: 9px 0;
border-radius: 8px;
background: var(--ccsr-sauge);
color: var(--ccsr-creme);
font-size: .72rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
text-align: center;
}
.ccsr .ccsr-forfait:has(input:checked) .ccsr-choisi { display: block; }
/* ---------------- les groupes de questions ---------------- */
.ccsr .ccsr-groupe {
margin: 0 0 24px;
padding: 22px 24px 24px;
background: var(--ccsr-blanc);
border: 1px solid var(--ccsr-bord);
border-radius: 12px;
}
.ccsr .ccsr-groupe legend {
padding: 0 8px;
margin-left: -8px;
font-family: var(--ccsr-serif);
font-size: 1.3rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0;
text-transform: none;
color: var(--ccsr-sauge);
}
.ccsr .ccsr-aide {
margin: 6px 0 0;
font-size: .88rem;
line-height: 1.6;
color: var(--ccsr-doux);
}
.ccsr .ccsr-groupe .ccsr-aide { margin-bottom: 14px; }
.ccsr-options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
gap: 10px;
}
.ccsr .ccsr-option {
display: flex;
align-items: flex-start;
gap: 11px;
margin: 0;
padding: 13px 15px;
background: var(--ccsr-papier);
border: 1px solid var(--ccsr-bord);
border-radius: 9px;
cursor: pointer;
transition: border-color .15s, background .15s;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
}
.ccsr .ccsr-option:hover { border-color: var(--ccsr-bord-fort); }
.ccsr .ccsr-option input {
flex: 0 0 auto;
margin: 2px 0 0;
width: 19px;
height: 19px;
accent-color: var(--ccsr-sauge);
cursor: pointer;
}
.ccsr .ccsr-option:has(input:checked) {
background: #EFF3EF;
border-color: var(--ccsr-sauge);
}
.ccsr .ccsr-option-corps { display: block; }
.ccsr .ccsr-option-nom {
display: block;
font-size: .95rem;
font-weight: 500;
line-height: 1.45;
color: var(--ccsr-encre);
}
.ccsr .ccsr-option-detail {
display: block;
margin-top: 3px;
font-size: .84rem;
line-height: 1.55;
color: var(--ccsr-doux);
}
.ccsr .ccsr-supplement {
margin: 14px 0 0;
padding: 11px 14px;
background: #FBF4EA;
border-left: 3px solid var(--ccsr-or);
border-radius: 0 7px 7px 0;
font-size: .89rem;
color: #6B532F;
}
/* ---------------- les champs ---------------- */
.ccsr .ccsr-champ { margin: 0 0 18px; }
.ccsr .ccsr-champ label {
display: block;
margin: 0 0 6px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ccsr-doux);
}
.ccsr .ccsr-champ input,
.ccsr .ccsr-champ select,
.ccsr .ccsr-champ textarea {
width: 100%;
padding: 12px 14px;
background: var(--ccsr-blanc);
border: 1px solid var(--ccsr-bord-fort);
border-radius: 8px;
font-family: inherit;
font-size: 1rem;
line-height: 1.5;
color: var(--ccsr-encre);
box-shadow: none;
}
.ccsr .ccsr-champ textarea { resize: vertical; min-height: 88px; }
.ccsr .ccsr-champ input:focus,
.ccsr .ccsr-champ select:focus,
.ccsr .ccsr-champ textarea:focus {
outline: 2px solid var(--ccsr-sauge-clair);
outline-offset: -1px;
border-color: var(--ccsr-sauge-clair);
}
.ccsr .ccsr-champ .ccsr-aide { margin-top: 6px; }
.ccsr-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .ccsr-paire { grid-template-columns: 1fr; gap: 0; } }
.ccsr .ccsr-faux,
.ccsr .ccsr-faux input,
.ccsr .ccsr-faux select,
.ccsr .ccsr-faux textarea {
border-color: var(--ccsr-rouge) !important;
}
.ccsr .ccsr-signature input {
font-family: var(--ccsr-serif);
font-size: 1.32rem;
letter-spacing: .01em;
}
/* ---------------- le contrat ---------------- */
.ccsr-clauses {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.ccsr .ccsr-clause {
display: block;
margin: 0;
padding: 17px 19px;
background: var(--ccsr-blanc);
border: 1px solid var(--ccsr-bord);
border-radius: 11px;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
}
.ccsr .ccsr-clause-case {
display: flex;
align-items: flex-start;
gap: 14px;
cursor: pointer;
}
.ccsr .ccsr-clause-case:hover { border-color: var(--ccsr-bord-fort); }
.ccsr .ccsr-clause-case input {
flex: 0 0 auto;
margin: 1px 0 0;
width: 22px;
height: 22px;
accent-color: var(--ccsr-sauge);
cursor: pointer;
}
.ccsr .ccsr-clause-case:has(input:checked) { border-color: var(--ccsr-sauge); background: #FCFDFB; }
.ccsr .ccsr-clause-titre {
display: block;
margin: 0 0 5px;
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
color: var(--ccsr-sauge);
}
.ccsr .ccsr-clause-texte {
display: block;
margin: 0;
font-size: .95rem;
font-weight: 400;
line-height: 1.7;
color: var(--ccsr-sauge);
}
.ccsr .ccsr-facultatif {
display: inline-block;
margin-left: 7px;
padding: 2px 9px;
border-radius: 999px;
background: var(--ccsr-papier-2);
font-size: .64rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ccsr-doux);
vertical-align: 2px;
}
.ccsr .ccsr-ouinon {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 13px;
max-width: 420px;
}
.ccsr .ccsr-ouinon .ccsr-option { padding: 11px 14px; }
@media (max-width: 460px) {
.ccsr .ccsr-ouinon { grid-template-columns: 1fr; }
}
/* ---------------- le récapitulatif ---------------- */
.ccsr-recap {
margin: 0;
padding: 0;
background: none;
border: 0;
}
.ccsr .ccsr-recap-ligne {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 18px;
padding: 9px 0;
border-bottom: 1px solid var(--ccsr-bord);
font-size: .95rem;
}
.ccsr .ccsr-recap-ligne:last-child { border-bottom: 0; }
.ccsr .ccsr-recap-ligne span {
flex: 0 0 auto;
font-size: .72rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ccsr-pale);
}
.ccsr .ccsr-recap-ligne strong {
text-align: right;
font-weight: 500;
color: var(--ccsr-encre);
}
.ccsr .ccsr-recap-total {
margin-top: 14px;
padding-top: 12px;
border-top: 2px solid var(--ccsr-sauge);
}
.ccsr .ccsr-recap-ligne.ccsr-gros strong {
font-family: var(--ccsr-serif);
font-size: 1.62rem;
font-weight: 600;
color: var(--ccsr-sauge);
}
/* ---------------- le dépôt ---------------- */
.ccsr-depot {
padding: 22px 24px;
background: #FBF4EA;
border-left: 3px solid var(--ccsr-or);
border-radius: 0 11px 11px 0;
}
.ccsr .ccsr-depot p { margin: 0 0 11px; font-size: .96rem; line-height: 1.68; }
.ccsr .ccsr-depot p:last-child { margin-bottom: 0; }
.ccsr .ccsr-depot-titre {
margin: 0 0 14px;
font-family: var(--ccsr-sans);
font-size: .72rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ccsr-doux);
}
/* Le montant est le seul chiffre qui compte à cet endroit : il doit se lire
du coin de l'œil, sans avoir à chercher. */
.ccsr .ccsr-depot-titre strong {
display: block;
margin-top: 4px;
font-family: var(--ccsr-serif);
font-size: 2.5rem;
font-weight: 600;
line-height: 1.05;
letter-spacing: 0;
text-transform: none;
color: var(--ccsr-sauge);
}
.ccsr .ccsr-interac {
margin: 0 0 11px;
padding-left: 20px;
font-size: .93rem;
line-height: 1.75;
}
.ccsr .ccsr-interac li { margin: 0 0 3px; }
/* ---------------- les boutons ---------------- */
.ccsr-pieds {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-top: clamp(26px, 4vw, 38px);
padding-top: 22px;
border-top: 1px solid var(--ccsr-bord);
}
.ccsr .ccsr-bouton {
appearance: none;
padding: 14px 30px;
border: 1px solid var(--ccsr-sauge);
border-radius: 9px;
background: var(--ccsr-sauge);
color: var(--ccsr-creme);
font-family: var(--ccsr-sans);
font-size: .78rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
cursor: pointer;
transition: background .16s, transform .16s;
}
.ccsr .ccsr-bouton:hover { background: var(--ccsr-sauge-clair); }
.ccsr .ccsr-bouton:active { transform: translateY(1px); }
.ccsr .ccsr-bouton[disabled] { opacity: .6; cursor: progress; }
.ccsr .ccsr-retour {
order: -1;
background: transparent;
border-color: var(--ccsr-bord-fort);
color: var(--ccsr-doux);
}
.ccsr .ccsr-retour:hover { background: var(--ccsr-papier-2); }
.ccsr .ccsr-suite,
.ccsr .ccsr-envoi { margin-left: auto; }
.ccsr .ccsr-erreur {
margin: 20px 0 0;
padding: 13px 17px;
background: #F8ECE8;
border-left: 3px solid var(--ccsr-rouge);
border-radius: 0 8px 8px 0;
font-size: .94rem;
line-height: 1.6;
color: #7A2E26;
}
/* ---------------- le merci ---------------- */
.ccsr-merci {
padding: clamp(28px, 5vw, 46px);
background: var(--ccsr-blanc);
border: 1px solid var(--ccsr-bord);
border-radius: 12px;
text-align: center;
}
.ccsr .ccsr-merci h3 {
margin: 0 0 12px;
font-family: var(--ccsr-serif);
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 500;
line-height: 1.2;
text-transform: none;
color: var(--ccsr-sauge);
}
/* Seuls les paragraphes d'introduction sont centrés et rétrécis : sans le
« > », la règle attrapait aussi le contenu de l'encadré de versement, qui
se retrouvait décalé vers la droite. */
.ccsr .ccsr-merci > p { margin: 0 auto 14px; max-width: 560px; font-size: 1rem; line-height: 1.75; }
.ccsr .ccsr-merci .ccsr-depot { text-align: left; margin-top: 22px; }
.ccsr .ccsr-merci-ref {
display: inline-block;
margin-top: 8px;
padding: 6px 15px;
border-radius: 999px;
background: var(--ccsr-papier-2);
font-size: .78rem;
letter-spacing: .1em;
color: var(--ccsr-doux);
}
/* piège à robots */
.ccsr-pas-ici {
position: absolute !important;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Le même rendu sur les navigateurs qui ne connaissent pas encore :has().
La classe est posée par le script, à chaque changement. */
.ccsr .ccsr-forfait.ccsr-est-coche {
border-color: var(--ccsr-sauge);
box-shadow: 0 0 0 2px var(--ccsr-sauge) inset, 0 8px 26px rgba(63, 79, 69, .14);
}
.ccsr .ccsr-forfait.ccsr-est-coche .ccsr-choisi { display: block; }
.ccsr .ccsr-option.ccsr-est-coche {
background: #EFF3EF;
border-color: var(--ccsr-sauge);
}
.ccsr .ccsr-clause-case.ccsr-est-coche {
border-color: var(--ccsr-sauge);
background: #FCFDFB;
}
/* Le récapitulatif de facture, sur l'écran de remerciement. */
.ccsr .ccsr-recap-merci { text-align: left; margin: 26px auto 0; max-width: 520px; }
.ccsr .ccsr-recap-titre {
margin: 0 0 12px;
font-size: .7rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ccsr-pale);
}
/* ---------------- les conditions, réunies ---------------- */
.ccsr-conditions {
margin: 0 0 26px;
padding: 22px 24px 24px;
background: var(--ccsr-blanc);
border: 1px solid var(--ccsr-bord);
border-radius: 12px;
}
.ccsr-conditions-tete {
display: flex;
gap: 20px;
align-items: center;
margin-bottom: 18px;
padding-bottom: 18px;
border-bottom: 1px solid var(--ccsr-bord);
}
.ccsr-conditions-image {
flex: 0 0 auto;
width: 116px;
height: 116px;
border-radius: 10px;
background: var(--ccsr-papier-2) center / cover no-repeat;
}
.ccsr .ccsr-conditions h4 {
margin: 0 0 6px;
font-family: var(--ccsr-serif);
font-size: 1.42rem;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
color: var(--ccsr-sauge);
}
.ccsr .ccsr-conditions-tete p {
margin: 0;
font-size: .93rem;
line-height: 1.65;
color: var(--ccsr-doux);
}
.ccsr .ccsr-conditions-liste {
counter-reset: ccsr-c;
list-style: none;
margin: 0 0 20px;
padding: 0;
}
.ccsr .ccsr-conditions-liste li {
position: relative;
margin: 0;
padding: 12px 0 12px 42px;
border-bottom: 1px solid #F1ECE2;
}
.ccsr .ccsr-conditions-liste li:last-child { border-bottom: 0; padding-bottom: 4px; }
.ccsr .ccsr-conditions-liste li::before {
counter-increment: ccsr-c;
content: counter(ccsr-c);
position: absolute;
left: 0;
top: 12px;
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--ccsr-papier-2);
font-size: .74rem;
font-weight: 600;
color: var(--ccsr-sauge);
}
.ccsr .ccsr-conditions-liste strong {
display: block;
margin-bottom: 3px;
font-size: .97rem;
font-weight: 600;
line-height: 1.4;
color: var(--ccsr-sauge);
}
.ccsr .ccsr-conditions-liste span {
display: block;
font-size: .93rem;
line-height: 1.68;
color: var(--ccsr-sauge);
}
.ccsr .ccsr-clause-conditions {
background: #F3F6F3;
border-color: var(--ccsr-sauge-clair);
}
.ccsr .ccsr-clauses-titre {
margin: 0 0 12px;
font-family: var(--ccsr-serif);
font-size: 1.42rem;
font-weight: 500;
line-height: 1.2;
color: var(--ccsr-sauge);
}
@media (max-width: 620px) {
.ccsr-conditions-tete { flex-direction: column; align-items: flex-start; gap: 14px; }
.ccsr-conditions-image { width: 100%; height: 140px; }
.ccsr .ccsr-conditions-liste li { padding-left: 36px; }
}
/* Une question qui n'apparaît qu'après une autre réponse : on la souligne
discrètement, pour qu'on comprenne d'où elle sort. */
.ccsr .ccsr-suite-de {
padding-left: 15px;
border-left: 2px solid var(--ccsr-bord-fort);
animation: ccsr-entree .28s ease both;
}
@media (prefers-reduced-motion: reduce) { .ccsr .ccsr-suite-de { animation: none; } }
/* Les intertitres du contrat : ils ne sont pas numérotés, ils respirent. */
.ccsr .ccsr-conditions-liste li.ccsr-conditions-partie {
padding: 22px 0 8px;
border-bottom: 0;
font-size: .7rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ccsr-or-fonce);
}
.ccsr .ccsr-conditions-liste li.ccsr-conditions-partie::before { content: none; }
.ccsr .ccsr-conditions-liste li.ccsr-conditions-partie:first-child { padding-top: 0; }
/* L'ovale doré, en tête de bannière. Il remplace le nom écrit en capitales :
c'est le même signe que sur ses cartes et ses courriels. */
.ccsr .ccsr-sceau {
display: block;
width: auto;
height: clamp(74px, 9vw, 104px);
margin: 0 auto 18px;
}
/* ---------------- la page entière ----------------
Deux réglages, posés en classes sur le par le raccourci. Ils ne
touchent que la page de réservation : le reste du site ne bouge pas. */
/* Le titre du thème ferait doublon avec celui de la bannière. On le masque,
et la bannière devient le vrai — la page garde donc son titre pour
Google et pour les lecteurs d'écran. */
body.ccsr-sans-titre .page-header,
body.ccsr-sans-titre .entry-title,
body.ccsr-sans-titre .page-title,
body.ccsr-sans-titre .elementor-page-title,
body.ccsr-sans-titre .elementor-widget-theme-page-title {
display: none !important;
}
/* Pleine largeur, et collée à l'en-tête comme au pied de page. */
body.ccsr-pleine-largeur .site-main,
body.ccsr-pleine-largeur .page-content,
body.ccsr-pleine-largeur .entry-content,
body.ccsr-pleine-largeur .elementor-widget-theme-post-content,
body.ccsr-pleine-largeur .elementor-widget-theme-post-content > .elementor-widget-container {
max-width: none !important;
width: auto !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.ccsr-pleine-largeur .ccsr {
/* Sortir des marges du thème sans provoquer de défilement latéral : on
mesure la largeur réelle du document, barre de défilement exclue. */
width: 100%;
max-width: none;
margin: 0;
}
/* Le gabarit du thème garde parfois un conteneur étroit autour du contenu.
Quand c'est le cas, on l'élargit à la fenêtre. */
body.ccsr-pleine-largeur .ccsr-deborde {
margin-left: calc( 50% - 50vw );
margin-right: calc( 50% - 50vw );
width: 100vw;
max-width: 100vw;
}
/* La bannière touche l'en-tête : plus rien au-dessus d'elle. */
body.ccsr-pleine-largeur .ccsr-banniere {
margin-top: 0;
}
/* ---------------- typographie : reprise en main ----------------
Mesuré sur le site en ligne : le thème impose Cormorant Garamond à des
éléments qui devaient être en Montserrat. Or Cormorant a une hauteur d'œil
très basse — à 14 px, il paraît aussi petit que du Montserrat 11 px. D'où
l'impression que tout est minuscule. On reprend donc la police élément par
élément, sans se fier à l'héritage, et on remonte les petites tailles. */
body .ccsr,
body .ccsr p,
body .ccsr span,
body .ccsr a,
body .ccsr li,
body .ccsr ul,
body .ccsr ol,
body .ccsr dl,
body .ccsr dt,
body .ccsr dd,
body .ccsr div,
body .ccsr label,
body .ccsr strong,
body .ccsr em,
body .ccsr small,
body .ccsr legend,
body .ccsr input,
body .ccsr select,
body .ccsr textarea,
body .ccsr button {
font-family: var(--ccsr-sans);
}
/* Les seuls endroits où le serif est voulu : les titres. */
body .ccsr .ccsr-titre,
body .ccsr .ccsr-pas-titre,
body .ccsr .ccsr-forfait-nom,
body .ccsr .ccsr-conditions h4,
body .ccsr .ccsr-clauses-titre,
body .ccsr .ccsr-depot-titre strong,
body .ccsr .ccsr-recap-ligne.ccsr-gros strong,
body .ccsr .ccsr-signature input,
body .ccsr .ccsr-merci h3 {
font-family: var(--ccsr-serif);
}
/* Les tailles du corps de texte, sur l'échelle.
Ce bloc et son jumeau, quatre-vingts lignes plus bas, déclaraient les
mêmes classes avec des valeurs différentes : 0,94 ici et 1 là, 0,95 et
1,06, 1,02 et 1,08. Deux passes « c'est un cran trop petit » faites à
des mois d'écart, dont aucune n'avait effacé la précédente. Le second
bloc gagnait partout, le premier dormait — sauf aux endroits que le
second ne couvrait pas, où il ressortait sans prévenir.
Les deux disent maintenant la même chose, et cette chose est l'échelle :
texte 1,16 rem la prose, les intros
appui 1,06 rem ce qui accompagne — détails, résumés, champs
note 0,96 rem les aides, les précisions
mention 0,86 rem les durées, les boutons
étiquette 0,76 rem les petites capitales
Cinq rangs, et rien entre eux. */
.ccsr .ccsr-intro { font-size: 1.16rem; }
.ccsr .ccsr-pas-mot { font-size: 1.16rem; line-height: 1.72; }
.ccsr .ccsr-forfait-resume { font-size: 1.06rem; line-height: 1.68; }
.ccsr .ccsr-forfait-inclus { font-size: 1.06rem; line-height: 1.66; }
.ccsr .ccsr-forfait-prix { font-size: 1.06rem; }
.ccsr .ccsr-forfait-depot { font-size: .96rem; }
.ccsr .ccsr-forfait-duree { font-size: .86rem; }
.ccsr .ccsr-forfait-nom { font-size: 1.3rem; }
.ccsr .ccsr-option-nom { font-size: 1.06rem; }
.ccsr .ccsr-option-detail { font-size: .96rem; line-height: 1.64; }
.ccsr .ccsr-aide { font-size: .96rem; }
.ccsr .ccsr-champ label { font-size: .76rem; }
.ccsr .ccsr-champ input,
.ccsr .ccsr-champ select,
.ccsr .ccsr-champ textarea { font-size: 1.06rem; }
.ccsr .ccsr-clause-titre { font-size: 1.22rem; }
.ccsr .ccsr-clause-texte { font-size: 1.06rem; line-height: 1.75; }
.ccsr .ccsr-conditions-liste strong { font-size: 1.06rem; }
.ccsr .ccsr-conditions-liste span { font-size: 1.06rem; line-height: 1.75; }
.ccsr .ccsr-conditions-tete p { font-size: 1.06rem; }
.ccsr .ccsr-recap-ligne { font-size: 1.06rem; }
.ccsr .ccsr-recap-ligne span { font-size: .76rem; }
.ccsr .ccsr-depot p { font-size: 1.06rem; }
.ccsr .ccsr-interac { font-size: 1.06rem; }
.ccsr .ccsr-bouton { font-size: .86rem; }
.ccsr .ccsr-erreur { font-size: 1.06rem; }
.ccsr .ccsr-supplement { font-size: .96rem; }
.ccsr .ccsr-groupe legend { font-size: 1.5rem; }
@media (max-width: 620px) {
.ccsr .ccsr-conditions-liste span,
.ccsr .ccsr-clause-texte { font-size: 1rem; line-height: 1.75; }
}
/* =========================================================================
1.2.2 — on lit mieux, on circule librement, et la bannière se tient.
====================================================================== */
/* ---------------- la bannière ---------------- */
/* Le sceau doré se perdait sur la photo : plus grand, et posé sur une ombre
douce pour qu'il tienne quel que soit le fond. */
.ccsr .ccsr-sceau {
height: clamp(96px, 11vw, 138px);
margin: 0 auto 22px;
filter: drop-shadow( 0 2px 14px rgba(18, 26, 22, .55) );
}
.ccsr .ccsr-titre { text-shadow: 0 2px 18px rgba(18, 26, 22, .35); }
.ccsr .ccsr-intro { font-size: 1.16rem; line-height: 1.7; }
/* ---------------- le fil des étapes ----------------
Il ne décrit plus seulement où l'on est : il sert à s'y rendre. */
.ccsr .ccsr-fil li {
cursor: pointer;
}
.ccsr .ccsr-fil li:hover {
color: var(--ccsr-sauge);
}
.ccsr .ccsr-fil li:focus-visible {
outline: none;
border-top-color: var(--ccsr-or);
color: var(--ccsr-sauge);
}
/* Étape terminée : la ligne passe à l'or. Étape ouverte et laissée en plan :
un trait plus marqué, sans dramatiser. Rien de rouge pour un formulaire
qu'on remplit à son rythme. */
.ccsr .ccsr-fil li.complet {
color: var(--ccsr-doux);
border-top-color: var(--ccsr-or);
}
.ccsr .ccsr-fil li.manque {
color: var(--ccsr-pale);
border-top-color: var(--ccsr-bord-fort);
}
.ccsr .ccsr-fil li.actif {
color: var(--ccsr-sauge);
border-top-color: var(--ccsr-sauge);
font-weight: 700;
}
/* ---------------- les tailles de texte ----------------
Tout était juste un cran trop petit pour être confortable. */
.ccsr .ccsr-intro { font-size: 1.16rem; }
.ccsr .ccsr-pas-mot { font-size: 1.16rem; line-height: 1.72; }
.ccsr .ccsr-forfait-resume { font-size: 1.06rem; line-height: 1.68; }
.ccsr .ccsr-forfait-inclus { font-size: 1.06rem; line-height: 1.66; }
.ccsr .ccsr-forfait-prix { font-size: 1.06rem; }
.ccsr .ccsr-forfait-depot { font-size: .96rem; }
.ccsr .ccsr-forfait-duree { font-size: .86rem; }
.ccsr .ccsr-forfait-nom { font-size: 1.3rem; }
.ccsr .ccsr-option-nom { font-size: 1.06rem; }
.ccsr .ccsr-option-detail { font-size: .96rem; line-height: 1.64; }
.ccsr .ccsr-aide { font-size: .96rem; }
.ccsr .ccsr-champ label { font-size: .76rem; }
.ccsr .ccsr-champ input,
.ccsr .ccsr-champ select,
.ccsr .ccsr-champ textarea { font-size: 1.06rem; }
.ccsr .ccsr-clause-titre { font-size: 1.22rem; }
.ccsr .ccsr-clause-texte { font-size: 1.06rem; line-height: 1.75; }
.ccsr .ccsr-conditions-liste strong { font-size: 1.06rem; }
.ccsr .ccsr-conditions-liste span { font-size: 1.06rem; line-height: 1.75; }
.ccsr .ccsr-conditions-tete p { font-size: 1.06rem; }
.ccsr .ccsr-recap-ligne { font-size: 1.06rem; }
.ccsr .ccsr-recap-ligne span { font-size: .76rem; }
.ccsr .ccsr-depot p { font-size: 1.06rem; }
.ccsr .ccsr-interac { font-size: 1.06rem; }
.ccsr .ccsr-bouton { font-size: .86rem; }
.ccsr .ccsr-erreur { font-size: 1.06rem; }
.ccsr .ccsr-supplement { font-size: .96rem; }
.ccsr .ccsr-groupe legend { font-size: 1.5rem; }
.ccsr .ccsr-pas-titre { font-size: clamp(1.6rem, 3.4vw, 2rem); }
body .ccsr p { font-size: 1.16rem; line-height: 1.72; }
/* =========================================================================
1.2.4 — le sceau se décale, le fil tient sur une ligne, la page respire.
====================================================================== */
/* Le logo ne doit plus se poser sur les visages : sur grand écran il va se
ranger dans le coin, et le titre récupère tout le centre. */
.ccsr .ccsr-banniere { position: relative; }
@media (min-width: 900px) {
.ccsr .ccsr-sceau {
position: absolute;
top: clamp(22px, 3vw, 40px);
left: clamp(24px, 4vw, 56px);
height: clamp(88px, 8vw, 118px);
margin: 0;
}
}
@media (max-width: 899px) {
.ccsr .ccsr-sceau { height: clamp(78px, 14vw, 104px); margin: 0 auto 18px; }
}
/* Plus de largeur : le formulaire était à l'étroit au milieu de la page. */
.ccsr .ccsr-corps { max-width: 1180px; }
.ccsr .ccsr-intro { max-width: 760px; }
/* =========================================================================
1.2.5 — le fond se réchauffe, les cartes se raccourcissent, les boutons
se tiennent tranquilles.
====================================================================== */
/* Le gris tirait vers le froid. Un papier crème très clair, des blocs
blancs par-dessus : c'est la même lumière que les photos. */
.ccsr {
--ccsr-papier: #FAF6F0;
/* #F2EBDF, et non #F2EADF : un chiffre d'écart avec la valeur relevée en
tête de feuille sur rebeccavandal.com. Deux sources de vérité pour la
même teinte, dont une inventée. */
--ccsr-papier-2: #F2EBDF;
}
.ccsr { background: var(--ccsr-papier); }
/* Encore de la largeur : il restait beaucoup de marge de chaque côté. */
.ccsr .ccsr-corps { max-width: 1320px; }
/* ---------------- les cartes de forfait ---------------- */
/* Le détail se déplie au lieu d'allonger chaque carte. */
.ccsr .ccsr-forfait-plus {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 10px 0 2px;
padding: 6px 12px 6px 6px;
border: 1px solid var(--ccsr-bord);
border-radius: 999px;
background: var(--ccsr-blanc);
color: var(--ccsr-sauge);
font-size: .82rem;
font-weight: 600;
letter-spacing: .04em;
cursor: pointer;
transition: border-color .18s ease, background .18s ease;
}
.ccsr .ccsr-forfait-plus:hover,
.ccsr .ccsr-forfait-plus:focus-visible {
border-color: var(--ccsr-or);
background: var(--ccsr-papier-2);
outline: none;
}
.ccsr .ccsr-forfait-signe {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--ccsr-sauge);
color: var(--ccsr-creme);
font-size: .95rem;
font-weight: 600;
line-height: 1;
}
.ccsr .ccsr-forfait-plus.ouvert .ccsr-forfait-signe {
background: var(--ccsr-or-fonce);
}
/* Une liste courte, avec une pastille de couleur devant chaque ligne. */
.ccsr .ccsr-forfait-inclus { font-size: .95rem; line-height: 1.55; }
.ccsr .ccsr-forfait-inclus span {
position: relative;
padding-left: 18px;
}
.ccsr .ccsr-forfait-inclus > span::before {
content: "";
position: absolute;
left: 2px;
top: .62em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ccsr-or);
}
.ccsr .ccsr-forfait-inclus > span:nth-child(even)::before { background: var(--ccsr-sauge); }
.ccsr .ccsr-forfait-inclus > span span { padding-left: 0; }
.ccsr .ccsr-forfait-inclus > span::marker { content: none; }
.ccsr .ccsr-forfait-inclus strong { font-weight: 600; color: var(--ccsr-encre); }
.ccsr .ccsr-forfait-detail { color: var(--ccsr-doux); }
/* Le dépôt tient sur une seule ligne. */
.ccsr .ccsr-forfait-depot {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: .92rem;
}
/* ---------------- les boutons ----------------
Au survol, rien ne doit bouger : la page entière se décalait. */
.ccsr .ccsr-bouton {
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
/* Attention : surtout pas de « margin: 0 » ici. Le bouton Continuer est
poussé à droite par « margin-left: auto » ; remettre la marge à zéro au
survol le faisait sauter à gauche, collé au bouton Retour, et décalait
tout le bas de la page avec lui. Au survol, on ne touche qu'aux couleurs. */
.ccsr .ccsr-bouton:hover,
.ccsr .ccsr-bouton:focus-visible {
transform: none;
box-shadow: none;
color: #FBF8F1;
}
.ccsr .ccsr-suite:hover,
.ccsr .ccsr-envoi:hover { background: var(--ccsr-sauge-clair); border-color: var(--ccsr-sauge-clair); }
/* Le retour était écrit en clair sur gris clair : illisible. */
.ccsr .ccsr-retour,
.ccsr .ccsr-retour:hover,
.ccsr .ccsr-retour:focus-visible {
background: var(--ccsr-blanc);
color: var(--ccsr-sauge);
}
.ccsr .ccsr-retour:hover,
.ccsr .ccsr-retour:focus-visible {
background: var(--ccsr-papier-2);
border-color: var(--ccsr-or-fonce);
}
.ccsr .ccsr-bouton:focus-visible { outline: 2px solid var(--ccsr-or-fonce); outline-offset: 3px; }
/* La mention sous la signature tient sur une ligne. */
.ccsr .ccsr-signature .ccsr-aide {
max-width: none;
font-size: .92rem;
white-space: normal;
}
/* =========================================================================
1.2.6 — les cartes s'alignent, le dépôt tient, la bannière se recadre.
====================================================================== */
/* Les cartes n'ont pas le même nombre de lignes : on pousse le dépôt tout
en bas pour que la rangée reste droite. */
.ccsr .ccsr-forfait-corps {
display: flex;
flex-direction: column;
height: 100%;
}
.ccsr .ccsr-forfait-plus { align-self: flex-start; margin-top: auto; }
.ccsr .ccsr-forfait-depot { margin-top: 12px; }
.ccsr .ccsr-forfait-depot {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: .84rem;
letter-spacing: .01em;
}
/* Le haut de la photo plutôt que son centre : les visages restent
au-dessus du titre au lieu d'être dessous. */
.ccsr .ccsr-banniere { background-position: center 26%; }
/* 1.2.7 — le cadrage de la bannière suit la photo choisie : la future maman
se tient dans le bas du cadre, pas dans le ciel. */
.ccsr .ccsr-banniere { background-position: center 55%; }
/* =========================================================================
1.2.8 — les inclusions se lisent enfin, et les forfaits tiennent en
rangées égales.
====================================================================== */
/* Une seule pastille par ligne : le détail, qui est un span dans un span,
en héritait lui aussi et semait des points partout. */
.ccsr .ccsr-forfait-inclus > span span::before { content: none !important; display: none !important; }
.ccsr .ccsr-forfait-inclus > span span { padding-left: 0 !important; position: static !important; }
.ccsr .ccsr-forfait-inclus {
display: flex;
flex-direction: column;
gap: 7px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--ccsr-bord);
}
.ccsr .ccsr-forfait-inclus > span {
display: block;
padding-left: 19px;
line-height: 1.5;
}
.ccsr .ccsr-forfait-inclus > span::before { top: .55em; }
.ccsr .ccsr-forfait-detail { display: inline; color: var(--ccsr-doux); }
/* Six forfaits : deux rangées de trois, plutôt qu'une rangée de quatre et
une de deux. */
.ccsr-forfaits { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .ccsr-forfaits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .ccsr-forfaits { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------------------------
* La date : convenue, ou proposée
*
* Deux chemins offerts d'emblée, sans qu'aucun ait l'air d'être le bon. Les
* moments proposés sont des cartes larges : sur un téléphone, on les touche
* du pouce sans viser. Les puces reprennent la sauge du reste du formulaire —
* jamais le bleu du navigateur.
* ------------------------------------------------------------------------ */
.ccsr .ccsr-quand .ccsr-bascule {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 2px;
cursor: pointer;
font-size: 15px;
}
.ccsr .ccsr-quand .ccsr-bascule input,
.ccsr .ccsr-creneau input {
flex: 0 0 auto;
margin: 0;
width: 19px;
height: 19px;
accent-color: var(--ccsr-sauge);
cursor: pointer;
}
.ccsr .ccsr-quand .ccsr-bascule + .ccsr-volet {
margin: 0 0 18px;
padding: 2px 0 0 29px;
}
.ccsr .ccsr-creneaux {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 0 18px;
}
.ccsr .ccsr-creneau {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 12px;
padding: 14px 16px;
border: 1px solid var(--ccsr-bord);
border-radius: 10px;
cursor: pointer;
transition: border-color 0.18s ease, background-color 0.18s ease;
}
.ccsr .ccsr-creneau:hover { border-color: var(--ccsr-bord-fort); }
.ccsr .ccsr-creneau:has(input:checked),
.ccsr .ccsr-creneau.ccsr-est-coche {
border-color: var(--ccsr-sauge);
background: #EFF3EF;
}
.ccsr .ccsr-creneau-quand {
font-size: 15.5px;
color: var(--ccsr-encre);
}
.ccsr .ccsr-creneau-mot {
flex: 1 1 100%;
padding-left: 31px;
font-size: 13px;
color: var(--ccsr-doux);
}
.ccsr .ccsr-creneau-autre .ccsr-creneau-quand { color: var(--ccsr-doux); }
@media (max-width: 640px) {
.ccsr .ccsr-quand .ccsr-bascule + .ccsr-volet { padding-left: 0; }
.ccsr .ccsr-creneau { width: 100%; }
.ccsr .ccsr-creneau-mot { padding-left: 0; }
}
/* =========================================================================
* Style rebeccavandal.com (v1.9) : typographies, arrondis, boutons et puces
* harmonisés avec le reste du site (repris de l'extension Site Web).
* ====================================================================== */
/* Page Réserver : harmonisation avec le style de rebeccavandal.com (rv-site). Rien n'est changé dans l'extension elle-même. */
html body .ccsr{--ccsr-rayon:6px;font-family:"Montserrat",-apple-system,"Segoe UI",sans-serif;color:#2F2A24}
/* Titres et sous-titres : mêmes polices, tailles et graisses partout */
html body .ccsr .ccsr-pas-titre{font-family:"Cormorant Garamond",Georgia,serif!important;font-weight:500!important;font-size:clamp(1.9rem,3.4vw,2.4rem)!important;line-height:1.15!important;color:#354535!important;margin:0 0 10px!important}
html body .ccsr .ccsr-pas-mot{font-size:1rem!important;line-height:1.75!important;color:#5E5850!important;max-width:640px;margin:0 0 34px!important}
html body .ccsr .ccsr-groupe legend,html body .ccsr .ccsr-conditions h4{font-family:"Cormorant Garamond",Georgia,serif!important;font-weight:500!important;color:#354535!important;letter-spacing:.005em!important}
html body .ccsr .ccsr-groupe legend{font-size:1.5rem!important;padding:0 10px!important;margin-left:-10px!important}
html body .ccsr .ccsr-champ label{font-family:"Montserrat",sans-serif!important;font-size:.78rem!important;font-weight:600!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--ccsr-pale)!important;margin:0 0 8px!important}
/* Trois sélecteurs ont quitté les lignes ci-dessus : .ccsr-clauses-titre,
.ccsr-forfait-nom et .ccsr-depot-titre. Chacun était redéclaré plus bas,
en « !important » lui aussi, et de façon exactement contraire — le titre
du premier versement était décrit ici en petites capitales de 0,78 rem et
s'affiche en Cormorant de 1,2 rem. Les lignes mortes ne faisaient rien,
sinon mentir à qui vient lire la feuille. */
html body .ccsr .ccsr-aide,html body .ccsr .ccsr-supplement{font-size:.9rem!important;line-height:1.65!important;color:var(--ccsr-pale)!important}
html body .ccsr p,html body .ccsr .ccsr-option-detail,html body .ccsr .ccsr-forfait-resume{font-weight:400}
/* Coins et cadres : un seul arrondi discret partout, comme les cartes du site */
html body .ccsr .ccsr-forfait,html body .ccsr .ccsr-groupe,html body .ccsr .ccsr-option,html body .ccsr .ccsr-clause,html body .ccsr .ccsr-conditions,html body .ccsr .ccsr-champ input,html body .ccsr .ccsr-champ select,html body .ccsr .ccsr-champ textarea,html body .ccsr .ccsr-creneau,html body .ccsr .ccsr-depot,html body .ccsr .ccsr-recap{border-radius:var(--ccsr-rayon)!important}
/* La photo en arche, détachée de la carte.
Un bandeau d'en-tête collé aux bords se lit comme un décor ; une photo
carrée en arche, avec sa marge blanche autour, se lit comme un tirage
encadré — ce qui est exactement ce qui est vendu ici. L'arche reprend
aussi le style « chaleur boisée » retenu pour le reste du site. */
html body .ccsr .ccsr-forfait-image {
aspect-ratio: 1 / 1 !important;
width: auto !important;
margin: 18px 18px 0 !important;
border-radius: 999px 999px 14px 14px !important;
}
/* Espacements réguliers entre les blocs */
html body .ccsr .ccsr-groupe{padding:26px 28px 28px!important;margin:0 0 26px!important;border-color:#E6DCCB!important}
html body .ccsr .ccsr-pas>.ccsr-champ{margin:0 0 26px!important}
html body .ccsr .ccsr-champ{margin-bottom:20px}
html body .ccsr .ccsr-options{gap:12px!important}
html body .ccsr .ccsr-option{padding:14px 16px!important;border-color:#E6DCCB!important}
/* Champ « date prévue » : un bloc comme les autres, avec un filet doré */
html body .ccsr .ccsr-champ.ccsr-suite-de{background:#fff;border:1px solid #E6DCCB!important;border-left:3px solid #D6AE7B!important;border-radius:var(--ccsr-rayon)!important;padding:22px 26px!important}
html body .ccsr .ccsr-champ input,html body .ccsr .ccsr-champ select,html body .ccsr .ccsr-champ textarea{border-color:#E1D3BC!important;font-family:"Montserrat",sans-serif!important;font-size:.98rem!important}
html body .ccsr .ccsr-champ input:focus,html body .ccsr .ccsr-champ select:focus,html body .ccsr .ccsr-champ textarea:focus{border-color:#A8834F!important;box-shadow:0 0 0 3px rgba(214,174,123,.22)!important;outline:none!important}
/* Cartes de forfaits (le détail « inclus » s'ouvre sur toutes les cartes à la fois : aucune carte ne paraît vide) */
html body .ccsr .ccsr-forfaits{gap:22px!important}
html body .ccsr .ccsr-forfait{border-color:#E6DCCB!important}
html body .ccsr .ccsr-forfait:has(input:checked),html body .ccsr .ccsr-forfait.ccsr-est-coche{border-color:#354535!important;box-shadow:0 0 0 1px #354535,0 10px 28px rgba(53,69,53,.12)!important}
html body .ccsr .ccsr-choisi{border-radius:999px!important;font-size:.68rem!important;letter-spacing:.18em!important}
/* « Ce qui est inclus » : un lien discret, doré, au lieu d'une pastille */
html body .ccsr .ccsr-forfait-plus{border:0!important;background:none!important;padding:4px 0!important;border-radius:0!important;gap:9px!important;color:#354535!important;font-family:"Montserrat",sans-serif!important;font-size:.7rem!important;font-weight:600!important;letter-spacing:.16em!important;text-transform:uppercase!important;margin:14px 0 4px!important;padding-top:0!important}
html body .ccsr .ccsr-forfait-plus .ccsr-forfait-mot{border-bottom:1px solid #D6AE7B;padding-bottom:3px}
html body .ccsr .ccsr-forfait-plus:hover .ccsr-forfait-mot,html body .ccsr .ccsr-forfait-plus:focus-visible .ccsr-forfait-mot{border-bottom-color:#354535}
html body .ccsr .ccsr-forfait-signe,html body .ccsr .ccsr-forfait-plus.ouvert .ccsr-forfait-signe{width:auto!important;height:auto!important;background:none!important;border-radius:0!important;color:#A8834F!important;font-size:1.05rem!important;font-weight:300!important;line-height:1!important}
/* Puces de la liste « inclus » : un même petit filet doré, partout (plus d'alternance vert / doré) */
html body .ccsr .ccsr-forfait-inclus{gap:7px!important;border-top-color:#E6DCCB!important}
html body .ccsr .ccsr-forfait-inclus>span{padding-left:20px!important}
html body .ccsr .ccsr-forfait-inclus>span::before,html body .ccsr .ccsr-forfait-inclus>span:nth-child(even)::before{width:10px!important;height:1px!important;border-radius:0!important;background:#A8834F!important;top:.8em!important;left:0!important}
/* Boutons : la forme arrondie des boutons du site */
html body .ccsr .ccsr-bouton{border-radius:999px!important;padding:15px 34px!important;font-family:"Montserrat",sans-serif!important;font-size:.74rem!important;font-weight:600!important;letter-spacing:.16em!important;transition:background .2s,color .2s,border-color .2s!important}
html body .ccsr .ccsr-bouton:hover{background:#4A5E4A!important;border-color:#4A5E4A!important}
html body .ccsr .ccsr-retour{background:transparent!important;color:#354535!important;border-color:#D6AE7B!important}
html body .ccsr .ccsr-retour:hover{background:#FAF6F0!important;border-color:#354535!important;color:#354535!important}
/* Entente : numéros et intertitres dans les teintes du site */
html body .ccsr .ccsr-conditions{border-color:#E6DCCB!important;padding:28px 30px 30px!important}
/* Téléphone : texte pleine largeur, boutons pleine largeur */
@media (max-width:767px){html body .ccsr .ccsr-groupe{padding:20px 18px 22px!important}html body .ccsr .ccsr-conditions{padding:22px 18px 24px!important}html body .ccsr .ccsr-pas-mot{max-width:none}}
/* « Vos inspirations » (après un bloc) : présenté comme un bloc lui aussi, pour une page régulière */
html body .ccsr .ccsr-groupe+.ccsr-champ:not(.ccsr-suite-de){background:#fff;border:1px solid #E6DCCB;border-radius:var(--ccsr-rayon);padding:22px 26px!important}
@media (max-width:767px){html body .ccsr .ccsr-groupe+.ccsr-champ,html body .ccsr .ccsr-champ.ccsr-suite-de{padding:18px!important}}
html body .ccsr .ccsr-forfait-nom,html body .ccsr .ccsr-forfait-resume,html body .ccsr .ccsr-forfait-duree{display:block;box-sizing:border-box}
html body .ccsr .ccsr-forfait-depot{margin-top:auto!important;padding-top:16px}
/* Date prévue d'accouchement : un texte d'aide par type de forfait */
html body .ccsr .ccsr-dpa .ccsr-aide{margin-top:10px}
/* Description courte : deux lignes de longueur égale */
html body .ccsr .ccsr-forfait-resume .ccsr-ligne{display:block}
/* -------------------------------------------------------------------------
Vignettes, palettes et options discrètes
---------------------------------------------------------------------- */
/* La ligne qui dit pourquoi une question apparaît. Un formulaire qui change de
longueur selon le forfait inquiète : cette ligne-là rassure. */
/* L'étiquette qui dit de quelle séance une question parle.
Elle était bordée de gris et remplie de blanc, et son texte n'était pas
centré dedans : la marge basse de douze pixels vivait À L'INTÉRIEUR de la
pilule, donc quatre pixels d'air en haut et seize en bas. Le fond sable
sans bordure appartient à la page plutôt que de s'y poser, et l'air est
le même des deux côtés. */
.ccsr .ccsr-raison {
display: inline-block;
margin: 0 0 12px;
padding: 5px 14px;
border: 0;
border-radius: 999px;
background: var(--ccsr-papier-2, #F3EDE3);
font-size: .7rem;
font-weight: 600;
letter-spacing: .1em;
line-height: 1.5;
text-transform: uppercase;
color: var(--ccsr-or-texte, #8A6B3C);
}
/* Les décors : deux grandes cartes, trois vignettes chacune. La case reste en
haut à gauche, au-dessus des photos : c'est là qu'on la cherche. */
.ccsr .ccsr-groupe-vignettes .ccsr-options {
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.ccsr .ccsr-groupe-vignettes .ccsr-option {
flex-direction: column;
align-items: stretch;
padding: 14px;
}
.ccsr .ccsr-groupe-vignettes .ccsr-option input {
align-self: flex-start;
margin: 0 0 10px;
}
/* La bande de photos a toujours la même hauteur, qu'elle en contienne une
ou trois : c'est le nombre de photos qui change, pas la taille des cartes.
Une photo seule s'étale donc en paysage, trois restent en portrait. */
.ccsr .ccsr-vignettes {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 180px;
gap: 6px;
margin: 0 0 11px;
}
.ccsr .ccsr-vignettes[data-n="1"] {
grid-template-columns: 1fr;
}
.ccsr .ccsr-vignettes[data-n="2"] {
grid-template-columns: 1fr 1fr;
}
/* Une carte sans photo ne s'étire pas à la hauteur de sa voisine : elle
reste courte, le temps que la photo manquante soit choisie. */
.ccsr .ccsr-groupe-vignettes .ccsr-options {
align-items: start;
}
/* La fenêtre de la photo : c'est elle qui coupe, pour que le rapprochement
ne déborde pas sur la carte. */
.ccsr .ccsr-vignette-cadre {
position: relative;
display: block;
overflow: hidden;
border-radius: 4px;
background: #ECE7DD;
}
.ccsr .ccsr-vignettes img,
.ccsr img.ccsr-vignette {
display: block;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
border-radius: 4px;
background: #ECE7DD;
}
/* Les douze palettes : deux rangées de six sur ordinateur. */
.ccsr .ccsr-groupe-palettes .ccsr-options {
grid-template-columns: repeat(6, 1fr);
gap: 10px;
}
.ccsr .ccsr-groupe-palettes .ccsr-option {
position: relative;
flex-direction: column;
align-items: stretch;
text-align: center;
gap: 0;
padding: 9px 7px;
}
/* La case se range dans le coin : la pastille de couleurs doit pouvoir prendre
toute la largeur de la carte, sinon on ne voit plus les teintes. */
.ccsr .ccsr-groupe-palettes .ccsr-option input {
position: absolute;
top: 7px;
right: 7px;
width: 16px;
height: 16px;
margin: 0;
}
/* La pastille doit tenir la largeur de la carte, pas celle du nom : sans
cela, « Rose » affiche une pastille deux fois plus courte que
« Turquoise, bleu, marine ». */
.ccsr .ccsr-groupe-palettes .ccsr-option-corps,
.ccsr .ccsr-groupe-teintes .ccsr-option-corps { width: 100%; }
.ccsr .ccsr-groupe-palettes .ccsr-option-nom { font-size: .82rem; }
.ccsr .ccsr-teintes {
display: flex;
align-self: stretch;
width: 100%;
height: 38px;
margin: 0 0 7px;
border-radius: 4px;
overflow: hidden;
}
.ccsr .ccsr-teintes i { flex: 1; }
/* Ce qui est rare vit sous les autres, sans vignette : la porte reste ouverte
sans prendre la place des deux décors habituels. */
.ccsr .ccsr-options-discretes {
display: block;
margin-top: 12px;
}
.ccsr .ccsr-option-discrete,
.ccsr .ccsr-groupe-vignettes .ccsr-option-discrete {
flex-direction: row;
align-items: flex-start;
border-style: dashed;
background: transparent;
padding: 11px 14px;
}
.ccsr .ccsr-groupe-vignettes .ccsr-option-discrete input { margin: 2px 0 0; }
.ccsr .ccsr-option-discrete .ccsr-option-nom {
display: inline;
font-weight: 600;
}
.ccsr .ccsr-option-discrete .ccsr-option-detail {
display: inline;
margin-left: 4px;
}
@media (max-width: 860px) {
.ccsr .ccsr-groupe-palettes .ccsr-options { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
.ccsr .ccsr-groupe-palettes .ccsr-options { grid-template-columns: repeat(3, 1fr); }
.ccsr .ccsr-groupe-vignettes .ccsr-options { grid-template-columns: 1fr; }
}
/* -------------------------------------------------------------------------
Les questions auxquelles le dossier répond déjà
---------------------------------------------------------------------- */
.ccsr-connu {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
align-items: baseline;
margin: 0 0 14px;
padding: 10px 14px;
border-radius: 10px;
background: var( --ccsr-papier, #FAF6F0 );
border: 1px solid var( --ccsr-bord, #E6DCCB );
font-size: .95rem;
line-height: 1.5;
}
.ccsr-connu b {
font-weight: 600;
}
.ccsr-connu-modifier {
padding: 0;
border: 0;
border-bottom: 1px solid currentColor;
background: none;
color: inherit;
font: inherit;
font-size: .9em;
opacity: .75;
cursor: pointer;
}
.ccsr-connu-modifier:hover,
.ccsr-connu-modifier:focus-visible {
opacity: 1;
}
/* Replié : le résumé tient seul. L'aide et les options ne disparaissent que
si ce style s'applique, donc jamais sans JavaScript. */
.ccsr-groupe.ccsr-replie > .ccsr-aide,
.ccsr-groupe.ccsr-replie > .ccsr-options {
display: none;
}
.ccsr-groupe.ccsr-replie > .ccsr-connu {
margin-bottom: 0;
}
/* Un groupe de pastilles de couleur sans photo : des cartes courtes, donc
plus nombreuses par rangée que des cartes à vignettes. */
.ccsr .ccsr-groupe-teintes .ccsr-options {
grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
align-items: start;
}
/* Le même bandeau sert à annoncer une bonne nouvelle : « j'ai remis vos
réponses ». Du vert plutôt que du rouge, sinon on croit à une erreur. */
.ccsr .ccsr-erreur.ccsr-bon {
color: var( --ccsr-sauge, #354535 );
background: #EEF2EB;
border-left-color: #6E8C63;
}
/* =========================================================================
Tuiles et pastilles — la forme de « Mes envies » dans l'espace client
====================================================================== */
/* --- Les tuiles : une photo carrée, le nom dessous --- */
.ccsr .ccsr-groupe-tuiles .ccsr-options {
display: grid;
grid-template-columns: repeat( var( --ccsr-colonnes, 3 ), minmax( 0, 1fr ) );
gap: 14px;
align-items: stretch;
}
.ccsr .ccsr-groupe-tuiles .ccsr-option {
position: relative;
display: block;
margin: 0;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.ccsr .ccsr-groupe-tuiles .ccsr-option > input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.ccsr .ccsr-groupe-tuiles .ccsr-option-corps {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
overflow: hidden;
border: 1px solid var( --ccsr-bord, #E6DCCB );
border-radius: 6px;
background: var( --ccsr-blanc );
transition: border-color .25s, background .25s;
}
/* La pastille cochée : un rond discret en haut à droite de la photo, plutôt
qu'une case à cocher qui vole la place du sujet. */
.ccsr .ccsr-groupe-tuiles .ccsr-option-corps::before {
content: "✓";
position: absolute;
z-index: 2;
top: 9px;
right: 9px;
width: 25px;
height: 25px;
border-radius: 50%;
background: var( --ccsr-sauge, #354535 );
color: var( --ccsr-or, #D6AE7B );
font-size: 12px;
font-weight: 600;
line-height: 25px;
text-align: center;
box-shadow: 0 0 0 2px var( --ccsr-blanc );
opacity: 0;
transform: scale( .6 );
transition: opacity .2s, transform .2s;
}
.ccsr .ccsr-groupe-tuiles .ccsr-option > input:checked + .ccsr-option-corps {
border-color: var( --ccsr-sauge, #354535 );
background: var( --ccsr-sauge, #354535 );
}
.ccsr .ccsr-groupe-tuiles .ccsr-option > input:checked + .ccsr-option-corps::before {
opacity: 1;
transform: none;
}
.ccsr .ccsr-groupe-tuiles .ccsr-option > input:checked + .ccsr-option-corps .ccsr-option-nom,
.ccsr .ccsr-groupe-tuiles .ccsr-option > input:checked + .ccsr-option-corps .ccsr-option-detail {
color: var(--ccsr-creme);
}
.ccsr .ccsr-groupe-tuiles .ccsr-option > input:focus-visible + .ccsr-option-corps {
outline: 2px solid var( --ccsr-or, #D6AE7B );
outline-offset: 2px;
}
.ccsr .ccsr-groupe-tuiles .ccsr-option-texte {
display: block;
padding: 11px 12px 13px;
text-align: center;
}
.ccsr .ccsr-groupe-tuiles .ccsr-option-nom {
display: block;
font-size: .98rem;
line-height: 1.35;
}
.ccsr .ccsr-groupe-tuiles .ccsr-option-detail {
display: block;
margin-top: 4px;
font-size: .82rem;
line-height: 1.45;
color: var( --ccsr-pale, #8C8378 );
}
/* Le carré de photos : une seule occupe tout, deux ou trois se partagent
sa hauteur sans jamais déformer la grille. */
/* C'est chaque photo qui est au format, pas la bande : en imposant le carré
à la bande entière, trois photos côte à côte devenaient trois lamelles. */
.ccsr .ccsr-groupe-tuiles .ccsr-vignettes {
display: grid;
flex: 0 0 auto;
gap: 2px;
width: 100%;
height: auto;
/* La hauteur vient du format des photos, pas d'une valeur fixe : sinon
la bande déborde sur le titre de la carte. */
grid-template-rows: auto;
grid-template-columns: 1fr;
margin: 0;
}
.ccsr .ccsr-groupe-tuiles .ccsr-vignette-cadre {
aspect-ratio: 1 / 1;
height: auto;
}
.ccsr .ccsr-groupe-tuiles .ccsr-vignettes[data-n="2"] { grid-template-columns: 1fr 1fr; }
.ccsr .ccsr-groupe-tuiles .ccsr-vignettes[data-n="3"] { grid-template-columns: 1fr 1fr 1fr; }
/* --- Les pastilles : tout ce qui n'a pas de photo --- */
.ccsr .ccsr-groupe-pastilles .ccsr-options {
display: grid;
grid-template-columns: repeat( var( --ccsr-colonnes, 4 ), minmax( 0, 1fr ) );
gap: 9px;
align-items: stretch;
}
.ccsr .ccsr-groupe-pastilles .ccsr-option {
position: relative;
display: block;
margin: 0;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.ccsr .ccsr-groupe-pastilles .ccsr-option > input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
/* Les teintes passent au-dessus et le nom dessous, comme dans l'espace
client : on reconnaît la famille de couleurs avant de lire son nom, et
les deux rangées s'alignent sans que rien ne se coupe. */
.ccsr .ccsr-groupe-pastilles .ccsr-option-corps {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
height: 100%;
padding: 16px 12px 14px;
border: 1px solid var( --ccsr-bord, #E6DCCB );
border-radius: 14px;
background: var( --ccsr-blanc );
transition: background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.ccsr .ccsr-groupe-pastilles .ccsr-option:hover .ccsr-option-corps {
border-color: var( --ccsr-or, #D6AE7B );
box-shadow: 0 2px 10px rgba( 53, 69, 53, .07 );
}
.ccsr .ccsr-groupe-pastilles .ccsr-option > input:checked + .ccsr-option-corps {
background: var( --ccsr-sauge, #354535 );
border-color: var( --ccsr-sauge, #354535 );
color: var(--ccsr-creme);
}
.ccsr .ccsr-groupe-pastilles .ccsr-option > input:checked + .ccsr-option-corps .ccsr-option-nom {
color: var(--ccsr-creme);
}
.ccsr .ccsr-groupe-pastilles .ccsr-option > input:checked + .ccsr-option-corps .ccsr-option-detail {
color: rgba( 246, 242, 233, .75 );
}
.ccsr .ccsr-groupe-pastilles .ccsr-option > input:focus-visible + .ccsr-option-corps {
outline: 2px solid var( --ccsr-or, #D6AE7B );
outline-offset: 2px;
}
.ccsr .ccsr-groupe-pastilles .ccsr-option-texte {
display: block;
text-align: center;
}
.ccsr .ccsr-groupe-pastilles .ccsr-option-nom {
display: block;
font-size: .9rem;
line-height: 1.3;
letter-spacing: .02em;
}
.ccsr .ccsr-groupe-pastilles .ccsr-option-detail {
display: block;
margin-top: 2px;
font-size: .8rem;
line-height: 1.4;
color: var( --ccsr-pale, #8C8378 );
}
/* Les teintes d'une palette, en file au-dessus du nom. */
.ccsr .ccsr-groupe-pastilles .ccsr-teintes {
display: inline-flex;
flex: 0 0 auto;
align-self: center;
width: auto;
height: auto;
margin: 0;
border-radius: 0;
overflow: visible;
}
.ccsr .ccsr-groupe-pastilles .ccsr-teintes i {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-left: -6px;
border-radius: 50%;
box-shadow: 0 0 0 2px var( --ccsr-blanc );
}
.ccsr .ccsr-groupe-pastilles .ccsr-teintes i:first-child { margin-left: 0; }
.ccsr .ccsr-groupe-pastilles .ccsr-option > input:checked + .ccsr-option-corps .ccsr-teintes i {
box-shadow: 0 0 0 2px var( --ccsr-sauge, #354535 );
}
@media (max-width: 860px) {
.ccsr .ccsr-groupe-tuiles .ccsr-options {
grid-template-columns: repeat( min( var( --ccsr-colonnes, 3 ), 3 ), minmax( 0, 1fr ) );
}
}
/* Sur téléphone, une seule carte par largeur d'écran. Les photos restent
côte à côte à l'intérieur : trois dans une carte pleine largeur se voient
encore très bien, alors que deux cartes côte à côte en feraient quatre à
l'écran, et plus rien ne se lit. */
@media (max-width: 860px) {
/* Six pastilles par rangée deviennent illisibles sur une tablette :
on repasse à trois, puis à deux sur un téléphone. */
.ccsr .ccsr-groupe-pastilles .ccsr-options {
grid-template-columns: repeat( min( var( --ccsr-colonnes, 4 ), 3 ), minmax( 0, 1fr ) );
}
}
@media (max-width: 600px) {
.ccsr .ccsr-groupe-tuiles .ccsr-options {
grid-template-columns: 1fr;
gap: 12px;
}
.ccsr .ccsr-groupe-pastilles .ccsr-options {
grid-template-columns: 1fr 1fr;
}
}
/* Ce qui est rare garde sa ligne pointillée sous les tuiles. */
.ccsr .ccsr-groupe-tuiles .ccsr-options-discretes,
.ccsr .ccsr-groupe-pastilles .ccsr-options-discretes {
display: block;
margin-top: 12px;
}
.ccsr .ccsr-groupe-tuiles .ccsr-option-discrete .ccsr-option-corps,
.ccsr .ccsr-groupe-pastilles .ccsr-option-discrete .ccsr-option-corps {
display: flex;
align-items: baseline;
gap: 10px;
width: 100%;
padding: 12px 16px;
border-radius: 8px;
border-style: dashed;
background: transparent;
text-align: left;
}
.ccsr .ccsr-groupe-tuiles .ccsr-option-discrete .ccsr-option-texte {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
align-items: baseline;
text-align: left;
padding: 0;
}
.ccsr .ccsr-groupe-tuiles .ccsr-option-discrete .ccsr-option-nom { font-weight: 600; }
.ccsr .ccsr-groupe-tuiles .ccsr-option-discrete .ccsr-option-detail { margin-top: 0; }
/* ---------------- le résumé dans sa colonne ----------------
Dans 306 pixels, l'étiquette et sa valeur ne tiennent pas côte à côte :
les lignes d'information s'empilent, et seules celles de la colonne
d'argent gardent le montant à droite, là où l'œil va le chercher. */
.ccsr .ccsr-resume .ccsr-recap-ligne {
display: block;
gap: 0;
padding: 10px 0;
}
.ccsr .ccsr-resume .ccsr-recap-ligne span {
display: block;
margin-bottom: 3px;
font-size: .66rem;
letter-spacing: .1em;
}
.ccsr .ccsr-resume .ccsr-recap-ligne strong {
display: block;
text-align: left;
font-size: .96rem;
line-height: 1.45;
}
.ccsr .ccsr-resume .ccsr-recap-total .ccsr-recap-ligne {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
padding: 8px 0;
}
.ccsr .ccsr-resume .ccsr-recap-total .ccsr-recap-ligne span {
margin: 0;
flex: 1 1 auto;
}
.ccsr .ccsr-resume .ccsr-recap-total .ccsr-recap-ligne strong {
flex: 0 0 auto;
text-align: right;
white-space: nowrap;
}
.ccsr .ccsr-resume .ccsr-recap-ligne.ccsr-gros strong {
font-size: 1.42rem;
}
/* Au-dessus du formulaire sur tablette et téléphone, le résumé retrouve la
lecture en deux colonnes : la largeur est là. */
@media (max-width: 980px) {
.ccsr .ccsr-resume .ccsr-recap-ligne {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 18px;
}
.ccsr .ccsr-resume .ccsr-recap-ligne span {
flex: 0 0 auto;
margin: 0;
}
.ccsr .ccsr-resume .ccsr-recap-ligne strong {
text-align: right;
}
}
/* ---------------- la page de remerciement ----------------
Ce n'est pas un reçu, c'est un moment : une grande photo, une phrase et
la date en gros. Le détail des montants vient en dessous, pour qui le
cherche. */
.ccsr .ccsr-merci-scene {
margin: 0 0 clamp(26px, 4vw, 40px);
padding: clamp(46px, 7vw, 86px) clamp(22px, 5vw, 56px);
border-radius: 16px;
background-color: var(--ccsr-sauge);
background-size: cover;
background-position: center;
text-align: center;
color: var(--ccsr-creme);
}
.ccsr .ccsr-merci-sur {
margin: 0 0 14px;
font-size: .68rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ccsr-or);
}
.ccsr .ccsr-merci-scene h3 {
margin: 0;
font-family: var(--ccsr-serif);
font-size: clamp(1.9rem, 4.4vw, 2.9rem);
font-weight: 500;
line-height: 1.15;
color: var(--ccsr-creme);
}
.ccsr .ccsr-merci-quand {
margin: clamp(22px, 3vw, 34px) 0 0;
font-family: var(--ccsr-serif);
font-size: clamp(1.2rem, 2.6vw, 1.7rem);
line-height: 1.3;
color: var(--ccsr-creme);
}
.ccsr .ccsr-merci-sous {
margin: 6px 0 0;
font-size: .78rem;
letter-spacing: .09em;
text-transform: uppercase;
color: rgba(246, 242, 233, .7);
}
.ccsr .ccsr-merci-mot {
max-width: 620px;
margin: 0 auto 16px;
text-align: center;
font-size: 1.04rem;
line-height: 1.7;
}
/* =========================================================================
* Le raffinement — la dernière passe
*
* Mesuré sur rebeccavandal.com le 3 octobre 2026 : le bouton principal du
* site est un Montserrat 600 de 11,5 px, interlettré à .14em, en capitales,
* vert sauge #354535 sur crème var(--ccsr-creme), en gélule. Les sur-titres y sont un
* Montserrat 600 de 11 px interlettré à .26em, dorés #A8834F. Les grands
* titres sont en Cormorant Garamond 500, encre #2F2A24.
*
* Ce bloc aligne le formulaire sur ces mesures, et surtout unifie trois
* choses qui avaient dérivé au fil des retouches : la durée des
* transitions, le langage du survol, et le liseré de mise au point.
* ====================================================================== */
/* --- un seul rythme pour tout ce qui bouge --- */
.ccsr .ccsr-forfait,
.ccsr .ccsr-option-corps,
.ccsr .ccsr-clause-case,
.ccsr .ccsr-creneau,
.ccsr .ccsr-bouton,
.ccsr .ccsr-forfait-plus,
.ccsr .ccsr-fil li {
transition-duration: .22s;
transition-timing-function: cubic-bezier(.22, .7, .2, 1);
}
/* --- un seul langage de survol ---
Tout ce qui se choisit réagit de la même façon : le filet passe au doré
et une ombre très basse décolle la carte du papier. Rien ne saute : le
mouvement appartient aux boutons, pas aux cartes. */
.ccsr .ccsr-forfait:hover,
.ccsr .ccsr-option:hover .ccsr-option-corps,
.ccsr .ccsr-clause-case:hover,
.ccsr .ccsr-creneau:hover {
border-color: var(--ccsr-or);
box-shadow: 0 2px 12px rgba(53, 69, 53, .07);
}
/* Une carte déjà cochée ne réagit plus au survol : elle est acquise. */
.ccsr .ccsr-forfait input:checked ~ * ,
.ccsr .ccsr-option > input:checked + .ccsr-option-corps {
box-shadow: none;
}
/* --- le même liseré de mise au point partout --- */
.ccsr a:focus-visible,
.ccsr button:focus-visible,
.ccsr input:focus-visible,
.ccsr select:focus-visible,
.ccsr textarea:focus-visible,
.ccsr [tabindex]:focus-visible {
outline: 2px solid var(--ccsr-or-fonce);
outline-offset: 3px;
}
/* --- les boutons, aux mesures du site --- */
html body .ccsr .ccsr-bouton {
font-size: .72rem !important;
letter-spacing: .14em !important;
}
html body .ccsr .ccsr-suite:hover,
html body .ccsr .ccsr-envoi:hover {
transform: translateY(-1px);
}
html body .ccsr .ccsr-bouton:active {
transform: translateY(0);
}
/* --- les sur-titres, aux mesures du site ---
Montserrat 600, 11 px, interlettré à .26em, doré. C'est la signature
typographique de rebeccavandal.com : elle doit se retrouver ici. */
.ccsr .ccsr-surtitre,
.ccsr .ccsr-merci-sur,
.ccsr .ccsr-raison,
.ccsr .ccsr-resume-titre,
.ccsr .ccsr-recap-titre {
font-family: var(--ccsr-sans);
font-size: .69rem;
font-weight: 600;
letter-spacing: .26em;
text-transform: uppercase;
}
.ccsr .ccsr-resume-titre,
.ccsr .ccsr-recap-titre {
color: var(--ccsr-or-fonce);
}
/* Les étiquettes de données du résumé restent sobres : du doré partout
ferait clignoter la colonne. */
.ccsr .ccsr-recap-ligne span {
letter-spacing: .16em;
}
/* --- les légendes de bloc, en Cormorant comme les titres du site --- */
.ccsr .ccsr-groupe > legend,
.ccsr .ccsr-pas-titre,
.ccsr .ccsr-merci h3 {
font-family: var(--ccsr-serif);
font-weight: 500;
letter-spacing: .01em;
color: var(--ccsr-encre);
}
/* …sauf celui de la scène de remerciement, qui est posé sur la photo : il
garde sa couleur claire. Cette règle doit rester APRÈS celle du dessus. */
.ccsr .ccsr-merci .ccsr-merci-scene h3 {
color: var(--ccsr-creme);
}
/* --- le filet doré sous les grands titres d'étape ---
Un trait court, décalé à gauche : le détail qui dit « soigné ». */
.ccsr .ccsr-pas-titre {
position: relative;
padding-bottom: 14px;
}
.ccsr .ccsr-pas-titre::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 46px;
height: 1px;
background: var(--ccsr-or);
}
/* ---------------- les deux bandeaux d'accueil ----------------
« Vous aviez commencé » pour celle qui revient, « Déjà cliente ? » pour
celle qui n'est pas connectée. Discrets : ils ouvrent une porte, ils ne
barrent pas le chemin. */
.ccsr .ccsr-bandeau {
margin: 0 0 22px;
padding: 14px 20px;
border-radius: 10px;
font-size: .95rem;
line-height: 1.6;
}
.ccsr .ccsr-bandeau-connue {
background: var(--ccsr-papier-2);
color: var(--ccsr-doux);
text-align: center;
}
.ccsr .ccsr-bandeau-connue a {
color: var(--ccsr-sauge);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid var(--ccsr-or);
}
.ccsr .ccsr-bandeau-connue a:hover {
border-bottom-color: var(--ccsr-sauge);
}
.ccsr .ccsr-bandeau-reprise {
display: flex;
flex-wrap: wrap;
gap: 6px 22px;
align-items: center;
justify-content: space-between;
background: var(--ccsr-blanc);
border: 1px solid var(--ccsr-or);
}
.ccsr .ccsr-bandeau-reprise p {
margin: 0;
}
.ccsr .ccsr-bandeau-gestes {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
align-items: center;
}
.ccsr .ccsr-lien-fort,
.ccsr .ccsr-lien-doux {
padding: 0;
border: 0;
background: none;
font-family: var(--ccsr-sans);
font-size: .72rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
cursor: pointer;
}
.ccsr .ccsr-lien-fort {
color: var(--ccsr-sauge);
border-bottom: 1px solid var(--ccsr-or);
}
.ccsr .ccsr-lien-doux {
color: var(--ccsr-pale);
font-weight: 500;
}
.ccsr .ccsr-lien-fort:hover { border-bottom-color: var(--ccsr-sauge); }
.ccsr .ccsr-lien-doux:hover { color: var(--ccsr-doux); }
/* « Voir d'autres dates » : un geste discret au bas de la liste. */
.ccsr .ccsr-creneaux-plus {
display: block;
width: 100%;
margin: 4px 0 0;
padding: 12px;
border: 1px dashed var(--ccsr-bord-fort);
border-radius: 10px;
background: none;
font-family: var(--ccsr-sans);
font-size: .7rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ccsr-sauge);
cursor: pointer;
transition: background .22s, border-color .22s;
}
.ccsr .ccsr-creneaux-plus:hover {
background: var(--ccsr-papier-2);
border-style: solid;
}
/* ---------------- les tailles reprises en main ----------------
Les couches successives de ce fichier avaient fini par annuler la passe
« tout était un cran trop petit » sur deux éléments des cartes de forfait.
Ces deux lignes-ci sont les dernières du fichier : elles ont le dernier
mot, et il n'y a plus de doute sur ce qui s'applique. */
.ccsr .ccsr-forfait-inclus {
font-size: 1.02rem;
line-height: 1.64;
}
.ccsr .ccsr-forfait-depot {
font-size: .94rem;
}
/* =========================================================================
* Le téléphone (v2.4)
*
* Tout ce qui suit répare ce que j'ai vu en regardant la page sur un vrai
* écran de téléphone, et rien d'autre : sur ordinateur, pas une ligne ne
* bouge. Trois principes, qui sont les miens depuis le début :
*
* 1. Sur téléphone, le texte prend toute la largeur. L'équilibrage des
* lignes est fait pour les grands écrans ; en petit, il ne faisait que
* rétrécir mes paragraphes.
* 2. Jamais un mot seul en fin de titre ou de paragraphe.
* 3. Une photo doit se voir. Trois vignettes côte à côte sur 390 pixels,
* ce sont trois timbres-poste.
* ====================================================================== */
/* ---- 1. Les titres ne laissent plus un mot seul ---- */
/* « text-wrap: balance » répartit les lignes d'un titre à égalité. C'est
exactement ma règle, confiée au navigateur : « Combo Maternité &
Nouveau-né » se coupe après le « & » au lieu d'abandonner « né » tout
seul sur la deuxième ligne. */
html body .ccsr .ccsr-pas-titre,
html body .ccsr .ccsr-forfait-nom,
html body .ccsr .ccsr-groupe legend,
html body .ccsr .ccsr-clauses-titre,
html body .ccsr .ccsr-conditions h4,
html body .ccsr .ccsr-titre {
text-wrap: balance;
hyphens: manual;
}
/* Pour les paragraphes, « pretty » : la largeur reste pleine, mais le
navigateur évite la dernière ligne à un ou deux mots. */
html body .ccsr .ccsr-pas-mot,
html body .ccsr .ccsr-aide,
html body .ccsr .ccsr-intro,
html body .ccsr .ccsr-option-detail,
html body .ccsr .ccsr-raison,
html body .ccsr .ccsr-dabord-sinon,
html body .ccsr .ccsr-dabord p,
html body .ccsr .ccsr-quand-suite p,
html body .ccsr .ccsr-creneau-mot {
text-wrap: pretty;
}
@media (max-width: 767px) {
/* La description d'un forfait est coupée en deux lignes égales pour le
grand écran. Sur téléphone, cette coupure ne sert plus à rien : elle
laissait « et les premiers jours. » seul sur sa ligne alors qu'il
restait de la place à côté. On rend la phrase à son flot normal. */
html body .ccsr .ccsr-forfait-resume .ccsr-ligne {
display: inline;
}
html body .ccsr .ccsr-forfait-resume {
text-wrap: pretty;
}
}
/* ---- 2. Le fil des étapes ---- */
@media (max-width: 640px) {
/* Les cinq segments gardent leur rangée ; le nom de l'étape en cours
passe dessous, sur toute la largeur. Avant, il était enfermé dans une
colonne de 70 pixels et « 1 · VOTRE SÉANCE » se cassait en deux. */
.ccsr .ccsr-fil {
position: relative;
padding-bottom: 20px;
}
.ccsr .ccsr-fil li.actif .ccsr-fil-rang,
.ccsr .ccsr-fil li.actif .ccsr-fil-nom {
position: absolute;
bottom: 0;
left: 0;
font-size: .62rem;
line-height: 1;
white-space: nowrap;
}
.ccsr .ccsr-fil li.actif .ccsr-fil-nom {
padding-left: 2.1em;
}
}
/* ---- 3. Les photos d'exemple ---- */
@media (max-width: 640px) {
/* Une photo par rangée : c'est la seule façon de voir une robe ou un
décor sur un téléphone. Deux restent côte à côte quand il n'y en a
que deux — elles gardent alors une taille honnête. */
/* Les sélecteurs portent [data-n] comme ceux du grand écran : sans ça,
la règle à trois colonnes, plus précise, l'emportait et les vignettes
restaient en timbres-poste. */
.ccsr .ccsr-vignettes[data-n],
.ccsr .ccsr-groupe-tuiles .ccsr-vignettes[data-n] {
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 4px;
}
.ccsr .ccsr-vignettes[data-n="2"],
.ccsr .ccsr-groupe-tuiles .ccsr-vignettes[data-n="2"] {
grid-template-columns: 1fr 1fr;
}
/* Trois photos : deux côte à côte et la troisième sur toute la largeur.
C'est ma règle pour toutes les galeries du site, et c'est le bon
compromis ici : trois rangées pleines feraient une carte interminable,
et trois colonnes font trois timbres-poste. */
.ccsr .ccsr-vignettes[data-n="3"],
.ccsr .ccsr-groupe-tuiles .ccsr-vignettes[data-n="3"] {
grid-template-columns: 1fr 1fr;
}
.ccsr .ccsr-vignettes[data-n="3"] > :nth-child(3) {
grid-column: 1 / -1;
}
.ccsr .ccsr-vignettes[data-n="3"] .ccsr-vignette-cadre {
aspect-ratio: 1 / 1;
}
.ccsr .ccsr-vignettes[data-n="3"] > :nth-child(3) .ccsr-vignette-cadre,
.ccsr .ccsr-vignettes[data-n="3"] > :nth-child(3).ccsr-vignette-cadre {
aspect-ratio: 3 / 2;
}
/* Hors des tuiles, la fenêtre n'a pas de format imposé : on lui en donne
un, sinon une seule photo pleine largeur s'étirait sur 180 pixels de
haut et coupait les visages. */
.ccsr .ccsr-groupe-vignettes .ccsr-vignettes[data-n] .ccsr-vignette-cadre {
aspect-ratio: 4 / 5;
}
.ccsr .ccsr-vignettes[data-n="2"] .ccsr-vignette-cadre {
aspect-ratio: 1 / 1;
}
/* Les photos que j'ai choisi de ne pas montrer sur téléphone. */
.ccsr .ccsr-vignette-pas-tel {
display: none;
}
/* Le compte de photos réellement visibles sur téléphone commande la
grille : sans ça, en masquer une laissait un trou dans la rangée. */
/* Ces règles portent la même profondeur de sélecteur que celles de
[data-n] et passent après : c'est le nombre de photos réellement vues
qui décide de la forme, pas le nombre posé au catalogue. */
.ccsr .ccsr-groupe-vignettes .ccsr-vignettes[data-tel="1"],
.ccsr .ccsr-groupe-tuiles .ccsr-vignettes[data-tel="1"],
.ccsr .ccsr-vignettes[data-n][data-tel="1"] { grid-template-columns: 1fr; }
.ccsr .ccsr-groupe-vignettes .ccsr-vignettes[data-tel="2"],
.ccsr .ccsr-groupe-tuiles .ccsr-vignettes[data-tel="2"],
.ccsr .ccsr-vignettes[data-n][data-tel="2"] { grid-template-columns: 1fr 1fr; }
/* La pleine largeur de la troisième et son format large n'ont de sens
que si les trois se montrent. En masquer une laissait une photo seule
dans sa colonne et la suivante étalée en dessous. */
.ccsr .ccsr-vignettes[data-n="3"]:not([data-tel="3"]) > :nth-child(3) {
grid-column: auto;
}
.ccsr .ccsr-groupe-vignettes .ccsr-vignettes[data-tel="1"] .ccsr-vignette-cadre,
.ccsr .ccsr-vignettes[data-n="3"][data-tel="1"] > * .ccsr-vignette-cadre {
aspect-ratio: 4 / 5;
}
.ccsr .ccsr-groupe-vignettes .ccsr-vignettes[data-tel="2"] .ccsr-vignette-cadre,
.ccsr .ccsr-vignettes[data-n="3"][data-tel="2"] > * .ccsr-vignette-cadre,
.ccsr .ccsr-vignettes[data-n="3"][data-tel="2"] > :nth-child(3) .ccsr-vignette-cadre {
aspect-ratio: 1 / 1;
}
/* Toutes masquées : la bande entière disparaît. [data-n] lui donne la
même précision que ses voisines, pour qu'elle ne gagne pas seulement
parce qu'elle est écrite plus bas. */
.ccsr .ccsr-vignettes[data-n][data-tel="0"],
.ccsr .ccsr-groupe-tuiles .ccsr-vignettes[data-tel="0"] { display: none; }
}
/* ---- 4. Les textes écrits pour le téléphone ---- */
/* Quand j'ai écrit une version courte d'une aide, c'est elle qui s'affiche
sur téléphone ; sinon, rien ne change. */
.ccsr .ccsr-aide-tel { display: none; }
@media (max-width: 640px) {
.ccsr .ccsr-aide-ordi { display: none; }
.ccsr .ccsr-aide-tel { display: block; }
}
/* ---- 5. Les deux cadrages d'une même photo ---- */
/* Le cadrage voyage en variables posées sur la fenêtre de la photo
(--vx, --vy, --vz, --vm pour l'ordinateur ; --tx, --ty, --tz, --tm pour le
téléphone). C'est la seule façon d'avoir deux cadrages : un style écrit à
même la balise l'emporterait sur toute règle d'ici. */
.ccsr .ccsr-vignette-cadre img,
.ccsr img.ccsr-vignette {
object-position: var(--vx, 50%) var(--vy, 50%);
/* --vox vaut 50% quand la photo est retournée : le pivot passe au milieu
pour qu'elle remplisse toujours sa fenêtre. */
transform-origin: var(--vox, var(--vx, 50%)) var(--vy, 50%);
transform: scale(var(--vz, 1)) scaleX(var(--vm, 1));
}
@media (max-width: 640px) {
/* Le réglage téléphone s'il existe, celui de l'ordinateur sinon : une
photo cadrée une seule fois reste juste partout. */
.ccsr .ccsr-vignette-cadre img,
.ccsr img.ccsr-vignette {
object-position: var(--tx, var(--vx, 50%)) var(--ty, var(--vy, 50%));
transform-origin: var(--tox, var(--vox, var(--tx, var(--vx, 50%)))) var(--ty, var(--vy, 50%));
transform: scale(var(--tz, var(--vz, 1))) scaleX(var(--tm, var(--vm, 1)));
}
}
/* =========================================================================
* Les options payantes (v2.7)
*
* Elles ne sont pas des réponses à une question : ce sont des ajouts, et
* elles n'ont rien à faire dans une grille à côté d'autres cartes. Une seule,
* sur toute la largeur, avec sa photo à gauche et son prix bien visible.
* ====================================================================== */
.ccsr .ccsr-groupe-extras .ccsr-options {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
/* La photo à gauche, le texte à droite : une option payante se lit comme une
ligne, pas comme une tuile. */
.ccsr .ccsr-option-extra .ccsr-option-corps {
display: grid;
grid-template-columns: 136px 1fr;
gap: 16px;
align-items: center;
padding: 14px 16px;
}
.ccsr .ccsr-option-extra .ccsr-vignettes {
margin: 0;
grid-template-rows: auto;
}
.ccsr .ccsr-option-extra .ccsr-vignette-cadre {
aspect-ratio: 1 / 1;
}
/* Sans photo, le texte prend toute la largeur plutôt que de laisser une
colonne vide à sa gauche. */
.ccsr .ccsr-option-extra .ccsr-option-corps:not(:has(.ccsr-vignettes)) {
grid-template-columns: 1fr;
}
/* Le nom et le détail retrouvent la taille du reste de la page : dans un
bloc large, ils héritaient de la taille des cartes à vignettes et
paraissaient énormes à côté de tout le reste. */
html body .ccsr .ccsr-option-extra .ccsr-option-nom {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px;
font-size: .98rem !important;
font-weight: 500;
}
html body .ccsr .ccsr-option-extra .ccsr-option-detail {
font-size: .88rem !important;
line-height: 1.6;
max-width: 62ch;
}
/* Le prix : une pastille discrète, lisible d'un coup d'œil. */
.ccsr .ccsr-option-prix {
display: inline-block;
padding: 3px 11px;
border: 1px solid var(--ccsr-bord-fort, #D6AE7B);
border-radius: 999px;
font-family: "Montserrat", -apple-system, sans-serif;
font-size: .7rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
color: var(--ccsr-or-texte, #A8834F);
}
@media (max-width: 640px) {
/* Sur téléphone, la photo repasse au-dessus du texte : 136 pixels de
photo plus le texte à côté, ça ne tient pas sur 390. */
.ccsr .ccsr-option-extra .ccsr-option-corps {
grid-template-columns: 1fr;
gap: 10px;
}
.ccsr .ccsr-option-extra .ccsr-vignette-cadre {
aspect-ratio: 16 / 9;
}
}
/* =========================================================================
* 2.8 — L'harmonie : un seul endroit pour un titre, une seule échelle
*
* La page s'était construite par couches, et chaque couche avait apporté sa
* façon de titrer : un legend posé sur la bordure de la carte, une étiquette
* en petites capitales ailleurs, un titre au-dessus plus loin. De près, ça se
* remarque ; de loin, ça donne l'impression que ce n'est pas le même site.
*
* Ici, une bonne fois : le titre d'une carte est toujours au même endroit,
* en haut, à l'intérieur, dans la même famille et à la même taille. Le reste
* de l'échelle en découle.
* ====================================================================== */
/* Le legend d'un fieldset se pose par défaut sur la bordure, dans un trou
découpé exprès. En le faisant flotter, il redevient une ligne normale :
dedans, en haut, aligné avec le reste. */
.ccsr .ccsr-groupe > legend {
float: left;
width: 100%;
padding: 0;
margin: 0 0 3px;
font-family: var(--ccsr-serif);
font-size: 1.2rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
color: var(--ccsr-sauge);
}
/* Le dégagement du legend flottant valait pour le SEUL élément qui le suit.
Dès qu'on glissait quoi que ce soit entre les deux — l'étiquette « Pour
votre séance maternité », par exemple —, le reste de la carte ne dégageait
plus rien : le bouton « Nous avons déjà convenu d'une date » se retrouvait
à 10 px de large contre le bord droit, son texte coupé lettre par lettre.
Une carte entière cassée par un élément inséré au mauvais endroit.
« ~ » plutôt que « + » : tous les enfants qui suivent le titre dégagent. */
.ccsr .ccsr-groupe > legend ~ * { clear: both; }
.ccsr .ccsr-groupe::after { content: ""; display: block; clear: both; }
/* Une question seule dans sa carte — l'adresse de l'entreprise, la thématique
du décor — est un titre de carte, pas une étiquette de champ : elle se
présente comme les autres titres.
« Combien serez-vous ? » était ici aussi, et c'était une erreur : ce n'est
pas un label isolé, c'est le legend de sa carte, comme les vingt-six
autres. Il s'écrivait à 17 px quand tous ses pairs font 24. */
html body .ccsr .ccsr-champ.ccsr-suite-de > label {
font-family: var(--ccsr-serif) !important;
font-size: 1.08rem !important;
font-weight: 600 !important;
line-height: 1.35 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--ccsr-sauge) !important;
margin: 0 0 7px !important;
}
/* Une carte ne garde pas une bande vide sous sa dernière ligne : la marge du
dernier champ s'ajoutait au rembourrage de la carte, et chaque carte
finissait par un trou de quarante pixels. */
.ccsr .ccsr-groupe > *:last-child,
.ccsr .ccsr-champ > *:last-child,
.ccsr .ccsr-groupe .ccsr-paire:last-child .ccsr-champ { margin-bottom: 0; }
.ccsr .ccsr-groupe .ccsr-paire:last-child .ccsr-champ .ccsr-aide:last-child { margin-bottom: 0; }
/* L'échelle, du plus grand au plus petit, sans exception :
titre d'étape · titre de carte · nom d'option · explication · étiquette. */
.ccsr .ccsr-pas-mot { font-size: .97rem; line-height: 1.7; }
.ccsr .ccsr-aide { font-size: .87rem; line-height: 1.62; color: var(--ccsr-doux); }
.ccsr .ccsr-groupe-tuiles .ccsr-option-nom,
.ccsr .ccsr-groupe-pastilles .ccsr-option-nom { font-size: .95rem; line-height: 1.4; }
.ccsr .ccsr-groupe-tuiles .ccsr-option-detail,
.ccsr .ccsr-groupe-pastilles .ccsr-option-detail { font-size: .82rem; line-height: 1.5; }
/* -------- Le détail qui se déplie quand la réponse est choisie -------- */
.ccsr .ccsr-option-suite { display: none; }
.ccsr .ccsr-option:has( input:checked ) .ccsr-option-suite {
display: block;
margin-top: 9px;
padding-top: 9px;
border-top: 1px solid currentColor;
font-size: .8rem;
line-height: 1.55;
opacity: .92;
}
/* Sur une tuile cochée, le fond devient vert : le filet et le texte suivent. */
.ccsr .ccsr-groupe-tuiles .ccsr-option > input:checked + .ccsr-option-corps .ccsr-option-suite {
color: #E7E2D4;
border-top-color: rgba( 246, 242, 233, .3 );
}
.ccsr .ccsr-groupe-pastilles .ccsr-option > input:checked + .ccsr-option-corps .ccsr-option-suite {
color: var(--ccsr-or-fonce);
border-top-color: rgba( 168, 131, 79, .3 );
}
/* -------- Les champs obligatoires portent une étoile -------- */
.ccsr .ccsr-champ:has( > input[required] ) > label::after,
.ccsr .ccsr-champ:has( > textarea[required] ) > label::after,
.ccsr .ccsr-champ:has( > select[required] ) > label::after,
.ccsr .ccsr-groupe-requis > legend::after {
content: " *";
color: var(--ccsr-or-fonce);
font-weight: 600;
}
.ccsr .ccsr-pas-etoile {
margin: 0 0 20px;
font-size: .76rem;
letter-spacing: .04em;
color: var(--ccsr-pale);
}
.ccsr .ccsr-pas-etoile b { color: var(--ccsr-or-fonce); font-weight: 600; }
/* -------- Ce qui manque, dit en toutes lettres -------- */
.ccsr .ccsr-manque {
margin: 0 0 18px;
padding: 14px 16px;
background: #FBF1EE;
border: 1px solid #E3C3BA;
border-left: 3px solid var(--ccsr-rouge);
border-radius: 0 9px 9px 0;
font-size: .9rem;
line-height: 1.6;
color: var(--ccsr-rouge-texte);
}
.ccsr .ccsr-manque-titre {
display: block;
margin: 0 0 6px;
font-weight: 600;
}
.ccsr .ccsr-manque ul { margin: 0; padding-left: 18px; }
.ccsr .ccsr-manque li { margin: 0 0 3px; }
/* -------- Les conseils, sous le récapitulatif -------- */
.ccsr .ccsr-conseils {
margin-top: 16px;
padding: 18px 20px 16px;
background: var(--ccsr-blanc);
border: 1px solid var(--ccsr-bord);
border-top: 2px solid var(--ccsr-or);
border-radius: 12px;
}
.ccsr .ccsr-conseils-titre {
margin: 0 0 12px;
font-family: var(--ccsr-sans);
font-size: .7rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ccsr-or-fonce);
}
.ccsr .ccsr-conseils-liste { margin: 0; padding: 0; list-style: none; }
.ccsr .ccsr-conseil {
margin: 0 0 14px;
padding: 0 0 14px;
border-bottom: 1px solid var(--ccsr-bord);
}
.ccsr .ccsr-conseil:last-child { border-bottom: 0; }
.ccsr .ccsr-conseil-titre {
display: block;
margin: 0 0 4px;
font-family: var(--ccsr-serif);
font-size: 1.04rem;
font-weight: 600;
line-height: 1.3;
color: var(--ccsr-sauge);
}
.ccsr .ccsr-conseil-texte {
display: block;
font-size: .83rem;
line-height: 1.6;
color: var(--ccsr-doux);
}
.ccsr .ccsr-conseils-mot {
margin: 12px 0 0;
padding-top: 12px;
border-top: 1px solid var(--ccsr-bord);
font-size: .76rem;
line-height: 1.55;
color: var(--ccsr-pale);
}
/* -------- Les survols : la même réponse partout -------- */
.ccsr a:hover,
.ccsr .ccsr-lien-fort:hover,
.ccsr .ccsr-lien-doux:hover,
.ccsr .ccsr-connu-modifier:hover { color: var(--ccsr-or-fonce); }
.ccsr .ccsr-option:hover,
.ccsr .ccsr-creneau:hover,
.ccsr .ccsr-bascule:hover { border-color: var(--ccsr-bord-fort); }
.ccsr .ccsr-groupe-tuiles .ccsr-option:hover .ccsr-option-corps,
.ccsr .ccsr-groupe-pastilles .ccsr-option:hover .ccsr-option-corps { border-color: var(--ccsr-bord-fort); }
/* Une réponse déjà cochée ne change pas de couleur au survol : elle est
verte, elle le reste. Avant, elle s'éclaircissait et on croyait l'avoir
décochée. */
.ccsr .ccsr-groupe-tuiles .ccsr-option > input:checked + .ccsr-option-corps:hover,
.ccsr .ccsr-groupe-pastilles .ccsr-option > input:checked + .ccsr-option-corps:hover {
border-color: var(--ccsr-sauge);
}
@media (max-width: 900px) {
.ccsr .ccsr-conseils { margin-top: 14px; }
}
/* -------- Le total ne ressemble plus aux autres sommes -------- */
.ccsr .ccsr-recap-sous {
margin: 16px 0 6px;
font-family: var(--ccsr-sans);
font-size: .64rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ccsr-pale);
}
.ccsr .ccsr-recap-total > .ccsr-recap-sous:first-child { margin-top: 0; }
.ccsr .ccsr-recap-grandtotal {
display: block;
margin: 14px 0 4px;
padding: 14px 16px 13px;
background: var(--ccsr-sauge);
border-radius: 10px;
text-align: left;
}
.ccsr .ccsr-recap-grandtotal-mot {
display: block;
font-family: var(--ccsr-sans);
font-size: .64rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ccsr-or);
}
.ccsr .ccsr-recap-grandtotal-chiffre {
display: block;
margin: 3px 0 5px;
font-family: var(--ccsr-serif);
font-size: 2.1rem;
font-weight: 600;
line-height: 1.05;
color: var(--ccsr-creme);
}
.ccsr .ccsr-recap-grandtotal-note {
display: block;
font-size: .72rem;
line-height: 1.5;
color: rgba( 246, 242, 233, .74 );
}
/* -------- « Trois questions » devient une carte comme les autres -------- */
.ccsr .ccsr-clauses {
margin: 0 0 24px;
padding: 22px 24px 24px;
background: var(--ccsr-blanc);
border: 1px solid var(--ccsr-bord);
border-radius: 12px;
}
html body .ccsr .ccsr-clauses-titre {
margin: 0 0 14px !important;
font-family: var(--ccsr-serif) !important;
/* La taille vient de l'échelle, en bas de ce fichier. */
font-weight: 600 !important;
line-height: 1.3 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--ccsr-sauge) !important;
}
/* Le bloc du premier versement portait une étiquette en capitales là où
toutes les autres cartes ont un titre : même traitement pour tout. */
html body .ccsr .ccsr-depot-titre {
font-family: var(--ccsr-serif) !important;
/* La taille vient de l'échelle, en bas de ce fichier. */
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--ccsr-sauge) !important;
margin: 0 0 10px !important;
}
/* =========================================================================
* La bande d'en-tête : cinq portraits, une seconde pour tout dire
* ====================================================================== */
.ccsr .ccsr-banniere-bande {
position: relative;
overflow: hidden;
background: var(--ccsr-sauge);
isolation: isolate;
}
/* Aucun espace entre les photos : mesuré sur les bannières du site, les cinq
images se touchent. Les deux pixels que j'avais mis dessinaient quatre
traits sombres que vos autres pages n'ont pas. */
.ccsr .ccsr-bande {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
z-index: 0;
}
.ccsr .ccsr-bande-photo {
display: block;
position: relative;
overflow: hidden;
background: #2A362A;
}
/* Chaque photo porte son propre cadrage, réglé dans l'admin : « 14303:22 »
garde le côté gauche, sinon on coupait un pied. */
.ccsr .ccsr-bande-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--bx, 50%) var(--by, 32%);
/* Et un rapprochement, quand le sujet est loin : « 902:50:32:125 ». Le
point d'ancrage est celui du cadrage, donc on grossit autour de ce
qu'on avait choisi de garder, pas autour du centre. */
transform: scale(var(--bz, 1));
transform-origin: var(--bx, 50%) var(--by, 32%);
/* Le voile mange un peu de couleur : on la rend aux photos pour retomber
sur la saturation mesurée sur vos autres bannières, plutôt que de lever
le voile et perdre la lisibilité du titre. */
filter: saturate(1.3) contrast(1.04);
}
/* Le voile : assez sombre pour que le titre se lise d'un coup, assez clair
pour qu'on reconnaisse les cinq séances. Plus sombre au centre, là où le
texte se pose, plus clair sur les bords. */
/* Le voile, relevé sur la bannière de /tarifs/ : un brun chaud, pas un vert,
et nettement plus clair que ce que j'avais mis. Mon voile vert à 62 %
lessivait les couleurs — vos photos y perdaient leur or et leur rouille,
là où le site, lui, les garde. Mesuré : clarté 31 %, saturation 28 %. */
.ccsr .ccsr-bande-voile {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(rgba(28, 22, 16, .26), rgba(28, 22, 16, .50)),
radial-gradient(ellipse 64% 86% at 50% 52%, rgba(28, 22, 16, .32), rgba(28, 22, 16, 0) 74%);
}
/* Le filet clair en retrait, à vingt pixels du bord : c'est la signature de
vos bannières, et il manquait à celle-ci. */
.ccsr .ccsr-banniere-bande::after {
content: "";
position: absolute;
inset: 20px;
z-index: 1;
border: 1px solid rgba(246, 242, 233, .26);
pointer-events: none;
}
.ccsr .ccsr-banniere-bande > .ccsr-titre,
.ccsr .ccsr-banniere-bande > .ccsr-intro,
.ccsr .ccsr-banniere-bande > h1,
.ccsr .ccsr-banniere-bande > h2,
.ccsr .ccsr-banniere-bande > p {
position: relative;
z-index: 2;
text-shadow: 0 1px 24px rgba(20, 28, 22, .5);
}
@media (max-width: 782px) {
/* Une seule photo sur téléphone, comme les autres bannières du site.
À cinq, chacune devenait une lamelle de soixante-dix pixels où l'on ne
reconnaissait plus personne ; à trois, c'était encore trop étroit. */
.ccsr .ccsr-bande { grid-template-columns: 1fr; }
.ccsr .ccsr-bande-photo { display: none; }
.ccsr .ccsr-bande-photo.ccsr-bande-tel { display: block; }
.ccsr .ccsr-banniere-bande::after { inset: 12px; }
}
/* =========================================================================
* Les cartes de forfait : un titre sur une ligne, et rien de plus tant
* qu'on n'a pas choisi
*
* Elles portaient quatre choses de longueurs différentes — un titre qui se
* coupait en deux, un résumé, une durée, un montant de dépôt — et aucune
* carte n'avait la hauteur de sa voisine. La durée se répétait déjà dans
* « ce qui est inclus », et six montants de dépôt alignés sous six prix
* donnaient l'impression que les sommes s'additionnaient.
* ====================================================================== */
/* Le titre tient sur une ligne : « Maternité & Nouveau-né » se coupait en
deux et la carte du combo dépassait ses voisines d'un cran. */
html body .ccsr .ccsr-forfait-nom {
display: block;
font-size: 1.24rem !important;
line-height: 1.25 !important;
text-wrap: balance;
}
@media (min-width: 1100px) {
html body .ccsr .ccsr-forfait-nom { font-size: 1.3rem !important; }
}
/* La pastille se pose sur la photo, en haut à gauche, face au prix : sous
le titre, elle allongeait la seule carte du combo et cassait l'alignement
de toute sa rangée. */
/* La pastille qualifie le titre, elle ne couvre plus la photo. Posée en haut
à gauche de l'image, elle tombait sur le sujet — le ventre de la femme
enceinte, sur « Maternité & Nouveau-né ». */
.ccsr .ccsr-forfait-pastille {
position: static;
z-index: 2;
display: inline-block;
margin: 0 2px 0 0;
transform: translateY( -.14em );
vertical-align: middle;
/* Deux pixels de plus en haut qu'en bas : le texte penchait vers le
haut de sa pastille, mesuré à 4 px contre 6,4. Même correction que
pour le prix — la police laisse plus de place sous la ligne de base
qu'au-dessus des capitales. */
padding: 4px 9px 2px;
background: rgba( 250, 246, 240, .94 );
border: 1px solid var(--ccsr-or);
border-radius: 999px;
font-family: var(--ccsr-sans);
font-size: .6rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
line-height: 1.5;
color: var(--ccsr-or-fonce);
}
/* Le résumé était masqué tant que la carte n'était pas cochée, pour que les
cartes gardent la même hauteur. Mais depuis que cliquer ouvre la fiche au
lieu de choisir, on se retrouvait devant une grille de titres nus : plus
rien à lire pour décider laquelle ouvrir. Il revient donc sur toutes les
cartes, borné à deux lignes — la hauteur reste égale, et il y a quelque
chose à lire avant de cliquer. */
html body .ccsr .ccsr-forfait-resume {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 9px;
min-height: 2.9em;
}
/* La carte choisie n'a plus rien à cacher : son résumé se déplie. */
html body .ccsr .ccsr-forfait > input:checked ~ .ccsr-forfait-corps .ccsr-forfait-resume,
html body .ccsr .ccsr-forfait:has( input:checked ) .ccsr-forfait-resume {
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: visible;
}
/* La note qui ferme les forfaits. Elle était collée sous la dernière carte
et alignée à gauche sur toute la largeur : une ligne de quatre-vingt-dix
caractères qu'on ne lit pas. Elle descend, se centre, et sa largeur la
plie en deux lignes à peu près égales. « text-wrap: balance » s'en charge
là où il existe ; ailleurs, la largeur maximale fait déjà le travail. */
.ccsr .ccsr-forfaits-mot {
margin: 26px auto 0;
max-width: 33rem;
font-size: .82rem;
line-height: 1.65;
text-align: center;
text-wrap: balance;
color: var(--ccsr-pale);
}
/* Les cartes se tiennent toutes à la même hauteur, et « ce qui est inclus »
se range au bas de chacune plutôt que juste sous un texte plus court. */
.ccsr .ccsr-forfaits > .ccsr-forfait { height: 100%; }
.ccsr .ccsr-forfait-corps {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.ccsr .ccsr-forfait-plus { margin-top: auto; }
.ccsr .ccsr-forfait-image { position: relative; }
/* -------- « Choisissez d'abord votre séance » -------- */
.ccsr .ccsr-dabord {
margin: 0 0 24px;
padding: 20px 22px 22px;
background: #FBF4EA;
border: 1px solid var(--ccsr-bord);
border-left: 3px solid var(--ccsr-or);
border-radius: 0 10px 10px 0;
}
.ccsr .ccsr-dabord-titre {
margin: 0 0 8px;
font-family: var(--ccsr-serif);
font-size: 1.2rem;
font-weight: 600;
line-height: 1.3;
color: var(--ccsr-sauge);
}
.ccsr .ccsr-dabord p {
margin: 0 0 10px;
font-size: .92rem;
line-height: 1.68;
color: var(--ccsr-doux);
}
.ccsr .ccsr-dabord-sinon {
padding-top: 10px;
border-top: 1px solid var(--ccsr-bord);
font-size: .86rem !important;
color: var(--ccsr-pale) !important;
}
.ccsr .ccsr-dabord-retour { margin-top: 4px; }
/* -------- Le format des photos, quand le groupe en impose un -------- */
.ccsr .ccsr-groupe-tuiles .ccsr-vignette-cadre {
aspect-ratio: var(--ccsr-ratio, 1 / 1);
}
@media (max-width: 640px) {
/* Sur téléphone, deux photos verticales côte à côte deviennent étroites :
on les laisse un peu moins hautes pour qu'un visage reste lisible. */
.ccsr .ccsr-groupe-tuiles .ccsr-vignette-cadre { aspect-ratio: var(--ccsr-ratio-tel, var(--ccsr-ratio, 1 / 1)); }
.ccsr .ccsr-groupe-tuiles[style*="--ccsr-ratio:2 / 3"] { --ccsr-ratio-tel: 3 / 4; }
}
/* -------- L'entente se signe des deux côtés -------- */
.ccsr-deux-signatures {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px;
align-items: end;
}
.ccsr-signature-moi { text-align: right; }
.ccsr-signature-image {
display: block;
margin: 0 0 4px auto;
max-width: 190px;
height: auto;
}
.ccsr-signature-logo {
display: block;
margin: 10px 0 0 auto;
max-width: 92px;
height: auto;
opacity: .72;
}
.ccsr-signature-attente {
margin: 0;
padding: 12px 14px;
background: #FBF4EA;
border-left: 3px solid #D6AE7B;
border-radius: 0 7px 7px 0;
font-size: .86rem;
line-height: 1.6;
color: #6B532F;
text-align: left;
}
.ccsr-sa-condition {
margin: 20px 0 0;
padding: 14px 16px;
background: var(--ccsr-creme);
border-radius: 9px;
}
.ccsr-sa-condition-titre {
margin: 0 0 5px;
font-size: .7rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: #A8834F;
}
@media (max-width: 640px) {
.ccsr-deux-signatures { grid-template-columns: 1fr; gap: 20px; }
.ccsr-signature-moi { text-align: left; }
.ccsr-signature-image, .ccsr-signature-logo { margin-left: 0; }
}
/* =========================================================================
2.12 · Le filigrane : la photo derrière la réponse
=========================================================================
Une saison, une heure du jour, une matière de vêtement : ça se reconnaît
bien avant que ça se lise. La photo passe donc sous le texte de la carte
plutôt qu'au-dessus — la carte garde exactement la forme, la taille et le
rythme des autres pastilles, elle a seulement une couleur de saison.
Trois règles tiennent tout :
— la photo est faible (26 %) et un voile crème la couvre, pour que le texte
se lise aussi bien sur un ciel clair que sur un tronc sombre ;
— le texte passe au-dessus des deux (z-index), sinon il disparaît ;
— une fois la réponse choisie, la carte devient verte comme toutes les
autres, et la photo remonte un peu : elle a gagné le droit de se voir. */
.ccsr .ccsr-groupe-filigranes .ccsr-option-corps {
position: relative;
overflow: hidden;
min-height: 118px;
isolation: isolate;
}
.ccsr .ccsr-filigrane,
.ccsr .ccsr-filigrane-voile {
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
}
.ccsr .ccsr-filigrane {
opacity: var( --ccsr-fil-op, .34 );
/* Un peu moins saturée que l'originale : à pleine saturation, l'automne
tirait la carte vers l'orange vif et sortait de la palette du site. */
filter: saturate( .84 );
transition: opacity .25s, filter .25s;
}
/* Une ou deux photos derrière la même réponse. À deux, elles se partagent le
fond en largeur, sans espace entre elles : la carte garde la même hauteur,
et le style se lit sur deux familles plutôt qu'une. */
.ccsr .ccsr-filigrane {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.ccsr .ccsr-filigrane[data-n="2"] { grid-template-columns: 1fr 1fr; }
.ccsr .ccsr-filigrane[data-n="3"] { grid-template-columns: 1fr 1fr 1fr; }
/* La fenêtre de la photo occupe toute sa part du fond. Le cadrage (--vx, --vy,
--vz) reste celui que je règle dans « Forfaits et questions » : même outil,
même glissement à la souris, même aperçu. */
.ccsr .ccsr-filigrane .ccsr-vignette-cadre {
position: relative;
inset: auto;
display: block;
aspect-ratio: auto;
width: 100%;
height: 100%;
min-width: 0;
border-radius: 0;
background: none;
}
/* Les coins arrondis ne vivent que sur les extrémités de la bande. */
.ccsr .ccsr-filigrane .ccsr-vignette-cadre:first-child { border-radius: inherit 0 0 inherit; }
.ccsr .ccsr-filigrane .ccsr-vignette-cadre:last-child { border-radius: 0 inherit inherit 0; }
.ccsr .ccsr-filigrane[data-n="1"] .ccsr-vignette-cadre { border-radius: inherit; }
.ccsr .ccsr-filigrane .ccsr-vignette-cadre img {
width: 100%;
height: 100%;
border-radius: 0;
background: none;
}
.ccsr .ccsr-filigrane-voile {
background: linear-gradient( 180deg, rgba( 250, 246, 240, var( --ccsr-fil-voile, .40 ) ), rgba( 250, 246, 240, var( --ccsr-fil-voile-bas, .14 ) ) );
}
.ccsr .ccsr-groupe-filigranes .ccsr-option-texte,
.ccsr .ccsr-groupe-filigranes .ccsr-teintes {
position: relative;
z-index: 1;
}
/* Au survol, la photo se réveille d'un cran : assez pour qu'on sente que la
carte répond, pas assez pour gêner la lecture. */
.ccsr .ccsr-groupe-filigranes .ccsr-option:hover .ccsr-filigrane {
opacity: calc( var( --ccsr-fil-op, .34 ) + .10 );
}
/* Choisie : le vert de la maison par-dessus la photo, et le texte en crème.
Le voile devient vert pour que le contraste tienne quelle que soit la
photo — c'est lui qui garantit la lisibilité, pas la chance. */
/* Une réponse choisie ne s'inverse pas en vert sombre : sa photo
disparaîtrait sous le vert, son texte changerait de couleur, et la carte
pèserait deux fois plus lourd que ses voisines dans la grille. Elle garde
son texte et sa photo ; c'est le cadre vert, le halo et la coche qui disent
qu'elle est choisie — comme partout ailleurs sur la page. */
.ccsr .ccsr-groupe-filigranes .ccsr-option > input:checked + .ccsr-option-corps {
border-color: var( --ccsr-sauge, #354535 );
box-shadow: inset 0 0 0 1px var( --ccsr-sauge, #354535 );
background: var( --ccsr-blanc );
color: var( --ccsr-encre, #2F2A24 );
}
.ccsr .ccsr-groupe-filigranes .ccsr-option > input:checked + .ccsr-option-corps .ccsr-option-nom {
color: var( --ccsr-sauge, #354535 );
font-weight: 600;
}
.ccsr .ccsr-groupe-filigranes .ccsr-option > input:checked + .ccsr-option-corps .ccsr-option-detail {
color: var( --ccsr-doux, #5E5850 );
}
.ccsr .ccsr-groupe-filigranes .ccsr-option > input:checked + .ccsr-option-corps .ccsr-filigrane {
opacity: calc( var( --ccsr-fil-op, .34 ) + .08 );
}
/* Sur téléphone, les cartes sont plus étroites et plus hautes : la photo a
plus de place, donc elle peut être un peu plus présente sans que le texte
en souffre. */
@media (max-width: 640px) {
.ccsr .ccsr-groupe-filigranes .ccsr-option-corps {
min-height: 104px;
}
.ccsr .ccsr-filigrane {
opacity: calc( var( --ccsr-fil-op, .34 ) + .04 );
}
}
/* Qui demande moins d'animation n'en reçoit pas. */
@media (prefers-reduced-motion: reduce) {
.ccsr .ccsr-filigrane {
transition: none;
}
}
/* La suite d'une réponse choisie passait en doré sur la photo : lisible sur
le vert uni, beaucoup moins sur un sous-bois. Dans un groupe à filigrane,
elle prend le crème des autres textes. */
.ccsr .ccsr-groupe-filigranes .ccsr-option > input:checked + .ccsr-option-corps .ccsr-option-suite {
color: var( --ccsr-doux, #5E5850 );
border-top-color: var( --ccsr-bord, #E6DCCB );
}
/* =========================================================================
2.13 · Les jetons de l'entente
=========================================================================
Un montant, une date, une liste d'inclusions : ce que le navigateur écrit
dans l'entente à mesure que la cliente change ses choix. Les listes
passent en bloc, parce qu'une énumération au fil du texte ne se lit pas. */
.ccsr .ccsr-jeton {
font-weight: 500;
color: var( --ccsr-encre, #2F2A24 );
}
.ccsr .ccsr-jeton[data-j="inclus"],
.ccsr .ccsr-jeton[data-j="extras"] {
display: block;
margin: 7px 0 9px;
padding-left: 13px;
border-left: 2px solid var( --ccsr-or, #D6AE7B );
font-weight: 400;
line-height: 1.75;
}
/* Une clause dont le seul contenu est un jeton vide — aucune option cochée —
disparaît au lieu de laisser un titre suivi de rien. */
.ccsr .ccsr-jeton-phrase[hidden] {
display: none;
}
/* =========================================================================
2.14 · Où me retrouver
=========================================================================
Quatre adresses sous la clause du crédit, dans un encadré doux : on ne
demande pas à quelqu'un de nous identifier sans lui dire où. L'avis Google
est le dernier et le plus discret — c'est une invitation, pas une clause. */
.ccsr .ccsr-liens-rv {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
margin: 11px 0 2px;
padding: 13px 14px;
border: 1px solid var( --ccsr-bord, #E6DCCB );
border-left: 3px solid var( --ccsr-or, #D6AE7B );
border-radius: 10px;
background: var( --ccsr-papier, #FAF6F0 );
}
.ccsr .ccsr-lien-rv {
display: flex;
flex-direction: column;
gap: 1px;
padding: 5px 8px 6px 28px;
border-radius: 7px;
text-decoration: none;
background-repeat: no-repeat;
background-position: 6px center;
background-size: 15px 15px;
transition: background-color .2s;
}
.ccsr .ccsr-lien-rv:hover,
.ccsr .ccsr-lien-rv:focus-visible {
background-color: var( --ccsr-papier-2, #F2EBDF );
}
.ccsr .ccsr-lien-quoi {
font-size: .86rem;
font-weight: 500;
color: var( --ccsr-sauge, #354535 );
}
.ccsr .ccsr-lien-qui {
font-size: .76rem;
color: var( --ccsr-pale, #8C8378 );
overflow-wrap: anywhere;
}
/* Les pictogrammes voyagent dans la feuille de style, en SVG : aucune requête
de plus, et ils prennent la couleur dorée du site. */
.ccsr .ccsr-lien-instagram {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8834F' stroke-width='1.8'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.1' fill='%23A8834F' stroke='none'/%3E%3C/svg%3E" );
}
.ccsr .ccsr-lien-facebook {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A8834F'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5h1.65V3.6A22 22 0 0 0 14.3 3.5c-2.4 0-4 1.45-4 4.1v2.3H7.6V13h2.7v8z'/%3E%3C/svg%3E" );
}
.ccsr .ccsr-lien-site {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8834F' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M2.8 12h18.4M12 2.8c2.4 2.5 3.6 5.6 3.6 9.2s-1.2 6.7-3.6 9.2c-2.4-2.5-3.6-5.6-3.6-9.2S9.6 5.3 12 2.8z'/%3E%3C/svg%3E" );
}
.ccsr .ccsr-lien-avis {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A8834F'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.95-4.7 4.6 1.1 6.45L12 17.45 6.2 20.5l1.1-6.45-4.7-4.6 6.5-.95z'/%3E%3C/svg%3E" );
}
@media (max-width: 600px) {
.ccsr .ccsr-liens-rv {
grid-template-columns: 1fr;
}
}
/* =========================================================================
2.15 · « Quelque chose à ajouter à notre entente ? »
=========================================================================
Cette question n'est pas l'étiquette d'une case à remplir : c'est une
invitation, et la dernière chose que la cliente lit avant de signer. En
petites capitales grises, elle avait l'air d'un champ administratif de
plus. Elle prend donc le serif et le vert des titres du site, comme les
autres questions de l'entente. */
.ccsr .ccsr-sien {
margin-top: 22px;
padding: 16px 18px 18px;
border: 1px solid var( --ccsr-bord, #E6DCCB );
border-left: 3px solid var( --ccsr-or, #D6AE7B );
border-radius: 12px;
background: var( --ccsr-papier, #FAF6F0 );
}
html body .ccsr .ccsr-sien > label {
margin: 0 0 9px;
font-family: var( --ccsr-serif );
font-size: 1.22rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
line-height: 1.3;
color: var( --ccsr-sauge, #354535 );
}
.ccsr .ccsr-sien input {
background: var( --ccsr-blanc );
}
.ccsr .ccsr-sien .ccsr-aide {
margin-top: 8px;
}
@media (max-width: 600px) {
html body .ccsr .ccsr-sien > label {
font-size: 1.12rem;
}
.ccsr .ccsr-sien {
padding: 14px 14px 16px;
}
}
/* =========================================================================
2.16 · Les photos d'inspiration
========================================================================= */
.ccsr .ccsr-depot {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
margin: 4px 0 0;
padding: 20px 16px;
border: 2px dashed var( --ccsr-bord, #E6DCCB );
border-radius: 12px;
background: var( --ccsr-papier, #FAF6F0 );
cursor: pointer;
text-align: center;
transition: border-color .2s, background .2s;
}
.ccsr .ccsr-depot:hover,
.ccsr .ccsr-depot.est-survolee {
border-color: var( --ccsr-or, #D6AE7B );
background: var( --ccsr-papier-2, #F2EBDF );
}
/* La vraie case reste là pour le clavier et les lecteurs d'écran : elle est
invisible, jamais retirée de l'arbre. */
.ccsr .ccsr-depot input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.ccsr .ccsr-depot:focus-within {
outline: 2px solid var( --ccsr-or, #D6AE7B );
outline-offset: 2px;
}
.ccsr .ccsr-depot-mot {
font-size: .92rem;
font-weight: 500;
color: var( --ccsr-sauge, #354535 );
}
.ccsr .ccsr-depot-note {
font-size: .78rem;
color: var( --ccsr-pale, #8C8378 );
}
.ccsr .ccsr-inspirations-liste {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 128px, 1fr ) );
gap: 9px;
margin: 11px 0 0;
padding: 0;
list-style: none;
}
.ccsr .ccsr-inspirations-liste li {
position: relative;
display: flex;
flex-direction: column;
gap: 5px;
padding: 0;
margin: 0;
}
.ccsr .ccsr-insp-vue {
display: block;
aspect-ratio: 1 / 1;
border-radius: 9px;
border: 1px solid var( --ccsr-bord, #E6DCCB );
background-size: cover;
background-position: center;
background-color: var( --ccsr-papier-2, #F2EBDF );
}
.ccsr .ccsr-insp-nom {
font-size: .72rem;
line-height: 1.35;
color: var( --ccsr-pale, #8C8378 );
overflow-wrap: anywhere;
}
.ccsr .ccsr-insp-oter {
position: absolute;
top: 5px;
right: 5px;
width: 25px;
height: 25px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba( 47, 42, 36, .72 );
color: #fff;
font-size: 1.05rem;
line-height: 1;
cursor: pointer;
}
.ccsr .ccsr-insp-oter:hover,
.ccsr .ccsr-insp-oter:focus-visible {
background: var( --ccsr-sauge, #354535 );
}
.ccsr .ccsr-insp-attente {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
padding: 8px;
border: 1px dashed var( --ccsr-bord, #E6DCCB );
border-radius: 9px;
font-size: .72rem;
text-align: center;
color: var( --ccsr-pale, #8C8378 );
overflow-wrap: anywhere;
}
.ccsr .ccsr-inspirations-mot {
margin: 9px 0 0;
font-size: .82rem;
color: var( --ccsr-rouge, #9C4A3E );
}
/* -------------------------------------------------------------------------
* 2.17 Les clauses longues : sous-titres et paliers
*
* Trois clauses dépassent le millier de caractères. Un mur de texte dans un
* contrat ne se lit pas, et c'est justement la cliente qu'on voulait
* protéger qui décroche. Le catalogue marque donc sa structure avec « ## »
* et « • », et c'est ici que ça devient lisible : un sous-titre sauge, et
* les paliers dans un encadré crème bordé d'or, pour qu'on les retrouve du
* premier coup d'œil sans relire le paragraphe.
* ---------------------------------------------------------------------- */
.ccsr .ccsr-clause-corps { display: block; }
.ccsr .ccsr-clause-corps > p {
margin: 0 0 .7em;
font-size: inherit;
line-height: inherit;
color: inherit;
}
.ccsr .ccsr-clause-corps > p:last-child { margin-bottom: 0; }
.ccsr .ccsr-clause-soustitre {
margin: 1.15em 0 .5em !important;
font-weight: 600;
letter-spacing: .01em;
color: var(--ccsr-sauge) !important;
}
.ccsr .ccsr-clause-soustitre:first-child { margin-top: 0 !important; }
.ccsr .ccsr-clause-paliers {
margin: 0 0 1em;
padding: 13px 16px 13px 17px;
list-style: none;
border: 1px solid var(--ccsr-bord);
border-left: 3px solid var(--ccsr-or);
border-radius: 5px;
background: var(--ccsr-papier);
}
.ccsr .ccsr-clause-paliers > li {
position: relative;
margin: 0 0 .55em;
padding-left: 15px;
line-height: 1.62;
}
.ccsr .ccsr-clause-paliers > li:last-child { margin-bottom: 0; }
.ccsr .ccsr-clause-paliers > li::before {
content: "";
position: absolute;
top: .66em;
left: 0;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ccsr-or-fonce);
}
/* Le délai qui ouvre chaque palier — « Sept jours », « Vingt et un jours » —
est la seule chose qu'on cherche en relisant : il se détache. */
.ccsr .ccsr-clause-paliers > li > strong { color: var(--ccsr-sauge); }
@media ( max-width: 640px ) {
.ccsr .ccsr-clause-paliers { padding: 11px 13px 11px 14px; }
}
/* L'entente imprimable n'a pas les variables du formulaire : mêmes repères,
écrits en dur, et l'encadré doit survivre à l'impression. */
.ccsr-entente-texte > p { margin: 0 0 .7em; }
.ccsr-entente-texte > p:last-child { margin-bottom: 0; }
.ccsr-entente-texte .ccsr-clause-soustitre {
margin: 1.1em 0 .45em;
font-weight: 600;
color: #354535;
}
.ccsr-entente-texte .ccsr-clause-soustitre:first-child { margin-top: 0; }
.ccsr-entente-texte .ccsr-clause-paliers {
margin: 0 0 .9em;
padding: 10px 14px;
list-style: disc outside;
border: 1px solid #E6DCCB;
border-left: 3px solid #D6AE7B;
border-radius: 4px;
background: #FAF6F0;
}
.ccsr-entente-texte .ccsr-clause-paliers > li { margin: 0 0 .4em 16px; }
.ccsr-entente-texte .ccsr-clause-paliers > li:last-child { margin-bottom: 0; }
@media print {
.ccsr-entente-texte .ccsr-clause-paliers {
background: transparent;
border-color: #BBB;
border-left-color: #999;
}
}
/* Les paliers vivent à l'intérieur de la liste numérotée des conditions,
dont chaque
porte une pastille chiffrée, un filet et un retrait de
42 px. Sans ces annulations, chaque palier héritait d'un numéro, d'une
ligne de séparation et d'un décrochage : la puce flottait au-dessus de son
propre texte. */
.ccsr .ccsr-conditions-liste .ccsr-clause-paliers > li {
padding: 0 0 0 15px;
border-bottom: 0;
}
.ccsr .ccsr-conditions-liste .ccsr-clause-paliers > li::before {
counter-increment: none;
content: "";
top: .66em;
left: 0;
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ccsr-or-fonce);
}
/* Le des conditions est en bloc — il sert de titre de clause. Celui
d'un palier reste dans la phrase. */
.ccsr .ccsr-conditions-liste .ccsr-clause-paliers strong,
.ccsr-entente-texte .ccsr-clause-paliers strong {
display: inline;
margin: 0;
font-size: inherit;
line-height: inherit;
color: var(--ccsr-sauge, #354535);
}
/* Le corps d'une clause remplace l'ancien : il en reprend la mesure. */
.ccsr .ccsr-conditions-liste .ccsr-clause-corps {
display: block;
font-size: .93rem;
line-height: 1.68;
color: var(--ccsr-sauge);
}
/* La liste des conditions met tous ses en bloc — c'était la mesure du
texte d'une clause, à l'époque où ce texte ÉTAIT un span. Les jetons, eux,
sont des spans à l'intérieur de la phrase : « Votre {forfait} comprend : »
cassait donc en deux lignes au milieu de la phrase. Ils redeviennent
inline, sauf les deux qui portent une liste et doivent rester en bloc. */
.ccsr .ccsr-conditions-liste .ccsr-clause-corps .ccsr-jeton {
display: inline;
font-size: inherit;
line-height: inherit;
}
.ccsr .ccsr-conditions-liste .ccsr-clause-corps .ccsr-jeton[data-j="inclus"],
.ccsr .ccsr-conditions-liste .ccsr-clause-corps .ccsr-jeton[data-j="extras"] {
display: block;
line-height: 1.75;
}
/* -------------------------------------------------------------------------
* 2.18 Le rang de l'étape
*
* Le titre d'une étape est une question — « Quand est-ce que je vous
* vois ? » — et une question ne dit pas où on en est dans un formulaire de
* cinq pages. Le fil d'Ariane du haut le dit, mais il se réduit à l'étape
* courante sur téléphone. Ce sur-titre reprend donc ses mots et son point
* médian : le chiffre en doré, le nom en petites capitales sauge.
* ---------------------------------------------------------------------- */
.ccsr .ccsr-pas-rang {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 7px;
font-size: .74rem;
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--ccsr-sauge);
}
.ccsr .ccsr-pas-no {
display: inline-grid;
place-items: center;
width: 25px;
height: 25px;
border: 1px solid var(--ccsr-or);
border-radius: 50%;
font-size: .8rem;
font-weight: 600;
letter-spacing: 0;
color: var(--ccsr-or-fonce);
}
/* Le filet qui prolonge le nom jusqu'au bord : il pose le sur-titre sans
lui donner le poids d'un vrai titre. */
.ccsr .ccsr-pas-rang::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient( to right, var(--ccsr-bord), transparent );
}
@media ( max-width: 640px ) {
.ccsr .ccsr-pas-rang { font-size: .7rem; gap: 8px; }
.ccsr .ccsr-pas-no { width: 23px; height: 23px; font-size: .76rem; }
}
/* -------------------------------------------------------------------------
* 2.19 Ce qui reste à faire en amont
*
* Personne n'est bloqué : on peut sauter directement à « Votre date » sans
* avoir choisi de forfait. Mais la page disait alors « Je regarde mon
* agenda… » sans dire un mot du plus important, resté vide. Cette ligne le
* dit, nomme les étapes et y mène d'un clic. Une ligne, pas un avertissement
* rouge : il ne s'est rien passé de grave.
* ---------------------------------------------------------------------- */
.ccsr .ccsr-pas-amont {
margin: 10px 0 0;
padding: 9px 13px 9px 12px;
border-left: 3px solid var(--ccsr-or);
border-radius: 0 5px 5px 0;
background: var(--ccsr-papier-2);
font-size: .9rem;
line-height: 1.6;
color: var(--ccsr-doux);
}
.ccsr .ccsr-amont-lien {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
border: 0;
background: none;
font: inherit;
font-weight: 600;
color: var(--ccsr-sauge);
text-decoration: underline;
text-decoration-color: var(--ccsr-or);
text-underline-offset: 3px;
cursor: pointer;
}
.ccsr .ccsr-amont-lien:hover,
.ccsr .ccsr-amont-lien:focus-visible {
color: var(--ccsr-or-fonce);
text-decoration-color: currentColor;
}
/* La pastille du numéro d'étape a quitté le rappel : « Il reste 4 réponses
à donner aux étapes 1 Votre séance et 4 Vos coordonnées » faisait lire
quatre réponses à l'étape quatre. La règle reste, sans emploi, pour qu'un
ancien écran en cache ne se retrouve pas avec un chiffre nu. */
.ccsr .ccsr-amont-no {
display: none;
}
/* -------------------------------------------------------------------------
* 2.20 La fiche d'un forfait
*
* Cliquer une carte ouvre sa fiche au lieu de choisir le forfait : avant,
* un clic cochait et la cliente passait aussitôt à l'étape 2 sans avoir lu
* ce que la séance comprenait. La fiche s'ouvre pleine largeur sous la
* carte — un accordéon dans une grille — et c'est le bouton du bas qui
* choisit.
* ---------------------------------------------------------------------- */
/* L'invitation vit sur la photo, pas sous le texte : une ligne de plus sous
chaque carte allongeait la grille sans rien apprendre, alors qu'ici elle
ne prend aucune place et répond au geste. Au survol sur ordinateur ; en
permanence sur téléphone, où le survol n'existe pas et où se trouvent la
plupart de mes clientes. */
.ccsr .ccsr-forfait-voir {
position: absolute;
inset: 0;
display: grid;
place-items: center;
border-radius: inherit;
background: rgba( 53, 69, 53, .42 );
opacity: 0;
transition: opacity .22s ease;
pointer-events: none;
}
/* C'est le bouton qui ouvre, pas la carte : cliquer la photo ne doit rien
déclencher, sans quoi on retombe sur le geste d'avant — un clic, un
forfait coché, et l'étape 2 sans avoir rien lu. */
.ccsr .ccsr-forfait-voir > span { pointer-events: auto; cursor: pointer; }
.ccsr .ccsr-forfait-voir > span {
padding: 12px 24px;
white-space: nowrap;
border-radius: 999px;
background: var(--ccsr-papier);
font-size: .68rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ccsr-sauge);
transform: translateY( 6px );
transition: transform .22s ease;
}
.ccsr .ccsr-forfait:hover .ccsr-forfait-voir,
.ccsr .ccsr-forfait:focus-within .ccsr-forfait-voir { opacity: 1; }
.ccsr .ccsr-forfait:hover .ccsr-forfait-voir > span,
.ccsr .ccsr-forfait:focus-within .ccsr-forfait-voir > span { transform: none; }
/* Sans survol — téléphone, tablette —, l'invitation se pose en bas de la
photo, discrète mais toujours là. */
@media ( hover: none ) {
.ccsr .ccsr-forfait-voir {
inset: auto 0 0 0;
place-items: end center;
padding-bottom: 12px;
background: linear-gradient( to top, rgba( 53, 69, 53, .55 ), transparent );
opacity: 1;
}
.ccsr .ccsr-forfait-voir > span { transform: none; }
}
/* Une fois le forfait pris, l'invitation cède la place à la confirmation. */
.ccsr .ccsr-forfait:has( input:checked ) .ccsr-forfait-voir,
.ccsr .ccsr-forfait.ccsr-est-coche .ccsr-forfait-voir { display: none; }
.ccsr .ccsr-forfait-ouvert { border-color: var(--ccsr-or); }
.ccsr .ccsr-forfait-fiche {
grid-column: 1 / -1;
margin: -4px 0 6px;
padding: 20px 22px 18px;
border: 1px solid var(--ccsr-bord);
border-left: 3px solid var(--ccsr-or);
border-radius: 8px;
background: var(--ccsr-blanc);
box-shadow: 0 2px 16px rgba( 53, 69, 53, .06 );
}
.ccsr .ccsr-fiche-haut {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.ccsr .ccsr-fiche-nom {
margin: 0;
font-family: var(--ccsr-serif);
font-size: 1.5rem;
line-height: 1.2;
color: var(--ccsr-sauge);
}
.ccsr .ccsr-fiche-fermer {
flex: none;
padding: 0 6px;
border: 0;
background: none;
font-size: 1.5rem;
line-height: 1;
color: var(--ccsr-pale);
cursor: pointer;
}
.ccsr .ccsr-fiche-fermer:hover { color: var(--ccsr-sauge); }
.ccsr .ccsr-fiche-texte {
margin: 10px 0 0;
font-size: .92rem;
line-height: 1.72;
color: var(--ccsr-doux);
}
.ccsr .ccsr-fiche-faits {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
gap: 2px 18px;
margin: 16px 0 0;
padding: 13px 15px;
list-style: none;
border-radius: 6px;
background: var(--ccsr-papier);
}
.ccsr .ccsr-fiche-faits > li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 4px 0;
}
.ccsr .ccsr-fiche-faits span {
font-size: .68rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ccsr-pale);
}
.ccsr .ccsr-fiche-faits strong {
font-weight: 600;
color: var(--ccsr-sauge);
text-align: right;
}
.ccsr .ccsr-fiche-sous {
margin: 17px 0 7px;
font-size: .68rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ccsr-or-fonce);
}
.ccsr .ccsr-fiche-inclus {
margin: 0;
padding: 0;
list-style: none;
}
.ccsr .ccsr-fiche-inclus > li {
position: relative;
margin: 0 0 6px;
padding-left: 16px;
font-size: .94rem;
line-height: 1.6;
}
.ccsr .ccsr-fiche-inclus > li::before {
content: "";
position: absolute;
top: .62em;
left: 0;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ccsr-or);
}
.ccsr .ccsr-fiche-inclus strong { font-weight: 600; color: var(--ccsr-sauge); }
.ccsr .ccsr-fiche-inclus .ccsr-forfait-detail { color: var(--ccsr-doux); }
.ccsr .ccsr-fiche-pied {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--ccsr-bord);
}
.ccsr .ccsr-fiche-prendre {
padding: 13px 28px;
border: 0;
border-radius: 999px;
background: var(--ccsr-sauge);
font-family: var(--ccsr-sans);
font-size: .72rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: #fff;
cursor: pointer;
}
.ccsr .ccsr-fiche-prendre:hover { background: var(--ccsr-sauge-clair); }
.ccsr .ccsr-fiche-retour {
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: .88rem;
color: var(--ccsr-doux);
text-decoration: underline;
text-decoration-color: var(--ccsr-bord-fort);
text-underline-offset: 3px;
cursor: pointer;
}
.ccsr .ccsr-fiche-retour:hover { color: var(--ccsr-sauge); }
@media ( max-width: 640px ) {
.ccsr .ccsr-forfait-fiche { padding: 17px 16px 16px; }
.ccsr .ccsr-fiche-nom { font-size: 1.32rem; }
.ccsr .ccsr-fiche-pied > * { width: 100%; text-align: center; }
}
/* -------------------------------------------------------------------------
* 2.21 Les forfaits sur téléphone
*
* Six forfaits en pleine largeur avec leur photo en 4/3 faisaient une page de
* cinq mille pixels : on ne voyait jamais deux séances en même temps, donc on
* ne comparait rien. La carte devient une rangée — vignette carrée à gauche,
* texte à droite — et la page tombe sous mille pixels. Rien n'est retiré : le
* détail complet est dans la fiche, à un geste.
* ---------------------------------------------------------------------- */
/* Sur ordinateur, l'invitation du corps n'existe pas : c'est le voile sur la
photo qui joue ce rôle. */
.ccsr .ccsr-voir-tel,
.ccsr .ccsr-prix-tel { display: none; }
/* Le nom d'une carte doit tenir sur une ligne, et la colonne fait tantôt
190 pixels, tantôt 330 selon la largeur de l'écran et la présence du
récapitulatif. Une taille fixe ne peut pas satisfaire les deux : elle
suit donc la fenêtre, et réserve deux lignes pour que toutes les cartes
gardent la même hauteur quand un nom déborde malgré tout. */
/* Les six noms tiennent sur une ligne depuis que le combo s'appelle
« Maternité & bébé » sur sa carte — mesuré : 148 pixels pour 230
disponibles. Une ligne réservée suffit donc, et les cartes gardent la
même hauteur si un nom venait à déborder sur un écran étroit. */
/* Réserver deux lignes au titre égalisait bien les cartes, mais creusait un
trou de vingt-six pixels sous les cinq titres qui n'en prennent qu'une.
Mauvais marché. Les cartes s'égalisent par la grille, qui les étire déjà,
et c'est « Voir le détail » qui descend au bas de chacune : le titre et sa
description restent collés, et le blanc se retrouve là où il ne gêne pas. */
html body .ccsr .ccsr-voir-detail { margin-top: auto; padding-top: 4px; }
@media ( max-width: 640px ) {
.ccsr .ccsr-forfaits {
grid-template-columns: 1fr;
gap: 10px;
}
.ccsr .ccsr-forfait {
display: grid;
grid-template-columns: 174px 1fr;
align-items: stretch;
gap: 0;
overflow: hidden;
}
/* L'arche épouse la hauteur du texte à côté.
La largeur vient de la colonne, la hauteur de la rangée : l'image
s'étire jusqu'au bas du bloc de droite au lieu de laisser un vide
sous un carré. Elle devient une haute fenêtre, ce qui sert mieux des
photos verticales qu'un carré.
Et surtout, pas de « width: auto » avec un rapport imposé : le
navigateur calculerait alors la largeur à partir de la hauteur de la
rangée, et la vignette gonflerait jusqu'à recouvrir le texte — c'est
exactement ce qui est arrivé. */
html body .ccsr .ccsr-forfait-image {
aspect-ratio: auto !important;
width: calc( 100% - 12px ) !important;
height: auto !important;
min-height: 0 !important;
align-self: stretch !important;
margin: 12px 0 12px 12px !important;
border-radius: 999px 999px 10px 10px !important;
}
/* Le prix sur la photo, pleine largeur de la vignette : il libère tout
le bloc de texte, et se lit avant même le titre. */
html body .ccsr .ccsr-forfait-image .ccsr-forfait-prix {
display: inline-flex !important;
position: absolute !important;
/* La pastille se cale sur son contenu et se centre, plutôt que de
s'étirer d'un bord à l'autre : « 290 $ » dans un ovale large
comme la photo donnait une étiquette de solde. */
left: 50% !important;
right: auto !important;
bottom: 9px !important;
max-width: calc( 100% - 16px ) !important;
transform: translateX( -50% ) !important;
justify-content: center !important;
padding: 8px 13px !important;
font-size: .8rem !important;
/* « 630 $ 540 $ + tx » faisait tomber le « tx » à la ligne dans
l'ovale du combo. */
white-space: nowrap !important;
}
html body .ccsr .ccsr-prix-tel { display: none !important; }
/* « Réserver » sur toute la largeur : la cible la plus facile au pouce,
et 44 pixels de haut, le seuil au-dessous duquel on rate. */
html body .ccsr .ccsr-voir-tel {
/* Le corps est une colonne flex alignée à gauche : sans ça, le
conteneur du bouton se rétracte sur son texte et « pleine
largeur » ne veut rien dire. */
align-self: stretch !important;
width: 100% !important;
}
html body .ccsr .ccsr-voir-tel > span {
display: block !important;
/* « display: block » ne suffisait pas : la pastille héritait d'une
largeur calée sur son texte et restait à 107 px dans une colonne
de 171. La largeur est donc demandée explicitement. */
width: 100% !important;
padding: 13px 10px !important;
text-align: center !important;
font-size: .66rem !important;
white-space: nowrap !important;
}
.ccsr .ccsr-forfait-corps {
padding: 12px 14px 12px 15px;
}
.ccsr .ccsr-forfait-nom {
font-size: 1.12rem;
line-height: 1.25;
}
.ccsr .ccsr-forfait-resume {
margin-top: 5px;
min-height: 0;
font-size: .88rem;
line-height: 1.5;
}
/* Le prix quitte le coin de la vignette — 108 pixels de large, la
pastille y était coupée — pour une ligne lisible sous le résumé. */
.ccsr .ccsr-forfait-image .ccsr-forfait-prix { display: none; }
.ccsr .ccsr-prix-tel {
display: block;
margin-top: 7px;
font-size: .84rem;
font-weight: 600;
color: var(--ccsr-sauge);
}
.ccsr .ccsr-forfait-nom { min-height: 0; }
.ccsr .ccsr-forfait-pastille {
font-size: .56rem;
padding: 3px 7px;
}
/* Le voile sur la photo disparaît : la vignette est trop petite pour
qu'on y vise un bouton. L'invitation devient une ligne du corps. */
.ccsr .ccsr-forfait-image .ccsr-forfait-voir { display: none; }
.ccsr .ccsr-voir-tel {
position: static;
display: block;
margin-top: 9px;
padding: 0;
background: none;
opacity: 1;
}
.ccsr .ccsr-voir-tel > span {
display: inline-block;
padding: 7px 14px;
white-space: nowrap;
border: 1px solid var(--ccsr-bord-fort);
border-radius: 999px;
background: none;
font-size: .64rem;
letter-spacing: .13em;
color: var(--ccsr-or-fonce);
transform: none;
}
.ccsr .ccsr-forfait:has( input:checked ) .ccsr-voir-tel { display: none; }
}
/* -------------------------------------------------------------------------
* 2.22 Les deux boutons d'une carte
*
* « Voir le détail » sous le titre, « Réserver ce forfait » au survol de la
* photo, et la carte elle-même inerte : celle qui sait ce qu'elle veut
* réserve d'un geste, celle qui hésite lit d'abord. Et surtout, plus un seul
* clic qui coche par accident et envoie à l'étape suivante sans rien avoir lu.
*
* Le « + taxes » reste — au Québec la LPC n'oblige pas à l'inclure, mais une
* carte à 290 $ suivie d'un total à 333 $ fait mauvais effet au pire moment.
* Il devient simplement plus discret que le chiffre.
* ---------------------------------------------------------------------- */
/* « + tx » en exposant : c'est une précision sur le chiffre, pas un second
chiffre. Posé en haut comme un renvoi, il cesse de concurrencer le prix.
Le décalage se fait en position relative plutôt qu'avec « vertical-align:
super », qui déforme la hauteur de ligne de la pastille.
Pour revenir à la version alignée : retirer « position » et « top », et
remettre font-size .78em, margin-left 5px, opacity .72. */
.ccsr .ccsr-prix-tx {
position: relative;
top: -.42em;
margin-left: 3px;
font-size: .62em;
font-weight: 500;
line-height: 1;
letter-spacing: .02em;
opacity: .78;
}
.ccsr .ccsr-voir-detail {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
margin-top: -2px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ccsr-or-fonce);
cursor: pointer;
}
.ccsr .ccsr-voir-signe {
display: inline-grid;
place-items: center;
width: 17px;
height: 17px;
border: 1px solid var(--ccsr-or);
border-radius: 50%;
font-size: .8rem;
line-height: 1;
letter-spacing: 0;
}
/* Le survol de « Voir le détail ».
Le rond prenait une bordure vert sauge au survol : un cercle sombre posé
sur une carte entièrement crème et dorée, le seul trait noir de la page.
Il se remplit maintenant d'un voile doré, garde sa bordure dorée, et le
mot fonce d'un ton. C'est le même geste que la carte ouverte, en plus
léger — l'un annonce l'autre. */
.ccsr .ccsr-voir-signe,
.ccsr .ccsr-voir-detail {
transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ccsr .ccsr-voir-detail:hover,
.ccsr .ccsr-voir-detail:focus-visible { color: var(--ccsr-or-fonce); }
.ccsr .ccsr-voir-detail:hover .ccsr-voir-signe,
.ccsr .ccsr-voir-detail:focus-visible .ccsr-voir-signe {
background: rgba( 214, 174, 123, .2 );
border-color: var(--ccsr-or-fonce);
}
/* Sur la carte ouverte, le rond plein ne change plus au survol : il est
déjà à son état le plus marqué. */
.ccsr .ccsr-forfait-ouvert .ccsr-voir-detail:hover .ccsr-voir-signe {
background: var(--ccsr-or);
border-color: var(--ccsr-or);
}
/* La carte ouverte le dit par son signe. */
.ccsr .ccsr-forfait-ouvert .ccsr-voir-signe { background: var(--ccsr-or); color: #fff; }
/* Le prix barré du combo : 630 $ pour les deux séances prises séparément,
540 $ ensemble. Les 90 $ d'économie n'étaient écrits nulle part — ni sur
la carte, ni dans la fiche, ni dans l'entente. */
.ccsr .ccsr-prix-avant {
margin-right: 6px;
font-weight: 500;
opacity: .62;
text-decoration-thickness: 1px;
text-underline-offset: 0;
}
/* Texte centré sous l'arche.
L'arche est une forme symétrique ; un texte aligné à gauche en dessous se
bat contre elle. Centré, l'ensemble se lit comme une étiquette de tirage,
et « Voir le détail » cesse d'avoir l'air posé là au dernier moment.
Sur téléphone, la carte est une rangée horizontale : le texte y reste
aligné à gauche, où l'œil le reprend après la vignette. */
html body .ccsr .ccsr-forfait-corps {
align-items: center;
text-align: center;
}
html body .ccsr .ccsr-voir-detail { align-self: center; }
@media ( max-width: 640px ) {
html body .ccsr .ccsr-forfait-corps {
align-items: flex-start;
text-align: left;
}
html body .ccsr .ccsr-voir-detail { align-self: flex-start; }
}
/* =========================================================================
2.23 · Cohérence des titres, des textes et des espacements
Relevé dans un vrai navigateur, sur la page en ligne : plusieurs niveaux
s'étaient décalés du système. Le plus visible, « Choisissez d'abord votre
séance », tombait à 14,7 px — exactement la taille du paragraphe qu'il
était censé annoncer, parce que « .ccsr .ccsr-dabord p » (deux classes et
un type) l'emporte sur « .ccsr .ccsr-dabord-titre » (deux classes). Le
titre n'était pas petit par choix : il perdait un duel de spécificité.
========================================================================= */
/* -------- Le bloc « Choisissez d'abord votre séance » -------- */
html body .ccsr .ccsr-dabord {
padding: 22px 24px 24px;
}
html body .ccsr p.ccsr-dabord-titre {
margin: 0 0 9px;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 1.34rem;
font-weight: 600;
line-height: 1.25;
color: #354535;
}
html body .ccsr .ccsr-dabord p:not( .ccsr-dabord-titre ) {
font-size: .95rem;
line-height: 1.7;
}
html body .ccsr .ccsr-dabord p:not( .ccsr-dabord-titre ):not( .ccsr-dabord-sinon ) {
margin: 0 0 14px;
max-width: 58ch;
}
html body .ccsr .ccsr-dabord-sinon {
margin: 0;
padding-top: 12px;
}
/* Le bouton n'est plus la grande pastille sauge de « Continuer » : il y en
avait deux à l'écran, l'une sous l'autre, qui ne menaient pas au même
endroit. Celui-ci dit où il va et se tient en retrait. */
html body .ccsr .ccsr-dabord-retour {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
padding: 10px 20px;
border: 1px solid #354535;
border-radius: 999px;
background: none;
color: #354535;
font-family: "Montserrat", sans-serif;
font-size: .7rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s, color .2s;
}
html body .ccsr .ccsr-dabord-retour::before {
content: "\2191";
font-size: .9rem;
line-height: 1;
letter-spacing: 0;
}
html body .ccsr .ccsr-dabord-retour:hover,
html body .ccsr .ccsr-dabord-retour:focus-visible {
background: #354535;
color: #FBF8F1;
}
/* -------- Les sous-titres d'étape, sur deux lignes égales --------
« Cochez simplement ce qui vous attire. Rien n'est définitif : nous en
reparlons… » se cassait où la largeur tombait, laissant une ligne pleine
et un bout de phrase orphelin. Le navigateur sait équilibrer lui-même les
lignes d'un bloc court : la coupure se fait alors à la respiration de la
phrase, et elle se refait toute seule sur téléphone, où la largeur n'est
pas la même. */
html body .ccsr .ccsr-pas-mot {
text-wrap: balance;
}
html body .ccsr .ccsr-pas-titre {
text-wrap: balance;
}
/* -------- Les photos coups de cœur -------- */
/* L'encadré pointillé touchait le paragraphe au-dessus : 0 px mesuré. Le
paragraphe d'aide n'a pas de marge basse, et le dépôt n'en avait pas
davantage en haut. */
html body .ccsr .ccsr-inspirations .ccsr-aide {
margin-bottom: 14px;
}
html body .ccsr .ccsr-inspirations .ccsr-depot {
margin-top: 14px;
}
/* -------- La pastille du forfait retenu --------
C'était une barre sauge pleine largeur, en capitales espacées, qui pesait
plus lourd que le titre de la carte. Un crochet dessiné et deux mots
suffisent à dire que le choix est fait. */
html body .ccsr .ccsr-choisi {
display: none;
align-items: center;
justify-content: center;
gap: 9px;
width: auto;
margin: 12px auto 0;
padding: 8px 18px 8px 14px !important;
border: 1px solid #354535;
border-radius: 999px !important;
background: #EFF3EF;
color: #354535;
font-size: .68rem !important;
font-weight: 600;
letter-spacing: .16em !important;
text-transform: uppercase;
}
html body .ccsr .ccsr-forfait:has( input:checked ) .ccsr-choisi,
html body .ccsr .ccsr-forfait.ccsr-est-coche .ccsr-choisi {
display: inline-flex;
}
/* Le crochet est dessiné, pas écrit : aucune police à charger, aucun glyphe
qui manque, et il reste net à tous les grossissements. */
html body .ccsr .ccsr-choisi-signe {
flex: 0 0 auto;
width: 15px;
height: 15px;
border-radius: 50%;
background: #354535;
position: relative;
}
html body .ccsr .ccsr-choisi-signe::after {
content: "";
position: absolute;
top: 4px;
left: 4.5px;
width: 6px;
height: 3px;
border-left: 1.6px solid #FBF8F1;
border-bottom: 1.6px solid #FBF8F1;
transform: rotate( -45deg );
}
/* -------- Le temps à prévoir, à l'étape de la date -------- */
html body .ccsr .ccsr-duree-mot {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 24px;
padding: 12px 16px;
max-width: 640px;
border: 1px solid #E6DCCB;
border-radius: 10px;
background: #FAF6F0;
font-size: .9rem;
line-height: 1.65;
color: #5E5850;
}
/* Une petite horloge, dessinée : deux aiguilles dans un cercle. */
html body .ccsr .ccsr-duree-signe {
flex: 0 0 auto;
position: relative;
width: 16px;
height: 16px;
margin-top: 3px;
border: 1.4px solid #A8834F;
border-radius: 50%;
}
html body .ccsr .ccsr-duree-signe::before,
html body .ccsr .ccsr-duree-signe::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
background: #A8834F;
transform-origin: 0 0;
}
html body .ccsr .ccsr-duree-signe::before {
width: 4.5px;
height: 1.3px;
transform: translateY( -50% ) rotate( -90deg );
}
html body .ccsr .ccsr-duree-signe::after {
width: 3.4px;
height: 1.3px;
transform: translateY( -50% );
}
/* -------- Les moments proposés : le jour, puis l'heure --------
« dimanche 11 octobre, 16 h 45 » tenait sur une seule ligne grise. Ce qui
change d'une proposition à l'autre, c'est l'heure : elle se détache
maintenant à droite, dans sa propre pastille, et la colonne des heures se
lit d'un coup d'œil. */
html body .ccsr .ccsr-creneau {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 16px;
}
html body .ccsr .ccsr-creneau .ccsr-creneau-quand {
display: flex;
flex: 1 1 auto;
align-items: baseline;
justify-content: space-between;
gap: 14px;
}
html body .ccsr .ccsr-creneau-jour {
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 1.16rem;
line-height: 1.3;
color: #2F2A24;
}
html body .ccsr .ccsr-creneau-heure {
flex: 0 0 auto;
padding: 4px 11px;
border: 1px solid #E6DCCB;
border-radius: 999px;
background: #FBF8F1;
font-family: "Montserrat", sans-serif;
font-size: .72rem;
font-weight: 600;
letter-spacing: .1em;
color: var(--ccsr-pale);
white-space: nowrap;
}
html body .ccsr .ccsr-creneau:has( input:checked ) .ccsr-creneau-heure,
html body .ccsr .ccsr-creneau.ccsr-est-coche .ccsr-creneau-heure {
border-color: #354535;
background: #354535;
color: #FBF8F1;
}
/* « Aucun de ces moments ne me convient » n'a ni jour ni heure : sa ligne
reste simple, et elle ne doit pas s'écarter comme les autres. */
html body .ccsr .ccsr-creneau-autre .ccsr-creneau-quand {
justify-content: flex-start;
}
@media ( max-width: 480px ) {
html body .ccsr .ccsr-creneau .ccsr-creneau-quand {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
}
/* -------- Les numéros dans le sommaire --------
Les cinq segments portaient leur nom, et le numéro n'était écrit que sur
téléphone. Les en-têtes d'étape, eux, sont numérotés depuis peu : le
sommaire disait « Votre date » pendant que le titre juste dessous disait
« 2 · Votre date ». Les deux comptent maintenant pareil. */
html body .ccsr .ccsr-fil li {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
}
html body .ccsr .ccsr-fil-rang {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 20px;
height: 20px;
border: 1px solid currentColor;
border-radius: 50%;
font-size: .62rem;
font-weight: 600;
letter-spacing: 0;
opacity: .75;
}
html body .ccsr .ccsr-fil li.actif .ccsr-fil-rang {
background: #354535;
border-color: #354535;
color: #FBF8F1;
opacity: 1;
}
html body .ccsr .ccsr-fil li.complet .ccsr-fil-rang {
border-color: #D6AE7B;
color: #A8834F;
opacity: 1;
}
@media ( max-width: 640px ) {
/* Sur téléphone, seul le nom de l'étape en cours s'écrit, sous la
rangée : le numéro l'y accompagne déjà, et un second rond au-dessus
ferait doublon. */
html body .ccsr .ccsr-fil li .ccsr-fil-rang {
display: none;
}
html body .ccsr .ccsr-fil li.actif .ccsr-fil-rang {
display: inline;
width: auto;
height: auto;
border: 0;
background: none;
color: inherit;
}
}
/* -------- Les champs de date : rien de bleu --------
Le calendrier qui s'ouvre sous un champ de date est dessiné par le
navigateur, pas par moi. Deux propriétés suffisent à lui faire prendre
mes couleurs plutôt que son bleu d'usine. */
html body .ccsr input[type="date"],
html body .ccsr input[type="time"],
html body .ccsr input[type="month"] {
accent-color: #354535;
color-scheme: light;
}
/* -------- Les quatre adresses, sous la clause du crédit --------
Deux colonnes de deux faisaient quatre petits blocs mal équilibrés — un
nom court au-dessus d'une adresse longue. Sur ordinateur, chacune tient
maintenant sur sa ligne : le pictogramme, le nom, puis l'adresse alignée
à droite, les quatre l'une sous l'autre. */
html body .ccsr .ccsr-liens-rv {
grid-template-columns: 1fr;
gap: 2px;
padding: 14px 16px;
}
html body .ccsr .ccsr-lien-rv {
flex-direction: row;
align-items: baseline;
gap: 10px;
padding: 7px 10px 7px 30px;
background-position: 8px .72em;
}
html body .ccsr .ccsr-lien-rv .ccsr-lien-qui {
margin-left: auto;
text-align: right;
}
@media ( max-width: 600px ) {
html body .ccsr .ccsr-lien-rv {
flex-direction: column;
align-items: flex-start;
gap: 1px;
background-position: 8px center;
}
html body .ccsr .ccsr-lien-rv .ccsr-lien-qui {
margin-left: 0;
text-align: left;
}
}
/* -------- Les réponses sans photo de fond --------
Dans une question illustrée, « Dès que possible » et « Peu importe »
n'ont rien à montrer : leur carte restait blanche entre deux cartes
habillées d'une saison, et ce blanc se lisait comme une case éteinte. Un
papier doux, deux teintes de ma palette, et elles redeviennent des
réponses comme les autres — sans jamais attirer l'œil plus que celles
qui ont une vraie photo. */
html body .ccsr .ccsr-option-sans-fond .ccsr-option-corps {
background:
radial-gradient( 120% 90% at 18% 0%, rgba( 255, 255, 255, .85 ), rgba( 255, 255, 255, 0 ) 62% ),
linear-gradient( 158deg, #F6F1E7 0%, #EFEADF 52%, #E9E4D7 100% );
border-color: #E6DCCB;
}
html body .ccsr .ccsr-option-sans-fond:hover .ccsr-option-corps {
border-color: #D6AE7B;
}
html body .ccsr .ccsr-option-sans-fond > input:checked + .ccsr-option-corps {
background:
radial-gradient( 120% 90% at 18% 0%, rgba( 255, 255, 255, .8 ), rgba( 255, 255, 255, 0 ) 62% ),
linear-gradient( 158deg, #EFF3EF 0%, #E7EDE6 100% );
border-color: #354535;
}
/* -------- Deux blocs qui se touchaient --------
Mesuré à zéro pixel : un paragraphe d'explication posé directement
au-dessus d'un encadré, à l'étape des coordonnées comme à celle des
envies. Un texte collé au cadre qu'il annonce se lit comme s'il en
faisait partie. */
html body .ccsr .ccsr-pas > .ccsr-aide {
margin-bottom: 16px;
}
/* -------- L'air de la carte, sous le lien plutôt qu'au-dessus --------
Les six cartes font la même hauteur : la plus bavarde donne sa mesure aux
autres, et le reste reçoit du vide. Ce vide était placé au-dessus de
« Voir le détail », qui restait collé au bas de la carte pendant que sa
description flottait seule tout en haut. En le mettant dessous, le lien
suit immédiatement le texte qu'il prolonge, et c'est le bas de la carte
qui respire. */
html body .ccsr .ccsr-voir-detail {
margin-top: 10px;
margin-bottom: auto;
padding-top: 0;
}
/* -------- Les titres des cartes, sur une seule ligne --------
« Maternité & Nouveau-né » demande 211 pixels à sa taille pleine. Mesuré
sur neuf largeurs d'écran : il les a sur un grand écran, mais la grille à
trois colonnes vers 1 180 pixels ne lui en laisse que 190, et il se
cassait là en « Maternité & » puis « Nouveau-né ». À 1 280 il tenait à un
pixel près, ce qui n'est pas tenir.
Plutôt qu'un chiffre fixe choisi pour le pire cas — qui aurait rapetissé
les six titres partout —, la taille se calcule sur la largeur de la carte
elle-même. Les six cartes font la même largeur : les six titres gardent
donc exactement la même taille, et elle est toujours la plus grande qui
tienne sur une ligne. */
@media ( min-width: 641px ) {
html body .ccsr .ccsr-forfait-corps {
container-type: inline-size;
}
html body .ccsr .ccsr-forfait-nom {
font-size: clamp( 1rem, 9.5cqw, 1.3rem ) !important;
white-space: nowrap;
}
}
/* Sur téléphone, la carte est une rangée : la vignette prenait 174 pixels
fixes, et sur un écran de 360 il ne restait que 119 pixels de texte —
« Famille & Enfants » et « Smash the Cake » s'y cassaient aussi. La
vignette se resserre maintenant sur les petits écrans et rend la place au
texte ; le titre du combo garde ses deux lignes, équilibrées. */
@media ( max-width: 640px ) {
html body .ccsr .ccsr-forfait {
grid-template-columns: clamp( 128px, 44vw, 174px ) 1fr;
}
html body .ccsr .ccsr-forfait-nom {
text-wrap: balance;
}
}
/* La note sous le grand total tenait sur trois lignes dans une colonne de
230 pixels. Raccourcie, elle en fait deux, et les deux sont de la même
longueur. */
html body .ccsr .ccsr-recap-grandtotal-note {
text-wrap: balance;
}
/* =========================================================================
2.24 · Le guide de préparation
« Mes petits conseils » vivait au bas de la colonne de droite, dans un
rail de 230 pixels, sous un récapitulatif qui grandit à mesure qu'on
remplit le formulaire. Une dizaine de conseils empilés là finissaient par
déborder sur ce qui suivait. Et ce n'était pas leur place : ce ne sont pas
des notes de marge, c'est ce que la cliente doit savoir avant de venir.
Le bloc prend maintenant toute la largeur, sous le formulaire, en deux
colonnes sur grand écran, et il s'imprime en une feuille propre.
========================================================================= */
html body .ccsr .ccsr-conseils {
margin: 34px 0 0;
padding: 28px 30px 26px;
border: 1px solid #E6DCCB;
border-top: 2px solid #D6AE7B;
border-radius: 14px;
background: #FFF;
}
/* La même entrée en matière que la page /aide : le sur-titre doré en
capitales espacées, le titre en Cormorant, et le petit filet doré
dessous. Centré, comme là-bas. */
html body .ccsr .ccsr-conseils-tete {
display: block;
margin: 0 0 24px;
text-align: center;
}
html body .ccsr .ccsr-conseils-tete::after {
content: "";
display: block;
width: 54px;
height: 1px;
margin: 14px auto 0;
background: #D6AE7B;
}
html body .ccsr .ccsr-conseils-sur {
margin: 0 0 4px;
font-family: "Montserrat", sans-serif;
font-size: .72rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: #A8834F;
}
html body .ccsr .ccsr-conseils-titre {
margin: 0;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 1.72rem;
font-weight: 500;
letter-spacing: .01em;
line-height: 1.2;
text-transform: none;
color: #354535;
}
html body .ccsr .ccsr-conseils-imprimer {
display: inline-flex;
align-items: center;
gap: 9px;
flex: 0 0 auto;
margin: 18px 0 0;
padding: 11px 20px;
border: 1px solid #354535;
border-radius: 999px;
background: none;
color: #354535;
font-family: "Montserrat", sans-serif;
font-size: .72rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s, color .2s;
}
html body .ccsr .ccsr-conseils-imprimer:hover,
html body .ccsr .ccsr-conseils-imprimer:focus-visible {
background: #354535;
color: #FBF8F1;
}
/* Une petite imprimante, dessinée : le corps, le papier qui sort. */
html body .ccsr .ccsr-conseils-signe {
position: relative;
width: 14px;
height: 12px;
border: 1.4px solid currentColor;
border-radius: 2px;
}
html body .ccsr .ccsr-conseils-signe::before {
content: "";
position: absolute;
top: -4px;
left: 2.5px;
width: 7px;
height: 3px;
border: 1.4px solid currentColor;
border-bottom: 0;
border-radius: 1px 1px 0 0;
}
html body .ccsr .ccsr-conseils-signe::after {
content: "";
position: absolute;
bottom: -4px;
left: 2.5px;
width: 7px;
height: 4px;
background: #FBF8F1;
border: 1.4px solid currentColor;
border-radius: 0 0 1px 1px;
}
html body .ccsr .ccsr-conseils-imprimer:hover .ccsr-conseils-signe::after,
html body .ccsr .ccsr-conseils-imprimer:focus-visible .ccsr-conseils-signe::after {
background: #354535;
}
/* Deux colonnes dès qu'il y a la place : une liste de dix conseils sur une
seule colonne pleine largeur donne des lignes de 120 caractères, qu'on ne
lit pas. */
html body .ccsr .ccsr-conseils-liste {
columns: 2;
column-gap: 38px;
}
html body .ccsr .ccsr-conseil {
break-inside: avoid;
margin: 0 0 16px;
padding: 0 0 16px;
border-bottom: 1px solid #E6DCCB;
}
html body .ccsr .ccsr-conseil-titre {
font-size: 1.12rem;
}
html body .ccsr .ccsr-conseil-texte {
font-size: .88rem;
line-height: 1.65;
color: var(--ccsr-pale);
}
html body .ccsr .ccsr-conseils-mot {
margin: 18px 0 0;
padding-top: 16px;
font-size: .82rem;
color: var(--ccsr-pale);
}
@media ( max-width: 760px ) {
html body .ccsr .ccsr-conseils {
padding: 22px 18px 20px;
}
html body .ccsr .ccsr-conseils-liste {
columns: 1;
}
}
/* =========================================================================
2.25 · Le guide, sur une feuille de 8,5 × 11
Il s'imprime après la réservation : ce qui est déjà décidé n'a pas à y
figurer. Ce sont des astuces, et ce qu'il faut apporter. Une feuille
lettre, mes deux polices, ma palette, et rien du formulaire autour.
========================================================================= */
@page {
size: letter;
margin: 16mm 15mm 14mm;
}
@media print {
body.ccsr-impression-conseils {
background: #FFF !important;
}
/* Tout disparaît, sauf la branche qui mène au guide. */
body.ccsr-impression-conseils *:not(:has( .ccsr-conseils )) {
display: none !important;
}
body.ccsr-impression-conseils .ccsr-conseils,
body.ccsr-impression-conseils .ccsr-conseils * {
display: revert !important;
}
body.ccsr-impression-conseils .ccsr-conseils [hidden] {
display: none !important;
}
body.ccsr-impression-conseils .ccsr-conseils-imprimer,
body.ccsr-impression-conseils .ccsr-conseils-mot {
display: none !important;
}
body.ccsr-impression-conseils .ccsr-conseils {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
color: #2F2A24;
font-family: "Montserrat", sans-serif;
}
/* L'en-tête de la feuille : mon nom en Cormorant, un filet doré. */
body.ccsr-impression-conseils .ccsr-conseils-tete {
display: block !important;
margin: 0 0 7mm !important;
padding: 0 !important;
border: 0 !important;
text-align: center;
}
body.ccsr-impression-conseils .ccsr-conseils-sur {
margin: 0 0 1mm !important;
font-family: "Montserrat", sans-serif;
font-size: 7.5pt !important;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: #8A6B3C !important;
}
body.ccsr-impression-conseils .ccsr-conseils-titre {
margin: 0 !important;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 24pt !important;
font-weight: 500;
color: #354535 !important;
}
body.ccsr-impression-conseils .ccsr-conseils-tete::after {
content: "";
display: block;
width: 16mm;
height: .8pt;
margin: 3.5mm auto 0;
background: #D6AE7B;
}
/* Deux colonnes sur la feuille aussi : c'est ce qui fait tenir le guide
sur une seule page. */
body.ccsr-impression-conseils .ccsr-conseils-liste {
columns: 2 !important;
column-gap: 9mm !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body.ccsr-impression-conseils .ccsr-conseil {
break-inside: avoid;
margin: 0 0 4.5mm !important;
padding: 0 0 4.5mm !important;
border-bottom: .5pt solid #E6DCCB !important;
}
body.ccsr-impression-conseils .ccsr-conseil:last-child {
border-bottom: 0 !important;
}
body.ccsr-impression-conseils .ccsr-conseil-titre {
display: block !important;
margin: 0 0 1.2mm !important;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 12.5pt !important;
font-weight: 600;
line-height: 1.25;
color: #354535 !important;
}
body.ccsr-impression-conseils .ccsr-conseil-texte {
display: block !important;
font-family: "Montserrat", sans-serif;
font-size: 8.4pt !important;
line-height: 1.5;
color: #5E5850 !important;
}
/* Le bas de page : de quoi me joindre, sans encombrer. */
body.ccsr-impression-conseils .ccsr-conseils::after {
content: "Une question d'ici là ? Écrivez-moi à info@rebeccavandal.com ou appelez le 450 578-3682.";
display: block;
margin-top: 6mm;
padding-top: 3mm;
border-top: .5pt solid #E6DCCB;
font-family: "Montserrat", sans-serif;
font-size: 8pt;
color: #786F62;
}
}
/* =========================================================================
2.26 · Ce qui se lit vraiment
Relevé au contrastomètre sur la page entière : plusieurs textes passaient
sous le seuil de 4,5 pour 1 que demande la norme pour du petit texte. Le
pire était « Parce que votre forfait comprend… » à 2,06 : du doré clair
sur du papier crème, c'est-à-dire presque rien. Et une dizaine
d'étiquettes descendaient sous 12 pixels.
Les teintes changent d'un cran, pas de famille : le gris reste le même
gris, le doré reste doré.
========================================================================= */
html body .ccsr {
/* 3,46 → 4,66 pour 1 sur le crème. Poussé plus loin encore à la fin de la
feuille (#6E6559) : c'est cette dernière valeur qui s'applique. */
--ccsr-pale: #6E6559;
/* Le doré des petites capitales, uniquement là où c'est du texte. */
--ccsr-or-texte: #8A6B3C;
}
html body .ccsr .ccsr-raison {
margin: 0;
}
/* « Ce sur quoi nous nous entendons » : le récapitulatif en tête des
conditions. Il n'avait aucun style — il sortait en liste de définitions
nue, au milieu d'une page entièrement dessinée. C'est pourtant le seul
endroit du document qui dit ce qu'on achète, quand, où et combien. */
.ccsr .ccsr-entente-recap {
margin: 0 0 24px;
padding: 20px 22px;
border: 1px solid var( --ccsr-bord );
background: var( --ccsr-papier );
}
.ccsr .ccsr-entente-recap-titre {
margin: 0 0 14px;
font-family: var( --ccsr-serif );
font-size: 1.32rem;
font-weight: 500;
line-height: 1.2;
color: var( --ccsr-sauge );
}
.ccsr .ccsr-entente-recap-liste { margin: 0; }
.ccsr .ccsr-entente-recap-partie + .ccsr-entente-recap-partie {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var( --ccsr-bord );
}
.ccsr .ccsr-entente-recap-partie-mot {
margin: 0 0 7px;
font-size: .7rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var( --ccsr-or-texte );
}
/* Chaque ligne : le mot à gauche, la valeur à droite, reliés par un filet
assez pâle pour qu'on suive la ligne sans le voir. */
.ccsr .ccsr-entente-recap-partie > div {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 14px;
padding: 4px 0;
font-size: .9rem;
line-height: 1.5;
}
.ccsr .ccsr-entente-recap-partie dt {
flex: 0 0 auto;
min-width: 9.5rem;
margin: 0;
font-weight: 400;
color: var( --ccsr-pale );
}
.ccsr .ccsr-entente-recap-partie dd {
flex: 1 1 12rem;
margin: 0;
color: var( --ccsr-encre );
}
.ccsr .ccsr-entente-recap-fort dd {
font-weight: 600;
color: var( --ccsr-sauge );
}
@media ( max-width: 560px ) {
.ccsr .ccsr-entente-recap { padding: 16px 15px; }
.ccsr .ccsr-entente-recap-partie > div { display: block; }
.ccsr .ccsr-entente-recap-partie dt { min-width: 0; font-size: .82rem; }
}
/* Sur un écran étroit, la pastille prend sa propre ligne : « COMBO Maternité
& Nouveau-né » en tirait trois quand elle restait dans le fil du titre. */
@media ( max-width: 640px ) {
.ccsr .ccsr-forfait-nom .ccsr-forfait-pastille {
display: block;
margin: 0 0 5px;
transform: none;
}
}
/* Une ligne d'inclusion, sur la carte : ce qu'on obtient en évidence, la
précision qui va avec en retrait. Le tiret qui les séparait s'écrivait à
côté du tiret qui sert de puce — deux tirets par ligne. */
.ccsr .ccsr-forfait-inclus-ligne strong {
font-weight: 600;
color: var( --ccsr-sauge );
}
.ccsr .ccsr-forfait-inclus-ligne .ccsr-forfait-detail {
font-weight: 400;
color: var( --ccsr-doux );
}
/* La section des séances suivantes : tout ce qui concerne les séances qu'on
ne fixe pas aujourd'hui, après la date de la première. L'étape suit ainsi
l'ordre des séances. Un filet la détache sans en faire une étape de plus. */
.ccsr .ccsr-seances-suivantes:not(:empty) {
margin-top: 10px;
}
.ccsr .ccsr-seances-suivantes .ccsr-groupe {
margin-top: 14px;
}
/* « Et les autres séances ? » — le bloc qui explique, dans un combo, ce qui
arrive aux séances qu'on ne fixe pas aujourd'hui. Il se lit comme une
note de la photographe, pas comme un avertissement : fond crème, filet
doré à gauche, et la liste des séances en évidence. */
.ccsr .ccsr-quand-suite {
margin: 0 0 18px;
padding: 14px 18px;
border-left: 2px solid var( --ccsr-or );
background: var( --ccsr-papier-2 );
font-size: .88rem;
line-height: 1.65;
color: var( --ccsr-doux );
}
.ccsr .ccsr-quand-suite p { margin: 0 0 9px; }
.ccsr .ccsr-quand-suite p:last-child { margin-bottom: 0; }
.ccsr .ccsr-quand-suite-titre {
font-family: var( --ccsr-serif );
font-size: 1.16rem;
color: var( --ccsr-sauge );
}
.ccsr .ccsr-quand-suite-liste {
margin: 0 0 10px;
padding: 0;
list-style: none;
}
.ccsr .ccsr-quand-suite-liste li {
position: relative;
margin: 0 0 3px;
padding-left: 16px;
color: var( --ccsr-sauge );
}
.ccsr .ccsr-quand-suite-liste li::before {
content: "";
position: absolute;
top: .72em;
left: 0;
width: 8px;
height: 1px;
background: var( --ccsr-or );
}
.ccsr .ccsr-quand-suite-espace { color: var( --ccsr-pale ); }
/* Une pilule dont aucun cas n'est visible ne doit pas rester là : sans
cette règle, une cliente qui n'a pas encore choisi sa séance voyait un
petit rectangle sable vide au-dessus de la question. */
html body .ccsr .ccsr-raison:not(:has(.ccsr-raison-cas:not([hidden]))) {
display: none;
}
/* L'air est porté par la pilule, pas par le texte qu'elle contient : une
marge ici décentrait le texte dans sa propre bordure. */
html body .ccsr .ccsr-raison-cas {
display: block;
margin: 0;
font-size: .72rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var( --ccsr-or-texte );
}
html body .ccsr .ccsr-raison-cas[hidden] {
display: none;
}
/* Les petites capitales dorées : une seule taille, et une teinte qui se lit.
Elles étaient à 9,6, 10,2, 10,9, 11, 11,2 et 11,5 pixels selon l'endroit —
six tailles pour un même niveau de lecture. */
html body .ccsr .ccsr-voir-detail,
html body .ccsr .ccsr-fiche-sous,
html body .ccsr .ccsr-resume-titre,
html body .ccsr .ccsr-conseils-sur,
html body .ccsr .ccsr-conditions-partie,
html body .ccsr .ccsr-option-prix,
html body .ccsr .ccsr-forfait-pastille,
html body .ccsr .ccsr-facultatif,
html body .ccsr .ccsr-pas-etoile b {
font-size: .72rem !important;
color: var( --ccsr-or-texte ) !important;
}
html body .ccsr .ccsr-voir-signe {
color: var( --ccsr-or-texte );
}
html body .ccsr .ccsr-pas-no {
color: var( --ccsr-or-texte );
}
/* Le texte des clauses : 14,9 pixels pour un contrat qu'on doit lire en
entier, c'est petit. Seize, comme le reste du formulaire. */
html body .ccsr .ccsr-clause-texte,
html body .ccsr .ccsr-clause p,
html body .ccsr .ccsr-clause li,
html body .ccsr .ccsr-conditions p,
html body .ccsr .ccsr-conditions li {
font-size: 1rem;
line-height: 1.72;
}
html body .ccsr .ccsr-clause-soustitre {
font-size: 1rem;
}
/* Les cibles du doigt. Mesurées à 20, 24, 27, 36 et 38 pixels de haut : en
deçà de 44, un pouce rate. Sur ordinateur la souris s'en accommode ; sur
téléphone, non. */
@media ( max-width: 640px ) {
html body .ccsr .ccsr-voir-detail,
html body .ccsr .ccsr-connu-modifier,
html body .ccsr .ccsr-fiche-retour,
html body .ccsr .ccsr-dabord-retour,
html body .ccsr .ccsr-fiche-prendre,
html body .ccsr .ccsr-conseils-imprimer {
min-height: 44px;
display: inline-flex;
align-items: center;
}
html body .ccsr .ccsr-fiche-fermer {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* =========================================================================
2.27 · Le sommaire — variante C1
Les cinq segments portaient chacun leur filet et leur numéro : beaucoup de
traits pour une information simple. Une seule barre les remplace. Elle
découvre un dégradé qui part du doré et finit au sauge — la couleur dit
donc où on en est, en plus de la longueur —, et les noms passent dessous,
sans numéro : les en-têtes d'étape les portent déjà, juste en dessous.
========================================================================= */
html body .ccsr .ccsr-fil-barre {
height: 3px;
margin: 0 0 13px;
border-radius: 2px;
background: #EFE7DA;
overflow: hidden;
}
html body .ccsr .ccsr-fil-ruban {
display: block;
width: 10%;
height: 100%;
border-radius: 2px;
background-image: linear-gradient( 90deg, #D6AE7B 0%, #354535 100% );
background-size: 100vw 100%;
background-repeat: no-repeat;
transition: width .45s cubic-bezier( .22, .7, .2, 1 );
}
@media ( prefers-reduced-motion: reduce ) {
html body .ccsr .ccsr-fil-ruban { transition: none; }
}
html body .ccsr .ccsr-fil {
display: flex;
gap: 0;
margin: 0 0 30px;
padding: 0;
list-style: none;
border: 0;
}
html body .ccsr .ccsr-fil li {
flex: 1;
display: block;
padding: 0;
border: 0;
text-align: center;
font-family: "Montserrat", sans-serif;
font-size: .72rem;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: #786F62;
cursor: pointer;
transition: color .25s;
}
html body .ccsr .ccsr-fil li.complet { color: #8A6B3C; }
html body .ccsr .ccsr-fil li.actif {
color: #354535;
font-weight: 600;
}
html body .ccsr .ccsr-fil li.manque { color: #A89C8C; }
/* Le numéro reste dans le texte pour les lecteurs d'écran et pour le
téléphone, où la place manque pour cinq noms. */
html body .ccsr .ccsr-fil-rang { display: none; }
@media ( max-width: 640px ) {
html body .ccsr .ccsr-fil {
position: relative;
padding-bottom: 0;
margin-bottom: 24px;
}
html body .ccsr .ccsr-fil li {
font-size: 0;
letter-spacing: 0;
}
html body .ccsr .ccsr-fil li.actif {
font-size: .68rem;
letter-spacing: .1em;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
html body .ccsr .ccsr-fil li.actif .ccsr-fil-rang {
display: inline;
}
html body .ccsr .ccsr-fil li.actif .ccsr-fil-rang::after {
content: " · ";
}
}
/* Une entente qu'on ne peut pas encore accepter : la case s'éteint, et la
raison s'écrit juste au-dessus plutôt que de laisser quelqu'un cocher un
contrat dont le prix est vide. */
html body .ccsr .ccsr-clause-bloquee {
margin: 0 0 12px;
padding: 12px 16px;
border: 1px solid #E6DCCB;
border-left: 3px solid #D6AE7B;
border-radius: 0 10px 10px 0;
background: #FBF4EA;
font-size: .92rem;
line-height: 1.65;
color: #5E5850;
}
html body .ccsr .ccsr-clause-case.ccsr-clause-eteinte {
opacity: .55;
cursor: not-allowed;
}
/* =========================================================================
2.29 — Le paiement sur la page de remerciement
====================================================================== */
/* Le bouton de carte d'abord, le virement ensuite : la carte est le chemin
le plus court, et c'est elle qui retient la date dans la minute. */
html body .ccsr .ccsr-depot-carte {
margin: 0 0 .9rem;
}
html body .ccsr .ccsr-payer {
width: 100%;
min-height: 48px;
}
html body .ccsr .ccsr-payer[disabled] {
opacity: .62;
cursor: progress;
}
/* « ou par virement Interac » : un séparateur, pas un titre. Deux filets de
part et d'autre, et le mot au milieu, en petites capitales. */
html body .ccsr .ccsr-depot-ou {
display: flex;
align-items: center;
gap: .7rem;
margin: 0 0 .7rem;
font-family: var( --ccsr-sans, Montserrat, sans-serif );
font-size: .72rem;
letter-spacing: .09em;
text-transform: uppercase;
color: var( --ccsr-pale, #786F62 );
}
html body .ccsr .ccsr-depot-ou::before,
html body .ccsr .ccsr-depot-ou::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: currentColor;
opacity: .3;
}
html body .ccsr .ccsr-depot-erreur {
margin: 0 0 .8rem;
font-size: .9rem;
color: var( --ccsr-or-texte, #8A6B3C );
}
/* Rien à payer tant que la date n'est pas confirmée : le bloc perd son cadre
d'action et redevient une simple note. */
/* --ccsr-doux est l'encre des textes secondaires (#5E5850), pas un fond :
je l'avais prise pour un beige et ce bloc sortait gris foncé sous un texte
foncé. Le vrai fond doux de la palette est --ccsr-papier-2. */
html body .ccsr .ccsr-depot-attente {
background: var( --ccsr-papier-2, #F2EBDF );
border: 0;
}
html body .ccsr .ccsr-depot-attente p {
margin: 0;
}
/* =========================================================================
2.29 (suite) — Lisibilité mesurée, pas supposée
====================================================================== */
/* Trois constats de la passe au navigateur sans affichage, à 390 et 1440 px.
1. « + tx » tombait à 7,9 px sur téléphone. Il était en .62em, donc
proportionnel au prix, qui rétrécit — la proportion était juste, le
résultat illisible. Un plancher en pixels garde le rapport sur
ordinateur et refuse de descendre sous 10,5 px.
2. L'or des micro-étiquettes donnait 4,19 contre le beige du résumé, et
le gris pâle 4,18 : tous deux sous la norme de 4,5. Assombris juste
ce qu'il faut — 4,94 et 4,82 mesurés.
3. Le fil de progression écrivait « 1 · VOTRE SÉANCE » en 9,9 px sur
téléphone. Il passe à 11,2 px, et tient encore sur une ligne. */
html body .ccsr .ccsr-prix-tx {
font-size: max( 10.5px, .62em );
opacity: .92;
}
html body .ccsr {
--ccsr-pale: #6E6559;
--ccsr-or-texte: #7F6235;
}
@media ( max-width: 640px ) {
html body .ccsr .ccsr-fil li.actif .ccsr-fil-rang,
html body .ccsr .ccsr-fil li.actif .ccsr-fil-nom {
font-size: .7rem;
}
}
/* Le « Réserver » du téléphone est l'appel principal de chaque carte, et il
était écrit en or clair sur blanc : 3,49 mesuré, contre 4,5 exigés. Il
reprend l'or sombre des micro-étiquettes — 5,88 — et gagne un demi-point
de taille. La bordure, le fond et la forme ne changent pas. */
@media ( hover: none ) {
html body .ccsr .ccsr-voir-tel > span {
font-size: .7rem !important;
color: var( --ccsr-or-texte ) !important;
}
}
/* =========================================================================
2.33 — Les conseils en blocs, sans lignes
====================================================================== */
/* La double ligne du bas, expliquée.
Chaque conseil portait un border-bottom, retiré sur :last-child. Mais la
liste était en multi-colonnes (columns: 2), et :last-child désigne le
dernier du DOM — qui tombe au bas de la colonne de DROITE. Le dernier de
la colonne de gauche gardait donc son filet. Pire : les conseils qui ne
s'appliquent pas sont masqués, et :last-child ne sait rien des éléments
masqués — si le dernier du DOM était caché, le dernier VISIBLE gardait son
filet lui aussi. Ce filet-là tombait juste au-dessus du border-top de la
phrase de clôture : deux lignes parallèles à quelques pixels.
Plutôt que d'empiler des exceptions, les filets disparaissent. Chaque
conseil devient un bloc posé sur un fond crème, et la grille remplace le
multi-colonnes : un élément masqué quitte la grille complètement, donc
aucun filet orphelin n'est possible. */
html body .ccsr .ccsr-conseils-liste {
display: grid;
/* 20rem, mesuré et non choisi au hasard : à 15,5rem la grille montait à
quatre colonnes de 292 px sur un écran large, soit une quarantaine de
caractères par ligne — haché, fatigant. À 20rem on obtient trois
colonnes d'environ 385 px, donc près de 55 caractères, et deux
colonnes sur un écran moyen. */
grid-template-columns: repeat( auto-fit, minmax( 20rem, 1fr ) );
gap: .9rem;
/* Le multi-colonnes de la règle précédente doit être annulé
explicitement : « display: grid » seul ne le désactive pas. */
columns: auto;
column-gap: normal;
}
html body .ccsr .ccsr-conseil {
margin: 0;
padding: 1rem 1.15rem 1.05rem;
border: 0;
border-radius: 12px;
background: var( --ccsr-papier-2, #F2EBDF );
}
html body .ccsr .ccsr-conseil-titre {
margin: 0 0 .35rem;
font-size: 1.06rem;
}
html body .ccsr .ccsr-conseil-texte {
font-size: .86rem;
line-height: 1.6;
}
/* La phrase de clôture perd son filet : elle se sépare par l'espace et par
le centrage, comme le sur-titre en haut. Deux filets dans un bloc qui en
a déjà un en haut, c'était un de trop. */
html body .ccsr .ccsr-conseils-mot {
margin: 1.25rem 0 0;
padding-top: 0;
border-top: 0;
text-align: center;
font-size: .8rem;
}
@media ( max-width: 760px ) {
html body .ccsr .ccsr-conseils-liste {
grid-template-columns: 1fr;
gap: .75rem;
}
html body .ccsr .ccsr-conseil {
padding: .9rem 1rem;
}
}
/* À l'impression, les blocs redeviennent du texte : une feuille de papier n'a
pas besoin de fonds crème, et l'encre coûte cher. Les filets fins reviennent
pour séparer, parce que là ils servent. */
@media print {
body.ccsr-impression-conseils .ccsr-conseils-liste {
display: block;
columns: 2;
column-gap: 2.2rem;
}
body.ccsr-impression-conseils .ccsr-conseil {
break-inside: avoid;
margin: 0 0 .85rem;
padding: 0 0 .85rem;
border-bottom: 1px solid #E6DCCB;
border-radius: 0;
background: none;
}
}
/* Le filet doré appartient au titre, pas au bouton.
L'en-tête empile ses enfants dans l'ordre du HTML, et le filet est un
::after : il tombait donc SOUS le bouton « Imprimer », ce qui donnait
titre, bouton, puis un petit trait doré orphelin. Sur /aide, le filet se
pose juste sous le titre — c'est de là qu'il vient. Une colonne flex avec
un ordre explicite le remet à sa place sans toucher au HTML. */
html body .ccsr .ccsr-conseils-tete {
display: flex;
flex-direction: column;
align-items: center;
}
html body .ccsr .ccsr-conseils-tete > div { order: 1; }
html body .ccsr .ccsr-conseils-tete::after {
order: 2;
margin: 14px 0 0;
}
html body .ccsr .ccsr-conseils-imprimer {
order: 3;
margin-top: 18px;
}
/* =========================================================================
2.34 — Les conseils : par séance, et par famille
====================================================================== */
/* L'intertitre d'un combo prend toute la largeur de la grille et respire
au-dessus de ses blocs. Pas de filet : la page en a déjà assez. */
html body .ccsr .ccsr-conseils-groupe {
grid-column: 1 / -1;
margin: .7rem 0 -.15rem;
font-family: var( --ccsr-sans );
font-size: .72rem;
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
color: var( --ccsr-or-texte );
}
html body .ccsr .ccsr-conseils-groupe:first-child {
margin-top: 0;
}
/* Trois familles, trois accents, tous dans sa palette — aucune couleur
inventée. Le trait à gauche fait le classement sans ajouter de ligne de
séparation : il appartient au bloc, il ne coupe rien.
« La séance » — ce qui va se passer, combien de temps, à quel moment.
« Ce que vous apportez » — vêtements, gâteau, savon, chaussures.
« Le jour même » — la météo, la chaleur, la route, la saison. */
html body .ccsr .ccsr-conseil {
position: relative;
overflow: hidden;
padding-left: 1.4rem;
}
html body .ccsr .ccsr-conseil::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 3px;
background: var( --ccsr-bord-fort );
}
html body .ccsr .ccsr-conseil[data-famille="seance"]::before { background: var( --ccsr-sauge ); }
html body .ccsr .ccsr-conseil[data-famille="apporter"]::before { background: var( --ccsr-or-fonce ); }
html body .ccsr .ccsr-conseil[data-famille="jour"]::before { background: var( --ccsr-sauge-clair ); }
html body .ccsr .ccsr-conseil[data-famille="apporter"] .ccsr-conseil-titre { color: var( --ccsr-or-texte ); }
html body .ccsr .ccsr-conseil[data-famille="jour"] .ccsr-conseil-titre { color: var( --ccsr-sauge-clair ); }
/* Une photo, quand il y en a une : elle coiffe le bloc sur toute sa largeur,
fond perdu, et le texte reprend dessous. Le bloc garde sa hauteur de
grille, donc une rangée mêlant blocs illustrés et blocs de texte reste
alignée. */
html body .ccsr .ccsr-conseil-illustre {
padding-top: 0;
}
html body .ccsr .ccsr-conseil-photo {
display: block;
width: calc( 100% + 2.55rem );
height: 8.5rem;
margin: 0 -1.15rem .9rem -1.4rem;
object-fit: cover;
object-position: center;
}
@media ( max-width: 760px ) {
html body .ccsr .ccsr-conseil-photo {
width: calc( 100% + 2.4rem );
height: 7.5rem;
margin: 0 -1rem .8rem -1.4rem;
}
}
/* À l'impression, l'accent de famille devient un simple trait d'encre et les
photos sautent : une feuille de préparation se lit, elle ne s'admire pas. */
@media print {
body.ccsr-impression-conseils .ccsr-conseil-photo { display: none; }
body.ccsr-impression-conseils .ccsr-conseil {
padding-left: 0;
}
body.ccsr-impression-conseils .ccsr-conseil::before { display: none; }
body.ccsr-impression-conseils .ccsr-conseils-groupe {
break-after: avoid;
column-span: all;
margin: .6rem 0 .5rem;
}
}
/* Chaque bloc à sa hauteur, pas à celle de son voisin.
Une grille étire ses cellules sur la plus haute de la rangée : à côté d'un
conseil long comme « Vos vêtements, votre style », les deux autres blocs
se retrouvaient avec quinze centimètres de crème vide sous trois lignes de
texte. Chaque bloc s'arrête maintenant où son texte s'arrête. */
html body .ccsr .ccsr-conseils-liste {
align-items: start;
}
/* =========================================================================
2.37 — Les intertitres de famille, et leurs trois petites marques
====================================================================== */
html body .ccsr .ccsr-conseils-famille {
display: flex;
align-items: center;
gap: .55rem;
}
html body .ccsr .ccsr-conseils-famille[data-famille-titre="seance"] { color: var( --ccsr-sauge ); }
html body .ccsr .ccsr-conseils-famille[data-famille-titre="jour"] { color: var( --ccsr-sauge-clair ); }
/* Trois marques dessinées plutôt que trois fichiers : rien à téléverser,
rien à charger, et elles prennent la couleur de leur famille toutes
seules. Elles servent surtout à ne pas faire reposer le classement sur la
seule couleur — une teinte ne se lit pas par tout le monde. */
html body .ccsr .ccsr-conseils-signe-fam {
position: relative;
flex: 0 0 auto;
width: 15px;
height: 15px;
color: inherit;
}
/* « La séance » : une horloge, la même que celle du rappel de durée. */
html body .ccsr .ccsr-signe-seance {
border: 1.4px solid currentColor;
border-radius: 50%;
}
html body .ccsr .ccsr-signe-seance::before,
html body .ccsr .ccsr-signe-seance::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
height: 1.3px;
background: currentColor;
transform-origin: 0 0;
}
html body .ccsr .ccsr-signe-seance::before {
width: 4.2px;
transform: translateY( -50% ) rotate( -90deg );
}
html body .ccsr .ccsr-signe-seance::after {
width: 3.2px;
transform: translateY( -50% );
}
/* « Ce que vous apportez » : un sac, corps et anse. */
html body .ccsr .ccsr-signe-apporter::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 13px;
height: 9.5px;
border: 1.4px solid currentColor;
border-radius: 1.5px 1.5px 3px 3px;
}
html body .ccsr .ccsr-signe-apporter::after {
content: "";
position: absolute;
left: 3.6px;
top: .5px;
width: 6.2px;
height: 4.5px;
border: 1.4px solid currentColor;
border-bottom: 0;
border-radius: 4px 4px 0 0;
}
/* « Le jour même » : un soleil, un disque et huit rayons posés d'une seule
ombre portée. */
html body .ccsr .ccsr-signe-jour::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background: currentColor;
box-shadow:
0 -6.5px 0 -1.9px currentColor,
0 6.5px 0 -1.9px currentColor,
-6.5px 0 0 -1.9px currentColor,
6.5px 0 0 -1.9px currentColor,
-4.6px -4.6px 0 -2.2px currentColor,
4.6px 4.6px 0 -2.2px currentColor,
-4.6px 4.6px 0 -2.2px currentColor,
4.6px -4.6px 0 -2.2px currentColor;
}
/* À l'impression, les marques disparaissent : un intertitre en capitales se
repère très bien sans dessin, et l'encre se garde pour le texte. */
@media print {
body.ccsr-impression-conseils .ccsr-conseils-signe-fam { display: none; }
}
/* =========================================================================
2.37 (suite) — Deux détails de lisibilité
====================================================================== */
/* Les puces du virement Interac étaient celles du navigateur : de gros ronds
noirs, trop lourds pour trois lignes de consignes dans un encadré clair.
Elles deviennent de courts traits dorés, alignés sur la première ligne du
texte, à la manière des listes du reste du site. */
html body .ccsr .ccsr-interac {
list-style: none;
padding-left: 0;
}
html body .ccsr .ccsr-interac > li {
position: relative;
padding-left: 1.15rem;
}
html body .ccsr .ccsr-interac > li::before {
content: "";
position: absolute;
left: 0;
top: .72em;
width: .55rem;
height: 1.5px;
background: var( --ccsr-or );
}
/* Les étiquettes du détail d'un forfait — « Premier versement », « Durée »,
« Photos incluses » — étaient à 10,9 px : trop petites pour nommer de
l'argent. Elles passent à 12,5 px, et gardent leur gris, leurs capitales
et leur interlettrage : c'est leur taille qui changeait, pas leur rôle. */
html body .ccsr .ccsr-fiche-faits span {
font-size: .78rem;
}
/* =========================================================================
2.38 — L'échéancier dans la fiche d'un forfait
====================================================================== */
/* La fiche annonçait « Premier versement : 120 $ » et la cliente était
débitée de 137,97 $. Les deux chiffres étaient justes : 120 $ est le
premier versement avant taxes, 137,97 $ ce qu'il devient une fois taxé.
Mais une fiche qui annonce un prix et en prélève un autre n'a pas besoin
d'avoir tort pour faire du tort.
La ligne unique cède donc la place à l'échéancier complet, taxes
comprises : trois lignes pour le combo, deux pour les autres. Le montant
d'abord, gros et à gauche, parce que c'est ce qu'on cherche ; le moment
ensuite, en gris. Le trait doré ne sépare pas les lignes, il les enfile :
on lit une suite dans le temps, pas un tableau. */
.ccsr .ccsr-fiche-versements {
counter-reset: ccsr-v;
margin: 0 0 9px;
padding: 0;
list-style: none;
border: 1px solid var( --ccsr-bord );
border-radius: 8px;
background: var( --ccsr-blanc );
overflow: hidden;
}
.ccsr .ccsr-fiche-versements > li {
display: flex;
align-items: baseline;
gap: 12px;
padding: 10px 14px;
border-top: 1px solid var( --ccsr-bord );
}
.ccsr .ccsr-fiche-versements > li:first-child {
border-top: 0;
}
.ccsr .ccsr-fiche-versements > li strong {
flex: 0 0 6.2em;
font-family: var( --ccsr-serif );
font-size: 1.16rem;
font-weight: 600;
color: var( --ccsr-sauge );
font-variant-numeric: tabular-nums;
}
.ccsr .ccsr-fiche-versements > li span {
font-size: .82rem;
line-height: 1.4;
color: var( --ccsr-pale );
}
/* Le rappel du cent près. Il n'a pas à peser : c'est une note de bas de
page, pas une condition. */
.ccsr .ccsr-fiche-note {
margin: 0 0 4px;
font-size: .74rem;
line-height: 1.45;
color: var( --ccsr-pale );
}
/* Dans la fiche, le « + tx » accompagne un prix en gras sur fond papier :
il lui faut un peu plus d'encre que sur la photo d'une carte, où le
contraste vient du voile sombre. */
.ccsr .ccsr-fiche-faits strong .ccsr-prix-tx {
opacity: 1;
color: var( --ccsr-pale );
}
/* =========================================================================
2.38 (suite) — L'arche partagée du combo
====================================================================== */
/* Le combo réunit deux séances et ne montrait qu'une photo. L'arche se
partage donc en deux quand le forfait porte une deuxième image.
La couture est horizontale, et c'est la forme qui le décide, pas le goût :
le haut de l'arche est un dôme. Une couture verticale le coupe en deux
demi-dômes et on ne voit plus une arche, on voit deux photos accolées. La
couture horizontale laisse le dôme entier à la photo du haut et donne au
bas un rectangle franc — l'arche reste une arche. Vérifié sur maquette aux
deux rapports : à 4/5 l'horizontale gagne nettement ; à 4/3, large, c'est
l'inverse, et c'est pourquoi la fiche ne reprend pas cette découpe.
Le filet blanc d'un pixel n'est pas une bordure : c'est le souffle qui
empêche deux photos sombres de se fondre l'une dans l'autre. */
/* Chaque moitié porte son propre arrondi, et la carte ne coupe rien.
« overflow: hidden » sur l'arche aurait été plus court, et coûtait deux
choses mesurées au navigateur : la carte étant une boîte flexible, masquer
le débordement annule la taille minimale automatique de l'élément, et
l'arche du combo tombait à 143 px quand ses voisines faisaient 240 ; et la
pastille « COMBO », qui déborde exprès du coin arrondi, se faisait trancher
par le dôme. Les deux disparaissent dès qu'on arrondit les moitiés plutôt
que de rogner le tout. */
.ccsr .ccsr-forfait-image.ccsr-image-duo {
background: var( --ccsr-papier-2 );
}
.ccsr .ccsr-image-duo > .ccsr-duo-haut,
.ccsr .ccsr-image-duo > .ccsr-duo-bas {
position: absolute;
left: 0;
right: 0;
height: 50%;
display: block;
background: var( --ccsr-papier-2 ) center / cover no-repeat;
}
.ccsr .ccsr-image-duo > .ccsr-duo-haut {
top: 0;
border-radius: 999px 999px 0 0;
}
.ccsr .ccsr-image-duo > .ccsr-duo-bas {
bottom: 0;
border-radius: 0 0 14px 14px;
box-shadow: 0 -1px 0 rgba( 255, 255, 255, .55 );
}
/* Sur téléphone, la carte range sa photo en vignette étroite à gauche du
texte. Coupée en deux, chaque moitié tomberait sous la taille où l'on
distingue encore un sujet : la vignette garde donc une seule photo, celle
du haut. Le partage reprend dès que la carte retrouve sa pleine largeur. */
@media ( max-width: 640px ) {
html body .ccsr .ccsr-image-duo > .ccsr-duo-bas {
display: none;
}
html body .ccsr .ccsr-image-duo > .ccsr-duo-haut {
height: 100%;
border-radius: 999px 999px 10px 10px;
}
}
/* L'administration : les deux aperçus l'un sous l'autre, et le titre qui
sépare la deuxième photo de la première. */
.ccsr-apercu-2 {
margin-top: 4px;
}
.ccsr-image-2-titre {
margin: 18px 0 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: #6E6559;
}
/* =========================================================================
2.38 (suite) — Le prix lisible sur n'importe quelle photo
====================================================================== */
/* La pastille de prix est un verre dépoli : un voile vert très sombre à 46 %,
posé sur la photo. Sur une photo sombre c'est parfait — 10,9 de contraste
mesuré sur le champ au coucher de soleil. Sur une photo claire, non : la
carte Famille (les pommiers en fleurs) donne 3,45, et une maternité dans la
neige 2,61, là où la norme demande 4,5. Le prix de la séance était la chose
la moins lisible de la carte, exactement sur les photos les plus lumineuses.
Monter l'opacité du voile ne suffit pas : à 58 % la neige plafonne encore à
3,55, et à 68 % — le premier chiffre qui passe — la pastille devient un
galet opaque sur les photos sombres, ce qui est précisément ce que le verre
dépoli évitait.
On assombrit donc ce qu'il y a DERRIÈRE la pastille, proportionnellement :
la photo claire est ramenée, la photo sombre l'est à peine. Mesuré après
coup : 5,43 sur la neige, 6,63 sur les pommiers, 13,2 sur le champ. Le
voile, lui, ne bouge pas. */
html body .ccsr .ccsr-forfait-prix {
-webkit-backdrop-filter: brightness( .6 ) saturate( 1.08 );
backdrop-filter: brightness( .6 ) saturate( 1.08 );
}
/* Là où le navigateur ne sait pas assombrir le fond, on retombe sur le voile
plus dense : 4,73 sur la neige. Moins joli sur les photos sombres, mais
lisible partout, et c'est l'ordre des priorités. */
@supports not ( ( backdrop-filter: brightness( .6 ) ) or ( -webkit-backdrop-filter: brightness( .6 ) ) ) {
html body .ccsr .ccsr-forfait-prix {
background: rgba( 35, 48, 42, .68 );
}
}
/* =========================================================================
2.39 — La fiche d'un forfait : deux colonnes, une seule boîte
====================================================================== */
/* Ce qu'il y avait avant, et pourquoi ça ne tenait pas.
1. Une seule colonne de 878 px. Le paragraphe de présentation faisait
quatre lignes pleine largeur ; à cette mesure, l'œil qui revient à la
ligne ne retrouve plus où il était. Une colonne de lecture confortable
fait 60 à 75 signes, pas 130.
2. Quatre boîtes emboîtées — le cadre de la fiche, la bande beige des
chiffres, le cadre blanc des versements, la liste à puces — chacune
avec son fond, son filet et son arrondi. Rien n'était laid ; tout se
disputait l'attention.
3. Aucune photographie, sur une page qui vend des photographies.
La fiche devient donc une double page : l'image à gauche, le texte à
droite, et des filets plutôt que des cadres pour séparer. */
.ccsr .ccsr-forfait-fiche {
position: relative;
display: grid;
grid-template-columns: minmax( 0, 300px ) minmax( 0, 1fr );
gap: 0 34px;
align-items: start;
/* La fiche se colle à sa carte.
Elle occupe sa propre rangée de la grille, et la grille met 22 px
entre ses rangées : la fiche s'ouvrait donc à 24 px de la carte qui
l'avait ouverte, détachée d'elle comme si elle appartenait à la
suivante. La marge négative reprend cet écart et n'en laisse que
deux, de quoi voir la bordure sans couper le lien. */
margin: -20px 0 8px;
padding: 28px 30px 26px;
border: 1px solid var( --ccsr-bord );
border-left: 1px solid var( --ccsr-bord );
border-radius: 10px;
background: var( --ccsr-blanc );
box-shadow: 0 2px 20px rgba( 53, 69, 53, .055 );
}
/* La photo de la fiche reprend l'arche de la carte — même dôme, même
arrondi en bas — pour qu'on sente qu'on est entré DANS la carte et non
passé à autre chose. Le combo garde son partage en deux. */
.ccsr .ccsr-fiche-visuel {
margin: 0;
}
.ccsr .ccsr-fiche-arche {
position: relative;
display: block;
aspect-ratio: 4 / 5;
border-radius: 999px 999px 12px 12px;
background: var( --ccsr-papier-2 ) center / cover no-repeat;
}
.ccsr .ccsr-fiche-arche.ccsr-image-duo > .ccsr-duo-haut,
.ccsr .ccsr-fiche-arche.ccsr-image-duo > .ccsr-duo-bas {
position: absolute;
left: 0;
right: 0;
height: 50%;
display: block;
background: var( --ccsr-papier-2 ) center / cover no-repeat;
}
.ccsr .ccsr-fiche-arche.ccsr-image-duo > .ccsr-duo-haut {
top: 0;
border-radius: 999px 999px 0 0;
}
.ccsr .ccsr-fiche-arche.ccsr-image-duo > .ccsr-duo-bas {
bottom: 0;
border-radius: 0 0 12px 12px;
box-shadow: 0 -1px 0 rgba( 255, 255, 255, .55 );
}
.ccsr .ccsr-fiche-corps {
min-width: 0;
}
/* Le titre n'a plus besoin de partager sa ligne avec la croix : celle-ci
est posée dans le coin de la fiche, hors du flux. Le nom de la séance
peut donc prendre toute sa largeur et sa taille. */
.ccsr .ccsr-fiche-nom {
margin: -4px 0 0;
padding-right: 34px;
font-family: var( --ccsr-serif );
font-size: 1.72rem;
font-weight: 500;
line-height: 1.16;
color: var( --ccsr-sauge );
}
.ccsr .ccsr-fiche-fermer {
position: absolute;
top: 14px;
right: 16px;
z-index: 2;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 999px;
background: none;
font-size: 1.4rem;
line-height: 1;
color: var( --ccsr-pale );
cursor: pointer;
transition: background-color .18s ease, color .18s ease;
}
.ccsr .ccsr-fiche-fermer:hover,
.ccsr .ccsr-fiche-fermer:focus-visible {
background: var( --ccsr-papier );
color: var( --ccsr-sauge );
}
.ccsr .ccsr-fiche-texte {
max-width: 58ch;
margin: 11px 0 0;
font-size: .9rem;
line-height: 1.74;
color: var( --ccsr-doux );
}
/* Les trois chiffres. L'étiquette au-dessus de sa valeur, et un filet
vertical qui sépare les colonnes : plus de fond beige, plus d'arrondi,
rien qu'un alignement. C'est la mise en page d'une fiche technique de
catalogue, et c'est exactement ce que ces trois lignes sont. */
.ccsr .ccsr-fiche-faits {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 118px, 1fr ) );
gap: 16px 0;
margin: 22px 0 0;
padding: 17px 0 0;
list-style: none;
border-top: 1px solid var( --ccsr-bord );
background: none;
border-radius: 0;
}
.ccsr .ccsr-fiche-faits > li {
display: block;
padding: 0 18px;
border-left: 1px solid var( --ccsr-bord );
}
.ccsr .ccsr-fiche-faits > li:first-child {
padding-left: 0;
border-left: 0;
}
.ccsr .ccsr-fiche-faits span {
display: block;
margin-bottom: 5px;
font-size: .66rem;
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
color: var( --ccsr-pale );
}
.ccsr .ccsr-fiche-faits strong {
display: block;
font-family: var( --ccsr-serif );
font-size: 1.22rem;
font-weight: 600;
line-height: 1.3;
text-align: left;
color: var( --ccsr-sauge );
}
/* L'échéancier : une suite dans le temps, pas un tableau. Un filet doré
court à gauche des montants et les enfile ; chaque versement porte un
point sur ce filet. Le cadre blanc et ses trois lignes de séparation
disparaissent — il ne restait d'eux qu'un grand vide à droite. */
.ccsr .ccsr-fiche-versements {
position: relative;
margin: 0 0 10px;
padding: 2px 0 2px 21px;
list-style: none;
border: 0;
border-radius: 0;
background: none;
overflow: visible;
}
.ccsr .ccsr-fiche-versements::before {
content: "";
position: absolute;
left: 4px;
top: 10px;
bottom: 12px;
width: 1px;
background: var( --ccsr-bord );
}
.ccsr .ccsr-fiche-versements > li {
position: relative;
display: flex;
align-items: baseline;
gap: 11px;
padding: 5px 0;
border: 0;
}
.ccsr .ccsr-fiche-versements > li::before {
content: "";
position: absolute;
left: -21px;
top: 1.04em;
width: 9px;
height: 9px;
border-radius: 999px;
background: var( --ccsr-blanc );
box-shadow: inset 0 0 0 1.5px var( --ccsr-or );
}
.ccsr .ccsr-fiche-versements > li strong {
flex: 0 0 auto;
font-family: var( --ccsr-serif );
font-size: 1.22rem;
font-weight: 600;
color: var( --ccsr-sauge );
font-variant-numeric: tabular-nums;
}
.ccsr .ccsr-fiche-versements > li span {
font-size: .84rem;
line-height: 1.45;
color: var( --ccsr-pale );
}
.ccsr .ccsr-fiche-note {
margin: 0;
font-size: .76rem;
line-height: 1.5;
color: var( --ccsr-pale );
}
/* Le pied : un filet au-dessus, le bouton qui engage à gauche, et la
sortie en simple lien à droite. Deux boutons pleins côte à côte se
disputaient le clic. */
.ccsr .ccsr-fiche-pied {
display: flex;
align-items: center;
gap: 20px;
margin: 24px 0 0;
padding: 20px 0 0;
border-top: 1px solid var( --ccsr-bord );
}
/* Sur téléphone et petite tablette, une seule colonne, sans la photo :
l'arche de la carte est juste au-dessus et la répéter repousserait le
prix d'un plein écran de défilement. */
@media ( max-width: 900px ) {
.ccsr .ccsr-forfait-fiche {
display: block;
padding: 22px 20px 20px;
}
.ccsr .ccsr-fiche-visuel {
display: none;
}
.ccsr .ccsr-fiche-nom {
font-size: 1.45rem;
}
.ccsr .ccsr-fiche-faits {
grid-template-columns: repeat( auto-fit, minmax( 104px, 1fr ) );
}
}
/* Très petit écran : les trois chiffres ne tiennent plus côte à côte sans
se serrer, ils s'empilent et le filet passe du côté gauche au-dessus. */
@media ( max-width: 430px ) {
.ccsr .ccsr-fiche-faits {
grid-template-columns: 1fr;
gap: 0;
}
.ccsr .ccsr-fiche-faits > li {
padding: 11px 0;
border-left: 0;
border-top: 1px solid var( --ccsr-bord );
}
.ccsr .ccsr-fiche-faits > li:first-child {
padding-top: 0;
border-top: 0;
}
}
/* =========================================================================
2.39 (suite) — Trois réglages mesurés sur la fiche
====================================================================== */
/* 1. La durée est une phrase, pas un chiffre : « 60 à 90 minutes, puis
environ 2 heures » tombait sur trois lignes dans une colonne au tiers
de la largeur, et déséquilibrait toute la rangée contre « 20 » et
« 540 $ ». Sa colonne reçoit donc une fois et demie la place des
autres — c'est elle qui a du texte à porter. */
.ccsr .ccsr-fiche-faits {
grid-template-columns: 1.55fr 1fr 1fr;
}
/* 2. « + tx » passait à la ligne sous le prix, et un renvoi en exposant
posé sur sa propre ligne n'est plus un renvoi. Le montant et sa
mention restent soudés. */
.ccsr .ccsr-fiche-faits > li:last-child strong {
white-space: nowrap;
}
/* 3. La légende sous l'arche. En italique et en serif, elle se lit comme
la légende d'une photographie dans un livre — pas comme une ligne de
formulaire de plus. */
/* La note sous l'arche. Elle se coupait où la largeur tombait : « …à son
premier » sur 286 pixels, puis « gâteau. » seul sur 104. Mesuré sur les
neuf forfaits, quatre se coupaient ainsi. « balance » répartit les deux
lignes à parts presque égales, et la taille un peu réduite en ramène
plusieurs sur une seule ligne. */
.ccsr .ccsr-fiche-legende {
margin: 14px 0 0;
font-family: var( --ccsr-serif );
font-size: .95rem;
font-style: italic;
line-height: 1.5;
text-align: center;
text-wrap: balance;
color: var( --ccsr-pale );
}
@media ( max-width: 900px ) {
.ccsr .ccsr-fiche-faits {
grid-template-columns: 1.55fr 1fr 1fr;
}
}
@media ( max-width: 430px ) {
.ccsr .ccsr-fiche-faits {
grid-template-columns: 1fr;
}
}
/* La règle des étiquettes visait « .ccsr-fiche-faits span » — tous les
span de la rangée. Or le « + tx » du prix est lui aussi un span, niché
dans le : il héritait du bloc, des capitales et de
l'interlettrage des étiquettes, si bien qu'il tombait sous le montant en
petites capitales au lieu de rester en exposant à côté de lui. La règle
ne vise plus que les span posés directement dans un . */
.ccsr .ccsr-fiche-faits > li > span {
display: block;
margin-bottom: 5px;
font-size: .66rem;
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
color: var( --ccsr-pale );
}
.ccsr .ccsr-fiche-faits > li strong .ccsr-prix-tx {
display: inline;
margin-bottom: 0;
font-size: .5em;
font-weight: 500;
letter-spacing: .02em;
text-transform: none;
color: var( --ccsr-pale );
}
/* L'arche de la fiche gagne un peu de hauteur : la colonne de gauche
paraissait courte à côté d'un texte qui descend bas. */
.ccsr .ccsr-fiche-arche {
aspect-ratio: 3 / 4;
}
/* Le « + tx » de la fiche tombait à 9,8 px — ma règle à .5em l'emportait
sur le plancher de 10,5 px posé en 2.37 après mesure au navigateur. Le
plancher revient : c'est une mention discrète, pas une mention illisible. */
.ccsr .ccsr-fiche-faits > li strong .ccsr-prix-tx {
font-size: max( 10.5px, .52em );
}
/* Les cibles. La croix faisait 34 px et « Voir les autres » 24 : sous les
44 px qu'il faut à un pouce. Elles gardent leur taille apparente — c'est
la zone cliquable qui grandit autour. */
.ccsr .ccsr-fiche-fermer {
top: 10px;
right: 12px;
width: 44px;
height: 44px;
}
.ccsr .ccsr-fiche-pied .ccsr-fiche-retour {
padding-top: 11px;
padding-bottom: 11px;
}
.ccsr .ccsr-fiche-pied .ccsr-fiche-prendre {
padding-top: 16px;
padding-bottom: 16px;
}
/* -------------------------------------------------------------------------
* 2.42 — l'exception des grandes fratries
*
* Six personnes comprises, c'est large pour un couple et deux enfants et
* serré pour une famille de cinq enfants. La case ne paraît qu'au moment où
* le supplément paraît, et elle dit elle-même qu'elle ne décide rien.
* ---------------------------------------------------------------------- */
.ccsr-fratrie {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 10px 0 0;
padding: 12px 14px;
background: var(--ccsr-papier-2);
border: 1px solid var(--ccsr-bord);
cursor: pointer;
}
.ccsr-fratrie[hidden] { display: none; }
.ccsr-fratrie input { margin: 3px 0 0; flex: none; }
.ccsr-fratrie > span { display: block; }
.ccsr-fratrie strong {
display: block;
font-weight: 600;
color: var(--ccsr-encre);
}
.ccsr-fratrie .ccsr-aide { margin: 2px 0 0; }
/* Un groupe sans photos qui demande quand même un fond.
« Quand êtes-vous le plus disponible ? » tombe juste sous les saisons et
le moment de la journée, dont chaque carte porte sa teinte. Trois cartes
blanches au milieu de ça se lisaient comme un bloc étranger. */
.ccsr .ccsr-groupe-fond .ccsr-option-corps {
background: var( --ccsr-papier-2 );
}
.ccsr .ccsr-groupe-fond .ccsr-option:hover .ccsr-option-corps {
background: var( --ccsr-papier );
}
/* La réponse choisie reprend le vert de toutes les autres : c'est la règle
de la page, et un groupe ne s'en exempte pas parce qu'il a un fond. */
.ccsr .ccsr-groupe-fond input:checked + .ccsr-option-corps {
background: var( --ccsr-sauge );
}
/* Une note qui ne paraît qu'une fois la réponse choisie. */
.ccsr .ccsr-note-choix {
margin: 10px 2px 0;
padding-left: 12px;
border-left: 2px solid var( --ccsr-or );
}
/* =========================================================================
* 2.43 — les forfaits en deux familles
*
* Neuf cartes identiques en grille posaient mal la première question : « est-ce
* que je veux une séance, ou est-ce que je veux suivre mon enfant ? » Les deux
* combos s'y noyaient, alors que ce sont eux qui donnent le plus.
*
* Les combos prennent donc toute la largeur, en bandes empilées : la photo à
* gauche, le texte à droite, et de la place pour dire ce qu'ils contiennent.
* Les séances simples gardent la grille, qui leur va — elles se comparent, et
* une grille se compare mieux qu'une pile.
* ====================================================================== */
.ccsr .ccsr-forfaits-famille {
margin: 34px 0 16px;
}
/* Les deux titres prennent la même marge. « Les combos » était collé au
sommaire par une marge de 4 px pendant que « Les séances » respirait à
30 ; la règle reste écrite ici, à la même force que l'ancienne, pour que
le résultat soit le même même si une feuille en cache garde encore
l'exception. */
.ccsr .ccsr-forfaits-famille:first-of-type {
margin-top: 34px;
}
/* Un titre de famille annonce une bande de cartes : il doit passer AVANT
elles. À 1,32 rem il était plus petit que le nom des forfaits qu'il
introduit (1,42, et 1,55 dans les bandes) — l'œil lisait donc les cartes
en premier et le titre comme une légende. */
.ccsr .ccsr-forfaits-famille-titre {
margin: 0;
font-family: var( --ccsr-serif );
font-size: 1.72rem;
font-weight: 500;
letter-spacing: .01em;
line-height: 1.18;
color: var( --ccsr-sauge );
}
.ccsr .ccsr-forfaits-famille-aide {
margin: 5px 0 0;
max-width: 46rem;
font-size: .85rem;
line-height: 1.6;
color: var( --ccsr-pale );
}
@media ( min-width: 641px ) {
.ccsr .ccsr-forfaits-combos {
grid-template-columns: 1fr;
gap: 16px;
}
/* La bande : la photo à gauche sur une colonne fixe, le texte à droite.
La même construction que les cartes sur téléphone, où elle a déjà fait
ses preuves — colonne fixe pour la photo, « stretch » pour que l'arche
épouse la hauteur du texte plutôt que de laisser un vide sous elle. */
.ccsr .ccsr-forfaits-combos .ccsr-forfait {
display: grid;
grid-template-columns: 236px 1fr;
align-items: stretch;
gap: 0;
overflow: hidden;
}
/* Les « !important » ne sont pas de la paresse : la règle de base impose
« aspect-ratio: 1 / 1 », et un carré dans une colonne de 236 pixels
calcule sa largeur à partir de sa hauteur — l'image gonflait à 271
pixels et recouvrait le premier caractère de chaque ligne de texte.
Mesuré sur la page, pas deviné. C'est la même précaution que pour les
cartes sur téléphone, qui ont la même forme. */
html body .ccsr .ccsr-forfaits-combos .ccsr-forfait-image {
aspect-ratio: auto !important;
width: calc( 100% - 16px ) !important;
height: auto !important;
min-height: 190px !important;
align-self: stretch !important;
margin: 16px 0 16px 16px !important;
border-radius: 999px 999px 12px 12px !important;
background-position: center 28%;
}
/* Le texte respire : une bande large sans marge intérieure se lit comme
une ligne de tableur. */
.ccsr .ccsr-forfaits-combos .ccsr-forfait-corps {
padding: 18px 22px 16px;
justify-content: center;
}
/* Deux colonnes de texte quand la bande est vraiment large : la
description à gauche, ce qui est compris à droite. Sous 980 px, une
seule colonne — deux colonnes de 200 px ne se lisent plus. */
@media ( min-width: 980px ) {
.ccsr .ccsr-forfaits-combos .ccsr-forfait-resume {
max-width: 46ch;
}
}
}
/* Les inclusions ne paraissent que dans les bandes.
Dans la grille, trois listes côte à côte ne se comparent plus : elles
s'additionnent, et la page devient un tableau comparatif que personne
n'a demandé. */
.ccsr .ccsr-forfait-inclus { display: none; }
/* Sauf dans les combos, à TOUTES les largeurs.
La règle qui les rouvrait était enfermée dans « min-width: 641px » : sur
téléphone, la liste disparaissait donc des bandes aussi, alors que le PHP
continuait de l'écrire. Une carte à 990 $ n'y montrait plus qu'un résumé de
deux lignes — quatre séances, quarante photos et quatre galeries sont
précisément ce qui justifie le prix, et il fallait un geste de plus pour
les lire. Une seule colonne sur téléphone, deux dès qu'il y a la place. */
.ccsr .ccsr-forfaits-combos .ccsr-forfait-inclus {
display: grid;
grid-template-columns: 1fr;
gap: 2px 20px;
margin: 10px 0 2px;
}
@media ( min-width: 641px ) {
.ccsr .ccsr-forfaits-combos .ccsr-forfait-corps {
text-align: left;
align-items: flex-start;
}
.ccsr .ccsr-forfaits-combos .ccsr-forfait-nom,
.ccsr .ccsr-forfaits-combos .ccsr-forfait-resume {
text-align: left;
}
/* Le résumé d'une bande tient sur une ligne ou deux, pas plus : la
suite, c'est la liste en dessous qui la dit. */
.ccsr .ccsr-forfaits-combos .ccsr-forfait-resume {
max-width: 52ch;
}
.ccsr .ccsr-forfaits-combos .ccsr-forfait-inclus {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.ccsr .ccsr-forfaits-combos .ccsr-forfait-inclus-ligne {
position: relative;
display: block;
padding-left: 15px;
font-size: .82rem;
line-height: 1.62;
color: var( --ccsr-doux );
}
/* Un point doré plutôt qu'une puce : la liste reste une liste sans
ressembler à un bon de commande. */
.ccsr .ccsr-forfaits-combos .ccsr-forfait-inclus-ligne::before {
content: "";
position: absolute;
top: .62em;
left: 2px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var( --ccsr-or );
}
@media ( max-width: 900px ) {
.ccsr .ccsr-forfaits-combos .ccsr-forfait-inclus {
grid-template-columns: 1fr;
}
}
}
/* Dans une bande, le résumé ne se tronque pas.
Les deux lignes maximales servaient à égaliser la hauteur des cartes en
grille — une bande n'a personne à côté d'elle à égaliser, et un résumé
coupé par des points de suspension au beau milieu d'une bande large est
une coupure sans raison. Sur téléphone comme sur ordinateur. */
html body .ccsr .ccsr-forfaits-combos .ccsr-forfait-resume {
/* « display: block » et non « -webkit-box ».
Le résumé est écrit en deux moitiés équilibrées, chacune dans un
span : dans une boîte -webkit-box dont on a retiré la troncature,
l'espace entre les deux spans disparaissait et on lisait
« de ses premiersjours à son premier gâteau ». Mesuré sur le rendu
téléphone, pas deviné. */
display: block;
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: visible;
min-height: 0;
}
/* Dans une bande, les deux moitiés se recollent et le texte coule sur la
largeur disponible. L'équilibrage en deux lignes sert les cartes de la
grille, qui sont étroites et doivent rester de même hauteur ; une bande
n'a ni l'une ni l'autre de ces contraintes. */
html body .ccsr .ccsr-forfaits-combos .ccsr-forfait-resume .ccsr-ligne {
display: inline;
}
/* « Voir le détail » suit l'alignement de sa bande. */
@media ( min-width: 641px ) {
html body .ccsr .ccsr-forfaits-combos .ccsr-voir-detail {
margin-top: 12px;
align-self: flex-start;
}
}
/* Les variantes : un bouton radio sans carte, qui ne doit rien occuper. */
.ccsr .ccsr-forfaits-variantes { display: contents; }
.ccsr .ccsr-forfait-variante-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* =========================================================================
* 2.43 — le sommaire, le liseré d'arche, et l'option d'un combo
* ====================================================================== */
/* Le sommaire : une ligne de raccourcis au-dessus des cartes.
Les combos passent en premier parce que ce sont eux qui donnent le plus,
mais une cliente qui vient chercher une seule séance ne doit pas défiler
deux bandes avant de la voir. */
.ccsr .ccsr-sommaire {
display: flex;
flex-direction: column;
gap: 8px;
margin: 2px 0 8px;
}
/* Un rang par famille : les combos d'un côté, les séances de l'autre.
Une seule ligne de huit pastilles se repliait sur deux rangs au hasard
de la largeur, et on ne voyait plus lesquelles allaient ensemble. */
.ccsr .ccsr-sommaire-rang {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px 10px;
}
.ccsr .ccsr-sommaire-mot {
flex: none;
font-size: .72rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var( --ccsr-pale );
}
.ccsr .ccsr-sommaire-rang-combos .ccsr-sommaire-mot {
color: var( --ccsr-or-texte );
}
.ccsr .ccsr-sommaire-liens {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
@media ( max-width: 560px ) {
.ccsr .ccsr-sommaire-rang {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
}
.ccsr .ccsr-sommaire-lien {
display: inline-flex;
align-items: baseline;
gap: 7px;
padding: 6px 13px;
border: 1px solid var( --ccsr-bord );
border-radius: 999px;
background: #fff;
font-family: inherit;
font-size: .8rem;
line-height: 1.4;
color: var( --ccsr-encre );
cursor: pointer;
transition: border-color .2s, background .2s, color .2s;
}
.ccsr .ccsr-sommaire-lien:hover,
.ccsr .ccsr-sommaire-lien:focus-visible {
border-color: var( --ccsr-or );
background: var( --ccsr-papier );
}
.ccsr .ccsr-sommaire-prix {
font-size: .76rem;
color: var( --ccsr-pale );
white-space: nowrap;
}
/* Les combos se distinguent sans crier : le liseré doré, pas un fond. */
.ccsr .ccsr-sommaire-combo {
border-color: var( --ccsr-or );
}
.ccsr .ccsr-sommaire-combo .ccsr-sommaire-nom {
color: var( --ccsr-or-texte );
}
/* Le liseré en arche, au survol.
Il reprend la forme de la photo — dôme en haut, coins francs en bas — et
se tient en retrait des bords de la carte, de sorte qu'on voie la marge
entre le trait et l'image. C'est un trait, pas un cadre : un pixel d'or,
qui apparaît en fondu et ne déplace rien. */
.ccsr .ccsr-forfait::after {
content: "";
position: absolute;
inset: 8px;
border: 1px solid var( --ccsr-or );
border-radius: 999px 999px 14px 14px;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.ccsr .ccsr-forfait:hover::after,
.ccsr .ccsr-forfait:focus-within::after {
opacity: .75;
}
/* La carte choisie le garde, en plein. */
.ccsr .ccsr-forfait:has( input[name="forfait"]:checked )::after {
opacity: 1;
}
/* Dans une bande, l'arche du liseré n'a pas de sens : la photo n'occupe
qu'une colonne. Un rectangle à coins doux, de la même main. */
@media ( min-width: 641px ) {
.ccsr .ccsr-forfaits-combos .ccsr-forfait::after {
border-radius: 14px;
}
}
/* L'option d'un combo : « Ajouter la séance maternité ». */
.ccsr .ccsr-forfait-variante {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 12px 0 2px;
padding: 11px 13px;
border: 1px solid var( --ccsr-bord );
border-radius: 12px;
background: var( --ccsr-papier );
text-align: left;
cursor: pointer;
transition: border-color .2s, background .2s;
}
.ccsr .ccsr-forfait-variante:hover {
border-color: var( --ccsr-or );
}
.ccsr .ccsr-variante-case {
flex: none;
margin: 2px 0 0;
}
.ccsr .ccsr-variante-corps { display: block; }
.ccsr .ccsr-variante-nom {
display: block;
font-size: .86rem;
font-weight: 600;
line-height: 1.45;
color: var( --ccsr-encre );
}
.ccsr .ccsr-variante-prix {
margin-left: 5px;
font-weight: 500;
color: var( --ccsr-or-texte );
white-space: nowrap;
}
.ccsr .ccsr-variante-detail {
display: block;
margin-top: 2px;
font-size: .8rem;
line-height: 1.55;
color: var( --ccsr-doux );
}
/* Cochée, elle se voit : c'est un choix qui change le prix. */
.ccsr .ccsr-forfait-variante:has( .ccsr-variante-case:checked ) {
border-color: var( --ccsr-or );
background: var( --ccsr-papier-2 );
}
/* « Avez-vous vu le combo ? »
Une cliente qui choisit la maternité seule attend presque toujours un
bébé : le combo la concerne. Le lui dire au moment du choix est un
service ; le lui dire après la réservation est un regret. Le bloc se
tient en retrait — fond papier, liseré doré à gauche — et s'efface pour
de bon si elle dit non. */
.ccsr .ccsr-combo-suggere {
margin: 16px 0 4px;
padding: 15px 18px 13px;
border: 1px solid var( --ccsr-bord );
border-left: 3px solid var( --ccsr-or );
border-radius: 4px 12px 12px 4px;
background: var( --ccsr-papier );
}
.ccsr .ccsr-combo-suggere[hidden] { display: none; }
.ccsr .ccsr-combo-suggere-titre {
margin: 0;
font-family: var( --ccsr-serif );
font-size: 1.14rem;
font-weight: 500;
line-height: 1.3;
color: var( --ccsr-sauge );
}
.ccsr .ccsr-combo-suggere-mot {
max-width: 62ch;
margin: 5px 0 0;
font-size: .88rem;
line-height: 1.66;
color: var( --ccsr-doux );
}
.ccsr .ccsr-combo-suggere-mot strong {
font-weight: 600;
color: var( --ccsr-encre );
}
.ccsr .ccsr-combo-suggere-gestes {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
margin: 11px 0 0;
}
.ccsr .ccsr-combo-suggere-voir {
padding: 8px 17px;
border: 1px solid var( --ccsr-sauge );
border-radius: 999px;
background: var( --ccsr-sauge );
font-family: inherit;
font-size: .82rem;
color: #fff;
cursor: pointer;
transition: background .2s;
}
.ccsr .ccsr-combo-suggere-voir:hover { background: var( --ccsr-sauge-clair ); }
.ccsr .ccsr-combo-suggere-non {
padding: 6px 2px;
border: 0;
background: none;
font-family: inherit;
font-size: .8rem;
color: var( --ccsr-pale );
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.ccsr .ccsr-combo-suggere-non:hover { color: var( --ccsr-doux ); }
/* La case de l'option doit se voir.
Les cartes de forfait cachent leur bouton radio — c'est le label entier
qui sert de cible — et la règle attrapait aussi cette case-ci, qui se
retrouvait à un pixel sur un pixel, invisible : on lisait « Ajouter la
séance maternité + 250 $ » sans comprendre qu'il fallait cliquer. Elle
est dessinée à la main, aux couleurs de la page, plutôt que laissée au
style du système. */
html body .ccsr .ccsr-forfait .ccsr-variante-case {
position: static;
width: 19px;
height: 19px;
margin: 1px 0 0;
opacity: 1;
flex: none;
appearance: none;
-webkit-appearance: none;
border: 1.5px solid var( --ccsr-or-fonce );
border-radius: 5px;
background: #fff;
cursor: pointer;
transition: background .18s, border-color .18s;
}
html body .ccsr .ccsr-forfait .ccsr-variante-case:checked {
border-color: var( --ccsr-sauge );
background: var( --ccsr-sauge );
}
/* Le crochet, tracé en deux traits plutôt qu'en caractère : un « ✓ » de
police change de forme d'un appareil à l'autre. */
html body .ccsr .ccsr-forfait .ccsr-variante-case:checked::after {
content: "";
display: block;
width: 5px;
height: 9px;
margin: 1px 0 0 5px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate( 42deg );
}
html body .ccsr .ccsr-forfait .ccsr-variante-case:focus-visible {
outline: 2px solid var( --ccsr-or );
outline-offset: 2px;
}
/* Sur téléphone, l'option tient en une ligne de titre.
La carte y est une grille de 174 pixels pour la photo et le reste pour le
texte : l'explication de l'option s'y retrouvait à deux mots par ligne,
sur dix lignes, et étirait la carte entière. Le titre et le prix
suffisent à faire comprendre qu'il y a un choix ; l'explication est dans
« Voir le détail », à un pouce de là. */
@media ( max-width: 640px ) {
html body .ccsr .ccsr-variante-detail { display: none; }
html body .ccsr .ccsr-forfait-variante {
gap: 8px;
margin: 9px 0 2px;
padding: 9px 10px;
border-radius: 10px;
}
html body .ccsr .ccsr-variante-nom {
font-size: .8rem;
line-height: 1.4;
}
html body .ccsr .ccsr-variante-prix {
display: block;
margin-left: 0;
}
}
/* =========================================================================
2.63 — L'économie d'un combo : un sceau doré
====================================================================== */
/* Le prix barré disait déjà l'économie — 1 210 $ rayé, 990 $ à côté — à
condition de faire la soustraction de tête, en lisant une grille. Les
220 $ sont le seul argument du forfait : ils s'écrivent.
Un sceau rond, posé de travers, comme un cachet de cire sur une enveloppe.
Le doré est celui du logo — #D6AE7B — mais un doré plat n'a pas l'air d'or :
c'est le DÉGRADÉ qui fait le métal. Trois arrêts, parce que l'or réel est
clair là où la lumière frappe et sombre dans le creux ; le quatrième arrêt,
plus pâle, est le reflet. Un filet blanc à l'intérieur fait le biseau, une
ombre portée très douce le décolle du papier.
L'inclinaison est de 9 degrés : assez pour qu'on la voie, assez peu pour
que le texte se lise sans pencher la tête. */
.ccsr .ccsr-forfait-rabais {
display: none;
font-family: var( --ccsr-sans );
white-space: nowrap;
}
@container ( min-width: 460px ) {
.ccsr .ccsr-rabais-coin {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
display: grid;
place-content: center;
justify-items: center;
width: 92px;
height: 92px;
padding: 0;
border: 0;
border-radius: 50%;
transform: rotate( -9deg );
background:
linear-gradient( 142deg,
#F3E0C2 0%,
#D9B47F 28%,
#BE9253 52%,
#E7CFA6 72%,
#C49C60 100% );
box-shadow:
inset 0 0 0 1px rgba( 255, 255, 255, .62 ),
inset 0 0 0 5px rgba( 255, 255, 255, .20 ),
0 3px 10px rgba( 63, 79, 69, .20 );
text-align: center;
line-height: 1.15;
color: var( --ccsr-sauge );
}
/* « ÉCONOMISEZ » est l'étiquette, « 220 $ » est la nouvelle : l'une se
fait petite et interlettrée, l'autre prend toute la place qui reste. */
.ccsr .ccsr-rabais-coin .ccsr-rabais-mot {
display: block;
font-size: .54rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
opacity: .88;
}
.ccsr .ccsr-rabais-coin .ccsr-rabais-somme {
display: block;
margin-top: 2px;
font-family: var( --ccsr-serif );
font-size: 1.32rem;
font-weight: 600;
letter-spacing: .01em;
}
/* Le titre et le résumé s'arrêtent avant le sceau. */
.ccsr .ccsr-forfaits-combos .ccsr-forfait-nom,
.ccsr .ccsr-forfaits-combos .ccsr-forfait-resume {
padding-right: 118px;
}
}
/* Partout ailleurs — colonne trop étroite, ou téléphone, où il n'y a pas de
conteneur du tout : un sceau de 92 pixels dans une carte de 320 mangerait
la moitié du titre. L'économie redevient une ligne sous le résumé, dans le
même or, mais à plat. */
.ccsr .ccsr-rabais-tel {
position: static;
display: inline-block;
align-self: flex-start;
margin-top: 6px;
padding: 4px 12px 3px;
border-radius: 999px;
background: linear-gradient( 142deg, #F3E0C2 0%, #D9B47F 46%, #C49C60 100% );
box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .55 );
font-size: .7rem;
font-weight: 600;
letter-spacing: .02em;
color: var( --ccsr-sauge );
}
@container ( min-width: 460px ) {
.ccsr .ccsr-rabais-tel { display: none; }
}
@media ( max-width: 640px ) {
.ccsr .ccsr-rabais-tel { font-size: .68rem; }
}
/* =========================================================================
2.64 — Les petites capitales : trois familles, trois interlettrages
====================================================================== */
/* Relevé sur la page avant d'écrire une ligne : le même idiome — Montserrat
600, moins de 14 px, en capitales — s'y écrivait avec SEPT interlettrages
différents (.10, .12, .13, .14, .15, .16 et .26 em). Personne ne nomme ça,
mais tout le monde le voit : la page a l'air de changer d'avis.
Trois familles, et une seule mesure chacune. Ce ne sont pas trois caprices :
ce sont trois rôles, et c'est l'écart entre eux qui doit se lire.
1. LES SUR-TITRES — ce qui annonce un bloc. .26em, la signature
typographique de rebeccavandal.com. Le récapitulatif l'avait déjà ; la
fiche d'un forfait, le guide et le contrat écrivaient les leurs à .14,
côte à côte avec les premiers sur le même écran. */
html body .ccsr .ccsr-fiche-sous,
html body .ccsr .ccsr-conseils-sur,
html body .ccsr .ccsr-conditions-liste li.ccsr-conditions-partie {
letter-spacing: .26em;
}
/* 2. LES BOUTONS ET LES LIENS D'ACTION — ce sur quoi on clique. .14em : plus
serré que les sur-titres, parce qu'un bouton se vise d'un coup d'œil et
qu'un mot trop étalé cesse d'être un mot. */
html body .ccsr .ccsr-voir-detail,
html body .ccsr .ccsr-dabord-retour,
html body .ccsr .ccsr-fiche-prendre {
letter-spacing: .14em;
}
/* 3. LE FIL ET LES RAPPELS — où l'on est, et ce qui reste. .12em : ces mots
se lisent en passant, et le fil doit tenir ses cinq étapes sur une
ligne. Mesuré après coup, pas supposé. */
html body .ccsr .ccsr-fil-nom,
html body .ccsr .ccsr-pas-rang,
html body .ccsr .ccsr-sommaire-mot {
letter-spacing: .12em;
}
/* =========================================================================
2.65 — La photo de relais, au survol d'une option
====================================================================== */
/* Une option porte souvent plus de photos qu'elle n'en montre : quatre pour
« Lumineuse et dorée », deux affichées. Les autres dormaient dans le
catalogue. La première des dormantes se pose par-dessus la première
vignette et paraît quand le doigt ou la souris passe sur l'option.
Elle occupe la PREMIÈRE case de la grille, quel que soit le nombre de
vignettes : « grid-area: 1 / 1 » la superpose sans jamais créer une
colonne de plus — sans quoi une option à trois photos en aurait eu quatre
et la rangée aurait éclaté.
Au clavier, le relais paraît aussi : « focus-within » sur l'option. Une
personne qui tabule voit la même chose que celle qui survole. */
/* La première vignette visible est posée dans la case 1 elle aussi.
Sans cette ligne, la grille rangeait d'abord l'élément explicitement placé
— le relais —, puis cherchait une case libre pour la vignette d'origine, qui
partait à la ligne suivante : la carte doublait de hauteur et laissait un
grand blanc au-dessus de la photo. Vu sur la page, pas deviné. Les
deuxième et troisième vignettes, elles, se rangent toutes seules dans les
cases qui restent. */
.ccsr .ccsr-vignettes-relais {
position: relative;
grid-auto-rows: 0;
}
.ccsr .ccsr-vignettes-relais > .ccsr-vignette-cadre:first-child {
grid-area: 1 / 1;
}
.ccsr .ccsr-vignette-relais {
grid-area: 1 / 1;
z-index: 1;
opacity: 0;
transition: opacity .45s ease;
pointer-events: none;
}
.ccsr .ccsr-option:hover .ccsr-vignette-relais,
.ccsr .ccsr-option:focus-within .ccsr-vignette-relais,
.ccsr label:hover > * > .ccsr-vignettes-relais .ccsr-vignette-relais {
opacity: 1;
}
/* Sur un écran tactile, il n'y a pas de survol : la photo de relais ne
servirait qu'à alourdir la page. Elle ne s'affiche pas, et le navigateur
ne la charge pas. */
@media ( hover: none ) {
.ccsr .ccsr-vignette-relais { display: none; }
}
/* Un mouvement qu'on n'a pas demandé reste un mouvement : qui a réglé son
appareil pour en voir le moins possible n'a pas de fondu. La photo change
d'un coup, ou ne change pas. */
@media ( prefers-reduced-motion: reduce ) {
.ccsr .ccsr-vignette-relais { transition: none; }
}
/* Une adresse courriel ne se coupe jamais en deux lignes : coupée, elle ne se
recopie pas, et celle du virement Interac sert à envoyer de l'argent.
ccsr_ponctue() pose cette classe autour de chaque adresse qu'elle rencontre. */
.ccsr .ccsr-nowrap { white-space: nowrap; }
/* =========================================================================
2.66 — Les entrées en scène
====================================================================== */
/* Relevé sur rebeccavandal.com avant d'écrire une ligne, pour parler la même
langue que le reste du site et non une langue voisine :
• l'encadré de la bannière d'accueil entre avec « rvh-entre » : opacité 0 à
1 et translateY(-18px) à 0, en 1 s, après 0,15 s d'attente ;
• le portfolio révèle ses photos avec « .rvp-anim » : transition de 0,7 s
sur l'opacité et la transformation, depuis translateY(16px), déclenchée
par une classe « .rvp-vu » posée au défilement ;
• et rien n'est caché tant que le script n'a pas posé « .rvp-prete ».
Donc : 16 pixels, 0,7 seconde, de bas en haut, et la même garantie. Pas de
rebond, pas d'échelle, pas de rotation — le site n'en fait nulle part, et
une page de réservation est un endroit où l'on remplit un formulaire, pas
une vitrine. */
.ccsr .ccsr-entree {
transition: opacity .7s ease, transform .7s ease;
}
.ccsr-prete .ccsr-entree {
opacity: 0;
transform: translateY( 16px );
}
.ccsr-prete .ccsr-entree.ccsr-vu {
opacity: 1;
transform: none;
}
/* La bannière de la page est le pendant de l'encadré d'accueil : elle entre
par le haut, en une seconde, comme lui. */
.ccsr-prete .ccsr-banniere .ccsr-titre,
.ccsr-prete .ccsr-banniere .ccsr-intro {
animation: ccsr-entre-haut 1s ease .15s both;
}
/* L'intro suit le titre d'un souffle : c'est la seule cascade de la page, et
elle tient en 120 millisecondes. */
.ccsr-prete .ccsr-banniere .ccsr-intro {
animation-delay: .27s;
}
@keyframes ccsr-entre-haut {
from { opacity: 0; transform: translateY( -18px ); }
to { opacity: 1; transform: none; }
}
/* Un écran réglé pour voir le moins de mouvement possible n'en voit aucun.
Et surtout : rien n'y est caché une seule image — la règle de masquage
elle-même est annulée, pas seulement la transition. */
@media ( prefers-reduced-motion: reduce ) {
.ccsr-prete .ccsr-entree,
.ccsr-prete .ccsr-entree.ccsr-vu {
opacity: 1;
transform: none;
transition: none;
}
.ccsr-prete .ccsr-banniere .ccsr-titre,
.ccsr-prete .ccsr-banniere .ccsr-intro {
animation: none;
}
}
/* À l'impression, rien n'entre : une feuille de papier ne défile pas. */
@media print {
.ccsr-prete .ccsr-entree,
.ccsr-prete .ccsr-entree.ccsr-vu {
opacity: 1 !important;
transform: none !important;
}
}
/* =========================================================================
2.67 — Deux défauts relevés à la mesure
====================================================================== */
/* « RÉSERVER », sur téléphone, était écrit en #A8834F sur blanc : 3,49 pour 1
à 10,5 px. Le seuil lisible est 4,5. C'est le bouton principal de la carte,
celui sur lequel tout repose sur un petit écran, et c'était le texte le
moins lisible de la page.
#7F6235 est le doré déjà corrigé pour le contraste ailleurs dans la feuille
— même famille, même impression à l'œil, 5,3 pour 1. Rien à inventer. */
.ccsr .ccsr-voir-tel,
.ccsr .ccsr-voir-tel span {
color: #7F6235;
}
/* La phrase sous « Les combos » finissait sur « tour. » tout seul : 26 pixels
de dernière ligne pour 589 de première. La règle de Rébecca est claire —
pas de paragraphe qui se termine sur un ou deux mots isolés.
« balance » répartit les lignes sans toucher à la largeur du bloc : le
texte continue d'occuper toute la place, y compris sur téléphone, ce qui
est l'autre moitié de sa règle. C'est ce qui permet de l'appliquer à toutes
les largeurs — mesuré à 360, 390 et 640 px, le bloc garde exactement la
même emprise, seules les coupures bougent. */
.ccsr .ccsr-forfaits-famille-aide {
text-wrap: balance;
}
/* ---------------- la page des conditions ----------------
Le code court [seances_conditions] affiche les vraies clauses sur
/conditions-utilisation/. Il hérite du thème de la page, pas de la page de
réservation : on ne pose donc ici que ce qui manque pour que ça se lise —
le rythme vertical et la hiérarchie des titres. */
.ccsr-conditions { max-width: 68ch; }
.ccsr-conditions-partie { margin: 0 0 42px; }
.ccsr-conditions-titre {
margin: 0 0 18px;
padding-bottom: 10px;
border-bottom: 1px solid var(--ccsr-or, #C6A96B);
}
.ccsr-conditions-clause { margin: 0 0 26px; }
.ccsr-conditions-clause h3 { margin: 0 0 7px; }
/* À qui la clause s'applique : présent, mais jamais avant le titre dans
l'ordre de lecture. */
.ccsr-conditions-pour {
margin: 0 0 8px;
font-size: .86em;
opacity: .72;
}
.ccsr-conditions-note {
margin: 34px 0 0;
padding-top: 16px;
border-top: 1px solid rgba(0, 0, 0, .12);
font-size: .9em;
opacity: .8;
}
/* ---------------- l'échelle des titres, remise d'aplomb ----------------
Mesuré sur la page en ligne, avant de toucher à quoi que ce soit : le
texte courant fait 18,56 px, et « Et les autres séances ? » faisait
18,56 px en graisse 400. Exactement le texte courant. Ce n'était pas un
titre trop petit, c'était un paragraphe qui portait le mot « titre » dans
sa classe.
Plus largement, entre 16,96 et 21,44 px, CINQ tailles différentes
faisaient le même travail de sous-titre, et le titre d'une question était
déclaré cinq fois dans ce fichier — 1,2 puis 1,3 puis 1,38 puis 1,46 puis
1,5 rem en !important. Chaque correction en avait ajouté une au lieu de
corriger la précédente.
Cinq rangs suffisent, et ils se suivent sans se toucher :
page 3,3 rem le titre de la page
étape 2,4 rem « Votre date »
section 1,72 rem un bloc entier
question 1,5 rem « Le lieu », « Quand êtes-vous disponible »
bloc 1,38 rem « Et les autres séances ? »
carte 1,22 rem le titre d'une clause, d'un conseil
étiquette 0,72 rem les petites capitales
Le texte courant, à 1,16 rem, passe donc juste sous le rang « carte » :
un titre de carte reste plus gros que sa propre prose, ce qui n'était pas
le cas avant.
Ce bloc est posé en dernier et ne porte aucun !important : il gagne par
sa place, pas par la force. Si vous devez changer une taille un jour,
c'est ici, et nulle part ailleurs. */
html body .ccsr .ccsr-quand-suite-titre,
html body .ccsr p.ccsr-dabord-titre,
html body .ccsr .ccsr-dabord-titre,
html body .ccsr .ccsr-clauses-titre,
html body .ccsr .ccsr-depot-titre {
font-family: var( --ccsr-serif );
font-size: 1.38rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0;
text-transform: none;
color: var( --ccsr-sauge );
}
html body .ccsr .ccsr-conseil-titre,
html body .ccsr .ccsr-combo-suggere-titre {
font-family: var( --ccsr-serif );
font-size: 1.22rem;
font-weight: 600;
line-height: 1.3;
}
/* La clause garde sa police sans empattement : c'est du texte de contrat,
et il se lit mieux ainsi. Seule sa taille rejoint le rang « carte ». */
html body .ccsr .ccsr-clause-titre {
font-family: var( --ccsr-sans );
font-size: 1.22rem;
font-weight: 600;
line-height: 1.3;
}
/* Le montant du premier versement reste l'exception assumée : c'est le
chiffre que la cliente cherche des yeux, il a le droit d'être grand. */
html body .ccsr .ccsr-depot-titre strong {
font-size: 2.5rem;
font-weight: 600;
}
/* Le fil des étapes et les « Voir le détail » n'avaient aucune couleur à
eux : ils héritaient du #333 du thème, un gris qui n'appartient à aucune
palette et qui jurait à côté de l'encre #2F2A24 du reste de la page.
Mesuré sur /reservation/ : vingt-cinq éléments dans ce cas. */
html body .ccsr .ccsr-fil-nom,
html body .ccsr .ccsr-voir-detail,
html body .ccsr .ccsr-voir-signe {
color: var( --ccsr-pale );
}
html body .ccsr .ccsr-fil-rang {
color: var( --ccsr-or-texte );
}
/* L'étape où l'on se trouve se détache, et c'est la seule. */
html body .ccsr .ccsr-fil > li.actif .ccsr-fil-nom {
color: var( --ccsr-sauge );
font-weight: 600;
}
/* Les séances qui suivront, dans un combo.
Un chapitre, pas une liste. Les questions de la séance qu'on prépare
aujourd'hui viennent d'abord ; ensuite une étiquette dorée annonce la
suite, et chaque séance à venir a son titre — plus grand que les questions
qu'il coiffe, comme partout ailleurs sur la page, et souligné du même
trait doré que les titres d'étape.
La première version posait un filet vertical à gauche et un titre plus
petit que ses propres questions : la hiérarchie se lisait à l'envers. */
html body .ccsr .ccsr-heritages {
display: grid;
gap: clamp( 34px, 4.5vw, 52px );
margin-top: clamp( 40px, 5vw, 64px );
padding-top: clamp( 30px, 4vw, 44px );
border-top: 1px solid var( --ccsr-bord );
}
html body .ccsr .ccsr-heritages-tete {
max-width: 640px;
}
html body .ccsr .ccsr-heritages-etiquette {
margin: 0 0 10px;
font-family: var( --ccsr-sans );
font-size: .76rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var( --ccsr-or-texte );
}
html body .ccsr .ccsr-heritages-mot {
margin: 0;
font-size: 1.06rem;
line-height: 1.7;
color: var( --ccsr-doux );
/* Pas de mot seul en dernière ligne : « là. » y tombait tout seul. */
text-wrap: pretty;
}
html body .ccsr .ccsr-heritage-titre {
position: relative;
margin: 0 0 20px;
padding-bottom: 12px;
font-family: var( --ccsr-serif );
font-size: 1.72rem;
font-weight: 500;
line-height: 1.2;
color: var( --ccsr-sauge );
}
html body .ccsr .ccsr-heritage-titre::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 46px;
height: 1px;
background: var( --ccsr-or );
}
/* La ligne sous le titre s'en rapproche, et laisse de l'air avant les
questions : elle appartient au titre, pas à la première carte. */
html body .ccsr .ccsr-heritage-mot {
margin: -8px 0 22px;
font-size: .96rem;
line-height: 1.6;
color: var( --ccsr-doux );
}
/* Le titre de la séance dit déjà de quelle séance il s'agit : la pastille
« Pour votre séance famille » répétait l'information — et la disait mal,
puisque la cliente a réservé un combo, pas une séance famille. */
html body .ccsr .ccsr-heritage .ccsr-raison {
display: none;
}
/* L'équilibre des lignes, partout dans la page.
Deux outils, chacun à sa place.
« pretty » pour les paragraphes : la largeur reste pleine — c'est la
règle de la maison sur téléphone —, et le navigateur retouche seulement
les dernières lignes. Le serveur, lui, a déjà lié les derniers mots par
des insécables (ccsr_lier_fin) : c'est ce qui tient dans tous les
navigateurs, Firefox compris, qui ne connaît pas encore « pretty ».
« balance » pour ce qui est court et se lit d'un coup d'œil : les
titres, les noms d'options, les petits titres du récapitulatif. Il
répartit les lignes à égalité — « Avec toute / la famille » plutôt que
« Avec toute la / famille ». */
html body .ccsr p,
html body .ccsr li,
html body .ccsr dd,
html body .ccsr dt,
html body .ccsr .ccsr-option-detail,
html body .ccsr .ccsr-clause-corps {
text-wrap: pretty;
}
html body .ccsr h1,
html body .ccsr h2,
html body .ccsr h3,
html body .ccsr h4,
html body .ccsr legend,
html body .ccsr .ccsr-option-nom,
html body .ccsr .ccsr-recap-sous,
html body .ccsr .ccsr-resume strong,
html body .ccsr .ccsr-entente-recap-fort dd,
html body .ccsr .ccsr-heritage-titre,
html body .ccsr .ccsr-heritages-etiquette,
html body .ccsr .ccsr-raison {
text-wrap: balance;
}
/* Les textes centrés des cartes : deux lignes égales plutôt qu'une pleine et
un bout. Sur grand écran seulement — sur téléphone, le texte d'une carte
prend toute la largeur, et c'est « pretty » qui veille. */
@media (min-width: 768px) {
html body .ccsr .ccsr-option-detail,
html body .ccsr .ccsr-forfaits-mot {
text-wrap: balance;
}
}
/* =========================================================================
2.58 — Le téléphone, repris de bout en bout
====================================================================== */
/* 1. Plus rien ne pousse la page hors de l'écran.
Sur téléphone, dès l'étape 2, tout le formulaire débordait à droite :
titres coupés, tuiles amputées, récapitulatif tronqué, et le bouton
« Continuer » hors de vue. Le coupable était un fieldset. Les navigateurs
lui donnent par défaut une largeur minimale égale à son contenu le plus
large — et la grille de « La période qui vous ferait plaisir » demandait
433 pixels sur un écran qui en offrait 357. La colonne du formulaire
s'élargissait pour lui faire place, et tout le reste avec elle.
Un fieldset se plie maintenant à la largeur qu'on lui donne, comme
n'importe quel bloc, et une colonne de grille ne grandit plus pour un
seul enfant trop large. */
.ccsr fieldset {
min-width: 0;
min-inline-size: 0;
}
.ccsr .ccsr-plan > *,
.ccsr .ccsr-options > *,
.ccsr .ccsr-vignettes > *,
.ccsr .ccsr-forfaits > *,
.ccsr .ccsr-paire > *,
.ccsr .ccsr-ouinon > * {
min-width: 0;
}
/* Les tuiles en deux colonnes égales, qui se partagent la largeur au lieu
de la réclamer. */
@media ( max-width: 600px ) {
html body .ccsr .ccsr-groupe-pastilles .ccsr-options {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
/* Les tuiles à photo — la période, le moment de la journée — portent deux
ou trois lignes de description. Dans une demi-colonne de téléphone, elles
tombaient à six lignes de quatre mots. Elles passent sur une seule
colonne : une bande par choix, la photo en filigrane, le texte qui
respire. */
@media ( max-width: 480px ) {
html body .ccsr .ccsr-groupe-filigranes .ccsr-options {
grid-template-columns: minmax( 0, 1fr );
}
}
/* 2. Les cartes de forfaits, en colonne.
Sur téléphone, la carte était une rangée : la photo dans une arche
étroite à gauche, le texte serré à droite. Avec les noms en Cormorant et
la liste des combos, la colonne de texte débordait de la carte, et le
liseré en arche traversait les titres. On n'y comparait rien : on y
lisait mal.
La carte reprend la forme qu'elle a sur ordinateur — l'arche en haut,
le texte centré dessous —, à la largeur de l'écran. La page s'allonge un
peu ; chaque séance se lit d'un coup. */
@media ( max-width: 640px ) {
html body .ccsr .ccsr-forfaits {
grid-template-columns: minmax( 0, 1fr );
gap: 18px !important;
}
html body .ccsr .ccsr-forfait {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
height: auto !important;
}
/* Une seule colonne : aucune voisine à égaler. La hauteur suit le
contenu, et « Réserver » suit « Voir le détail » au lieu d'attendre
soixante pixels plus bas. */
html body .ccsr .ccsr-forfait-corps {
flex: 0 0 auto !important;
height: auto !important;
}
/* L'arche : quatre sur trois, à 16 pixels des bords. Le liseré doré de
la carte se tient à 8 pixels — il épouse donc le dôme de la photo à
8 pixels de distance, comme sur ordinateur. */
html body .ccsr .ccsr-forfait-image {
align-self: stretch !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 4 / 3 !important;
margin: 16px 16px 0 !important;
border-radius: 999px 999px 14px 14px !important;
}
html body .ccsr .ccsr-image-duo > .ccsr-duo-haut {
border-radius: 999px 999px 14px 14px;
}
html body .ccsr .ccsr-forfait-corps {
align-items: center !important;
gap: 0;
padding: 18px 22px 22px !important;
text-align: center !important;
}
html body .ccsr .ccsr-forfait-nom {
font-size: 1.5rem !important;
line-height: 1.2;
white-space: normal;
text-wrap: balance;
}
/* « COMBO » au-dessus du nom, et non devant lui : sur une ligne de
téléphone, la pastille et « Première année de bébé » ne tenaient pas
ensemble. */
html body .ccsr .ccsr-forfait-nom .ccsr-forfait-pastille {
display: table;
margin: 0 auto 8px;
}
/* Le résumé en entier, sans troncature ni hauteur réservée : il n'y a
plus de voisine à égaler. Et « display: block » plutôt que la boîte
tronquée : dans celle-ci, l'espace entre les deux moitiés du résumé
disparaissait — « six photos » s'écrivait « sixphotos ». */
html body .ccsr .ccsr-forfait-resume {
display: block !important;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
overflow: visible !important;
min-height: 0 !important;
max-width: 30ch;
margin: 8px auto 0 !important;
font-size: .95rem;
line-height: 1.55;
text-align: center;
}
html body .ccsr .ccsr-forfait-resume .ccsr-ligne {
display: inline;
}
html body .ccsr .ccsr-rabais-tel {
align-self: center;
margin-top: 12px;
}
/* La liste des combos reste alignée à gauche : on la lit ligne à ligne,
et des tirets centrés ne s'alignent sur rien. */
html body .ccsr .ccsr-forfaits-combos .ccsr-forfait-inclus {
align-self: stretch;
margin: 16px 0 0;
padding-top: 14px;
text-align: left;
}
html body .ccsr .ccsr-forfait-variante {
align-self: stretch;
margin-top: 14px;
}
html body .ccsr .ccsr-voir-detail {
align-self: center !important;
margin-top: 16px !important;
margin-bottom: 0 !important;
}
/* Le prix sur la photo, centré au bas de l'arche. */
html body .ccsr .ccsr-forfait-image .ccsr-forfait-prix {
bottom: 14px !important;
padding: 9px 15px 8px !important;
font-size: .86rem !important;
}
/* « Réserver », le geste principal de la carte : un vrai bouton plein,
sur toute la largeur, et il mène directement à l'étape 2. */
html body .ccsr .ccsr-voir-tel {
align-self: stretch !important;
width: 100% !important;
margin-top: 16px !important;
}
html body .ccsr .ccsr-voir-tel > span {
display: block !important;
width: 100% !important;
padding: 15px 12px 14px !important;
border: 1px solid var( --ccsr-sauge ) !important;
border-radius: 999px !important;
background: var( --ccsr-sauge ) !important;
color: var( --ccsr-creme ) !important;
font-size: .74rem !important;
font-weight: 600 !important;
letter-spacing: .16em !important;
text-align: center !important;
}
/* La carte choisie : « Votre choix », puis « Continuer » à la place de
« Réserver ». Revenir à l'étape 1 ne laisse plus devant une carte
sans issue. */
html body .ccsr .ccsr-forfait:has( input:checked ) .ccsr-voir-tel.ccsr-voir-suite,
html body .ccsr .ccsr-forfait.ccsr-est-coche .ccsr-voir-tel.ccsr-voir-suite {
display: block !important;
order: 2;
}
html body .ccsr .ccsr-choisi {
order: 1;
margin-top: 16px;
}
}
/* « Continuer » n'existe que sur la carte choisie, et seulement sur
téléphone. */
.ccsr .ccsr-voir-suite { display: none !important; }
/* 3. Les lignes qui finissaient sur un mot seul.
Relevé à 412 et 360 pixels, dans les cinq étapes et pour les neuf
forfaits : une pastille trop rembourrée cassait « Mon site Web » en
« Mon site » puis « Web » ; le nom d'une étape se coupait en deux dans le
rappel de ce qui manque. */
@media ( max-width: 480px ) {
html body .ccsr .ccsr-groupe-pastilles .ccsr-option {
padding-left: 10px !important;
padding-right: 10px !important;
}
html body .ccsr .ccsr-groupe-pastilles .ccsr-option-corps {
padding-left: 6px !important;
padding-right: 6px !important;
}
}
@media ( max-width: 400px ) {
html body .ccsr .ccsr-groupe-pastilles .ccsr-option-nom {
font-size: .9rem;
}
}
/* Le nom d'une étape, dans le rappel, ne se coupe pas : « Vos envies »
reste entier, et l'insécable qui le précède le garde avec « l'étape ». */
html body .ccsr .ccsr-amont-lien {
white-space: nowrap;
}
/* Les descriptions courtes des choix — deux ou trois lignes sous un nom —
se répartissent en lignes égales à toutes les largeurs : « Montrez-moi
simplement ce qui est libre, et je » puis « choisirai là-dedans. »
devient deux moitiés. */
html body .ccsr .ccsr-option-detail {
text-wrap: balance;
}
/* Le site impose « text-wrap: wrap » à tous les paragraphes, avec
« !important », pour laisser son propre script équilibrer les lignes —
mais ce script ne passe jamais dans un formulaire. Dans le mien, plus
rien ne veillait aux fins de paragraphe. On rend « pretty » aux
paragraphes de l'extension, et à eux seuls. */
html body .ccsr.ccsr p,
html body .ccsr.ccsr li,
html body .ccsr.ccsr dd,
html body .ccsr.ccsr dt {
text-wrap: pretty !important;
}
/* Sauf les titres courts, qui gardent leurs lignes égales. */
html body .ccsr.ccsr .ccsr-recap-sous,
html body .ccsr.ccsr .ccsr-entente-recap-fort dd,
html body .ccsr.ccsr .ccsr-heritage-titre,
html body .ccsr.ccsr .ccsr-heritages-etiquette,
html body .ccsr.ccsr .ccsr-raison,
html body .ccsr.ccsr .ccsr-clause-titre {
text-wrap: balance !important;
}
@media ( min-width: 768px ) {
html body .ccsr.ccsr .ccsr-forfaits-mot {
text-wrap: balance !important;
}
}
/* Les quatre adresses sous la clause du crédit héritaient de la taille du
texte des clauses (« .ccsr-conditions-liste span », 1,06 rem) au lieu de
la leur : « @rebeccavandal.photo » passait à 17 pixels et se coupait au
milieu sur un téléphone de 360. Elles reprennent leurs tailles. */
html body .ccsr .ccsr-conditions-liste .ccsr-lien-quoi {
font-size: .9rem;
}
html body .ccsr .ccsr-conditions-liste .ccsr-lien-qui {
font-size: .8rem;
}
/* Le prix de « Ajouter la séance maternité » tient au nom par des
insécables écrites dans la page ; sans enveloppe « nowrap », Chrome n'a
plus de frontière où couper. L'espace insécable remplace la marge. */
html body .ccsr .ccsr-variante-prix {
margin-left: 0;
white-space: normal;
}
/* =========================================================================
2.59 — Les combos en deux temps
La réservation d'un combo ne prépare plus que sa première séance. Les
suivantes sont annoncées à l'étape « Vos envies », sans question, puis se
préparent chacune sur sa page quand elle approche. Les deux ont la même
voix que le reste : une étiquette dorée, un titre vert de la palette, et
beaucoup d'air.
========================================================================= */
html body .ccsr .ccsr-suites {
margin: clamp( 34px, 5vw, 56px ) 0 clamp( 30px, 4vw, 44px );
padding: clamp( 24px, 3.4vw, 36px ) clamp( 20px, 3.4vw, 40px );
border-radius: var( --ccsr-rayon, 6px );
background: var( --ccsr-creme );
}
html body .ccsr .ccsr-suites[hidden] {
display: none !important;
}
html body .ccsr .ccsr-suites-etiquette,
html body .ccsr .ccsr-prep-surtitre,
html body .ccsr .ccsr-prep-autres-titre {
margin: 0 0 10px;
font-family: var( --ccsr-sans );
font-size: .74rem;
font-weight: 600;
letter-spacing: .16em;
line-height: 1.5;
text-transform: uppercase;
color: var( --ccsr-or-texte, #7F6235 );
}
html body .ccsr .ccsr-suites-titre,
html body .ccsr .ccsr-prep-titre {
position: relative;
margin: 0 0 18px;
padding-bottom: 14px;
font-family: var( --ccsr-serif );
font-size: clamp( 1.5rem, 3.2vw, 1.85rem );
font-weight: 500;
line-height: 1.18;
color: var( --ccsr-sauge );
text-wrap: balance;
}
html body .ccsr .ccsr-suites-titre::after,
html body .ccsr .ccsr-prep-titre::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 46px;
height: 1px;
background: var( --ccsr-or );
}
/* La liste se numérote à partir de 2 : la première séance, c'est celle
qu'elle prépare en ce moment. */
html body .ccsr .ccsr-suites-liste {
margin: 0;
padding: 0;
list-style: none;
counter-reset: ccsr-suite 1;
}
html body .ccsr .ccsr-suites-item {
position: relative;
margin: 0;
padding: 14px 0 14px 48px;
border-top: 1px solid var( --ccsr-bord );
counter-increment: ccsr-suite;
}
html body .ccsr .ccsr-suites-item:first-child {
border-top: 0;
}
html body .ccsr .ccsr-suites-item::before {
content: counter( ccsr-suite );
position: absolute;
left: 0;
top: 14px;
width: 30px;
height: 30px;
border: 1px solid var( --ccsr-or );
border-radius: 50%;
background: var( --ccsr-blanc );
font-family: var( --ccsr-sans );
font-size: .8rem;
font-weight: 600;
line-height: 28px;
text-align: center;
color: var( --ccsr-or-texte, #7F6235 );
}
html body .ccsr .ccsr-suites-nom {
display: block;
font-family: var( --ccsr-serif );
font-size: 1.32rem;
font-weight: 500;
line-height: 1.25;
color: var( --ccsr-sauge );
text-wrap: balance;
}
html body .ccsr .ccsr-suites-quand {
display: block;
margin-top: 3px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var( --ccsr-pale );
}
html body .ccsr .ccsr-suites-option {
display: block;
margin-top: 8px;
font-size: .95rem;
font-style: italic;
line-height: 1.55;
color: var( --ccsr-doux );
}
html body .ccsr .ccsr-suites-mot {
margin: 16px 0 0;
font-size: 1.02rem;
line-height: 1.7;
color: var( --ccsr-doux );
}
/* --- La page « Préparer ma séance » ------------------------------------- */
html body .ccsr.ccsr-prep {
box-sizing: border-box;
max-width: 800px;
margin: clamp( 32px, 6vw, 76px ) auto clamp( 56px, 8vw, 100px );
padding: 0 clamp( 16px, 4vw, 24px );
}
html body .ccsr .ccsr-prep-surtitre {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 .6em;
}
html body .ccsr .ccsr-prep-surtitre-forfait {
color: var( --ccsr-pale );
}
html body .ccsr .ccsr-prep-surtitre-forfait::before {
content: "·";
margin-right: .6em;
color: var( --ccsr-or );
}
html body .ccsr .ccsr-prep-titre {
margin: 6px 0 0;
font-size: clamp( 2rem, 5.4vw, 2.9rem );
line-height: 1.08;
}
html body .ccsr .ccsr-prep-sous {
margin: 12px 0 0;
font-family: var( --ccsr-serif );
font-size: 1.3rem;
font-style: italic;
line-height: 1.3;
color: var( --ccsr-sauge-clair );
}
html body .ccsr .ccsr-prep-quand {
margin: 14px 0 0;
font-size: .74rem;
font-weight: 600;
letter-spacing: .14em;
line-height: 1.6;
text-transform: uppercase;
color: var( --ccsr-pale );
}
html body .ccsr .ccsr-prep-intro {
margin: 18px 0 0;
font-size: 1.06rem;
line-height: 1.72;
color: var( --ccsr-doux );
}
html body .ccsr .ccsr-prep-courriel {
white-space: nowrap;
color: var( --ccsr-sauge );
text-decoration-color: var( --ccsr-or );
text-underline-offset: 3px;
}
html body .ccsr .ccsr-prep-deja,
html body .ccsr .ccsr-prep-etat.ccsr-prep-ok {
margin: 18px 0 0;
padding: 14px 18px;
border-radius: var( --ccsr-rayon, 6px );
background: rgba( 53, 69, 53, .07 );
font-size: .98rem;
line-height: 1.6;
color: var( --ccsr-sauge );
}
html body .ccsr .ccsr-prep-form {
margin-top: clamp( 26px, 4vw, 40px );
}
html body .ccsr .ccsr-prep-extra-note {
margin: 14px 0 0;
}
html body .ccsr .ccsr-prep-envoi {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
margin-top: 30px;
}
html body .ccsr .ccsr-prep-envoi .ccsr-bouton {
min-height: 52px;
padding: 0 34px;
border-radius: 999px;
}
html body .ccsr .ccsr-prep-etat {
margin: 0;
font-size: .98rem;
line-height: 1.6;
color: var( --ccsr-doux );
outline: none;
}
html body .ccsr .ccsr-prep-etat:empty {
display: none;
}
html body .ccsr .ccsr-prep-etat.ccsr-prep-ok {
margin: 0;
}
html body .ccsr .ccsr-prep-etat.ccsr-prep-erreur {
padding: 14px 18px;
border-radius: var( --ccsr-rayon, 6px );
background: rgba( 156, 74, 62, .08 );
color: var( --ccsr-rouge-texte );
}
html body .ccsr .ccsr-prep-autres {
margin-top: clamp( 40px, 6vw, 56px );
padding-top: 26px;
border-top: 1px solid var( --ccsr-bord );
}
html body .ccsr .ccsr-prep-autres ul {
margin: 0;
padding: 0;
list-style: none;
}
html body .ccsr .ccsr-prep-autres li {
margin: 10px 0 0;
}
html body .ccsr .ccsr-prep-autres a,
html body .ccsr .ccsr-prep-item-nom {
font-family: var( --ccsr-serif );
font-size: 1.3rem;
font-weight: 500;
line-height: 1.3;
color: var( --ccsr-sauge );
}
html body .ccsr .ccsr-prep-autres a {
text-decoration-color: var( --ccsr-or );
text-underline-offset: 4px;
}
html body .ccsr .ccsr-prep-recue {
margin-left: .5em;
font-size: .7rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
white-space: nowrap;
color: var( --ccsr-pale );
}
/* La liste de ses séances, quand le lien n'en vise aucune en particulier. */
html body .ccsr .ccsr-prep-liste {
display: grid;
gap: 12px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
html body .ccsr .ccsr-prep-item {
display: grid;
gap: 4px;
margin: 0;
padding: 18px 20px;
border: 1px solid var( --ccsr-bord );
border-radius: var( --ccsr-rayon, 6px );
background: var( --ccsr-blanc );
}
html body .ccsr .ccsr-prep-item-quand {
font-size: .72rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var( --ccsr-pale );
}
html body .ccsr .ccsr-prep-item-etat {
margin-top: 4px;
font-size: .92rem;
font-style: italic;
color: var( --ccsr-doux );
}
html body .ccsr .ccsr-prep-item-lien {
justify-self: start;
margin-top: 10px;
padding: 10px 20px;
border: 1px solid var( --ccsr-sauge );
border-radius: 999px;
font-size: .74rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
color: var( --ccsr-sauge );
}
html body .ccsr .ccsr-prep-fait .ccsr-prep-item-lien {
border-color: var( --ccsr-bord-fort );
color: var( --ccsr-doux );
}
@media ( max-width: 600px ) {
html body .ccsr .ccsr-suites-item {
padding-left: 42px;
}
html body .ccsr .ccsr-suites-item::before {
width: 28px;
height: 28px;
line-height: 26px;
}
html body .ccsr .ccsr-suites-nom,
html body .ccsr .ccsr-prep-autres a,
html body .ccsr .ccsr-prep-item-nom {
font-size: 1.22rem;
}
html body .ccsr .ccsr-prep-envoi {
align-items: stretch;
}
html body .ccsr .ccsr-prep-envoi .ccsr-bouton {
width: 100%;
}
}
/* @@ 2.60 téléphone — début @@ */
/* =========================================================================
2.60 — Le téléphone : « mon mélange »
=========================================================================
Rébecca a choisi, sur les maquettes, le mélange des trois pistes. Une règle
le résume : « les clientes doivent voir facilement les options ».
— Les séances, deux par rangée, toutes visibles d'un coup. Toucher une carte
ouvre sa fiche en feuille, par le bas ; le bouton qui choisit est sous le
pouce.
— Les choix à photo en tuiles, deux par rangée, quand la photo aide à
choisir ; les choix sans photo en rangées compactes.
— Une barre au bas de l'écran pendant tout le formulaire : le total d'un
côté, « Continuer » de l'autre. Le récapitulatif s'y ouvre en feuille.
— L'entente en trois parties qui s'ouvrent ; le guide replié.
— En haut, une seule ligne : l'étape, et combien il en reste.
Tout est écrit pour le téléphone seulement (640 pixels et moins) et ajouté
à la fin : la feuille de l'ordinateur ne change pas d'une virgule. Les
pièces que le script fabrique pour le téléphone n'existent nulle part
ailleurs. */
/* Le préfixe est appuyé : la feuille de l'ordinateur donne un « display » à
tous les « span » de l'entente, et le compte des parties s'y affichait. */
html body .ccsr.ccsr .ccsr-voile,
html body .ccsr.ccsr .ccsr-barre,
html body .ccsr.ccsr .ccsr-pas-compte,
html body .ccsr.ccsr .ccsr-variante-miroir,
html body .ccsr.ccsr .ccsr-partie-compte,
html body .ccsr.ccsr .ccsr-conseils-ouvrir,
html body .ccsr.ccsr .ccsr-lire-suite,
html body .ccsr.ccsr .ccsr-resume-fermer {
display: none;
}
@keyframes ccsr-feuille-monte {
from { transform: translateY( 100% ); }
to { transform: none; }
}
@keyframes ccsr-voile-entre {
from { opacity: 0; }
to { opacity: 1; }
}
@media ( max-width: 640px ) {
/* ---- 0. Une étape qui paraît sans glisser ----
L'entrée d'une étape la faisait glisser de 8 pixels. Une transformation,
même finie, change le repère de tout ce qui est « fixe » à l'intérieur :
la fiche en feuille se serait collée au bas de l'étape au lieu du bas de
l'écran. Sur téléphone, l'étape paraît donc sans mouvement. */
html body .ccsr.ccsr .ccsr-pas.actif {
animation: none;
}
/* ---- 1. Le haut : une seule ligne ----
Le nom de l'étape s'écrivait deux fois coup sur coup — dans le fil, puis
au-dessus du titre —, et rien ne disait combien il en restait. Le fil se
réduit à sa barre de progression ; le sur-titre de l'étape garde son
nom et prend « Étape 1 sur 5 » à droite. */
html body .ccsr.ccsr .ccsr-fil {
display: none;
}
html body .ccsr.ccsr .ccsr-fil-barre {
margin: 0 0 16px;
}
html body .ccsr.ccsr .ccsr-pas-rang {
margin-bottom: 12px;
}
html body .ccsr.ccsr .ccsr-pas-rang::after {
order: 1;
min-width: 14px;
}
html body .ccsr.ccsr .ccsr-pas-compte {
display: inline;
order: 2;
flex: 0 0 auto;
font-size: .7rem;
font-weight: 500;
letter-spacing: .02em;
text-transform: none;
white-space: nowrap;
color: var( --ccsr-pale );
}
/* « Déjà cliente? » : une ligne sous le titre de la première étape, et non
un encadré entre la barre et l'étape. Le script l'y déplace ; la raison
(« je remplis d'avance… ») se devine en un mot de moins. */
html body .ccsr.ccsr .ccsr-bandeau-connue {
margin: 14px 0 0;
padding: 11px 14px;
border-radius: 10px;
font-size: .86rem;
line-height: 1.45;
text-align: left;
}
html body .ccsr.ccsr .ccsr-bandeau-pourquoi {
display: none;
}
/* ---- 2. Les séances, deux par rangée ---- */
html body .ccsr.ccsr .ccsr-forfaits {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
gap: 12px !important;
}
html body .ccsr.ccsr .ccsr-forfait {
position: relative;
min-width: 0;
padding: 8px 8px 14px !important;
border-radius: 14px !important;
background: var( --ccsr-blanc );
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* Le liseré doré suit le dôme de la photo à 4 pixels. */
html body .ccsr.ccsr .ccsr-forfait::after {
inset: 4px;
border-radius: 999px 999px 11px 11px;
}
html body .ccsr.ccsr .ccsr-forfait-image {
align-self: stretch !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
aspect-ratio: 7 / 8 !important;
border-radius: 999px 999px 10px 10px !important;
}
html body .ccsr.ccsr .ccsr-image-duo > .ccsr-duo-haut {
border-radius: 999px 999px 0 0;
}
/* Sur la photo : rien. Le prix passe sous le nom, où il se lit. */
html body .ccsr.ccsr .ccsr-forfait-image .ccsr-forfait-prix,
html body .ccsr.ccsr .ccsr-forfait-image .ccsr-forfait-voir {
display: none !important;
}
html body .ccsr.ccsr .ccsr-forfait-corps {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important;
padding: 11px 2px 0 !important;
text-align: center !important;
}
html body .ccsr.ccsr .ccsr-forfait-nom {
min-height: 0;
margin: 0;
font-size: 1.16rem !important;
line-height: 1.16 !important;
color: var( --ccsr-sauge );
text-wrap: balance;
}
/* « Combo » : la bande s'appelle déjà « Les combos ». */
html body .ccsr.ccsr .ccsr-forfait-nom .ccsr-forfait-pastille {
display: none !important;
}
/* Le reste de la carte vit dans sa fiche. */
html body .ccsr.ccsr .ccsr-forfait-resume,
html body .ccsr.ccsr .ccsr-forfait-inclus,
html body .ccsr.ccsr .ccsr-forfait > .ccsr-forfait-corps > .ccsr-forfait-variante,
html body .ccsr.ccsr .ccsr-voir-detail,
html body .ccsr.ccsr .ccsr-voir-tel,
html body .ccsr.ccsr .ccsr-forfait .ccsr-choisi {
display: none !important;
}
/* Le nom, le prix, puis l'économie — comme sur la maquette. */
html body .ccsr.ccsr .ccsr-forfait-corps > .ccsr-forfait-nom { order: 1; }
html body .ccsr.ccsr .ccsr-forfait-corps > .ccsr-prix-tel { order: 2; }
html body .ccsr.ccsr .ccsr-forfait-corps > .ccsr-rabais-tel { order: 3; }
html body .ccsr.ccsr .ccsr-prix-tel {
display: block !important;
margin: 6px 0 0 !important;
font-size: .82rem !important;
font-weight: 600 !important;
line-height: 1.35;
white-space: nowrap;
color: var( --ccsr-or-texte, #7F6235 ) !important;
}
html body .ccsr.ccsr .ccsr-prix-tel .ccsr-prix-avant {
margin-right: 5px;
font-weight: 500;
color: var( --ccsr-pale );
}
html body .ccsr.ccsr .ccsr-rabais-tel {
align-self: center !important;
margin: 7px 0 0 !important;
padding: 3px 10px 2px !important;
font-size: .64rem !important;
}
/* La carte choisie : le cadre vert et une coche dans le coin que le dôme
laisse libre. La classe vient du script : elle suit aussi la variante
(« avec la maternité »), que le bouton de la carte ne porte pas. */
html body .ccsr.ccsr .ccsr-forfait.ccsr-carte-choisie {
border-color: var( --ccsr-sauge ) !important;
box-shadow: 0 0 0 1px var( --ccsr-sauge ), 0 10px 26px rgba( 53, 69, 53, .12 ) !important;
}
html body .ccsr.ccsr .ccsr-forfait.ccsr-carte-choisie::before {
content: "";
position: absolute;
top: 6px;
right: 6px;
z-index: 4;
width: 24px;
height: 24px;
border-radius: 50%;
background: var( --ccsr-sauge ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8.2' fill='none' stroke='%23F6F2E9' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / 15px no-repeat;
box-shadow: 0 0 0 2px var( --ccsr-blanc );
}
html body .ccsr.ccsr .ccsr-forfait.ccsr-carte-choisie::after {
opacity: 1;
}
/* Les familles de séances : le titre et sa phrase, serrés. */
html body .ccsr.ccsr .ccsr-forfaits-famille {
margin-bottom: 12px;
}
/* ---- 3. La fiche, en feuille par le bas ---- */
html body .ccsr.ccsr .ccsr-forfait-fiche:not( [hidden] ) {
position: fixed !important;
top: auto !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 10060;
display: flex !important;
flex-direction: column;
align-items: stretch !important;
width: auto !important;
max-height: 90vh;
max-height: 90dvh;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
border: 0 !important;
border-radius: 22px 22px 0 0 !important;
background: var( --ccsr-blanc ) !important;
box-shadow: 0 -12px 40px rgba( 0, 0, 0, .18 ) !important;
outline: none;
animation: ccsr-feuille-monte .32s cubic-bezier( .22, .7, .2, 1 ) both;
}
/* Une feuille qui en remplace une autre (la case « avec la maternité »)
ne remonte pas du bas de l'écran : elle est déjà là. */
html body .ccsr.ccsr .ccsr-forfait-fiche.ccsr-sans-entree:not( [hidden] ) {
animation: none;
}
/* La poignée : on comprend que la feuille se referme. */
html body .ccsr.ccsr .ccsr-forfait-fiche:not( [hidden] )::before {
content: "";
flex: 0 0 auto;
display: block;
width: 40px;
height: 4px;
margin: 10px auto 0;
border-radius: 4px;
background: var( --ccsr-bord );
}
/* L'image et le corps se fondent dans la feuille : on peut alors remettre
le nom avant la phrase sous l'arche, comme sur la carte. */
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-visuel,
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-corps {
display: contents !important;
}
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-visuel > *,
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-corps > * {
order: 4;
flex-shrink: 0;
margin-right: 20px;
margin-left: 20px;
}
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-fermer {
order: 0;
position: sticky !important;
top: 10px !important;
right: auto !important;
z-index: 3;
display: grid !important;
place-items: center;
flex: 0 0 auto;
align-self: flex-end;
width: 38px !important;
height: 38px !important;
margin: -12px 14px -26px auto !important;
padding: 0 !important;
border: 1px solid var( --ccsr-bord ) !important;
border-radius: 50% !important;
background: rgba( 255, 255, 255, .94 ) !important;
font-size: 1.35rem !important;
line-height: 1 !important;
color: var( --ccsr-sauge ) !important;
}
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-visuel > .ccsr-fiche-arche {
order: 1;
width: auto;
height: clamp( 180px, 52vw, 236px );
aspect-ratio: auto !important;
margin-top: 12px;
border-radius: 999px 999px 14px 14px;
}
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-corps > .ccsr-fiche-nom {
order: 2;
margin-top: 16px !important;
padding: 0 !important;
font-size: 1.72rem !important;
line-height: 1.12 !important;
text-align: center;
text-wrap: balance;
}
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-visuel > .ccsr-fiche-legende {
order: 3;
margin-top: 8px;
font-size: 1.02rem;
}
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-texte {
max-width: none;
margin-top: 14px;
font-size: .93rem;
line-height: 1.7;
text-wrap: pretty;
}
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-inclus {
margin-bottom: 4px;
}
/* Le pied reste au bas de la feuille : choisir est toujours sous le
pouce, même au milieu de la lecture. */
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-corps > .ccsr-fiche-pied {
order: 9;
position: sticky;
bottom: 0;
z-index: 2;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
margin: 22px 0 0 !important;
padding: 12px 20px calc( 12px + env( safe-area-inset-bottom ) ) !important;
border-top: 1px solid var( --ccsr-bord ) !important;
background: var( --ccsr-blanc );
box-shadow: 0 -10px 22px rgba( 255, 255, 255, .92 );
}
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-prendre {
justify-content: center !important;
width: 100%;
min-height: 50px;
text-align: center !important;
margin: 0 !important;
padding: 15px 20px !important;
border-radius: 999px !important;
font-size: .74rem !important;
letter-spacing: .16em !important;
}
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-retour {
align-self: center !important;
justify-content: center !important;
width: auto !important;
margin: 0 !important;
padding: 8px 12px !important;
font-size: .84rem !important;
}
/* « Ajouter la séance maternité » : son double, au pied de la feuille,
juste au-dessus du bouton. Cocher change la feuille pour celle du
forfait avec la maternité. */
html body .ccsr.ccsr .ccsr-fiche-pied .ccsr-variante-miroir {
display: flex !important;
align-items: center;
gap: 10px;
margin: 0 0 2px !important;
padding: 11px 13px !important;
border: 1px solid var( --ccsr-bord );
border-radius: 12px !important;
background: var( --ccsr-papier );
cursor: pointer;
}
html body .ccsr.ccsr .ccsr-fiche-pied .ccsr-variante-miroir input {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 0;
accent-color: var( --ccsr-sauge );
}
html body .ccsr.ccsr .ccsr-fiche-pied .ccsr-variante-miroir .ccsr-variante-nom {
font-size: .86rem;
line-height: 1.4;
}
html body .ccsr.ccsr .ccsr-fiche-pied .ccsr-variante-miroir .ccsr-variante-prix {
display: inline;
margin-left: 4px;
}
/* ---- 4. Le voile sous les feuilles ---- */
html body .ccsr.ccsr .ccsr-voile:not( [hidden] ) {
position: fixed;
inset: 0;
z-index: 10055;
display: block;
background: rgba( 47, 42, 36, .48 );
animation: ccsr-voile-entre .25s ease both;
-webkit-tap-highlight-color: transparent;
}
html.ccsr-feuille-ouverte,
html.ccsr-feuille-ouverte body {
overflow: hidden !important;
}
/* ---- 5. La barre du bas ---- */
html body .ccsr.ccsr .ccsr-barre {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 9500;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 72px;
padding: 10px 16px calc( 10px + env( safe-area-inset-bottom ) );
border-top: 1px solid var( --ccsr-bord );
background: var( --ccsr-blanc );
box-shadow: 0 -8px 24px rgba( 53, 69, 53, .08 );
transform: none;
transition: transform .3s cubic-bezier( .22, .7, .2, 1 ), visibility 0s linear 0s;
}
html body .ccsr.ccsr .ccsr-barre.ccsr-barre-cachee {
transform: translateY( 110% );
visibility: hidden;
transition: transform .3s cubic-bezier( .22, .7, .2, 1 ), visibility 0s linear .3s;
}
html body .ccsr.ccsr .ccsr-barre-resume,
html body .ccsr.ccsr .ccsr-barre-resume:hover,
html body .ccsr.ccsr .ccsr-barre-resume:focus {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-width: 0;
min-height: 48px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
font-family: var( --ccsr-sans );
text-align: left;
text-transform: none;
letter-spacing: 0;
color: var( --ccsr-sauge );
cursor: pointer;
}
html body .ccsr.ccsr .ccsr-barre-nom {
display: block;
max-width: 100%;
overflow: hidden;
font-size: .72rem;
font-weight: 500;
line-height: 1.35;
white-space: nowrap;
text-overflow: ellipsis;
color: var( --ccsr-pale );
}
html body .ccsr.ccsr .ccsr-barre-total {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 1.02rem;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
color: var( --ccsr-sauge );
}
/* Le chevron : le récapitulatif s'ouvre vers le haut. */
html body .ccsr.ccsr .ccsr-barre-total::after {
content: "";
width: 7px;
height: 7px;
margin-top: 4px;
border-top: 2px solid var( --ccsr-or-fonce );
border-left: 2px solid var( --ccsr-or-fonce );
transform: rotate( 45deg );
}
/* Rien de choisi : rien à ouvrir. */
html body .ccsr.ccsr .ccsr-barre-resume:disabled {
cursor: default;
}
html body .ccsr.ccsr .ccsr-barre-resume:disabled .ccsr-barre-nom {
font-size: .8rem;
line-height: 1.4;
white-space: normal;
}
html body .ccsr.ccsr .ccsr-barre-resume:disabled .ccsr-barre-total {
display: none;
}
html body .ccsr.ccsr .ccsr-barre-suite,
html body .ccsr.ccsr .ccsr-barre-suite:hover,
html body .ccsr.ccsr .ccsr-barre-suite:focus {
flex: 0 0 auto;
min-height: 48px;
margin: 0;
padding: 0 24px;
border: 0;
border-radius: 999px;
background: var( --ccsr-sauge );
box-shadow: none;
font-family: var( --ccsr-sans );
font-size: .72rem;
font-weight: 600;
letter-spacing: .16em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
color: var( --ccsr-creme );
cursor: pointer;
}
html body .ccsr.ccsr .ccsr-barre-suite:focus-visible {
outline: 2px solid var( --ccsr-or );
outline-offset: 3px;
}
/* Tant qu'aucune séance n'est choisie, « Continuer » se fait discret ; le
toucher dit quand même ce qui manque. */
html body .ccsr.ccsr .ccsr-barre-suite.ccsr-barre-attente {
background: #D9D2C6;
color: var( --ccsr-blanc );
}
html body .ccsr.ccsr .ccsr-barre-suite:disabled {
opacity: .55;
cursor: default;
}
/* La barre remplace « Continuer » et « Réserver » dans la page ; « Retour »
reste où il était. Le formulaire garde de quoi passer au-dessus. */
html body .ccsr.ccsr.ccsr-a-barre #ccsr-suite,
html body .ccsr.ccsr.ccsr-a-barre #ccsr-envoi {
display: none !important;
}
html body .ccsr.ccsr.ccsr-a-barre .ccsr-form {
padding-bottom: 84px;
}
/* Le bouton « Revenir en haut » du site se pose au-dessus de la barre. */
html body.ccsr-barre-visible .rvg-haut {
bottom: calc( 86px + env( safe-area-inset-bottom ) ) !important;
}
/* ---- 6. Le récapitulatif, en feuille ---- */
html body .ccsr.ccsr.ccsr-a-barre .ccsr-resume {
display: none !important;
}
html body .ccsr.ccsr.ccsr-a-barre.ccsr-resume-ouvert .ccsr-resume {
position: fixed !important;
top: auto !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 10060;
display: block !important;
width: auto !important;
max-height: 86vh;
max-height: 86dvh;
margin: 0 !important;
overflow-y: auto;
overscroll-behavior: contain;
border-radius: 22px 22px 0 0;
background: var( --ccsr-blanc );
box-shadow: 0 -12px 40px rgba( 0, 0, 0, .18 );
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: ccsr-feuille-monte .32s cubic-bezier( .22, .7, .2, 1 ) both;
}
html body .ccsr.ccsr.ccsr-a-barre.ccsr-resume-ouvert .ccsr-resume::before {
content: "";
display: block;
width: 40px;
height: 4px;
margin: 10px auto 0;
border-radius: 4px;
background: var( --ccsr-bord );
}
html body .ccsr.ccsr.ccsr-a-barre .ccsr-resume-dedans {
position: relative !important;
top: auto !important;
padding: 14px 20px calc( 24px + env( safe-area-inset-bottom ) ) !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
html body .ccsr.ccsr.ccsr-a-barre .ccsr-resume-titre {
margin: 0 52px 10px 0 !important;
font-family: var( --ccsr-serif ) !important;
font-size: 1.62rem !important;
font-weight: 500 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var( --ccsr-sauge ) !important;
}
html body .ccsr.ccsr.ccsr-a-barre .ccsr-resume-fermer {
position: absolute;
top: 8px;
right: 16px;
display: grid;
place-items: center;
width: 38px;
height: 38px;
margin: 0;
padding: 0;
border: 1px solid var( --ccsr-bord );
border-radius: 50%;
background: var( --ccsr-blanc );
font-size: 1.35rem;
line-height: 1;
color: var( --ccsr-sauge );
cursor: pointer;
}
/* ---- 7. Les choix ---- */
/* 7a. Les rangées : tout ce qui n'a pas de photo. Le nom, la précision
dessous, et le rond (ou le carré, quand on peut en cocher plusieurs) à
droite, là où le pouce le cherche. */
html body .ccsr.ccsr .ccsr-groupe-pastilles:not( .ccsr-groupe-palettes ):not( .ccsr-groupe-filigranes ) .ccsr-options,
html body .ccsr.ccsr .ccsr-groupe-extras .ccsr-options,
html body .ccsr.ccsr .ccsr-options.ccsr-interets,
html body .ccsr.ccsr .ccsr-options-discretes {
display: grid !important;
grid-template-columns: minmax( 0, 1fr ) !important;
gap: 8px !important;
}
/* Des noms courts, sans précision : deux par rangée suffisent. */
html body .ccsr.ccsr .ccsr-groupe-pastilles:not( .ccsr-groupe-palettes ):not( .ccsr-groupe-filigranes ):not( :has( .ccsr-option-detail ) ) .ccsr-options {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
}
/* « :not( [hidden] ) » partout où la feuille impose un « display » à un
choix : une option écartée pour ce forfait porte l'attribut « hidden »,
et un « display » imposé la remettait à l'écran. */
html body .ccsr.ccsr .ccsr-groupe-pastilles:not( .ccsr-groupe-palettes ):not( .ccsr-groupe-filigranes ) .ccsr-option:not( [hidden] ),
html body .ccsr.ccsr .ccsr-groupe-extras .ccsr-option:not( [hidden] ),
html body .ccsr.ccsr .ccsr-interets .ccsr-option:not( [hidden] ),
html body .ccsr.ccsr .ccsr-options-discretes .ccsr-option:not( [hidden] ),
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-option-sans-fond:not( [hidden] ) {
display: block !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
}
html body .ccsr.ccsr .ccsr-groupe-pastilles:not( .ccsr-groupe-palettes ):not( .ccsr-groupe-filigranes ) .ccsr-option-corps,
html body .ccsr.ccsr .ccsr-groupe-extras .ccsr-option-corps,
html body .ccsr.ccsr .ccsr-interets .ccsr-option-corps,
html body .ccsr.ccsr .ccsr-options-discretes .ccsr-option-corps,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-option-sans-fond .ccsr-option-corps {
position: relative !important;
display: block !important;
height: 100%;
min-height: 52px !important;
padding: 13px 48px 13px 15px !important;
border: 1px solid var( --ccsr-bord ) !important;
border-radius: 12px !important;
background: var( --ccsr-blanc ) !important;
box-shadow: none !important;
text-align: left !important;
transition: border-color .2s, background-color .2s, box-shadow .2s;
}
html body .ccsr.ccsr .ccsr-options-discretes .ccsr-option-corps {
border-style: dashed !important;
}
html body .ccsr.ccsr .ccsr-groupe-pastilles:not( .ccsr-groupe-palettes ):not( .ccsr-groupe-filigranes ) .ccsr-option-corps::after,
html body .ccsr.ccsr .ccsr-groupe-extras .ccsr-option-corps::after,
html body .ccsr.ccsr .ccsr-interets .ccsr-option-corps::after,
html body .ccsr.ccsr .ccsr-options-discretes .ccsr-option-corps::after,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-option-sans-fond .ccsr-option-corps::after {
content: "";
position: absolute;
top: 50%;
right: 15px;
width: 22px;
height: 22px;
margin-top: -11px;
border: 1.5px solid #CDBFA8;
border-radius: 50%;
background: var( --ccsr-blanc ) center / 14px no-repeat;
transition: background-color .2s, border-color .2s;
}
/* Plusieurs réponses possibles : un carré aux coins doux. */
html body .ccsr.ccsr .ccsr-option > input[type="checkbox"] + .ccsr-option-corps::after {
border-radius: 7px !important;
}
html body .ccsr.ccsr .ccsr-groupe-pastilles:not( .ccsr-groupe-palettes ):not( .ccsr-groupe-filigranes ) .ccsr-option > input:checked + .ccsr-option-corps,
html body .ccsr.ccsr .ccsr-groupe-extras .ccsr-option > input:checked + .ccsr-option-corps,
html body .ccsr.ccsr .ccsr-interets .ccsr-option > input:checked + .ccsr-option-corps,
html body .ccsr.ccsr .ccsr-options-discretes .ccsr-option > input:checked + .ccsr-option-corps,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-option-sans-fond > input:checked + .ccsr-option-corps {
border-color: var( --ccsr-sauge ) !important;
background: #F1F5F0 !important;
box-shadow: inset 0 0 0 1px var( --ccsr-sauge ) !important;
}
html body .ccsr.ccsr .ccsr-groupe-pastilles:not( .ccsr-groupe-palettes ):not( .ccsr-groupe-filigranes ) .ccsr-option > input:checked + .ccsr-option-corps::after,
html body .ccsr.ccsr .ccsr-groupe-extras .ccsr-option > input:checked + .ccsr-option-corps::after,
html body .ccsr.ccsr .ccsr-interets .ccsr-option > input:checked + .ccsr-option-corps::after,
html body .ccsr.ccsr .ccsr-options-discretes .ccsr-option > input:checked + .ccsr-option-corps::after,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-option-sans-fond > input:checked + .ccsr-option-corps::after {
border-color: var( --ccsr-sauge );
background-color: var( --ccsr-sauge );
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.8 3.8 8.2-9' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
}
html body .ccsr.ccsr .ccsr-option > input:focus-visible + .ccsr-option-corps {
outline: 2px solid var( --ccsr-or );
outline-offset: 2px;
}
/* Le texte des rangées : à gauche, sur toute la largeur. */
html body .ccsr.ccsr .ccsr-groupe-pastilles:not( .ccsr-groupe-palettes ):not( .ccsr-groupe-filigranes ) .ccsr-option-texte,
html body .ccsr.ccsr .ccsr-groupe-extras .ccsr-option-texte,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-option-sans-fond .ccsr-option-texte {
display: block !important;
padding: 0 !important;
text-align: left !important;
}
html body .ccsr.ccsr .ccsr-groupe-pastilles:not( .ccsr-groupe-palettes ):not( .ccsr-groupe-filigranes ) .ccsr-option-nom,
html body .ccsr.ccsr .ccsr-groupe-extras .ccsr-option-nom,
html body .ccsr.ccsr .ccsr-interets .ccsr-option-nom,
html body .ccsr.ccsr .ccsr-options-discretes .ccsr-option-nom,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-option-sans-fond .ccsr-option-nom {
display: block !important;
font-size: .93rem !important;
font-weight: 600 !important;
line-height: 1.35 !important;
text-align: left !important;
color: var( --ccsr-encre ) !important;
}
html body .ccsr.ccsr .ccsr-groupe-pastilles:not( .ccsr-groupe-palettes ):not( .ccsr-groupe-filigranes ) .ccsr-option-detail,
html body .ccsr.ccsr .ccsr-groupe-extras .ccsr-option-detail,
html body .ccsr.ccsr .ccsr-interets .ccsr-option-detail,
html body .ccsr.ccsr .ccsr-options-discretes .ccsr-option-detail,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-option-sans-fond .ccsr-option-detail {
display: block !important;
max-width: none !important;
margin: 3px 0 0 !important;
font-size: .82rem !important;
line-height: 1.5 !important;
text-align: left !important;
text-wrap: pretty !important;
color: var( --ccsr-doux ) !important;
}
/* Les options payantes montraient leur case native au-dessus de la
rangée : la rangée entière la coche, et le carré de droite la montre. */
html body .ccsr.ccsr .ccsr-groupe-extras .ccsr-option > input,
html body .ccsr.ccsr .ccsr-interets .ccsr-option > input,
html body .ccsr.ccsr .ccsr-options-discretes .ccsr-option > input,
html body .ccsr.ccsr .ccsr-groupe-pastilles .ccsr-option > input {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
opacity: 0 !important;
pointer-events: none;
}
/* Les noms courts, deux par rangée : pas de rond à droite, il mangerait
la moitié de « Une recommandation ». Le cadre vert dit ce qui est
coché, et une coche se pose sur le coin. */
html body .ccsr.ccsr .ccsr-groupe-pastilles:not( .ccsr-groupe-palettes ):not( .ccsr-groupe-filigranes ):not( :has( .ccsr-option-detail ) ) .ccsr-option-corps {
display: flex !important;
align-items: center;
justify-content: center;
padding: 12px 12px !important;
text-align: center !important;
}
html body .ccsr.ccsr .ccsr-groupe-pastilles:not( .ccsr-groupe-palettes ):not( .ccsr-groupe-filigranes ):not( :has( .ccsr-option-detail ) ) .ccsr-option-texte,
html body .ccsr.ccsr .ccsr-groupe-pastilles:not( .ccsr-groupe-palettes ):not( .ccsr-groupe-filigranes ):not( :has( .ccsr-option-detail ) ) .ccsr-option-nom {
text-align: center !important;
}
html body .ccsr.ccsr .ccsr-groupe-pastilles:not( .ccsr-groupe-palettes ):not( .ccsr-groupe-filigranes ):not( :has( .ccsr-option-detail ) ) .ccsr-option-corps::after {
top: -7px;
right: -7px;
width: 22px;
height: 22px;
margin-top: 0;
border-radius: 50% !important;
box-shadow: 0 0 0 2px var( --ccsr-blanc );
opacity: 0;
transform: scale( .6 );
transition: opacity .2s, transform .2s;
}
html body .ccsr.ccsr .ccsr-groupe-pastilles:not( .ccsr-groupe-palettes ):not( .ccsr-groupe-filigranes ):not( :has( .ccsr-option-detail ) ) .ccsr-option > input:checked + .ccsr-option-corps::after {
opacity: 1;
transform: none;
}
html body .ccsr.ccsr .ccsr-groupe-pastilles:not( .ccsr-groupe-palettes ):not( .ccsr-groupe-filigranes ):not( :has( .ccsr-option-detail ) ) .ccsr-option-nom {
font-size: .9rem !important;
line-height: 1.3 !important;
}
html body .ccsr.ccsr .ccsr-groupe-extras .ccsr-option-prix {
display: inline-block;
margin-left: 6px;
font-weight: 600;
white-space: nowrap;
color: var( --ccsr-or-texte, #7F6235 );
}
/* Oui ou non : les deux réponses côte à côte, comme avant. */
html body .ccsr.ccsr .ccsr-ouinon {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
/* 7b. Les tuiles à photo : deux par rangée. Une tuile qui resterait seule
prend toute la largeur (le script la marque), jamais une photo seule
dans une demi-colonne. */
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-options:not( .ccsr-options-discretes ),
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-options:not( .ccsr-options-discretes ) {
display: grid !important;
grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
gap: 10px !important;
align-items: stretch !important;
}
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-options:not( .ccsr-options-discretes ) > .ccsr-option:not( [hidden] ),
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option:not( .ccsr-option-sans-fond ):not( [hidden] ) {
display: block !important;
min-width: 0;
height: auto;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
}
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-option-sans-fond,
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-option.ccsr-tuile-large,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-option.ccsr-tuile-large {
grid-column: 1 / -1;
}
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option-corps,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option:not( .ccsr-option-sans-fond ) .ccsr-option-corps {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 1px solid var( --ccsr-bord ) !important;
border-radius: 12px !important;
background: var( --ccsr-blanc ) !important;
box-shadow: none !important;
text-align: center !important;
}
/* Une seule photo par tuile : deux ou trois dans une demi-colonne de
téléphone, ce sont des timbres-poste. La première que Rébecca montre
sur téléphone reste. */
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-options:not( .ccsr-options-discretes ) .ccsr-vignettes {
grid-template-columns: minmax( 0, 1fr ) !important;
gap: 0 !important;
margin: 0 !important;
}
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-vignettes > .ccsr-vignette-cadre:not( :nth-child( 1 of .ccsr-vignette-cadre:not( .ccsr-vignette-pas-tel, .ccsr-vignette-relais ) ) ) {
display: none !important;
}
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-options:not( .ccsr-options-discretes ) .ccsr-vignette-cadre {
aspect-ratio: 1 / 1 !important;
border-radius: 0 !important;
}
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-option.ccsr-tuile-large .ccsr-vignette-cadre {
aspect-ratio: 2 / 1 !important;
}
/* La photo du filigrane sort de sous le texte et se montre en entier, en
haut de la tuile. Le voile n'a plus rien à protéger. */
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option:not( .ccsr-option-sans-fond ) .ccsr-filigrane {
position: relative !important;
inset: auto !important;
z-index: 0;
display: grid !important;
grid-template-columns: minmax( 0, 1fr ) !important;
flex: 0 0 auto;
width: 100%;
height: 100px;
border-radius: 0 !important;
opacity: 1 !important;
filter: none !important;
}
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-option.ccsr-tuile-large .ccsr-filigrane {
height: 130px;
}
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-filigrane > .ccsr-vignette-cadre:not( :nth-child( 1 of .ccsr-vignette-cadre:not( .ccsr-vignette-pas-tel ) ) ) {
display: none !important;
}
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-filigrane .ccsr-vignette-cadre {
border-radius: 0 !important;
}
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-filigrane-voile {
display: none !important;
}
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option-texte,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option:not( .ccsr-option-sans-fond ) .ccsr-option-texte {
display: block !important;
flex: 1 1 auto;
padding: 10px 9px 12px !important;
text-align: center !important;
transition: background-color .2s, color .2s;
}
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option-nom,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option:not( .ccsr-option-sans-fond ) .ccsr-option-nom {
display: block !important;
font-size: .86rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
text-align: center !important;
color: var( --ccsr-encre ) !important;
}
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option-detail,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option:not( .ccsr-option-sans-fond ) .ccsr-option-detail {
display: block !important;
max-width: none !important;
margin: 4px 0 0 !important;
font-size: .76rem !important;
line-height: 1.45 !important;
text-align: center !important;
text-wrap: pretty !important;
color: var( --ccsr-doux ) !important;
}
/* Choisie : la tuile se teint du vert de la maison sous sa photo, avec la
coche dans le coin — la même chose pour toutes les tuiles. */
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option > input:checked + .ccsr-option-corps,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option:not( .ccsr-option-sans-fond ) > input:checked + .ccsr-option-corps {
border-color: var( --ccsr-sauge ) !important;
background: var( --ccsr-sauge ) !important;
box-shadow: 0 0 0 1px var( --ccsr-sauge ) !important;
}
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option > input:checked + .ccsr-option-corps .ccsr-option-nom,
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option > input:checked + .ccsr-option-corps .ccsr-option-detail,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option:not( .ccsr-option-sans-fond ) > input:checked + .ccsr-option-corps .ccsr-option-nom,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option:not( .ccsr-option-sans-fond ) > input:checked + .ccsr-option-corps .ccsr-option-detail {
color: var( --ccsr-creme ) !important;
}
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option-corps::before,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option:not( .ccsr-option-sans-fond ) .ccsr-option-corps::before {
content: "";
position: absolute;
top: 7px;
right: 7px;
z-index: 2;
width: 24px;
height: 24px;
border-radius: 50%;
background: var( --ccsr-sauge ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8.2' fill='none' stroke='%23F6F2E9' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / 15px no-repeat;
box-shadow: 0 0 0 2px var( --ccsr-blanc );
opacity: 0;
transform: scale( .6 );
transition: opacity .2s, transform .2s;
}
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option > input:checked + .ccsr-option-corps::before,
html body .ccsr.ccsr .ccsr-groupe-filigranes .ccsr-options:not( .ccsr-options-discretes ) .ccsr-option:not( .ccsr-option-sans-fond ) > input:checked + .ccsr-option-corps::before {
opacity: 1;
transform: none;
}
/* 7c. Les palettes : deux par rangée, les teintes au-dessus du nom.
À côté du nom, elles ne laissaient que 81 pixels à « Monochrome », qui
en demande 92. */
html body .ccsr.ccsr .ccsr-groupe-palettes .ccsr-options {
display: grid !important;
grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
gap: 8px !important;
}
html body .ccsr.ccsr .ccsr-groupe-palettes .ccsr-option:not( [hidden] ) {
display: block !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
}
html body .ccsr.ccsr .ccsr-groupe-palettes .ccsr-option-corps {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
height: 100%;
min-height: 0 !important;
padding: 11px 8px 10px !important;
border: 1px solid var( --ccsr-bord ) !important;
border-radius: 12px !important;
background: var( --ccsr-blanc ) !important;
box-shadow: none !important;
text-align: center !important;
}
html body .ccsr.ccsr .ccsr-groupe-palettes .ccsr-teintes {
flex: 0 0 auto;
margin: 0 !important;
}
html body .ccsr.ccsr .ccsr-groupe-palettes .ccsr-teintes i {
width: 15px !important;
height: 15px !important;
margin-left: -5px !important;
}
html body .ccsr.ccsr .ccsr-groupe-palettes .ccsr-teintes i:first-child {
margin-left: 0 !important;
}
html body .ccsr.ccsr .ccsr-groupe-palettes .ccsr-option-texte {
display: block !important;
min-width: 0;
padding: 0 !important;
text-align: center !important;
}
html body .ccsr.ccsr .ccsr-groupe-palettes .ccsr-option-nom {
font-size: .84rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
text-align: center !important;
color: var( --ccsr-encre ) !important;
}
html body .ccsr.ccsr .ccsr-groupe-palettes .ccsr-option > input:checked + .ccsr-option-corps {
border-color: var( --ccsr-sauge ) !important;
background: #F1F5F0 !important;
box-shadow: inset 0 0 0 1px var( --ccsr-sauge ) !important;
}
/* ---- 8. L'entente, en trois parties qui s'ouvrent ----
Une clause repliée garde sa place dans la numérotation : on ne la retire
pas de la page (le compteur la sauterait et la partie ouverte seule
recommencerait à « 1 »), on lui ôte seulement sa hauteur. */
html body .ccsr.ccsr .ccsr-conditions-liste.ccsr-repliable > li.ccsr-clause-repliee {
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
visibility: hidden !important;
}
html body .ccsr.ccsr .ccsr-conditions-liste.ccsr-repliable > li.ccsr-conditions-partie {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 10px 0 0 !important;
padding: 15px 16px !important;
border: 1px solid var( --ccsr-bord ) !important;
border-radius: 12px;
background: var( --ccsr-blanc );
font-family: var( --ccsr-serif ) !important;
font-size: 1.24rem !important;
font-weight: 500 !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
text-align: left !important;
text-transform: none !important;
color: var( --ccsr-sauge ) !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
html body .ccsr.ccsr .ccsr-conditions-liste.ccsr-repliable > li.ccsr-conditions-partie:first-child {
margin-top: 0 !important;
}
html body .ccsr.ccsr .ccsr-conditions-liste.ccsr-repliable > li.ccsr-conditions-partie.ccsr-partie-ouverte {
margin-bottom: 6px !important;
border-color: var( --ccsr-or ) !important;
}
html body .ccsr.ccsr .ccsr-conditions-liste.ccsr-repliable > li.ccsr-conditions-partie:focus-visible {
outline: 2px solid var( --ccsr-or );
outline-offset: 2px;
}
html body .ccsr.ccsr .ccsr-repliable .ccsr-partie-compte {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
font-family: var( --ccsr-sans );
font-size: .72rem;
font-weight: 500;
letter-spacing: .02em;
white-space: nowrap;
color: var( --ccsr-pale );
}
html body .ccsr.ccsr .ccsr-repliable .ccsr-partie-compte::after {
content: "";
width: 7px;
height: 7px;
margin: -4px 2px 0 0;
border-right: 2px solid var( --ccsr-or-fonce );
border-bottom: 2px solid var( --ccsr-or-fonce );
transform: rotate( 45deg );
transition: transform .2s;
}
html body .ccsr.ccsr .ccsr-repliable .ccsr-partie-ouverte .ccsr-partie-compte::after {
margin-top: 4px;
transform: rotate( -135deg );
}
/* Les trois questions de la fin : la question se lit tout de suite, ses
explications sur demande. Les réponses Oui et Non restent en vue. */
html body .ccsr.ccsr .ccsr-clause-choix .ccsr-texte-court > p:not( :first-child ) {
display: none;
}
html body .ccsr.ccsr .ccsr-lire-suite,
html body .ccsr.ccsr .ccsr-lire-suite:hover,
html body .ccsr.ccsr .ccsr-lire-suite:focus {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 2px 0 12px;
padding: 6px 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
font-family: var( --ccsr-sans );
font-size: .8rem;
font-weight: 600;
letter-spacing: .02em;
text-transform: none;
text-decoration: underline;
text-decoration-color: var( --ccsr-or );
text-underline-offset: 4px;
color: var( --ccsr-sauge );
cursor: pointer;
}
/* ---- 9. Le guide, replié ---- */
html body .ccsr.ccsr .ccsr-conseils.ccsr-conseils-replie .ccsr-conseils-liste,
html body .ccsr.ccsr .ccsr-conseils.ccsr-conseils-replie .ccsr-conseils-mot,
html body .ccsr.ccsr .ccsr-conseils.ccsr-conseils-replie .ccsr-conseils-imprimer {
display: none !important;
}
html body .ccsr.ccsr .ccsr-conseils.ccsr-conseils-replie .ccsr-conseils-tete {
margin-bottom: 0 !important;
}
html body .ccsr.ccsr .ccsr-conseils-ouvrir,
html body .ccsr.ccsr .ccsr-conseils-ouvrir:hover,
html body .ccsr.ccsr .ccsr-conseils-ouvrir:focus {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
min-height: 46px;
margin: 16px 0 0;
padding: 0 18px;
border: 1px solid var( --ccsr-sauge );
border-radius: 999px;
background: none;
box-shadow: none;
font-family: var( --ccsr-sans );
font-size: .72rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var( --ccsr-sauge );
cursor: pointer;
}
html body .ccsr.ccsr .ccsr-conseils-ouvrir::after {
content: "";
width: 7px;
height: 7px;
margin-top: -4px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate( 45deg );
}
html body .ccsr.ccsr .ccsr-conseils:not( .ccsr-conseils-replie ) .ccsr-conseils-ouvrir::after {
margin-top: 4px;
transform: rotate( -135deg );
}
}
/* Plus étroit encore : les noms de séance un cran plus petits, pour qu'ils
tiennent en deux lignes dans leur demi-colonne. */
@media ( max-width: 380px ) {
html body .ccsr.ccsr .ccsr-forfait-nom {
font-size: 1.06rem !important;
}
html body .ccsr.ccsr .ccsr-prix-tel {
font-size: .76rem !important;
}
html body .ccsr.ccsr .ccsr-barre-suite {
padding: 0 18px;
}
}
@media ( max-width: 640px ) and ( prefers-reduced-motion: reduce ) {
html body .ccsr.ccsr .ccsr-forfait-fiche:not( [hidden] ),
html body .ccsr.ccsr.ccsr-a-barre.ccsr-resume-ouvert .ccsr-resume,
html body .ccsr.ccsr .ccsr-voile:not( [hidden] ) {
animation: none;
}
html body .ccsr.ccsr .ccsr-barre {
transition: none;
}
}
/* =========================================================================
2.60.1 — Les titres à leur juste taille
=========================================================================
Relevé sur les cinq étapes, au téléphone et à l'ordinateur : quatre titres
de carte s'écrivaient à 22 px en poids 600 quand leurs pairs font 24 px en
500 ; le titre du récapitulatif de l'entente tombait à 16 px, écrasé par
une règle faite pour le texte des clauses ; les questions qui suivent une
réponse (« Quelque chose à ajouter à notre entente? ») restaient à 17 px ;
et la case « J'ai lu et j'accepte ces conditions » s'écrivait en
Montserrat gras à 19,5 px — plus massive à l'œil que tous les titres en
Cormorant de la page, dont l'œil est bien plus petit.
L'échelle, désormais :
— le titre d'une étape : 38 px à l'ordinateur, 30 au téléphone ;
— les titres de section (« Les combos », « Mes petits conseils », le nom
d'une séance dans sa fiche) : 27,5 px ;
— le titre d'une carte ou d'une question : 24 px, en poids 500 ;
— un titre dans une carte, une question qui suit une réponse : 21 px ;
— les noms des choix et des cases à cocher, en Montserrat : 15 à 16 px. */
html body .ccsr.ccsr .ccsr-clauses-titre,
html body .ccsr.ccsr .ccsr-quand-suite-titre,
html body .ccsr.ccsr p.ccsr-dabord-titre,
html body .ccsr.ccsr .ccsr-conditions h4 {
font-size: 1.5rem;
font-weight: 500;
line-height: 1.25;
}
html body .ccsr.ccsr .ccsr-suites-titre {
font-size: clamp( 1.5rem, 3vw, 1.72rem );
}
html body .ccsr.ccsr .ccsr-entente-recap .ccsr-entente-recap-titre {
font-size: 1.3rem;
line-height: 1.25;
}
html body .ccsr.ccsr .ccsr-champ.ccsr-suite-de > label {
font-size: 1.3rem !important;
font-weight: 500 !important;
line-height: 1.3 !important;
}
html body .ccsr.ccsr .ccsr-clause-case .ccsr-clause-titre {
font-size: 1rem;
line-height: 1.4;
}
/* -------------------------------------------------------------------------
2.60.1 — Les photos des conditions : celles du forfait choisi, deux au plus
---------------------------------------------------------------------- */
html body .ccsr.ccsr .ccsr-conditions-photos {
display: flex;
flex: 0 0 auto;
gap: 8px;
}
html body .ccsr.ccsr .ccsr-conditions-photos:not( :has( .ccsr-conditions-image:not( [hidden] ) ) ) {
display: none;
}
@media ( max-width: 620px ) {
html body .ccsr.ccsr .ccsr-conditions-photos {
width: 100%;
}
html body .ccsr.ccsr .ccsr-conditions-photos .ccsr-conditions-image {
flex: 1 1 0;
width: auto;
height: 140px;
}
}
/* -------------------------------------------------------------------------
2.60.1 — L'encadré du premier versement
---------------------------------------------------------------------- */
/* L'encadré portait la même classe que la zone de dépôt des photos
d'inspiration, et il en prenait le pointillé et le texte centré : les
tirets de la liste, alignés à gauche, tombaient sous un texte centré. Il
devient une carte : le titre et le montant au centre, puis les trois
gestes du virement, chacun avec son icône, alignés à gauche dans un
panneau crème. */
html body .ccsr.ccsr .ccsr-pas div.ccsr-depot,
html body .ccsr.ccsr .ccsr-pas div.ccsr-depot:hover {
display: block;
margin: 28px 0 0;
padding: 26px 24px 22px;
border: 1px solid var( --ccsr-bord );
border-top: 2px solid var( --ccsr-or );
border-radius: 14px;
background: var( --ccsr-blanc );
box-shadow: none;
text-align: center;
cursor: default;
}
html body .ccsr.ccsr div.ccsr-depot .ccsr-depot-titre {
margin: 0 0 10px;
font-family: var( --ccsr-serif );
font-size: 1.5rem;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
color: var( --ccsr-sauge );
}
html body .ccsr.ccsr div.ccsr-depot .ccsr-depot-titre strong {
display: block;
margin-top: 6px;
}
html body .ccsr.ccsr .ccsr-pas div.ccsr-depot > p:not( .ccsr-depot-titre ):not( .ccsr-aide ) {
max-width: 34em;
margin: 0 auto 18px;
font-size: .95rem;
line-height: 1.65;
color: var( --ccsr-doux );
}
html body .ccsr.ccsr div.ccsr-depot .ccsr-interac {
display: grid;
gap: 12px;
margin: 0 0 16px;
padding: 16px 18px;
border-radius: 12px;
background: var( --ccsr-papier );
list-style: none;
text-align: left;
font-size: .94rem;
line-height: 1.5;
}
html body .ccsr.ccsr .ccsr-pas div.ccsr-depot .ccsr-interac {
width: fit-content;
max-width: 100%;
margin: 0 auto 16px;
}
html body .ccsr.ccsr div.ccsr-depot .ccsr-interac > li {
position: relative;
display: block;
min-height: 30px;
margin: 0;
padding: 4px 0 2px 42px;
}
html body .ccsr.ccsr div.ccsr-depot .ccsr-interac > li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background: var( --ccsr-blanc ) center / 16px no-repeat;
box-shadow: inset 0 0 0 1px var( --ccsr-or );
}
html body .ccsr.ccsr div.ccsr-depot .ccsr-interac > li.ccsr-interac-adresse::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23354535' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E" );
}
html body .ccsr.ccsr div.ccsr-depot .ccsr-interac > li.ccsr-interac-securite::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23354535' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E" );
}
html body .ccsr.ccsr div.ccsr-depot .ccsr-interac > li.ccsr-interac-nom::before {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23354535' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E" );
}
/* L'adresse sur sa propre ligne, et jamais coupée. */
html body .ccsr.ccsr div.ccsr-depot .ccsr-interac strong {
display: block;
font-weight: 600;
white-space: nowrap;
color: var( --ccsr-sauge );
}
html body .ccsr.ccsr div.ccsr-depot .ccsr-aide {
margin: 0;
font-size: .84rem;
line-height: 1.55;
color: var( --ccsr-pale );
}
@media ( max-width: 640px ) {
/* Au téléphone, le panneau des gestes prend toute la largeur : ajusté à
son contenu, il coupait « le virement se dépose tout seul » en trois. */
html body .ccsr.ccsr .ccsr-pas div.ccsr-depot .ccsr-interac {
width: auto;
margin: 0 0 16px;
}
html body .ccsr.ccsr .ccsr-pas div.ccsr-depot,
html body .ccsr.ccsr .ccsr-pas div.ccsr-depot:hover {
padding: 24px 18px 20px;
}
}
/* 2.60.1 — « Comment m'avez-vous connue ? » : une petite icône au trait
au-dessus de chaque réponse. Sa couleur est donnée ici, et non héritée :
au téléphone, la pastille cochée garde la couleur crème de l'ordinateur
sur un fond pâle, et l'icône y devenait invisible. */
html body .ccsr.ccsr .ccsr-option-icone {
display: block;
width: 24px;
height: 24px;
margin: 0 auto 6px;
line-height: 0;
color: var(--ccsr-or-fonce);
}
html body .ccsr.ccsr .ccsr-option-icone svg {
display: block;
width: 100%;
height: 100%;
}
html body .ccsr.ccsr .ccsr-option > input:checked + .ccsr-option-corps .ccsr-option-icone {
color: var(--ccsr-or);
}
/* 2.60.1 — La précision d'une réponse vit dans la carte de sa question,
sous un filet, au lieu d'une carte à elle détachée plus bas. */
html body .ccsr.ccsr .ccsr-groupe > .ccsr-champ.ccsr-suite-de {
background: none !important;
border: 0 !important;
border-top: 1px solid var(--ccsr-bord) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 20px 0 0 !important;
margin: 22px 0 0 !important;
}
html body .ccsr.ccsr .ccsr-groupe > .ccsr-champ.ccsr-suite-de + .ccsr-champ.ccsr-suite-de {
margin-top: 18px !important;
}
html body .ccsr.ccsr .ccsr-groupe > p.ccsr-suite-de {
margin: 16px 0 0 !important;
}
@media ( max-width: 640px ) {
html body .ccsr.ccsr .ccsr-option-icone {
width: 22px;
height: 22px;
margin-bottom: 4px;
}
html body .ccsr.ccsr .ccsr-option > input:checked + .ccsr-option-corps .ccsr-option-icone {
color: var(--ccsr-sauge);
}
html body .ccsr.ccsr .ccsr-groupe > .ccsr-champ.ccsr-suite-de {
padding-top: 18px !important;
margin-top: 20px !important;
}
}
/* 2.60.1 — Une pastille cochée n'a pas de halo autour d'elle : le fond pâle
des réponses cochées (« :has(input:checked) ») passait devant la règle
des pastilles et dessinait une boîte autour de la pastille verte. */
html body .ccsr.ccsr .ccsr-groupe-pastilles .ccsr-option {
background: none;
}
/* =====================================================================
2.61 — « Et plus tard ? » en cartes égales (maquette A)
Une icône au trait dans un rond doré, le titre et sa ligne, la case à
droite. Deux colonnes sur ordinateur, une au téléphone ; la dernière
carte visible, si elle est seule sur sa rangée, prend toute la largeur.
================================================================== */
html body .ccsr.ccsr .ccsr-options.ccsr-interets.ccsr-interets-cartes {
display: grid !important;
grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
gap: 12px !important;
margin: 0 !important;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option:not( [hidden] ) {
position: relative;
display: block !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option:nth-child( odd of :not( [hidden] ) ):nth-last-child( 1 of :not( [hidden] ) ) {
grid-column: 1 / -1;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option > input {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
opacity: 0 !important;
pointer-events: none;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option-corps {
position: relative !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
height: 100%;
min-height: 84px !important;
padding: 14px 54px 14px 16px !important;
border: 1px solid var( --ccsr-bord ) !important;
border-radius: 12px !important;
background: var( --ccsr-papier ) !important;
box-shadow: none !important;
text-align: left !important;
cursor: pointer;
transition: border-color .2s, background-color .2s;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option:hover .ccsr-option-corps {
border-color: var( --ccsr-bord-fort ) !important;
}
/* La case, dessinée à droite */
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option-corps::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
right: 16px !important;
left: auto !important;
width: 22px !important;
height: 22px !important;
margin-top: -11px !important;
border: 1.5px solid #C9BBA3 !important;
border-radius: 6px !important;
background: var( --ccsr-blanc ) center / 14px no-repeat !important;
transition: background-color .2s, border-color .2s;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option > input:checked + .ccsr-option-corps {
border-color: var( --ccsr-sauge ) !important;
background: #EFF3EF !important;
box-shadow: none !important;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option > input:checked + .ccsr-option-corps::after {
border-color: var( --ccsr-sauge ) !important;
background-color: var( --ccsr-sauge ) !important;
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.8 3.8 8.2-9' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) !important;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option > input:focus-visible + .ccsr-option-corps {
outline: 2px solid var( --ccsr-or );
outline-offset: 2px;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-interet-icone {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var( --ccsr-or );
border-radius: 50%;
background: var( --ccsr-blanc );
color: var( --ccsr-or-fonce );
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-interet-icone svg {
display: block;
width: 22px;
height: 22px;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option-texte {
display: block !important;
flex: 1 1 auto;
min-width: 0;
padding: 0 !important;
text-align: left !important;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option-nom {
display: block !important;
margin: 0 !important;
font-family: var( --ccsr-sans ) !important;
font-size: .98rem !important;
font-weight: 600 !important;
line-height: 1.35 !important;
text-align: left !important;
color: var( --ccsr-encre ) !important;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option-detail {
display: block !important;
max-width: none !important;
margin: 3px 0 0 !important;
font-size: .86rem !important;
line-height: 1.45 !important;
text-align: left !important;
text-wrap: pretty !important;
color: var( --ccsr-doux ) !important;
}
@media ( max-width: 640px ) {
html body .ccsr.ccsr .ccsr-options.ccsr-interets.ccsr-interets-cartes {
grid-template-columns: minmax( 0, 1fr ) !important;
gap: 10px !important;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option-corps {
min-height: 0 !important;
gap: 12px !important;
padding: 12px 50px 12px 14px !important;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option-corps::after {
right: 14px !important;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-interet-icone {
width: 38px;
height: 38px;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-interet-icone svg {
width: 20px;
height: 20px;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option-nom {
font-size: .93rem !important;
}
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option-detail {
font-size: .84rem !important;
}
}
/* =====================================================================
2.61 — L'entente : l'essentiel d'abord (maquette A)
================================================================== */
/* L'encadré vert « Ce qu'il faut retenir » */
html body .ccsr.ccsr .ccsr-essentiel:not( [hidden] ) {
display: block;
margin: 0 0 18px;
padding: 18px 22px 16px;
border: 0;
border-left: 3px solid var( --ccsr-sauge );
border-radius: 0 12px 12px 0;
background: #EFF3EF;
}
html body .ccsr.ccsr .ccsr-essentiel .ccsr-essentiel-titre {
margin: 0 0 8px !important;
font-family: var( --ccsr-serif ) !important;
font-size: 1.35rem !important;
font-weight: 600 !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var( --ccsr-sauge ) !important;
}
html body .ccsr.ccsr .ccsr-essentiel .ccsr-clause-paliers {
display: grid;
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
gap: 6px 26px;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
list-style: none !important;
}
html body .ccsr.ccsr .ccsr-essentiel .ccsr-clause-paliers > li {
position: relative;
margin: 0 !important;
padding: 0 0 0 18px !important;
border: 0 !important;
background: none !important;
font-size: .9rem;
line-height: 1.5;
color: var( --ccsr-doux );
}
html body .ccsr.ccsr .ccsr-essentiel .ccsr-clause-paliers > li::before {
content: "" !important;
position: absolute;
top: .62em;
left: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var( --ccsr-or );
}
html body .ccsr.ccsr .ccsr-essentiel .ccsr-clause-paliers > li strong {
font-weight: 600;
color: var( --ccsr-encre );
}
@media ( max-width: 640px ) {
html body .ccsr.ccsr .ccsr-essentiel:not( [hidden] ) {
padding: 16px 16px 14px 18px;
}
html body .ccsr.ccsr .ccsr-essentiel .ccsr-essentiel-titre {
font-size: 1.25rem !important;
}
html body .ccsr.ccsr .ccsr-essentiel .ccsr-clause-paliers {
grid-template-columns: minmax( 0, 1fr );
gap: 7px;
}
}
/* Ce qui doit ressortir : souligné d'un trait doré, en gras */
html body .ccsr.ccsr .ccsr-clause-corps strong.ccsr-cle,
html body .ccsr.ccsr .ccsr-conditions-liste strong.ccsr-cle {
font-weight: 600;
color: var( --ccsr-encre );
background: linear-gradient( transparent 62%, #F1E3CB 62% );
}
html body .ccsr.ccsr .ccsr-essentiel strong.ccsr-cle {
background: none;
}
/* Les chiffres qui comptent, en pastille dorée */
html body .ccsr.ccsr .ccsr-chiffre {
display: inline-block;
padding: 0 8px;
border-radius: 999px;
background: #F3E7D4;
font-weight: 600;
font-size: .92em;
line-height: 1.6;
white-space: nowrap;
color: #6E5228;
}
html body .ccsr.ccsr .ccsr-clause-corps .ccsr-jeton[data-j="depot"]:not( :empty ),
html body .ccsr.ccsr .ccsr-clause-corps .ccsr-jeton[data-j="solde"]:not( :empty ),
html body .ccsr.ccsr .ccsr-clause-corps .ccsr-jeton[data-j="total"]:not( :empty ) {
display: inline-block;
padding: 0 8px;
border-radius: 999px;
background: #F3E7D4;
font-weight: 600;
font-size: .92em;
line-height: 1.6;
white-space: nowrap;
color: #6E5228;
}
/* Les trois parties, repliées sur ordinateur aussi (elles l'étaient déjà au
téléphone) : mêmes règles qu'au téléphone, sans la condition d'écran. */
html body .ccsr.ccsr .ccsr-conditions-liste.ccsr-repliable > li.ccsr-clause-repliee {
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
visibility: hidden !important;
}
html body .ccsr.ccsr .ccsr-conditions-liste.ccsr-repliable > li.ccsr-conditions-partie {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 10px 0 0 !important;
padding: 15px 18px !important;
border: 1px solid var( --ccsr-bord ) !important;
border-radius: 12px;
background: var( --ccsr-blanc );
font-family: var( --ccsr-serif ) !important;
font-size: 1.28rem !important;
font-weight: 500 !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
text-align: left !important;
text-transform: none !important;
color: var( --ccsr-sauge ) !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
html body .ccsr.ccsr .ccsr-conditions-liste.ccsr-repliable > li.ccsr-conditions-partie::before,
html body .ccsr.ccsr .ccsr-conditions-liste.ccsr-repliable > li.ccsr-conditions-partie::after {
display: none !important;
}
html body .ccsr.ccsr .ccsr-conditions-liste.ccsr-repliable > li.ccsr-conditions-partie:first-child {
margin-top: 0 !important;
}
html body .ccsr.ccsr .ccsr-conditions-liste.ccsr-repliable > li.ccsr-conditions-partie:hover {
border-color: var( --ccsr-bord-fort ) !important;
}
html body .ccsr.ccsr .ccsr-conditions-liste.ccsr-repliable > li.ccsr-conditions-partie.ccsr-partie-ouverte {
margin-bottom: 6px !important;
border-color: var( --ccsr-or ) !important;
}
html body .ccsr.ccsr .ccsr-conditions-liste.ccsr-repliable > li.ccsr-conditions-partie:focus-visible {
outline: 2px solid var( --ccsr-or );
outline-offset: 2px;
}
html body .ccsr.ccsr .ccsr-repliable .ccsr-partie-compte {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
font-family: var( --ccsr-sans );
font-size: .74rem;
font-weight: 500;
letter-spacing: .02em;
white-space: nowrap;
color: var( --ccsr-pale );
}
html body .ccsr.ccsr .ccsr-repliable .ccsr-partie-compte::after {
content: "";
width: 7px;
height: 7px;
margin: -4px 2px 0 0;
border-right: 2px solid var( --ccsr-or-fonce );
border-bottom: 2px solid var( --ccsr-or-fonce );
transform: rotate( 45deg );
transition: transform .2s;
}
html body .ccsr.ccsr .ccsr-repliable .ccsr-partie-ouverte .ccsr-partie-compte::after {
margin-top: 4px;
transform: rotate( -135deg );
}
/* Le passage en gras reste dans sa phrase : la feuille donne au titre d'une
clause (« li > strong ») un affichage en bloc, et le gras des clauses en
héritait — chaque passage sautait à la ligne. */
html body .ccsr.ccsr .ccsr-conditions-liste strong.ccsr-cle,
html body .ccsr.ccsr .ccsr-clause-corps strong.ccsr-cle,
html body .ccsr.ccsr .ccsr-essentiel strong.ccsr-cle {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
text-transform: none !important;
}
html body .ccsr.ccsr .ccsr-essentiel .ccsr-clause-paliers {
grid-template-columns: minmax( 0, 1fr );
gap: 7px;
}
@media ( max-width: 640px ) {
html body .ccsr.ccsr .ccsr-essentiel .ccsr-clause-paliers > li,
html body .ccsr.ccsr .ccsr-interets-cartes .ccsr-option-detail {
text-wrap: pretty !important;
}
}
/* =====================================================================
2.61 — « Mes petits conseils » : le sac et le jour J (maquette C)
Pour la prochaine séance, deux encadrés crème : ce qu'on met dans le
sac, en liste à cocher, et ce qu'il faut savoir, en lignes courtes.
L'un sous l'autre plutôt que côte à côte : avec les vrais conseils,
« Bon à savoir » est souvent deux ou trois fois plus long que le sac,
et côte à côte le sac laissait un grand vide. Chaque ligne s'ouvre
pour lire le conseil en entier. La séance d'après d'un combo se replie
dessous ; les suivantes tiennent sur une frise.
================================================================== */
html body .ccsr.ccsr .ccsr-cs-deux {
display: grid;
gap: 12px;
margin: 0;
}
html body .ccsr.ccsr .ccsr-cs-panneau:not( [hidden] ) {
display: block;
min-width: 0;
padding: 18px 22px 12px;
border-radius: 12px;
background: var( --ccsr-creme );
}
html body .ccsr.ccsr .ccsr-cs-panneau-titre {
display: flex !important;
align-items: center;
gap: 12px;
margin: 0 0 8px !important;
font-family: var( --ccsr-sans ) !important;
font-size: .98rem !important;
font-weight: 600 !important;
line-height: 1.35 !important;
letter-spacing: 0 !important;
text-align: left !important;
text-transform: none !important;
color: var( --ccsr-sauge ) !important;
}
html body .ccsr.ccsr .ccsr-cs-pour {
font-weight: 500;
color: var( --ccsr-sauge-clair );
}
html body .ccsr.ccsr .ccsr-cs-icone {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid var( --ccsr-or );
border-radius: 50%;
background: var( --ccsr-blanc );
color: var( --ccsr-or-fonce );
}
html body .ccsr.ccsr .ccsr-cs-icone svg {
display: block;
width: 18px;
height: 18px;
}
/* Les listes : le sac en colonnes de lignes courtes, le reste en deux
colonnes au plus. */
html body .ccsr.ccsr .ccsr-cs-liste {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 24rem, 1fr ) );
gap: 0 32px;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
html body .ccsr.ccsr .ccsr-cs-liste[data-cs="sac"] {
grid-template-columns: repeat( auto-fill, minmax( 17rem, 1fr ) );
gap: 0 28px;
}
/* Une ligne du sac ouverte : la liste passe sur une colonne, dans le même
ordre — un texte entier dans une colonne étroite faisait une tour. */
html body .ccsr.ccsr .ccsr-cs-liste[data-cs="sac"].ccsr-cs-une-ouverte {
grid-template-columns: minmax( 0, 1fr );
}
html body .ccsr.ccsr .ccsr-cs-liste[data-cs="sac"].ccsr-cs-une-ouverte > .ccsr-conseil {
max-width: calc( 46rem + 68px );
}
/* Une ligne : on défait ici la carte crème du guide d'avant (fond, trait
de famille à gauche, photo, titre en Cormorant). */
html body .ccsr.ccsr .ccsr-cs-liste > .ccsr-conseil {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
margin: 0 !important;
padding: 9px 38px 9px 22px !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
overflow: visible !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
html body .ccsr.ccsr .ccsr-cs-liste > .ccsr-conseil::before {
content: "" !important;
position: absolute;
top: calc( 9px + .62em );
bottom: auto;
left: 4px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var( --ccsr-or );
}
html body .ccsr.ccsr .ccsr-cs-liste[data-cs="sac"] > .ccsr-conseil {
padding-left: 30px !important;
}
html body .ccsr.ccsr .ccsr-cs-liste[data-cs="sac"] > .ccsr-conseil::before {
top: 11px;
left: 0;
width: 18px;
height: 18px;
border: 1.5px solid #C9BBA3;
border-radius: 5px;
background: var( --ccsr-blanc );
box-sizing: border-box;
}
html body .ccsr.ccsr .ccsr-cs-liste .ccsr-conseil-photo {
display: none !important;
}
html body .ccsr.ccsr .ccsr-cs-liste .ccsr-conseil-titre {
display: block !important;
margin: 0 !important;
font-family: var( --ccsr-sans ) !important;
font-size: .93rem !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var( --ccsr-encre ) !important;
}
html body .ccsr.ccsr .ccsr-cs-liste .ccsr-conseil-court {
display: block;
margin: 2px 0 0;
font-size: .87rem;
line-height: 1.5;
color: var( --ccsr-doux );
}
html body .ccsr.ccsr .ccsr-cs-liste .ccsr-conseil-court::first-letter {
text-transform: uppercase;
}
html body .ccsr.ccsr .ccsr-cs-liste .ccsr-conseil-sac,
html body .ccsr.ccsr .ccsr-cs-liste .ccsr-conseil-texte {
display: none !important;
}
/* Dans le sac, seul l'objet se lit : le titre et sa ligne attendent
qu'on ouvre. */
html body .ccsr.ccsr .ccsr-cs-liste[data-cs="sac"] .ccsr-conseil-titre,
html body .ccsr.ccsr .ccsr-cs-liste[data-cs="sac"] .ccsr-conseil-court {
display: none !important;
}
html body .ccsr.ccsr .ccsr-cs-liste[data-cs="sac"] .ccsr-conseil-sac {
display: block !important;
order: -1;
font-size: .93rem;
font-weight: 500;
line-height: 1.45;
text-wrap: balance;
color: var( --ccsr-encre );
}
/* Ouverte : le texte entier remplace la ligne courte. */
html body .ccsr.ccsr .ccsr-cs-liste .ccsr-cs-ouvert .ccsr-conseil-court {
display: none !important;
}
html body .ccsr.ccsr .ccsr-cs-liste .ccsr-cs-ouvert .ccsr-conseil-texte {
display: block !important;
max-width: 46rem;
margin: 4px 0 2px;
font-size: .87rem;
line-height: 1.6;
color: var( --ccsr-doux );
cursor: auto;
}
/* Le petit « + », qui devient « − » une fois ouvert. */
html body .ccsr.ccsr .ccsr-cs-plus,
html body .ccsr.ccsr .ccsr-cs-plus:hover,
html body .ccsr.ccsr .ccsr-cs-plus:focus {
position: absolute !important;
top: 7px;
right: 0;
width: 26px !important;
height: 26px !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid var( --ccsr-bord ) !important;
border-radius: 50% !important;
background: var( --ccsr-blanc ) !important;
box-shadow: none !important;
color: var( --ccsr-or-fonce ) !important;
cursor: pointer;
transition: border-color .2s;
}
html body .ccsr.ccsr .ccsr-cs-liste > .ccsr-conseil:hover .ccsr-cs-plus {
border-color: var( --ccsr-or ) !important;
}
html body .ccsr.ccsr .ccsr-cs-plus:focus-visible {
outline: 2px solid var( --ccsr-or ) !important;
outline-offset: 2px;
}
html body .ccsr.ccsr .ccsr-cs-plus::before,
html body .ccsr.ccsr .ccsr-cs-plus::after {
content: "" !important;
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 1.5px;
margin: -.75px 0 0 -5px;
border-radius: 1px;
background: currentColor;
transition: transform .2s;
}
html body .ccsr.ccsr .ccsr-cs-plus::after {
transform: rotate( 90deg );
}
html body .ccsr.ccsr .ccsr-cs-ouvert .ccsr-cs-plus::after {
transform: rotate( 0deg );
}
/* La séance d'après, repliée */
html body .ccsr.ccsr .ccsr-cs-apres:not( [hidden] ) {
display: block;
margin: 12px 0 0;
border: 1px solid var( --ccsr-bord );
border-radius: 12px;
background: var( --ccsr-blanc );
}
html body .ccsr.ccsr .ccsr-cs-apres > summary {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 52px 14px 20px;
list-style: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
html body .ccsr.ccsr .ccsr-cs-apres > summary::-webkit-details-marker {
display: none;
}
html body .ccsr.ccsr .ccsr-cs-apres > summary::marker {
content: "";
}
html body .ccsr.ccsr .ccsr-cs-apres > summary::after {
content: "";
position: absolute;
top: 50%;
right: 22px;
width: 8px;
height: 8px;
margin-top: -6px;
border-right: 2px solid var( --ccsr-or-fonce );
border-bottom: 2px solid var( --ccsr-or-fonce );
transform: rotate( 45deg );
transition: transform .2s, margin-top .2s;
}
html body .ccsr.ccsr .ccsr-cs-apres[open] > summary::after {
margin-top: -2px;
transform: rotate( -135deg );
}
html body .ccsr.ccsr .ccsr-cs-apres > summary:focus-visible {
outline: 2px solid var( --ccsr-or );
outline-offset: 2px;
border-radius: 12px;
}
html body .ccsr.ccsr .ccsr-cs-apres:hover {
border-color: var( --ccsr-bord-fort );
}
html body .ccsr.ccsr .ccsr-cs-apres-tete {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
html body .ccsr.ccsr .ccsr-cs-apres-sur {
font-family: var( --ccsr-sans );
font-size: .68rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var( --ccsr-or-texte, #8A6B3C );
}
html body .ccsr.ccsr .ccsr-cs-apres-nom {
font-family: var( --ccsr-serif );
font-size: 1.28rem;
font-weight: 600;
line-height: 1.25;
color: var( --ccsr-sauge );
}
html body .ccsr.ccsr .ccsr-cs-apres-quand {
flex: 0 0 auto;
font-size: .82rem;
line-height: 1.4;
white-space: nowrap;
color: var( --ccsr-pale );
}
html body .ccsr.ccsr .ccsr-cs-apres > .ccsr-cs-liste {
padding: 4px 20px 12px !important;
border-top: 1px solid var( --ccsr-bord ) !important;
}
/* La frise des séances, pour les combos de trois séances et plus */
html body .ccsr.ccsr .ccsr-cs-frise:not( [hidden] ) {
display: flex;
margin: 22px 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
html body .ccsr.ccsr .ccsr-cs-frise > li {
position: relative;
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
min-width: 0;
margin: 0 !important;
padding: 21px 4px 0 !important;
border: 0 !important;
background: none !important;
font-size: .8rem;
line-height: 1.35;
text-align: center;
color: var( --ccsr-pale );
}
html body .ccsr.ccsr .ccsr-cs-frise > li::before {
content: "" !important;
position: absolute;
top: 6px;
left: 0;
right: 0;
height: 1px;
background: var( --ccsr-or );
}
html body .ccsr.ccsr .ccsr-cs-frise > li:first-child::before {
left: 50%;
}
html body .ccsr.ccsr .ccsr-cs-frise > li:last-child::before {
right: 50%;
}
html body .ccsr.ccsr .ccsr-cs-frise > li::after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 13px;
height: 13px;
margin-left: -6.5px;
border: 2px solid var( --ccsr-or );
border-radius: 50%;
background: var( --ccsr-blanc );
box-sizing: border-box;
}
html body .ccsr.ccsr .ccsr-cs-frise > li.ccsr-cs-ici::after {
border-color: var( --ccsr-sauge );
background: var( --ccsr-sauge );
}
html body .ccsr.ccsr .ccsr-cs-frise b {
font-size: .86rem;
font-weight: 600;
color: var( --ccsr-encre );
}
html body .ccsr.ccsr .ccsr-cs-frise-mot:not( [hidden] ) {
display: block;
margin: 12px auto 0 !important;
max-width: 46rem;
font-size: .84rem;
line-height: 1.55;
text-align: center;
text-wrap: balance;
color: var( --ccsr-pale );
}
@media ( max-width: 640px ) {
html body .ccsr.ccsr .ccsr-cs-panneau:not( [hidden] ) {
padding: 16px 16px 10px;
}
html body .ccsr.ccsr .ccsr-cs-panneau-titre {
gap: 10px;
font-size: .95rem !important;
}
html body .ccsr.ccsr .ccsr-cs-icone {
width: 32px;
height: 32px;
}
html body .ccsr.ccsr .ccsr-cs-liste,
html body .ccsr.ccsr .ccsr-cs-liste[data-cs="sac"] {
grid-template-columns: minmax( 0, 1fr );
}
html body .ccsr.ccsr .ccsr-cs-liste .ccsr-conseil-court,
html body .ccsr.ccsr .ccsr-cs-liste .ccsr-cs-ouvert .ccsr-conseil-texte,
html body .ccsr.ccsr .ccsr-cs-frise-mot:not( [hidden] ) {
text-wrap: pretty;
}
html body .ccsr.ccsr .ccsr-cs-apres > summary {
display: block;
padding: 13px 46px 13px 16px;
}
html body .ccsr.ccsr .ccsr-cs-apres > summary::after {
right: 18px;
}
html body .ccsr.ccsr .ccsr-cs-apres-nom {
font-size: 1.18rem;
}
html body .ccsr.ccsr .ccsr-cs-apres-quand {
display: block;
margin-top: 3px;
white-space: normal;
}
html body .ccsr.ccsr .ccsr-cs-apres > .ccsr-cs-liste {
padding: 4px 16px 10px !important;
}
/* La frise, debout */
html body .ccsr.ccsr .ccsr-cs-frise:not( [hidden] ) {
flex-direction: column;
margin-top: 18px !important;
}
html body .ccsr.ccsr .ccsr-cs-frise > li {
flex-direction: row;
align-items: baseline;
flex-wrap: wrap;
gap: 0 8px;
padding: 6px 0 6px 26px !important;
text-align: left;
}
html body .ccsr.ccsr .ccsr-cs-frise > li::before {
top: 0;
bottom: 0;
left: 6px;
right: auto;
width: 1px;
height: auto;
}
html body .ccsr.ccsr .ccsr-cs-frise > li:first-child::before {
top: 50%;
left: 6px;
}
html body .ccsr.ccsr .ccsr-cs-frise > li:last-child::before {
bottom: 50%;
right: auto;
}
html body .ccsr.ccsr .ccsr-cs-frise > li::after {
top: 50%;
left: 0;
margin: -6.5px 0 0;
}
html body .ccsr.ccsr .ccsr-cs-frise-mot:not( [hidden] ) {
text-align: left;
}
}
/* Sur papier : tout s'ouvre. Le sac reste une liste à cocher, à la main
cette fois ; les autres conseils s'impriment en entier, sur deux
colonnes. La feuille d'impression remet chaque élément du guide à son
affichage d'origine (« display: revert »), d'où les « !important » ; et
chaque règle d'écran porte « html body .ccsr.ccsr », d'où ce préfixe un
cran plus fort. */
@media print {
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-deux {
display: block !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-panneau:not( [hidden] ) {
display: block !important;
margin: 0 0 5mm !important;
padding: 0 !important;
background: none !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-panneau-titre,
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-apres-nom {
display: block !important;
margin: 0 0 2.5mm !important;
padding: 0 0 1.5mm !important;
border-bottom: .5pt solid #D6AE7B !important;
font-family: "Cormorant Garamond", Georgia, serif !important;
font-size: 14pt !important;
font-weight: 600 !important;
color: #354535 !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-panneau-titre span {
font-family: inherit !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-pour {
display: inline !important;
font-weight: 500 !important;
}
/* Un titre ne reste jamais seul au bas d'une page. */
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-panneau-titre,
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-apres > summary {
break-after: avoid !important;
page-break-after: avoid !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-icone,
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-plus,
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-apres-sur,
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-apres-quand,
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-liste .ccsr-conseil-court,
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-liste .ccsr-conseil-photo {
display: none !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-apres:not( [hidden] ) {
display: block !important;
margin: 0 0 5mm !important;
border: 0 !important;
/* La séance d'après passe entière à la page suivante plutôt que de
laisser son titre seul au bas de la feuille. */
break-inside: avoid !important;
page-break-inside: avoid !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-apres > summary {
display: block !important;
padding: 0 !important;
list-style: none !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-apres > summary::after {
display: none !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-liste {
display: block !important;
columns: 2 !important;
column-gap: 9mm !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
list-style: none !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-liste > .ccsr-conseil {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
position: relative !important;
break-inside: avoid;
margin: 0 0 3.2mm !important;
padding: 0 0 0 5mm !important;
border: 0 !important;
background: none !important;
}
/* La feuille d'impression de 2.34 cachait le trait de famille de chaque
conseil (« ::before ») : ici, c'est la puce ou la case à cocher. */
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-liste > .ccsr-conseil::before {
display: block !important;
top: 1.4mm !important;
left: .6mm !important;
/* La puce dessinée par une bordure : le fond ne s'imprime pas quand
« Graphiques d'arrière-plan » est décoché, ce qui est le réglage
par défaut des navigateurs. */
width: 0 !important;
height: 0 !important;
border: .85mm solid #D6AE7B !important;
border-radius: 50% !important;
background: none !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-liste[data-cs="sac"] > .ccsr-conseil::before {
top: .5mm !important;
left: 0 !important;
width: 3.2mm !important;
height: 3.2mm !important;
border: .7pt solid #8C8378 !important;
border-radius: .6mm !important;
background: none !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-liste .ccsr-conseil-titre,
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-liste[data-cs="sac"] .ccsr-conseil-sac {
display: block !important;
margin: 0 0 .8mm !important;
font-family: "Montserrat", sans-serif !important;
font-size: 9.2pt !important;
font-weight: 600 !important;
line-height: 1.3 !important;
color: #2F2A24 !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-liste[data-cs="sac"] .ccsr-conseil-titre {
display: none !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-liste .ccsr-conseil-texte {
display: block !important;
margin: 0 !important;
font-family: "Montserrat", sans-serif !important;
font-size: 8.2pt !important;
line-height: 1.45 !important;
color: #5E5850 !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-frise:not( [hidden] ) {
display: flex !important;
margin: 2mm 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-frise > li {
display: flex !important;
flex: 1 1 0 !important;
flex-direction: column !important;
align-items: center !important;
font-size: 8pt !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-frise b,
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-frise span {
display: block !important;
}
html body.ccsr-impression-conseils .ccsr.ccsr .ccsr-cs-frise-mot:not( [hidden] ) {
display: block !important;
margin: 2mm 0 0 !important;
font-size: 8pt !important;
text-align: center !important;
color: #786F62 !important;
}
}
/* =====================================================================
2.61 — Le calendrier, à mes couleurs
Le champ de date du navigateur reste dessous, invisible : il porte la
valeur et l'envoi. Ce qu'on voit, c'est un bouton du même gabarit que
les autres champs, et sous lui un calendrier sauge, doré et crème.
================================================================== */
html body .ccsr.ccsr .ccsr-cal-natif {
position: absolute !important;
width: 1px !important;
height: 1px !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
clip-path: inset( 50% ) !important;
}
html body .ccsr.ccsr .ccsr-cal {
position: relative;
width: 100%;
}
html body .ccsr.ccsr .ccsr-cal-champ,
html body .ccsr.ccsr .ccsr-cal-champ:hover,
html body .ccsr.ccsr .ccsr-cal-champ:focus {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 12px 14px !important;
border: 1px solid #E1D3BC !important;
border-radius: var( --ccsr-rayon, 6px ) !important;
background: var( --ccsr-blanc ) !important;
box-shadow: none !important;
font-family: var( --ccsr-sans ) !important;
font-size: .98rem !important;
font-weight: 400 !important;
line-height: 1.5 !important;
letter-spacing: 0 !important;
text-align: left !important;
text-transform: none !important;
color: var( --ccsr-encre ) !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
html body .ccsr.ccsr .ccsr-cal-champ:hover {
border-color: var( --ccsr-bord-fort ) !important;
}
html body .ccsr.ccsr .ccsr-cal-champ:focus-visible,
html body .ccsr.ccsr .ccsr-cal-ouvert .ccsr-cal-champ {
border-color: var( --ccsr-or-fonce ) !important;
box-shadow: 0 0 0 3px rgba( 214, 174, 123, .22 ) !important;
outline: none !important;
}
html body .ccsr.ccsr .ccsr-cal-champ.ccsr-faux {
border-color: var( --ccsr-rouge ) !important;
}
html body .ccsr.ccsr .ccsr-cal-champ:disabled {
opacity: .55;
cursor: default;
}
html body .ccsr.ccsr .ccsr-cal-valeur {
min-width: 0;
font-family: inherit !important;
color: inherit;
}
html body .ccsr.ccsr .ccsr-cal-vide .ccsr-cal-valeur {
color: var( --ccsr-pale );
}
html body .ccsr.ccsr .ccsr-cal-icone {
display: grid;
flex: 0 0 auto;
color: var( --ccsr-or-fonce );
}
html body .ccsr.ccsr .ccsr-cal-icone svg {
display: block;
width: 20px;
height: 20px;
}
/* Le calendrier, dans le flux : il pousse ce qui suit plutôt que de
flotter par-dessus, ce qui le garde entier dans n'importe quelle carte. */
html body .ccsr.ccsr .ccsr-cal-panneau:not( [hidden] ) {
display: block;
width: 100%;
max-width: 340px;
margin: 8px 0 0;
padding: 14px 14px 10px;
border: 1px solid var( --ccsr-bord );
border-radius: 12px;
background: var( --ccsr-blanc );
box-shadow: 0 12px 28px rgba( 47, 42, 36, .10 );
box-sizing: border-box;
}
html body .ccsr.ccsr .ccsr-cal-tete {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0 0 6px;
}
html body .ccsr.ccsr .ccsr-cal-mois {
flex: 1 1 auto;
margin: 0 !important;
font-family: var( --ccsr-serif ) !important;
font-size: 1.3rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-align: center !important;
text-transform: none !important;
color: var( --ccsr-sauge ) !important;
}
html body .ccsr.ccsr .ccsr-cal-mois::first-letter {
text-transform: uppercase;
}
html body .ccsr.ccsr .ccsr-cal-fleche,
html body .ccsr.ccsr .ccsr-cal-fleche:hover,
html body .ccsr.ccsr .ccsr-cal-fleche:focus {
position: relative;
flex: 0 0 auto;
width: 36px !important;
height: 36px !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid var( --ccsr-bord ) !important;
border-radius: 50% !important;
background: var( --ccsr-blanc ) !important;
box-shadow: none !important;
color: var( --ccsr-or-fonce ) !important;
cursor: pointer;
}
html body .ccsr.ccsr .ccsr-cal-fleche:hover:not( :disabled ) {
border-color: var( --ccsr-or ) !important;
background: var( --ccsr-creme ) !important;
}
html body .ccsr.ccsr .ccsr-cal-fleche:focus-visible {
outline: 2px solid var( --ccsr-or ) !important;
outline-offset: 2px;
}
html body .ccsr.ccsr .ccsr-cal-fleche:disabled {
opacity: .35;
cursor: default;
}
html body .ccsr.ccsr .ccsr-cal-fleche::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin: -4px 0 0 -2px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate( 45deg );
}
html body .ccsr.ccsr .ccsr-cal-suiv::before {
margin-left: -6px;
transform: rotate( -135deg );
}
/* La grille : le thème raye les tableaux et les borde ; ici, rien. */
html body .ccsr.ccsr .ccsr-cal-grille {
width: 100% !important;
margin: 0 !important;
border: 0 !important;
border-collapse: collapse !important;
table-layout: fixed;
background: none !important;
}
html body .ccsr.ccsr .ccsr-cal-grille tr,
html body .ccsr.ccsr .ccsr-cal-grille td,
html body .ccsr.ccsr .ccsr-cal-grille th {
border: 0 !important;
background: none !important;
}
html body .ccsr.ccsr .ccsr-cal-grille th {
padding: 4px 0 6px !important;
font-family: var( --ccsr-sans ) !important;
font-size: .66rem !important;
font-weight: 600 !important;
letter-spacing: .08em !important;
text-align: center !important;
text-transform: uppercase !important;
color: var( --ccsr-or-texte, #8A6B3C ) !important;
}
html body .ccsr.ccsr .ccsr-cal-grille td {
padding: 2px !important;
text-align: center !important;
vertical-align: middle !important;
}
html body .ccsr.ccsr .ccsr-cal-jour,
html body .ccsr.ccsr .ccsr-cal-jour:hover,
html body .ccsr.ccsr .ccsr-cal-jour:focus {
display: grid !important;
place-items: center;
width: 100% !important;
max-width: 40px;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
aspect-ratio: 1;
margin: 0 auto !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: none !important;
box-shadow: none !important;
font-family: var( --ccsr-sans ) !important;
font-size: .9rem !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var( --ccsr-encre ) !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
html body .ccsr.ccsr .ccsr-cal-jour:hover:not( :disabled ) {
background: var( --ccsr-creme ) !important;
}
html body .ccsr.ccsr .ccsr-cal-jour.ccsr-cal-auj {
box-shadow: inset 0 0 0 1.5px var( --ccsr-or ) !important;
}
html body .ccsr.ccsr .ccsr-cal-jour[aria-pressed="true"],
html body .ccsr.ccsr .ccsr-cal-jour[aria-pressed="true"]:hover {
background: var( --ccsr-sauge ) !important;
box-shadow: none !important;
font-weight: 600 !important;
color: var( --ccsr-creme ) !important;
}
html body .ccsr.ccsr .ccsr-cal-jour:focus-visible {
outline: 2px solid var( --ccsr-or ) !important;
outline-offset: 1px;
}
html body .ccsr.ccsr .ccsr-cal-jour:disabled {
background: none !important;
color: #CFC5B5 !important;
cursor: default;
}
html body .ccsr.ccsr .ccsr-cal-pied:not( [hidden] ) {
display: block;
margin: 6px 0 0 !important;
text-align: center;
}
html body .ccsr.ccsr .ccsr-cal-effacer,
html body .ccsr.ccsr .ccsr-cal-effacer:hover,
html body .ccsr.ccsr .ccsr-cal-effacer:focus {
display: inline !important;
min-height: 0 !important;
margin: 0 !important;
padding: 4px 6px !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
font-family: var( --ccsr-sans ) !important;
font-size: .8rem !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-decoration: underline !important;
text-decoration-color: var( --ccsr-or ) !important;
text-underline-offset: 3px;
color: var( --ccsr-doux ) !important;
cursor: pointer;
}
@media ( max-width: 640px ) {
html body .ccsr.ccsr .ccsr-cal-panneau:not( [hidden] ) {
max-width: none;
}
html body .ccsr.ccsr .ccsr-cal-jour,
html body .ccsr.ccsr .ccsr-cal-jour:hover,
html body .ccsr.ccsr .ccsr-cal-jour:focus {
max-width: 44px;
}
}
/* L'heure convenue : des pastilles, l'heure puis les minutes. */
html body .ccsr.ccsr .ccsr-heure-panneau:not( [hidden] ) {
padding: 12px 14px 10px;
}
html body .ccsr.ccsr .ccsr-heure-etiquette {
margin: 0 0 6px !important;
font-family: var( --ccsr-sans ) !important;
font-size: .66rem !important;
font-weight: 600 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: var( --ccsr-or-texte, #8A6B3C ) !important;
}
html body .ccsr.ccsr .ccsr-heure-grille {
display: grid;
grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
gap: 6px;
margin: 0 0 12px;
}
html body .ccsr.ccsr .ccsr-heure-minutes {
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}
html body .ccsr.ccsr .ccsr-heure-choix,
html body .ccsr.ccsr .ccsr-heure-choix:hover,
html body .ccsr.ccsr .ccsr-heure-choix:focus {
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 8px 0 !important;
border: 1px solid var( --ccsr-bord ) !important;
border-radius: 999px !important;
background: var( --ccsr-blanc ) !important;
box-shadow: none !important;
font-family: var( --ccsr-sans ) !important;
font-size: .86rem !important;
font-weight: 500 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-align: center !important;
text-transform: none !important;
white-space: nowrap;
color: var( --ccsr-encre ) !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
html body .ccsr.ccsr .ccsr-heure-choix:hover {
border-color: var( --ccsr-or ) !important;
background: var( --ccsr-creme ) !important;
}
html body .ccsr.ccsr .ccsr-heure-choix[aria-pressed="true"],
html body .ccsr.ccsr .ccsr-heure-choix[aria-pressed="true"]:hover {
border-color: var( --ccsr-sauge ) !important;
background: var( --ccsr-sauge ) !important;
font-weight: 600 !important;
color: var( --ccsr-creme ) !important;
}
html body .ccsr.ccsr .ccsr-heure-choix:focus-visible {
outline: 2px solid var( --ccsr-or ) !important;
outline-offset: 2px;
}
/* =====================================================================
2.62 — Smash : « Qui sera sur les photos » en cartes à icônes (maquette B)
Les mêmes cartes que « Et plus tard ? » : l'icône au trait dans son rond
doré, le titre et sa ligne, la case à droite. Deux colonnes sur
ordinateur, une au téléphone. Le bloc est celui des intérêts, recopié
sélecteur pour sélecteur : les deux questions doivent rester jumelles.
================================================================== */
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-options {
display: grid !important;
grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
gap: 12px !important;
margin: 0 !important;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-option:not( [hidden] ) {
position: relative;
display: block !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-option:nth-child( odd of :not( [hidden] ) ):nth-last-child( 1 of :not( [hidden] ) ) {
grid-column: 1 / -1;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-option > input {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
opacity: 0 !important;
pointer-events: none;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-option-corps {
position: relative !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
height: 100%;
min-height: 84px !important;
padding: 14px 54px 14px 16px !important;
border: 1px solid var( --ccsr-bord ) !important;
border-radius: 12px !important;
background: var( --ccsr-papier ) !important;
box-shadow: none !important;
text-align: left !important;
cursor: pointer;
transition: border-color .2s, background-color .2s;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-option:hover .ccsr-option-corps {
border-color: var( --ccsr-bord-fort ) !important;
}
/* La case, dessinée à droite */
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-option-corps::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
right: 16px !important;
left: auto !important;
width: 22px !important;
height: 22px !important;
margin-top: -11px !important;
border: 1.5px solid #C9BBA3 !important;
border-radius: 6px !important;
background: var( --ccsr-blanc ) center / 14px no-repeat !important;
transition: background-color .2s, border-color .2s;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-option > input:checked + .ccsr-option-corps {
border-color: var( --ccsr-sauge ) !important;
background: #EFF3EF !important;
box-shadow: none !important;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-option > input:checked + .ccsr-option-corps::after {
border-color: var( --ccsr-sauge ) !important;
background-color: var( --ccsr-sauge ) !important;
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.8 3.8 8.2-9' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) !important;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-option > input:focus-visible + .ccsr-option-corps {
outline: 2px solid var( --ccsr-or );
outline-offset: 2px;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-carte-icone {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var( --ccsr-or );
border-radius: 50%;
background: var( --ccsr-blanc );
color: var( --ccsr-or-fonce );
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-carte-icone svg {
display: block;
width: 22px;
height: 22px;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-option-texte {
display: block !important;
flex: 1 1 auto;
min-width: 0;
padding: 0 !important;
text-align: left !important;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-option-nom {
display: block !important;
margin: 0 !important;
font-family: var( --ccsr-sans ) !important;
font-size: .98rem !important;
font-weight: 600 !important;
line-height: 1.35 !important;
text-align: left !important;
color: var( --ccsr-encre ) !important;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-option-detail {
display: block !important;
max-width: none !important;
margin: 3px 0 0 !important;
font-size: .86rem !important;
line-height: 1.45 !important;
text-align: left !important;
text-wrap: pretty !important;
color: var( --ccsr-doux ) !important;
}
@media ( max-width: 640px ) {
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-options {
grid-template-columns: minmax( 0, 1fr ) !important;
gap: 10px !important;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-option-corps {
min-height: 0 !important;
gap: 12px !important;
padding: 12px 50px 12px 14px !important;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-option-corps::after {
right: 14px !important;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-carte-icone {
width: 38px;
height: 38px;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-carte-icone svg {
width: 20px;
height: 20px;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-option-nom {
font-size: .93rem !important;
}
html body .ccsr.ccsr .ccsr-groupe-cartes .ccsr-option-detail {
font-size: .84rem !important;
}
}
html body .ccsr.ccsr .ccsr-groupe-cartes > .ccsr-suite-de {
margin-top: 14px !important;
}
/* =====================================================================
2.62 — « Je veux préparer ma séance suivante tout de suite » (option C)
La case vit dans le bloc crème des séances qui suivent : une carte
blanche, la case dessinée à gauche, comme dans la maquette C. Cochée,
elle passe au vert pâle de la palette.
================================================================== */
html body .ccsr.ccsr .ccsr-suites .ccsr-suites-case {
position: relative;
display: block !important;
margin: 20px 0 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
html body .ccsr.ccsr .ccsr-suites .ccsr-suites-case > input {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
opacity: 0 !important;
pointer-events: none;
}
html body .ccsr.ccsr .ccsr-suites .ccsr-suites-case .ccsr-option-corps {
position: relative !important;
display: block !important;
min-height: 0 !important;
padding: 16px 20px 16px 56px !important;
border: 1px solid var( --ccsr-bord ) !important;
border-radius: 12px !important;
background: var( --ccsr-blanc ) !important;
box-shadow: none !important;
text-align: left !important;
cursor: pointer;
transition: border-color .2s, background-color .2s;
}
html body .ccsr.ccsr .ccsr-suites .ccsr-suites-case:hover .ccsr-option-corps {
border-color: var( --ccsr-bord-fort ) !important;
}
html body .ccsr.ccsr .ccsr-suites .ccsr-suites-case .ccsr-option-corps::before {
content: "" !important;
position: absolute !important;
top: 17px !important;
left: 20px !important;
width: 22px !important;
height: 22px !important;
border: 1.5px solid #C9BBA3 !important;
border-radius: 6px !important;
background: var( --ccsr-blanc ) center / 14px no-repeat !important;
transition: background-color .2s, border-color .2s;
}
html body .ccsr.ccsr .ccsr-suites .ccsr-suites-case .ccsr-option-corps::after {
content: none !important;
}
html body .ccsr.ccsr .ccsr-suites .ccsr-suites-case > input:checked + .ccsr-option-corps {
border-color: var( --ccsr-sauge ) !important;
background: #EFF3EF !important;
}
html body .ccsr.ccsr .ccsr-suites .ccsr-suites-case > input:checked + .ccsr-option-corps::before {
border-color: var( --ccsr-sauge ) !important;
background-color: var( --ccsr-sauge ) !important;
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.8 3.8 8.2-9' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) !important;
}
html body .ccsr.ccsr .ccsr-suites .ccsr-suites-case > input:focus-visible + .ccsr-option-corps {
outline: 2px solid var( --ccsr-or );
outline-offset: 2px;
}
html body .ccsr.ccsr .ccsr-suites .ccsr-suites-case .ccsr-option-texte {
display: block !important;
padding: 0 !important;
text-align: left !important;
}
html body .ccsr.ccsr .ccsr-suites .ccsr-suites-case .ccsr-option-nom {
display: block !important;
margin: 0 !important;
font-family: var( --ccsr-sans ) !important;
font-size: 1rem !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-align: left !important;
color: var( --ccsr-encre ) !important;
}
html body .ccsr.ccsr .ccsr-suites .ccsr-suites-case .ccsr-option-detail {
display: block !important;
max-width: none !important;
margin: 4px 0 0 !important;
font-size: .9rem !important;
line-height: 1.5 !important;
text-align: left !important;
text-wrap: pretty !important;
color: var( --ccsr-doux ) !important;
}
@media ( max-width: 640px ) {
html body .ccsr.ccsr .ccsr-suites .ccsr-suites-case .ccsr-option-corps {
padding: 14px 16px 14px 50px !important;
}
html body .ccsr.ccsr .ccsr-suites .ccsr-suites-case .ccsr-option-corps::before {
top: 15px !important;
left: 16px !important;
}
html body .ccsr.ccsr .ccsr-suites .ccsr-suites-case .ccsr-option-nom {
font-size: .95rem !important;
}
html body .ccsr.ccsr .ccsr-suites .ccsr-suites-case .ccsr-option-detail {
font-size: .86rem !important;
}
}
/* =====================================================================
2.62 — Les questions de la séance suivante, sur l'écran de remerciement
Une bande crème qui traverse la carte du merci d'un bord à l'autre :
on sait tout de suite qu'on parle d'autre chose que de la réservation
qu'on vient d'envoyer. Dedans, les questions ont exactement l'allure du
formulaire, et la largeur qu'il leur faut au téléphone.
================================================================== */
html body .ccsr.ccsr .ccsr-merci .ccsr-merci-prep {
margin: clamp( 30px, 5vw, 46px ) calc( -1 * clamp( 28px, 5vw, 46px ) );
padding: clamp( 30px, 5vw, 48px ) clamp( 18px, 5vw, 46px );
border-top: 1px solid var( --ccsr-bord );
border-bottom: 1px solid var( --ccsr-bord );
background: var( --ccsr-creme );
text-align: left;
}
html body .ccsr.ccsr .ccsr-merci .ccsr-merci-prep .ccsr-prep-titre {
margin: 6px 0 0;
font-size: clamp( 1.8rem, 4.6vw, 2.5rem );
color: var( --ccsr-sauge );
}
html body .ccsr.ccsr .ccsr-merci .ccsr-merci-prep .ccsr-prep-intro {
max-width: 46rem;
text-wrap: pretty;
}
html body .ccsr.ccsr .ccsr-merci .ccsr-merci-prep .ccsr-inspirations .ccsr-depot {
text-align: center;
}
html body .ccsr.ccsr .ccsr-merci .ccsr-merci-prep .ccsr-prep-autres {
margin-top: 34px;
}
/* Le premier versement, juste sous les questions : sa phrase reprend la
largeur et le centrage des mots du merci. */
html body .ccsr.ccsr .ccsr-merci .ccsr-merci-prep + .ccsr-merci-mot {
margin-top: 0;
}
/* =====================================================================
2.62 — Les photos coups de cœur, sur la page qui prépare une séance
Les styles du dépôt du formulaire s'appliquent tels quels ; seul l'air
au-dessus change, la case suit « Un mot pour moi ».
================================================================== */
html body .ccsr .ccsr-prep-photos {
margin-top: 22px;
}
/* Dans le formulaire d'une séance à venir, la case qui suit la dernière
question n'est pas une carte à part : « Qui sera là, cette fois? » se
lisait dans un cadre blanc, et l'animal, juste dessous, sans cadre. Les
quatre dernières cases ont la même allure. */
html body .ccsr .ccsr-prep-form .ccsr-groupe + .ccsr-champ:not( .ccsr-suite-de ) {
padding: 0 !important;
border: 0;
border-radius: 0;
background: none;
}
html body .ccsr .ccsr-prep-form > .ccsr-champ {
margin-top: 22px;
}
/* 2.62 — « Dans votre dossier : … — Modifier » : replié, le résumé tient
seul. Les grilles des réponses, posées plus haut avec « !important »,
gardaient les réponses visibles sous le résumé : la cliente qui revient
voyait ses réponses deux fois, et « Modifier » semblait ne rien faire. */
html body .ccsr.ccsr .ccsr-groupe.ccsr-groupe.ccsr-replie > .ccsr-options,
html body .ccsr.ccsr .ccsr-groupe.ccsr-groupe.ccsr-replie > .ccsr-aide {
display: none !important;
}
/* =====================================================================
2.62 — L'économie des combos, dans l'or du logo
Le sceau des combos prenait un or de métal : un dégradé à cinq arrêts,
avec un creux sombre au milieu, plus dur que tout le reste du site. Il
prend maintenant celui du sceau du logo et de la Boutique du pied de
page — de #E8CA9E à #D6AF7C, presque à plat —, avec le filet crème du
logo à l'intérieur. Au survol de la carte, le même reflet que la
Boutique passe une fois. La version en ligne du téléphone suit.
================================================================== */
html body .ccsr .ccsr-rabais-coin,
html body .ccsr .ccsr-rabais-tel {
background-color: #E0BD8E;
background-image:
linear-gradient( 120deg, transparent 35%, rgba( 255, 255, 255, .45 ) 50%, transparent 65% ),
linear-gradient( 100deg, #E8CA9E 0%, #E0BD8E 50%, #D6AF7C 100% );
background-size: 250% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: 130% 0, 0 0;
transition: background-position .75s ease;
}
html body .ccsr .ccsr-rabais-coin {
box-shadow: 0 3px 10px rgba( 63, 79, 69, .13 );
}
html body .ccsr .ccsr-rabais-coin::before {
content: "";
position: absolute;
inset: 4px;
border: 1px solid rgba( 255, 250, 240, .72 );
border-radius: 50%;
pointer-events: none;
}
html body .ccsr .ccsr-rabais-tel {
box-shadow: inset 0 0 0 1px rgba( 255, 250, 240, .6 );
}
html body .ccsr .ccsr-forfait:hover .ccsr-rabais-coin,
html body .ccsr .ccsr-forfait:hover .ccsr-rabais-tel,
html body .ccsr .ccsr-forfait:focus-within .ccsr-rabais-coin,
html body .ccsr .ccsr-forfait:focus-within .ccsr-rabais-tel {
background-position: -30% 0, 0 0;
}
@media ( prefers-reduced-motion: reduce ) {
html body .ccsr .ccsr-rabais-coin,
html body .ccsr .ccsr-rabais-tel {
transition: none;
}
}
/* @@ 2.60 téléphone — fin @@ */
/* Finitions mobiles : titres lisibles, consentements contenus et fin de page plus courte. */
html body .ccsr.ccsr .ccsr-bandeau-reprise[hidden] { display: none !important; }
html body .ccsr.ccsr .ccsr-clause-conditions { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px 12px; }
html body .ccsr.ccsr .ccsr-clause-conditions > .ccsr-clause-texte { grid-column: 1 / -1; display: block; margin: 0; }
html body .ccsr.ccsr .ccsr-ouinon .ccsr-option, html body .ccsr.ccsr .ccsr-ouinon .ccsr-option-corps { min-width: 0 !important; max-width: 100%; box-sizing: border-box; }
html body .ccsr.ccsr .ccsr-ouinon .ccsr-option-nom { white-space: normal !important; overflow-wrap: normal; hyphens: none; }
@media (max-width: 767px) {
html body .ccsr.ccsr .ccsr-corps { padding-bottom: 24px; }
html body .ccsr.ccsr.ccsr-a-barre .ccsr-form { padding-bottom: 16px; }
html body .ccsr.ccsr .ccsr-pieds { margin-bottom: 0 !important; }
html body .ccsr.ccsr .ccsr-pas-titre, html body .ccsr.ccsr .ccsr-groupe-titre { text-wrap: balance; }
html body .ccsr.ccsr .ccsr-titre-envies > span { display: block; }
html body .ccsr.ccsr .ccsr-bandeau-reprise { padding: 16px 18px !important; gap: 12px; }
html body .ccsr.ccsr .ccsr-bandeau-reprise > p:first-child { font-size: 15px !important; line-height: 1.55 !important; text-wrap: balance; }
html body .ccsr.ccsr .ccsr-bandeau-gestes { gap: 12px 16px; }
html body .ccsr.ccsr .ccsr-bandeau-gestes button { min-height: 32px; text-align: left; line-height: 1.4 !important; letter-spacing: .08em !important; }
html body .ccsr.ccsr .ccsr-clause-conditions > .ccsr-clause-texte { font-size: 15px !important; line-height: 1.5 !important; text-wrap: pretty; }
html body .ccsr.ccsr .ccsr-ouinon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html body .ccsr.ccsr .ccsr-ouinon .ccsr-option { padding: 12px 10px !important; gap: 8px !important; }
html body .ccsr.ccsr .ccsr-ouinon .ccsr-option-corps { padding: 0 !important; flex: 1; }
html body .ccsr.ccsr .ccsr-ouinon .ccsr-option-nom { font-size: 15px !important; line-height: 1.45 !important; }
html body .ccsr.ccsr .ccsr-ouinon input { width: 18px !important; height: 18px !important; flex: 0 0 18px; margin: 2px 0 0 !important; }
html body .ccsr.ccsr .ccsr-groupe-tuiles .ccsr-option-nom { text-wrap: balance; }
}
/* Les fiches mobiles montrent la photographie entière : aucun visage coupé par une arche. */
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-photo-mobile { display: none; }
@media (max-width: 767px) {
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-visuel > .ccsr-fiche-arche { height: auto !important; min-height: 0; aspect-ratio: auto !important; border-radius: 14px; background-image: none !important; overflow: hidden; }
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-photo-mobile { display: block; position: static; width: 100%; max-width: 100%; height: auto !important; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; object-fit: contain; }
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-arche.ccsr-image-duo > .ccsr-duo-haut,
html body .ccsr.ccsr .ccsr-forfait-fiche .ccsr-fiche-arche.ccsr-image-duo > .ccsr-duo-bas { position: static; height: auto; border-radius: 0; background-image: none !important; }
}
/* 2.62.7 — Les modes de paiement se lisent sur plusieurs lignes, comme du texte. */
html body .ccsr.ccsr .ccsr-resume .ccsr-recap-total .ccsr-recap-modes {
display: block;
min-width: 0;
}
html body .ccsr.ccsr .ccsr-resume .ccsr-recap-total .ccsr-recap-modes > span,
html body .ccsr.ccsr .ccsr-resume .ccsr-recap-total .ccsr-recap-modes > strong {
display: block;
min-width: 0;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
text-align: left;
}
html body .ccsr.ccsr .ccsr-resume .ccsr-recap-total .ccsr-recap-modes > span { margin-bottom: 4px; }
/* Des pictogrammes informatifs, sans contour de bouton ou de case à cocher. */
html body .ccsr.ccsr div.ccsr-depot .ccsr-interac > li::before {
border: 0;
border-radius: 0;
background-color: transparent;
background-size: 21px;
box-shadow: none;
}
html body .ccsr.ccsr div.ccsr-depot .ccsr-interac strong {
white-space: normal;
overflow-wrap: anywhere;
}
html body .ccsr.ccsr [data-groupe="lumiere"].ccsr-moment-sans-soir { --ccsr-colonnes: 2 !important; }
html body .ccsr.ccsr [data-groupe="lumiere"].ccsr-moment-sans-soir .ccsr-moment-pm { grid-column: auto; }
/* Lecture d'un forfait : voile forestier, deux zones restent intactes. */
html body .ccsr-detail-voile{position:fixed;inset:0;width:100%;height:100%;z-index:2147483000;pointer-events:none;display:block;overflow:hidden}
html body .ccsr-detail-voile[hidden]{display:none!important}
html body .ccsr-detail-voile path{fill:rgba(22,29,22,.66);pointer-events:visiblePainted;cursor:pointer}
html body.ccsr-detail-en-lecture .ccsr .ccsr-voile{display:none!important}
html body .ccsr.ccsr .ccsr-forfait.ccsr-forfait-ouvert{outline:1px solid #C9B48F!important;outline-offset:2px;border-color:#C9B48F!important;box-shadow:0 2px 16px rgba(53,69,53,.07)!important}
html body .ccsr.ccsr .ccsr-forfait-ouvert .ccsr-voir-detail:focus-visible{outline:1px solid #A8834F;outline-offset:4px}