/* Formes de l'interface : chaque famille exprime une fonction. */
:root{--control-radius:10px;--field-radius:8px;--panel-radius:18px}

/* Actions principales : même silhouette sur toutes les pages. */
.btn,.hm-page .hm-button,.pv-page .btn,.room-cover .gallery-trigger{border-radius:var(--control-radius)}
.btn,.hm-page .hm-button{min-height:48px}
.header-actions .btn{min-height:44px;white-space:nowrap}

/* Les filtres sont des choix courts ; les onglets restent attachés à leur contenu. */
.al-filters button,.filter-btn,.pv-page .pv-filters button,.pv-page .pv-plan-tabs button{border-radius:999px;min-height:44px}
.hm-page .hm-tabs button{border-radius:10px 10px 0 0}
.hm-tabs{gap:5px}
.st-room-nav{border:1px solid var(--hm-line);border-radius:var(--panel-radius);overflow:hidden}
.st-room-nav a:focus-visible{outline-offset:-5px}

/* Les champs gardent une silhouette facile à reconnaître et une bordure nette. */
.field input,.field select,.field textarea{border-radius:var(--field-radius);transition:border-color .2s,background-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--clay);background:var(--white)}
.booking-strip input,.booking-strip select{border-radius:var(--field-radius)}

/* Encarts informatifs : plus amples que les commandes qu'ils contiennent. */
.detail-aside,.success-panel,.confirmation-card,.guide-intro,.guide-info article,.simulation-note{border-radius:var(--panel-radius)}
.simulation-note{border-radius:10px}
.al-intro figcaption,.st-room-intro figcaption,.pv-page .pv-place-photo>.pv-save{border-radius:8px}
.pv-page .pv-floating-carnet{border-radius:999px}
.preview-tag{border-radius:8px}
.room-card .number,.pv-place-number,.st-private-rooms figure>span{border-radius:8px}

/* Commandes compactes : cibles tactiles confortables et états identifiables. */
.menu-toggle,.pv-page .pv-close{border-radius:50%;transition:background-color .2s}
.menu-toggle:hover,.menu-toggle[aria-expanded=true],.pv-page .pv-close:hover{background:var(--paper-dark)}
.lightbox-head button,.lightbox-bottom button{border:1px solid #ffffff40;border-radius:50%;transition:background-color .2s}
.lightbox-head button:hover,.lightbox-bottom button:hover{background:#ffffff18}
:is(.btn,.hm-button,.gallery-trigger):active{transform:translateY(0)}
@media(max-width:360px){
 .site-header,.site-header.scrolled{padding-inline:12px;gap:8px}
 .header-actions{gap:8px}
 .header-actions .btn{font-size:10px;padding:10px;gap:10px}
 .header-actions .menu-toggle{flex-shrink:0}
}
@media(prefers-reduced-motion:reduce){.field input,.field select,.field textarea,.menu-toggle,.pv-close,.lightbox button{transition:none}}