/*
Theme Name: Dr Anderes – ORL & Esthétique
Theme URI: https://www.orl-esthetique-borderouge.com/
Description: Thème sur mesure du centre ORL et d’esthétique médicale du Dr Maria Lucia Anderes, Toulouse. Ivoire, rose esthétique, bleu poudré ORL, boutons Doctolib.
Version: 1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: dr-anderes
*/

/* ---------- Bases ---------- */
body { -webkit-font-smoothing: antialiased; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > main { margin-block-start: 0; }
img { max-width: 100%; height: auto; }
a { text-underline-offset: 3px; }
h1, h2, h3, h4 { margin-block: 0 0.5em; }
:where(.wp-block-group) > :first-child { margin-block-start: 0; }

/* ---------- Gabarit des sections ---------- */
.section { max-width: 1240px; margin-inline: auto; padding-inline: 24px; box-sizing: border-box; padding-block: 80px 0; }
.section.serre { padding-block-start: 24px; }
.section.fin { padding-block-end: 88px; }
.eyebrow { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin: 0 0 12px; }
.chapo { font-size: 19px; max-width: 640px; }

/* ---------- Zones colorées ---------- */
.zone { border-radius: 32px; padding: 56px 48px; position: relative; }
.zone-rose { background: var(--wp--preset--color--rose); }
.zone-bleu { background: var(--wp--preset--color--bleu); }
@media (max-width: 700px) { .zone { padding: 36px 22px; border-radius: 24px; } }

/* Orchidées décoratives */
.avec-orchidee::after {
	content: ""; position: absolute; pointer-events: none;
	background: url("assets/orchidees.webp") no-repeat center / contain;
	width: 130px; height: 162px; right: 28px; top: -64px;
}
.hero-photo { position: relative; }
.hero-photo::before {
	content: ""; position: absolute; z-index: 2; pointer-events: none;
	background: url("assets/orchidees.webp") no-repeat center / contain;
	width: 220px; height: 273px; left: -70px; bottom: -40px;
}
@media (max-width: 700px) {
	.avec-orchidee { margin-top: 44px; }
	.avec-orchidee::after { width: 70px; height: 87px; top: -60px; right: 12px; }
	.tarifs table, .tarifs tbody, .tarifs tr, .tarifs td { display: block; width: auto; }
	.tarifs td { border-bottom: 0; padding: 14px 18px 0; }
	.tarifs td:last-child { text-align: left; white-space: normal; padding-bottom: 14px; border-bottom: 1px solid var(--wp--preset--color--filet); }
	.hero-photo::before { width: 140px; height: 174px; left: -12px; bottom: -24px; }
}

/* ---------- Héros ---------- */
.hero { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.hero > * { margin: 0 !important; }
.hero > .hero-texte { flex: 1 1 480px; min-width: 0; }
.hero > .hero-photo, .hero > .hero-visuel { flex: 1 1 380px; min-width: 0; }
.hero h1 em { font-style: italic; }
/* L’arche existe même sans photo : la photo, une fois ajoutée, vient la remplir. */
.hero > .hero-photo { aspect-ratio: 4 / 5; max-height: 560px; border-radius: 220px 220px 24px 24px; background: var(--wp--preset--color--rose); }
.hero-photo .wp-block-image, .hero-photo .photo { margin: 0; height: 100%; }
.hero-photo img, .hero-photo .photo img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 220px 220px 24px 24px; }
.hero-photo .a-venir { height: 100%; aspect-ratio: auto; background: transparent; }

/* ---------- Photos ---------- */
.photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 24px; background: var(--wp--preset--color--rose); display: block; }
.zone-rose .photo img { background: #fff; }

/* ---------- Points clés (2 × 2) ---------- */
.points-cles { border-block: 1px solid var(--wp--preset--color--filet); }
.points-cles-grille { max-width: 1240px; margin-inline: auto; padding: 36px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; box-sizing: border-box; }
.points-cles-grille > * { margin: 0 !important; }
.point-titre { font-family: var(--wp--preset--font-family--titres); font-size: 34px; font-weight: 600; line-height: 1.2; margin: 0 !important; }
.point-texte { font-size: 15px; margin: 0 !important; }
@media (max-width: 560px) { .points-cles-grille { grid-template-columns: 1fr; } }

/* ---------- En-tête de zone ---------- */
.zone-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.zone-entete > * { margin: 0 !important; }
.zone-entete > :first-child { flex: 1 1 520px; min-width: 0; }
.zone-entete > :last-child:not(:first-child) { flex: 1 1 340px; }

/* ---------- Cartes ---------- */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.cartes-orl { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.cartes > * , .essentiel > * { margin: 0 !important; }
.carte { position: relative; background: #fff; border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 10px; transition: transform .15s ease, box-shadow .15s ease; }
.carte > * { margin: 0 !important; }
.carte h3 { font-size: 27px; line-height: 1.15; }
.carte p { font-size: 15.5px; }
.carte .carte-lien { margin-top: auto !important; font-weight: 600; font-size: 15px; text-decoration: underline; }
.carte h3 a { text-decoration: none; }
.carte h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.carte:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26,26,26,.08); }
.carte h3 a:focus-visible { outline: none; }
.carte:has(a:focus-visible) { outline: 3px solid var(--wp--preset--color--noir); outline-offset: 3px; }

/* ---------- Blocs ORL (accueil) ---------- */
.zone-orl { display: flex; flex-wrap: wrap; gap: 48px; }
.zone-orl > * { margin: 0 !important; }
.zone-orl > .zone-orl-texte { flex: 1 1 360px; min-width: 0; }
.zone-orl > .cartes { flex: 1 1 480px; min-width: 0; }

/* ---------- Deux colonnes ---------- */
.deux-colonnes { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.deux-colonnes > * { flex: 1 1 400px; min-width: 0; margin: 0 !important; }
.deux-colonnes.centre { align-items: center; }

/* ---------- Encadrés, essentiel ---------- */
.encadre { background: #fff; border-radius: 24px; padding: 32px; }
.encadre > :first-child { margin-top: 0; }
.essentiel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.essentiel > .wp-block-group { background: #fff; border-radius: 20px; padding: 24px; }
.essentiel .eyebrow { margin-bottom: 6px; font-size: 12.5px; }
.essentiel p { margin: 0; }

/* Frise */
.frise { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.frise li strong { display: inline-block; min-width: 64px; }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq > * { margin: 0 !important; }
.faq .wp-block-details { background: #fff; border-radius: 16px; padding: 18px 24px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq .wp-block-details p { margin: 10px 0 0; }

/* ---------- Tarifs ---------- */
.tarifs table { border-collapse: collapse; width: 100%; background: #fff; border-radius: 20px; overflow: hidden; }
.tarifs td, .tarifs th { border: 0; border-bottom: 1px solid var(--wp--preset--color--filet); padding: 16px 20px; text-align: left; vertical-align: top; }
.tarifs tr:last-child td { border-bottom: 0; }
.tarifs td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.tarifs thead td, .tarifs tr:first-child td strong { font-weight: 600; }
.tarifs figcaption { font-size: 14px; }

/* ---------- Fil d’Ariane, ancres ---------- */
.fil-ariane { font-size: 14px; padding-top: 20px !important; }
.ancres { display: flex; flex-wrap: wrap; gap: 10px; }
.ancres > * { margin: 0 !important; }
.ancres .wp-block-button__link { background: transparent; color: var(--wp--preset--color--noir); border: 1.5px solid var(--wp--preset--color--noir); padding: 9px 20px; font-weight: 500; }

/* ---------- Sections ORL détaillées ---------- */
.bloc-orl { background: #fff; border-radius: 28px; padding: 40px; display: flex; flex-wrap: wrap; gap: 40px; scroll-margin-top: 24px; }
.bloc-orl > * { margin: 0 !important; }
.bloc-orl > .bloc-orl-texte { flex: 1 1 520px; min-width: 0; }
.bloc-orl > .bloc-orl-actes { flex: 1 1 340px; min-width: 0; background: var(--wp--preset--color--bleu); border-radius: 20px; padding: 24px 28px; }
.bloc-orl ul { padding-left: 20px; margin: 0; }
.pile { display: flex; flex-direction: column; gap: 24px; }
.pile > * { margin: 0 !important; }

/* ---------- Bloc rendez-vous ---------- */
.rdv { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.rdv > * { margin: 0 !important; }
.rdv > :first-child { flex: 1 1 480px; min-width: 0; }

/* ---------- Coordonnées ---------- */
.coordonnees p { margin: 4px 0 0; }
.coordonnees .eyebrow { margin: 18px 0 0; font-size: 12.5px; }
.carte-plan img { aspect-ratio: 4 / 3; }

/* ---------- Boutons ---------- */
.wp-block-buttons { gap: 14px; }
.wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; text-decoration: none; }
.wp-block-button.is-style-contour .wp-block-button__link { background: transparent; color: var(--wp--preset--color--noir); border: 1.5px solid var(--wp--preset--color--noir); }
.wp-block-button.is-style-doctolib .wp-block-button__link { background: #107ACA; color: #fff; gap: 10px; }
.wp-block-button.is-style-doctolib .wp-block-button__link:hover { background: #0C66AB; }
.wp-block-button.is-style-doctolib .wp-block-button__link::before {
	content: ""; width: 18px; height: 18px; flex: 0 0 18px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}
.wp-block-button__link:focus-visible { outline: 3px solid var(--wp--preset--color--noir); outline-offset: 3px; }

/* ---------- En-tête du site ---------- */
.site-header { border-bottom: 1px solid var(--wp--preset--color--filet); }
.site-header-inner { max-width: 1240px; margin-inline: auto; padding: 16px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box; }
.site-header-inner > * { margin: 0 !important; }
.marque { display: flex; flex-direction: column; }
.marque > * { margin: 0 !important; }
.marque .wp-block-site-title, .marque .nom { font-family: var(--wp--preset--font-family--titres); font-size: 26px; font-weight: 600; line-height: 1.1; }
.marque .wp-block-site-title a, .marque .nom a { text-decoration: none; }
.marque .wp-block-site-tagline, .marque .slogan { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.site-header .wp-block-navigation { font-size: 15px; font-weight: 500; gap: 8px 28px; }
.site-header .wp-block-navigation a { text-decoration: none; }
.site-header .wp-block-navigation__submenu-container { border: 1px solid var(--wp--preset--color--filet) !important; border-radius: 14px; padding: 8px !important; min-width: 260px !important; }
.nav-et-rdv { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.nav-et-rdv > * { margin: 0 !important; }

/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid var(--wp--preset--color--filet); font-size: 15px; margin-top: 0; }
.site-footer-inner { max-width: 1240px; margin-inline: auto; padding: 48px 24px 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; box-sizing: border-box; }
.site-footer-inner > * { margin: 0 !important; }
.site-footer h2 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.site-footer p { margin: 0 0 4px; }
.site-footer-bas { max-width: 1240px; margin-inline: auto; padding: 16px 24px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 14px; box-sizing: border-box; }
.site-footer-bas > * { margin: 0 !important; }

/* ---------- Bouton Doctolib fixe sur mobile ---------- */
@media (max-width: 700px) {
	.rdv-mobile { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; }
	.rdv-mobile .wp-block-button, .rdv-mobile .wp-block-button__link { width: 100%; justify-content: center; }
	.site-footer-bas { padding-bottom: 96px; }
}
@media (min-width: 701px) { .rdv-mobile { display: none; } }

@media (prefers-reduced-motion: reduce) { .carte { transition: none; } .carte:hover { transform: none; } }