/* ========================================================= Template « Lily » — site vitrine sophrologue Feuille de style unique. Deux axes de personnalisation, tous deux poses sur par le build : data-palette = sauge | argile | brume data-typo = editorial | geometrique Le client choisit une combinaison complete, pas les deux axes separement. ========================================================= */ /* ---------- 1. Jetons ---------- */ /* Chaque palette ne redefinit que sept valeurs de base ; tout le reste de la feuille en derive et suit automatiquement. */ :root, [data-palette="sauge"]{ --bg:#FAF6F0; --bg-alt:#EFE6D8; --ink-rgb:44 42 36; /* #2C2A24 */ --ink-soft:#5C584E; --accent-rgb:110 122 92; /* #6E7A5C sauge */ --accent-deep:#545E45; --accent-2:#C98F6E; /* argile, usage rare */ } /* Chaude, terre cuite dominante. */ [data-palette="argile"]{ --bg:#FAF5F1; --bg-alt:#F0E2D8; --ink-rgb:46 38 34; /* #2E2622 */ --ink-soft:#645449; --accent-rgb:169 97 74; /* #A9614A terre cuite */ --accent-deep:#88452F; --accent-2:#7C876A; /* sauge sourde */ } /* Gris-bleu, plus clinique : lumiere froide, contrastes nets. */ [data-palette="brume"]{ --bg:#F7F8F9; --bg-alt:#E6ECEF; --ink-rgb:32 39 44; /* #20272C */ --ink-soft:#55616B; --accent-rgb:88 111 125; /* #586F7D brume */ --accent-deep:#3F5462; --accent-2:#A98F79; /* sable */ } /* Editorial : serif a fort caractere, italique pour les intitules. */ :root, [data-typo="editorial"]{ --display:"Fraunces",Georgia,"Times New Roman",serif; --text:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --eyebrow-style:italic; --eyebrow-family:var(--display); --display-weight:500; } /* Geometrique moderne : deux sans, intitules en romain. */ [data-typo="geometrique"]{ --display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --eyebrow-style:normal; --eyebrow-family:var(--text); --display-weight:600; } :root{ /* couleurs derivees — ne pas redefinir palette par palette */ --ink:rgb(var(--ink-rgb)); --accent:rgb(var(--accent-rgb)); /* Niveaux de gris du texte. Plancher fixe par le contraste : en dessous de .70, les petites mentions (.t-small, legendes, pied de page) passent sous le seuil WCAG AA de 4.5 sur --bg comme sur --bg-alt. */ --ink-70:rgb(var(--ink-rgb) / .78); --ink-55:rgb(var(--ink-rgb) / .70); --line:rgb(var(--ink-rgb) / .12); --line-soft:rgb(var(--ink-rgb) / .07); --accent-wash:rgb(var(--accent-rgb) / .06); --accent-line:rgb(var(--accent-rgb) / .30); --on-accent:#fff; --on-accent-70:rgb(255 255 255 / .82); /* ombres douces : jamais la meme sur deux blocs voisins */ --shadow-lift:0 18px 40px -20px rgb(var(--ink-rgb) / .35); --shadow-rest:0 14px 34px -22px rgb(var(--ink-rgb) / .30); --gut:clamp(2rem,4vw,3.5rem); --pad:6vw; /* Echelle d'espacement. Un seul jeu de valeurs pour toute la feuille : les ecarts se choisissent dedans, jamais au juge. */ --space-xs:0.5rem; --space-sm:0.75rem; --space-md:1rem; --space-lg:1.5rem; --space-xl:2rem; --space-2xl:2.5rem; --space-3xl:3rem; /* Rythme entre sections majeures. Porte par une marge entre sections voisines, et non par le padding de chacune : une section qui remet son padding a zero ne peut plus creer un raccord sans aucun blanc. */ --space-section:clamp(3rem,6vw,5rem); --max:1400px; --radius:3px; } /* ---------- 2. Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--text); font-weight:400; font-size:1rem; line-height:1.68; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} main > * + *{margin-top:var(--space-section)} /* Flux vertical A L'INTERIEUR d'une section. La regle ci-dessus ne couvre que les enfants directs de
: dans un .wrap, les blocs empiles (intitule, grille de cartes, note de bas de section) se retrouvaient colles a 0 px. Les conteneurs de mise en page sont exclus — leurs enfants sont des cases de grille, une marge les decalerait au lieu de les espacer. */ .section > .wrap:not(.split):not(.duo-split) > * + *{margin-top:var(--space-xl)} /* Apres une grille de cartes de hauteurs inegales, il faut degager davantage : le bloc suivant doit passer sous la plus haute sans la fraler. */ .section > .wrap:not(.split):not(.duo-split) > .cards + *{margin-top:var(--space-2xl)} .section{padding-block:0} .section--first,.section--flush{padding-block:0} .skip-link{ position:absolute;left:-9999px;top:0;z-index:60; background:var(--accent-deep);color:var(--on-accent); padding:.75rem 1.25rem; } .skip-link:focus{left:1rem;top:1rem} :focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px} /* ---------- 3. Typographie ---------- */ h1,h2,h3,h4,.t-display,.t-h1,.t-h2,.t-h3{ font-family:var(--display); font-weight:var(--display-weight); letter-spacing:-.014em; line-height:1.14; margin:0; color:var(--ink); } [data-typo="editorial"] h1, [data-typo="editorial"] h2, [data-typo="editorial"] .t-display, [data-typo="editorial"] .t-h1, [data-typo="editorial"] .t-h2{font-variation-settings:"opsz" 96} .t-display{font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.08;letter-spacing:-.022em;text-wrap:balance} .t-h1{font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.12;letter-spacing:-.02em;text-wrap:balance} .t-h2{font-size:clamp(1.6rem,2.7vw,2.2rem);text-wrap:balance} .t-h3{font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.28;text-wrap:balance} p{margin:0 0 1.15em} p:last-child{margin-bottom:0} /* Ecarts verticaux entre elements voisins, tous pris dans l'echelle. Titre -> chapo : sm. Titre -> texte : md. Texte -> bouton : lg. */ h1+.t-lead,h2+.t-lead,.t-display+.t-lead,.t-h1+.t-lead,.t-h2+.t-lead{margin-top:var(--space-sm)} h1+p,h2+p,h3+p,.t-display+p,.t-h1+p,.t-h2+p,.t-h3+p{margin-top:var(--space-md)} h1+.t-body,h2+.t-body,h3+.t-body,.t-h1+.t-body,.t-h2+.t-body{margin-top:var(--space-md)} .eyebrow+*,.label+*{margin-top:0} /* Bloc d'action. Porte une classe explicite plutot que de dependre du voisinage : c'est l'ecart qui manquait entre le texte et le bouton. */ .actions{margin-top:var(--space-lg)} .actions>.btn+.btn,.actions>.btn+.link{margin-left:var(--space-md)} .t-lead+.hero-actions,p+.hero-actions,*+.hero-actions{margin-top:var(--space-xl)} .t-lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--ink-70);line-height:1.62} .t-body{color:var(--ink-70)} .t-small{font-size:.9375rem;line-height:1.6;color:var(--ink-55)} em,.t-italic{font-style:italic} .ital{font-family:var(--display);font-style:italic} .measure{max-width:34em} /* Intitule de section. Casse normale — jamais de capitales forcees. */ .label,.eyebrow{ font-family:var(--eyebrow-family); font-style:var(--eyebrow-style); font-size:1rem; font-weight:500; letter-spacing:0; color:var(--accent-deep); margin:0 0 1.25rem; } /* ---------- 4. Liens & boutons ---------- */ a{color:inherit} .link{ display:inline-block; font-size:.9375rem; color:var(--accent-deep); text-decoration:none; /* currentColor : le soulignement suit exactement la couleur du texte, donc le meme contraste que lui. */ border-bottom:1px solid currentColor; padding-bottom:3px; transition:border-color .2s,color .2s; } .link:hover{color:var(--ink);border-bottom-color:var(--ink)} .btn{ display:inline-block; font-family:var(--text); font-size:.9375rem; font-weight:600; line-height:1; /* Cible tactile : >= 44 px de haut, et de l'air autour du libelle. */ min-height:2.75rem; padding:1.15rem 2.1rem; border:1px solid var(--accent-deep); border-radius:2px; background:var(--accent-deep); color:var(--on-accent); text-decoration:none; transition:background .2s,border-color .2s,color .2s; } .btn:hover{background:var(--ink);border-color:var(--ink)} .btn-sm{padding:.85rem 1.5rem;font-size:.875rem;min-height:2.5rem} /* Bouton secondaire. Sa bordure prend la couleur d'accent : a --line (12 % d'encre) elle tombait a 1.25:1, sous le minimum de 3:1 exige par WCAG 1.4.11 pour le contour d'un composant — le bouton etait invisible. */ .btn-ghost{ background:transparent;color:var(--accent-deep);border-color:var(--accent-deep); } .btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)} .btn-on-dark{background:transparent;border-color:rgb(255 255 255 / .78);color:#fff} .btn-on-dark:hover{background:#fff;border-color:#fff;color:var(--ink)} /* ---------- 5. En-tete ---------- */ .site-header{position:relative;z-index:20;background:var(--bg)} .header-inner{ display:flex;align-items:center;justify-content:space-between;gap:var(--gut); padding-block:1.75rem; } .brand{text-decoration:none;line-height:1.2} .brand-name{ display:block;font-family:var(--display);font-style:italic; font-size:1.15rem;font-weight:var(--display-weight);letter-spacing:-.012em; } [data-typo="geometrique"] .brand-name{font-style:normal} .brand-role{display:block;font-size:.8125rem;color:var(--ink-55);margin-top:.15rem} .brand-logo{max-height:2.5rem;width:auto} .site-nav{display:flex;align-items:center;gap:2.25rem} .site-nav ul{display:flex;gap:2.25rem;list-style:none;margin:0;padding:0} /* Cible les seuls liens du menu : le bouton d'appel, lui, est en dehors du