/* Cabinet dentaire Palladio : feuille de style du site */

/* Jetons et styles de page */
:root, [data-theme="soins"] { --surface:#ffffff; --surface-alt:#f2f8fc; --line:#dce6f0; --line-strong:#7a7f9f; --ink:#1d2142; --ink-muted:#5c6080; --brand:#39449f; --on-brand:#ffffff; --accent:#39449f; --accent-soft:#dbedf7; --on-accent:#ffffff; --highlight:#abd8ed; --ombre:#abd8ed; --stripe-1:#39449f; --stripe-2:#abd8ed; --stripe-3:#96dadb; --stripe-4:#ded4ed; --stripe-5:#bee7e9; --stripe-6:#dbedf7; --shadow-card:0 1px 2px #1d21420d, 0 6px 20px #1d21420f; --shadow-button:none; --focus-ring:0 0 0 2px #ffffff, 0 0 0 4px #39449f; --radius-sm:2px; --radius-full:9999px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --font-sans:Jost, "Avenir Next", Futura, "Century Gothic", system-ui, sans-serif; }
[data-theme="ortho"] { --surface-alt:#f7f0e8; --line:#f3e4d1; --accent:#ad3f2b; --accent-soft:#ffeee6; --highlight:#96dadb; --ombre:#96dadb; --stripe-1:#fbb3a5; --stripe-2:#ffcdb6; --stripe-3:#ffe9ba; --stripe-4:#cbeae4; --stripe-5:#96dadb; --stripe-6:#abd8ed; --shadow-card:6px 6px 0 #96dadb; --shadow-button:3px 3px 0 #96dadb; --focus-ring:0 0 0 2px #ffffff, 0 0 0 4px #ad3f2b; }
body { margin:0; background:#ffffff; color:#1d2142; font-family:Jost, "Avenir Next", Futura, "Century Gothic", system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:#39449f; text-decoration-color:#abd8ed; text-decoration-thickness:2px; text-underline-offset:4px; }
a:hover { color:#1d2142; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline:2px solid transparent; box-shadow:var(--focus-ring); }
.choix { font:inherit; font-size:15px; font-weight:500; min-height:48px; padding:12px 20px; border-radius:2px; border:1px solid #7a7f9f; background:#ffffff; color:#1d2142; cursor:pointer; text-align:left; }
.choix[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.champ { font:inherit; font-size:16px; line-height:24px; color:#1d2142; padding:11px 14px; border:1px solid #7a7f9f; border-radius:2px; background:#ffffff; width:100%; box-sizing:border-box; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

/* Page FAQ */
[data-theme="ortho"] a:not(.pl-btn) { color:#ad3f2b; text-decoration-color:#96dadb; }
a:focus-visible, summary:focus-visible { outline:2px solid transparent; box-shadow:var(--focus-ring); }
.faq-q { border-bottom:1px solid var(--line); }
.faq-q summary { list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:22px 0; min-height:44px; box-sizing:border-box; font-size:19px; line-height:28px; font-weight:500; color:#1d2142; }
.faq-q summary::-webkit-details-marker { display:none; }
.faq-q summary:hover { color:var(--accent); }
.faq-signe { flex:0 0 auto; position:relative; width:28px; height:28px; border:1px solid var(--accent); border-radius:9999px; box-sizing:border-box; }
.faq-signe::before, .faq-signe::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; background:var(--accent); transform:translate(-50%, -50%); transition:transform 0.2s ease; }
.faq-signe::after { transform:translate(-50%, -50%) rotate(90deg); }
.faq-q[open] .faq-signe::after { transform:translate(-50%, -50%) rotate(0deg); }
.faq-r { padding:0 52px 26px 0; max-width:720px; font-size:16px; line-height:27px; color:#1d2142; }
.faq-r p { margin:0 0 12px; }
.faq-r p:last-child { margin-bottom:0; }

/* Composants du design system Palladio */
/* Variables propres aux composants, résolues par le conteneur le plus proche portant data-theme */
:root, [data-theme="soins"] { --pl-ligne-epaisseur: 5px; --pl-ligne-ecart: 12px; --pl-ligne-extra: none; --pl-ligne-decal: 0px; --pl-ligne-rayon: 1px; --pl-logo-decal: 6px; --pl-logo-ombre-couleur: var(--ombre); --pl-logo-ombre: drop-shadow(var(--pl-logo-decal) var(--pl-logo-decal) 0 var(--pl-logo-ombre-couleur)); }
[data-theme="ortho"] { --pl-ligne-epaisseur: 9px; --pl-ligne-ecart: 14px; --pl-ligne-extra: block; --pl-ligne-decal: 5px; --pl-ligne-rayon: 3px; --pl-logo-decal: 6px; --pl-logo-ombre-couleur: var(--ombre); --pl-logo-ombre: drop-shadow(var(--pl-logo-decal) var(--pl-logo-decal) 0 var(--pl-logo-ombre-couleur)); }

body { margin: 0; font-family: var(--font-sans); background: var(--surface); color: var(--ink); caret-color: var(--accent); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent-soft); color: var(--ink); }

/* Mise en page des aperçus : les deux étages côte à côte */
.pl-duo { display: grid; grid-template-columns: 1fr 1fr; }
.pl-panel { background: var(--surface); color: var(--ink); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.pl-panel + .pl-panel { border-left: 1px solid var(--line); }
.pl-panel-titre { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--ink-muted); margin: 0; }
.pl-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Button */
.pl-btn { font: inherit; font-size: 15px; font-weight: 500; letter-spacing: .01em; line-height: 20px; padding: 11px var(--space-6); border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1), background-color .2s; }
.pl-btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-button); }
.pl-btn-secondary { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.pl-btn-ghost { background: transparent; color: var(--accent); padding-left: var(--space-2); padding-right: var(--space-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--highlight); text-decoration-thickness: 2px; }
.pl-btn:hover { transform: translateY(-1px); }
.pl-btn:active { transform: scale(.98); }
.pl-btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.pl-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Badge */
.pl-badge { display: inline-flex; align-items: center; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 6px var(--space-3); border-radius: var(--radius-full); }
.pl-badge-accent { background: var(--accent-soft); color: var(--accent); }
.pl-badge-brand { background: var(--brand); color: var(--on-brand); }
.pl-badge-neutral { background: var(--surface-alt); color: var(--ink-muted); }

/* InfoCard */
.pl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); max-width: 340px; box-sizing: border-box; }
.pl-card-titre { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; color: var(--ink); }
.pl-card-corps { font-size: 16px; line-height: 26px; color: var(--ink); }
.pl-card-corps p { margin: 0; }
.pl-card-pied { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* Lignes : barres verticales espacées. 4 barres bleues aux soins, 6 barres pastel décalées à l'orthodontie */
.pl-lignes { display: flex; flex-direction: row; align-items: stretch; gap: var(--pl-ligne-ecart); height: 72px; }
.pl-lignes > span { display: block; flex: none; width: var(--pl-ligne-epaisseur); border-radius: var(--pl-ligne-rayon); }
.pl-lignes > span:nth-child(1) { background: var(--stripe-1); margin-bottom: calc(var(--pl-ligne-decal) * 3); }
.pl-lignes > span:nth-child(2) { background: var(--stripe-2); margin-top: calc(var(--pl-ligne-decal) * 1); }
.pl-lignes > span:nth-child(3) { background: var(--stripe-3); margin-top: calc(var(--pl-ligne-decal) * 2); margin-bottom: calc(var(--pl-ligne-decal) * 1); }
.pl-lignes > span:nth-child(4) { background: var(--stripe-4); margin-bottom: calc(var(--pl-ligne-decal) * 2); }
.pl-lignes > span:nth-child(5) { background: var(--stripe-5); display: var(--pl-ligne-extra); margin-top: calc(var(--pl-ligne-decal) * 3); }
.pl-lignes > span:nth-child(6) { background: var(--stripe-6); display: var(--pl-ligne-extra); margin-bottom: calc(var(--pl-ligne-decal) * 1); }
.pl-lignes-horizontal { flex-direction: column; height: auto; width: 100%; }
.pl-lignes-horizontal > span { width: auto; height: var(--pl-ligne-epaisseur); margin: 0 !important; }

/* Signaletique : plaque d'étage */
.pl-plaque { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: var(--space-8) var(--space-6) var(--space-6); width: 260px; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-4); }
.pl-plaque-logo { width: 96px; height: 96px; display: block; }

/* Logo : ombre décalée de 6 px, bleu tropical aux soins, turquoise à l'orthodontie. Le logo lui-même ne change jamais. */
.pl-logo { display: block; filter: var(--pl-logo-ombre); }
.pl-plaque-niveau { margin: 0 0 calc(var(--space-2) * -1); font-size: 14px; line-height: 22px; font-weight: 400; color: var(--ink-muted); }
.pl-plaque-etage { margin: 0; font-size: 32px; line-height: 36px; font-weight: 300; color: var(--accent); }
.pl-plaque-detail { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* Message : erreur, confirmation, information. Le titre porte le sens, la couleur ne fait que le souligner. */
.pl-msg { box-sizing: border-box; max-width: 420px; padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4); border-radius: var(--radius-sm); border: 1px solid transparent; display: flex; flex-direction: column; gap: var(--space-1); }
.pl-msg-titre { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; }
.pl-msg-corps { font-size: 14px; line-height: 22px; color: var(--ink); }
.pl-msg-corps p { margin: 0; }
.pl-msg-action { margin-top: var(--space-2); }
.pl-msg-info { background: var(--accent-soft); }
.pl-msg-info .pl-msg-titre { color: var(--ink); }
.pl-msg-success { background: var(--success-soft); border-color: var(--success); }
.pl-msg-success .pl-msg-titre { color: var(--success); }
.pl-msg-danger { background: var(--danger-soft); border-color: var(--danger); }
.pl-msg-danger .pl-msg-titre { color: var(--danger); }
.pl-msg .pl-btn-ghost { padding-left: 0; }

/* PostInstagram : gabarits 1080 x 1350 (post) et 1080 x 1920 (story), réduits par --u. 1 unité = 1 px à taille réelle. */
.pl-post { --u: 1; position: relative; overflow: hidden; box-sizing: border-box; width: calc(1080px * var(--u)); height: calc(1350px * var(--u)); background: var(--surface); color: var(--ink); font-family: var(--font-sans); display: flex; flex-shrink: 0; box-shadow: 0 0 0 1px var(--line); }
.pl-post-story { height: calc(1920px * var(--u)); }
.pl-post-contenu { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: calc(150px * var(--u)) calc(96px * var(--u)); }
.pl-post-story .pl-post-contenu { padding-top: calc(280px * var(--u)); padding-bottom: calc(300px * var(--u)); }
.pl-post-texte { margin-top: auto; display: flex; flex-direction: column; gap: calc(28px * var(--u)); }
.pl-post-titre { margin: 0; font-size: calc(92px * var(--u)); line-height: 1.04; font-weight: 300; letter-spacing: -0.01em; color: var(--accent); max-width: calc(860px * var(--u)); text-wrap: balance; }
.pl-post-corps { margin: 0; font-size: calc(38px * var(--u)); line-height: 1.45; color: var(--ink-muted); max-width: calc(780px * var(--u)); }
.pl-post-pied { display: flex; align-items: center; gap: calc(28px * var(--u)); margin-top: calc(72px * var(--u)); }
.pl-post-logo { width: calc(104px * var(--u)); height: calc(104px * var(--u)); display: block; filter: drop-shadow(calc(9px * var(--u)) calc(9px * var(--u)) 0 var(--pl-logo-ombre-couleur)); }
.pl-post-signature { display: flex; flex-direction: column; font-size: calc(30px * var(--u)); line-height: 1.35; }
.pl-post-nom { color: var(--brand); font-weight: 500; }
.pl-post-etage { color: var(--ink-muted); }
.pl-post-lignes { display: flex; flex-direction: row; align-items: stretch; gap: calc(var(--pl-ligne-ecart) * 3 * var(--u)); height: calc(300px * var(--u)); }
.pl-post-lignes > span { display: block; flex: none; width: calc(var(--pl-ligne-epaisseur) * 3 * var(--u)); border-radius: calc(var(--pl-ligne-rayon) * 3 * var(--u)); }
.pl-post-lignes > span:nth-child(1) { background: var(--stripe-1); margin-bottom: calc(var(--pl-ligne-decal) * 6 * var(--u)); }
.pl-post-lignes > span:nth-child(2) { background: var(--stripe-2); margin-top: calc(var(--pl-ligne-decal) * 3 * var(--u)); }
.pl-post-lignes > span:nth-child(3) { background: var(--stripe-3); margin-top: calc(var(--pl-ligne-decal) * 5 * var(--u)); margin-bottom: calc(var(--pl-ligne-decal) * 2 * var(--u)); }
.pl-post-lignes > span:nth-child(4) { background: var(--stripe-4); margin-bottom: calc(var(--pl-ligne-decal) * 4 * var(--u)); }
.pl-post-lignes > span:nth-child(5) { background: var(--stripe-5); display: var(--pl-ligne-extra); margin-top: calc(var(--pl-ligne-decal) * 6 * var(--u)); }
.pl-post-lignes > span:nth-child(6) { background: var(--stripe-6); display: var(--pl-ligne-extra); margin-bottom: calc(var(--pl-ligne-decal) * 2 * var(--u)); }
.pl-post-k-info .pl-post-lignes { height: 100%; padding-left: calc(96px * var(--u)); }
.pl-post-k-info .pl-post-lignes > span { margin: 0; }
.pl-post-k-info .pl-post-contenu { padding-left: calc(72px * var(--u)); }
.pl-post-k-info .pl-post-texte { margin-top: auto; margin-bottom: auto; }
.pl-post-k-info .pl-post-titre { font-size: calc(76px * var(--u)); }
.pl-post-photo { display: block; box-sizing: border-box; width: 100%; height: calc(640px * var(--u)); object-fit: cover; border-radius: var(--radius-sm); box-shadow: calc(var(--pl-logo-decal) * 3 * var(--u)) calc(var(--pl-logo-decal) * 3 * var(--u)) 0 var(--pl-logo-ombre-couleur); }
.pl-post-photo-vide { display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(40px * var(--u)); background: var(--surface-alt); border: calc(3px * var(--u)) dashed var(--line-strong); color: var(--ink-muted); font-size: calc(34px * var(--u)); }
.pl-post-photo + .pl-post-texte { margin-top: calc(72px * var(--u)); }
.pl-post-photo + .pl-post-texte .pl-post-titre { font-size: calc(76px * var(--u)); }

/* Mouvement : discret, et supprimé si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) { .pl-btn { transition: none; } .pl-btn:hover, .pl-btn:active { transform: none; } }


html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img, video { max-width: 100%; }