/* ==========================================================================
   Pharmacie de Cugy — nouveau design (handoff 26.10.2026). Socle commun.
   Flat design : aucune ombre, aucune bordure de carte, aucun arrondi décoratif.
   Les zones se distinguent par la couleur de fond ; filets 1px uniquement dans les listes.
   ========================================================================== */

:root {
	--cd-bg: #faf8f3;          /* fond de page (crème) */
	--cd-white: #ffffff;
	--cd-grey: #eeeeec;        /* sections mises en avant, contact */
	--cd-sand: #f3ead8;        /* bloc citation équipe */
	--cd-pale: #e6ecdd;        /* encarts « L'essentiel », CTA */
	--cd-green: #2e6b2a;       /* primaire */
	--cd-green-hover: #1f4d1d;
	--cd-green-off: #9fb59c;
	--cd-dark: #14301b;        /* titres, footer */
	--cd-text: #16241a;
	--cd-text-2: #2f3d31;
	--cd-text-3: #46524a;
	--cd-eyebrow: #6b5a2e;
	--cd-eyebrow-2: #5a4a22;
	--cd-rule: #c9c2b0;
	--cd-rule-form: #dcdad3;
	--cd-input: #8a8577;
	--cd-footer-text: #e3ecdb;
	--cd-footer-text-2: #c9d6c0;
	--cd-footer-rule: #3a5641;
	--cd-alert: #8a3b2a;
	--cd-alert-title: #6e2c1f;
	--cd-heading: 'Jost', sans-serif;
	--cd-body: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
	--cd-container: 1120px;
	--cd-section: clamp(56px, 10vw, 104px);
	--cd-block: clamp(22px, 5vw, 32px);
	--cd-zoom: 1;
}
html[data-cd-text="l"]  { --cd-zoom: 1.15; }
html[data-cd-text="xl"] { --cd-zoom: 1.3; }

/* ─── Base ─────────────────────────────────────────────────────────────── */
body.cd { margin: 0; background: var(--cd-bg); color: var(--cd-text); font-family: var(--cd-body); font-weight: 400; font-size: 19px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
.cd *, .cd *::before, .cd *::after { box-sizing: border-box; }
.cd-wrap { zoom: var(--cd-zoom); }
.cd :where(a) { color: var(--cd-green); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cd :where(a):hover { color: var(--cd-green-hover); }
.cd :where(h1, h2, h3, h4) { font-family: var(--cd-heading); font-weight: 400; margin: 0; color: var(--cd-dark); line-height: 1.2; }
.cd :where(strong) { font-weight: 500; }
.cd :where(p) { margin: 0; text-wrap: pretty; }
.cd :where(img) { max-width: 100%; }
.cd :where(button) { font: inherit; }
.cd :focus-visible { outline: 3px solid #b9d3a8; outline-offset: 2px; }

.cd-skip { position: absolute; left: -9999px; top: 0; background: var(--cd-dark); color: #fff; padding: 12px 20px; z-index: 100; }
.cd-skip:focus { left: 16px; top: 16px; }

/* ─── Typographie ───────────────────────────────────────────────────────── */
.cd-h1 { font-size: clamp(36px, 5.2vw, 62px); line-height: 1.12; text-wrap: balance; }
.cd-h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.2; text-wrap: balance; }
.cd-h2--sm { font-size: clamp(26px, 3vw, 34px); }
.cd-h3 { font-size: 24px; font-weight: 500; line-height: 1.3; }
.cd-h3--lg { font-size: 26px; }
.cd-h3--light { font-weight: 400; }
.cd-eyebrow { margin: 0; font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cd-eyebrow); font-weight: 400; }
.cd-eyebrow--light { color: #fff; font-weight: 500; }
.cd-lead { font-size: 21px; color: var(--cd-text-2); }
.cd-lead--xl { font-size: 22px; color: var(--cd-dark); }
.cd-muted { color: var(--cd-text-2); }
.cd-muted-3 { color: var(--cd-text-3); }
.cd-small { font-size: 17px; }
.cd-xs { font-size: 16px; }
.cd-max-56 { max-width: 56ch; }
.cd-max-52 { max-width: 52ch; }
.cd-max-42 { max-width: 42ch; }
.cd-max-36 { max-width: 36ch; }
.cd-center { text-align: center; }

/* ─── Mise en page ─────────────────────────────────────────────────────── */
.cd-container { max-width: var(--cd-container); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.cd-section { padding: var(--cd-section) 0; }
.cd-section--white { background: var(--cd-white); }
.cd-section--grey  { background: var(--cd-grey); }
.cd-section--sand  { background: var(--cd-sand); }
.cd-section--pale  { background: var(--cd-pale); }
.cd-section--green { background: var(--cd-green); color: #fff; }
.cd-section--tight { padding: clamp(40px, 6vw, 64px) 0; }
.cd-section-head { display: flex; flex-direction: column; gap: 16px; }
.cd-stack { display: flex; flex-direction: column; gap: 16px; }
.cd-stack--lg { gap: 24px; }
.cd-stack--xl { gap: 28px; }
.cd-stack--sm { gap: 10px; }
.cd-stack--xs { gap: 6px; }
.cd-mb { margin-bottom: clamp(28px, 5vw, 56px); }
.cd-mb-sm { margin-bottom: 16px; }
.cd-mb-md { margin-bottom: clamp(36px, 5vw, 64px); }

/* Grilles fluides : --min règle la largeur minimale des colonnes. */
.cd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 320px)), 1fr)); gap: var(--gap, 24px); align-items: var(--align, start); }
.cd-grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 320px)), 1fr)); }
.cd-grid--center { --align: center; }
.cd-grid--cols { --gap: clamp(32px, 6vw, 80px); }
.cd-grid--2x { --min: 400px; }
.cd-grid--text { --min: 400px; --gap: 16px 64px; }

/* Blocs : distinction par le fond uniquement. */
.cd-block { padding: var(--cd-block); background: var(--cd-white); display: flex; flex-direction: column; gap: 10px; }
.cd-block--grey { background: var(--cd-grey); }
.cd-block--sand { background: var(--cd-sand); }
.cd-block--pale { background: var(--cd-pale); }
.cd-block--lg { padding: clamp(22px, 5vw, 40px); }
.cd-block--gap { gap: 16px; }
.cd-block--gap-lg { gap: 20px; }
.cd-block--row { flex-direction: row; flex-wrap: wrap; }

/* Split texte / image (2 colonnes, centrées verticalement). */
.cd-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 400px)), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }

/* ─── Boutons et liens ─────────────────────────────────────────────────── */
.cd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; background: var(--cd-green); color: #fff; border: 0; border-radius: 4px; font: inherit; font-weight: 400; text-decoration: none; cursor: pointer; transition: background .2s ease, color .2s ease; }
.cd-btn:hover { background: var(--cd-green-hover); color: #fff; }
.cd-btn--secondary { background: transparent; color: var(--cd-green); border: 1.5px solid var(--cd-green); }
.cd-btn--secondary:hover { background: var(--cd-green); color: #fff; }
.cd-btn--white { background: #fff; color: var(--cd-dark); font-weight: 500; }
.cd-btn--white:hover { background: var(--cd-grey); color: var(--cd-dark); }
.cd-btn--block { display: flex; width: 100%; min-height: 54px; }
.cd-btn--tall { min-height: 54px; }
.cd-btn[disabled], .cd-btn--disabled { background: var(--cd-green-off); cursor: not-allowed; pointer-events: none; }
.cd-link { color: var(--cd-green); }
.cd-link--light { color: #fff; }
.cd-link--light:hover { color: var(--cd-pale); }
.cd-actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.cd-actions--between { justify-content: space-between; }
.cd-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--cd-green); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ─── Listes ───────────────────────────────────────────────────────────── */
.cd-rows { display: flex; flex-direction: column; }
.cd-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--cd-rule); }
.cd-row:last-child { border-bottom: 1px solid var(--cd-rule); }
.cd-row strong { text-align: right; }
.cd-rows--form .cd-row { padding: 10px 0; border-color: var(--cd-rule-form); }
.cd-rows--form .cd-row:first-child { border-top: 0; }
.cd-rows--form .cd-row:last-child { border-bottom: 0; }
.cd-rows--open .cd-row:last-child { border-bottom: 0; }

.cd-list-check { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cd-list-check li { display: flex; gap: 14px; align-items: baseline; }
.cd-list-check__mark { color: var(--cd-green); flex: none; }

.cd-list-num { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.cd-list-num li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--cd-rule); }
.cd-list-num li:last-child { border-bottom: 1px solid var(--cd-rule); }
.cd-list-num__n { font-family: var(--cd-heading); font-size: 22px; color: var(--cd-eyebrow); line-height: 1.4; }

.cd-list-rule { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.cd-list-rule li { padding: 14px 0; border-top: 1px solid var(--cd-rule); }
.cd-list-rule li:last-child { border-bottom: 1px solid var(--cd-rule); }

.cd-linklist { display: flex; flex-direction: column; }
.cd-linklist__item { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 14px 4px; border-top: 1px solid var(--cd-rule); color: var(--cd-text); text-decoration: none; transition: padding-left .2s ease, color .2s ease; }
.cd-linklist__item:hover { color: var(--cd-green); padding-left: 10px; }
.cd-linklist__label { display: flex; align-items: center; gap: 14px; }
.cd-linklist__arrow { color: var(--cd-green); font-size: 22px; line-height: 1; }

.cd-picto { width: var(--cd-picto, 44px); height: var(--cd-picto, 44px); object-fit: contain; flex: none; display: block; }
.cd-picto--plus { border-radius: 50%; background: var(--cd-pale); display: grid; place-items: center; color: var(--cd-green); font-size: calc(var(--cd-picto, 44px) * .5); line-height: 1; }

/* Tuiles-liens (accueil : autres prestations). */
.cd-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.cd-tile { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; padding: 12px 20px; background: var(--cd-white); color: var(--cd-dark); text-decoration: none; transition: background .2s ease, color .2s ease; }
.cd-tile:hover { background: var(--cd-green); color: #fff; }

/* ─── Médias ───────────────────────────────────────────────────────────── */
.cd-media { overflow: hidden; width: 100%; background: var(--cd-pale); }
.cd-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.cd-media:hover img { transform: scale(1.04); }
.cd-media--4x5 { aspect-ratio: 4 / 5; max-width: 380px; }
.cd-media--3x2 { aspect-ratio: 3 / 2; }
.cd-media--5x2 { aspect-ratio: 5 / 2; }
.cd-media--1 { aspect-ratio: 1; }
.cd-media--circle { aspect-ratio: 1; border-radius: 50%; background: var(--cd-sand); }
.cd-media--circle img { border-radius: 50%; transition: transform .6s ease; }
.cd-media--circle:hover img { transform: scale(1.06); }
.cd-media--static:hover img { transform: none; }
/* Portraits verticaux de l'équipe (visage dans le tiers supérieur) : cadrage vers le haut dans les ronds et les 4/5. */
.cd-media img[src*="/portrait-"], .cd-media img[src*="youssef-pharmacien"] { object-position: 50% 18%; }

/* ─── Fil d'Ariane, navigation de fiche ────────────────────────────────── */
.cd-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 16px; color: var(--cd-text-3); padding-top: clamp(24px, 5vw, 40px); }
.cd-breadcrumb a { color: var(--cd-text-3); }
.cd-breadcrumb__current { color: var(--cd-text); }
.cd-pagenav { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }

/* ─── CTA centré ───────────────────────────────────────────────────────── */
.cd-cta { max-width: 760px; text-align: center; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.cd-cta__text { max-width: 52ch; }

/* ─── Formulaires ──────────────────────────────────────────────────────── */
.cd-field { display: flex; flex-direction: column; gap: 6px; font-size: 17px; }
.cd-field input, .cd-field textarea, .cd-field select,
.cd-input { width: 100%; font: inherit; font-size: 19px; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--cd-input); border-radius: 4px; background: var(--cd-white); color: var(--cd-text); }
.cd-field textarea { padding: 12px 14px; min-height: 120px; resize: vertical; }
.cd-field input:focus, .cd-field textarea:focus, .cd-field select:focus { outline: 2px solid var(--cd-green); outline-offset: 1px; border-color: var(--cd-green); }
.cd-field__req { color: var(--cd-alert); }
.cd-field__hint { align-self: flex-end; font-size: 15px; color: var(--cd-text-3); }

/* ─── En-tête ──────────────────────────────────────────────────────────── */
.cd-header { background: var(--cd-white); }
.cd-header__in { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; padding-top: clamp(16px, 4vw, 24px); padding-bottom: clamp(16px, 4vw, 24px); }
.cd-header__logo { display: flex; align-items: center; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.cd-header__logo img { height: 48px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; display: block; }
.cd-header__wordmark { font-family: var(--cd-heading); font-size: 24px; font-weight: 500; color: var(--cd-green); white-space: nowrap; }
.cd-nav { display: flex; flex-wrap: nowrap; gap: 32px; font-size: 17px; margin-left: auto; white-space: nowrap; }
.cd-nav a { color: var(--cd-text); text-decoration: none; padding: 6px 0; }
/* Desktop étroit (1024–1199 px) : espacements réduits pour tenir sur une ligne. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
	.cd-header__in { gap: 12px 20px; }
	.cd-nav { gap: 20px; font-size: 16px; }
	.cd-header__tools { gap: 12px; }
	.cd-header__app { padding: 0 14px; font-size: 15px; }
}
.cd-nav a:hover, .cd-nav a[aria-current="page"] { color: var(--cd-green); }
.cd-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.cd-header__tools { display: flex; align-items: center; gap: 16px; flex: none; }
.cd-header__app { min-height: 44px; padding: 0 18px; font-size: 16px; }
.cd-burger { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; background: transparent; border: 1.5px solid var(--cd-green); border-radius: 4px; color: var(--cd-green); font: inherit; font-size: 16px; cursor: pointer; }
.cd-burger[aria-expanded="true"] { background: var(--cd-green); color: #fff; }
.cd-burger__icon { position: relative; width: 20px; height: 2px; background: currentColor; display: block; }
.cd-burger__icon::before, .cd-burger__icon::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; }
.cd-burger__icon::before { top: -6px; }
.cd-burger__icon::after { top: 6px; }
.cd-burger[aria-expanded="true"] .cd-burger__icon { background: transparent; }
.cd-burger[aria-expanded="true"] .cd-burger__icon::before { top: 0; transform: rotate(45deg); }
.cd-burger[aria-expanded="true"] .cd-burger__icon::after { top: 0; transform: rotate(-45deg); }
.cd-mobile-menu { display: none; }
.cd-mobile-menu[hidden] { display: none; }
.cd-textsize { display: flex; gap: 2px; }
.cd-textsize button { min-width: 44px; min-height: 44px; padding: 0 8px; background: transparent; border: 1.5px solid transparent; border-radius: 4px; color: var(--cd-text-3); cursor: pointer; font-family: var(--cd-heading); font-size: 17px; line-height: 1; }
.cd-textsize button sup { font-size: 11px; }
.cd-textsize button:hover { color: var(--cd-green); }
.cd-textsize button[aria-pressed="true"] { border-color: var(--cd-green); color: var(--cd-green); }

/* ─── Pied de page, barre mobile ───────────────────────────────────────── */
.cd-footer { background: var(--cd-dark); color: var(--cd-footer-text); padding: 56px 0 48px; }
.cd-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 36px 56px; }
.cd-footer__col { display: flex; flex-direction: column; gap: 6px; font-size: 17px; }
.cd-footer__col strong { color: #fff; font-weight: 500; }
.cd-footer__col a { color: #fff; }
.cd-footer__title { font-size: 24px; color: #fff; margin-bottom: 4px; }
.cd-footer__bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--cd-footer-rule); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 15px; color: var(--cd-footer-text-2); }
.cd-footer__bottom a { color: #fff; }
.cd-mobilebar { display: none; }

/* En-tête compact (mobile et tablette, < 1024 px) : logo + bouton Menu ; navigation, mapharmacie.app et
   taille du texte dans le menu dépliant ou réservés au desktop. */
@media (max-width: 1023.98px) {
	.cd-nav { display: none; }
	.cd-header__app { display: none; } /* repris dans le menu dépliant */
	.cd-burger { display: inline-flex; }
	.cd-header__in { gap: 8px 16px; }
	.cd-textsize { display: none; } /* réglage de la taille du texte : desktop uniquement */
	.cd-header__tools { margin-left: auto; }
	/* Menu dépliant : liens pleine largeur, filets, boutons en bas. */
	.cd-mobile-menu:not([hidden]) { display: flex; flex-direction: column; border-top: 1px solid var(--cd-rule); padding: 8px 20px 20px; background: var(--cd-white); }
	.cd-mobile-menu > a { display: flex; align-items: center; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--cd-rule); color: var(--cd-text); text-decoration: none; font-size: 19px; }
	.cd-mobile-menu > a[aria-current="page"] { color: var(--cd-green); }
	.cd-mobile-menu__ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
	.cd-mobile-menu__ctas .cd-btn { max-width: 360px; }
}
@media (max-width: 719.98px) {
	.cd-header__logo img { height: 40px; }
	/* Logo large (Pharmacie du Mont) : il cède la place au bouton Menu au lieu de déborder. */
	.cd-header__in { gap: 12px 16px; }
	.cd-burger { flex: none; }
	.cd-footer { padding-bottom: calc(48px + 80px); }
	.cd-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(250, 248, 243, .96); border-top: 1px solid var(--cd-rule); display: flex; gap: 12px; }
	.cd-mobilebar .cd-btn { flex: 1; font-size: 18px; padding: 0 12px; }
	/* Badge reCAPTCHA (formulaire de contact) : au-dessus de la barre mobile. */
	.cd .grecaptcha-badge { bottom: 92px !important; }
}

/* ─── Contenu WordPress (articles) ─────────────────────────────────────── */
.cd-prose { font-size: 20px; line-height: 1.75; color: var(--cd-text); }
.cd-prose > * { margin-top: 0; margin-bottom: 0; }
.cd-prose > * + * { margin-top: 20px; }
.cd-prose > h2, .cd-prose > h3, .cd-prose > h4 { margin-top: 56px; }
.cd-prose > h2 + *, .cd-prose > h3 + *, .cd-prose > h4 + * { margin-top: 16px; }
.cd-prose h2 { font-size: clamp(26px, 3vw, 32px); line-height: 1.25; text-wrap: balance; }
.cd-prose h3 { font-size: 24px; font-weight: 500; line-height: 1.3; }
.cd-prose h4 { font-size: 21px; font-weight: 500; }
.cd-prose h2 strong, .cd-prose h3 strong, .cd-prose h4 strong { font-weight: inherit; }
.cd-prose ul, .cd-prose ol { padding-left: 24px; }
.cd-prose li + li { margin-top: 8px; }
.cd-prose em { font-style: italic; }
.cd-prose img { height: auto; display: block; }
.cd-prose figure { margin: 0; }
.cd-prose blockquote { margin: 0; padding: 24px 28px; background: var(--cd-pale); font-family: var(--cd-heading); font-weight: 300; font-size: 24px; line-height: 1.4; }
.cd-essential { background: var(--cd-pale); padding: 24px 28px; font-size: 18px; }
.cd-essential > strong { display: block; margin-bottom: 8px; color: var(--cd-dark); }
.cd-essential ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.cd-alert { border: 1.5px solid var(--cd-alert); padding: 24px 28px; background: var(--cd-white); font-size: 18px; }
.cd-alert h2, .cd-alert > strong { font-family: var(--cd-heading); font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0 0 10px; color: var(--cd-alert-title); display: block; }
.cd-alert ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* Mentions WordPress que les gabarits ne doivent pas afficher. */
.cd .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }