/*
 * La vitrine de Clinalo.
 *
 * Meme charte que l'application, et c'est le point : un praticien qui passe du
 * site a l'outil ne doit pas avoir l'impression de changer de maison. Les
 * jetons sont donc recopies a l'identique depuis `src/app.css` - c'est la seule
 * duplication assumee entre les deux depots, parce qu'un import croise
 * obligerait la vitrine a construire pour servir trois pages.
 *
 * Aucune police distante, aucun script tiers, aucune mesure d'audience. Un site
 * qui vend le fait de ne rien envoyer nulle part ne peut pas charger une police
 * chez Google.
 */

:root {
	--encre: #1a1d1c;
	--encre-douce: #4a524f;
	--encre-pale: #7b8481;
	--papier: #f7f6f3;
	--papier-creuse: #efeee9;
	--papier-vif: #fffefb;
	--cabinet: #1f4b47;
	--cabinet-clair: #2f6a64;
	--cabinet-voile: #e4ecea;
	--vigilance: #a6412f;
	--vigilance-voile: #f7e9e5;
	--trait: #dcd9d1;
	--trait-appuye: #c3bfb4;
	--serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
	--sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--rayon: 3px;
	--colonne: 62rem;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--papier);
	color: var(--encre);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--serif);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 0.6rem;
}

h1 {
	font-size: clamp(2rem, 5vw, 3rem);
}
h2 {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	margin-top: 0;
}
h3 {
	font-size: 1.12rem;
}

p {
	margin: 0 0 1rem;
}

a {
	color: var(--cabinet);
	text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--cabinet);
	outline-offset: 3px;
}

.enveloppe {
	max-width: var(--colonne);
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* Bandeau ---------------------------------------------------------------- */

header.bandeau {
	border-bottom: 1px solid var(--trait);
	background: var(--papier-vif);
}

.bandeau .enveloppe {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.8rem;
	flex-wrap: wrap;
}

.marque {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none;
	color: var(--encre);
	font-family: var(--serif);
	font-size: 1.2rem;
	font-weight: 600;
}

.bandeau nav {
	display: flex;
	gap: 0.3rem;
	align-items: center;
	flex-wrap: wrap;
}

.bandeau nav a {
	text-decoration: none;
	color: var(--encre-douce);
	padding: 0.35rem 0.7rem;
	border-radius: var(--rayon);
	font-size: 0.97rem;
}

.bandeau nav a:hover {
	background: var(--papier-creuse);
	color: var(--cabinet);
}

/* Boutons ---------------------------------------------------------------- */

.bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	font-size: 1rem;
	padding: 0.6rem 1.1rem;
	border-radius: var(--rayon);
	border: 1px solid var(--trait-appuye);
	background: var(--papier-vif);
	color: var(--encre);
}

.bouton:hover {
	border-color: var(--cabinet);
	color: var(--cabinet);
}

.bouton.premier {
	background: var(--cabinet);
	border-color: var(--cabinet);
	color: var(--papier-vif);
}

.bouton.premier:hover {
	background: var(--cabinet-clair);
	border-color: var(--cabinet-clair);
	color: var(--papier-vif);
}

/* Sections --------------------------------------------------------------- */

section {
	padding-block: 3rem;
}

section.creuse {
	background: var(--papier-creuse);
	border-block: 1px solid var(--trait);
}

.hero {
	padding-block: 4.5rem 3.5rem;
}

.hero p.tete {
	font-size: 1.2rem;
	color: var(--encre-douce);
	max-width: 40rem;
}

.actions {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

.grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.1rem;
}

.carte {
	background: var(--papier-vif);
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	padding: 1.2rem 1.3rem;
}

.carte h3 {
	margin-bottom: 0.35rem;
}

.carte p:last-child {
	margin-bottom: 0;
}

.appui {
	border-left: 3px solid var(--cabinet);
	background: var(--cabinet-voile);
	padding: 1rem 1.2rem;
	border-radius: var(--rayon);
}

.refus {
	border-left: 3px solid var(--vigilance);
	background: var(--vigilance-voile);
	padding: 1rem 1.2rem;
	border-radius: var(--rayon);
	color: #6f2b1e;
}

.mesure {
	font-size: 0.92rem;
	color: var(--encre-pale);
}

ul.liste {
	padding-left: 1.1rem;
	margin: 0 0 1rem;
}

ul.liste li {
	margin-bottom: 0.35rem;
}

table {
	width: 100%;
	border-collapse: collapse;
	background: var(--papier-vif);
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	font-size: 0.96rem;
}

th,
td {
	text-align: left;
	padding: 0.6rem 0.8rem;
	border-bottom: 1px solid var(--trait);
	vertical-align: top;
}

th {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--encre-douce);
}

tr:last-child td {
	border-bottom: 0;
}

/* Prix ------------------------------------------------------------------- */

.prix {
	font-family: var(--serif);
	font-size: 2.6rem;
	line-height: 1;
	display: block;
	margin-bottom: 0.2rem;
}

/* Questions -------------------------------------------------------------- */

details {
	background: var(--papier-vif);
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	padding: 0.85rem 1.1rem;
	margin-bottom: 0.6rem;
}

summary {
	cursor: pointer;
	font-weight: 600;
}

details[open] summary {
	margin-bottom: 0.6rem;
}

/* Pied ------------------------------------------------------------------- */

footer {
	border-top: 1px solid var(--trait);
	background: var(--papier-vif);
	padding-block: 2rem;
	font-size: 0.92rem;
	color: var(--encre-douce);
}

footer nav {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 0.8rem;
}

/* Pages de texte --------------------------------------------------------- */

.texte {
	max-width: 44rem;
	padding-block: 3rem;
}

.texte h2 {
	margin-top: 2rem;
}

.texte h3 {
	margin-top: 1.4rem;
}

/*
 * Utilitaires d'espacement.
 *
 * Ils existent parce que la CSP de ce site declare `style-src 'self'`, ce qui
 * bloque AUSSI l'attribut `style="..."` et pas seulement les balises <style>.
 * Un ajustement ecrit en ligne serait donc ignore en production alors qu'il
 * fonctionne en local : le defaut ne se verrait qu'apres deploiement.
 */
.sans-marge {
	margin: 0;
}
.haut-court {
	margin-top: 1rem;
}
.haut {
	margin-top: 1.5rem;
}
.haut-long {
	margin-top: 2.5rem;
}
.bas-court {
	margin-bottom: 0.6rem;
}
.sans-bas {
	margin-bottom: 0;
}
.bloc {
	margin: 2rem 0;
}
.centre {
	text-align: center;
}
.etroit {
	max-width: 34rem;
	margin: 0 auto 1.4rem;
}
.colonne-motif {
	width: 32%;
}