/* Galerie : socle commun. MÉCANISMES ET STRUCTURE SEULEMENT, aucun parti pris visuel : couleurs, typographie, formes et mouvements
   appartiennent à la vitrine (style.css). Largeur du menu mobile : le bouton remplace le menu sous 900 px (834 et 390 inclus). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--decalage-ancre, 5rem); }
body { margin: 0; min-width: 320px; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
p, li, h1, h2, h3, h4, a, label, figcaption, dd { overflow-wrap: break-word; }
:root {
  --gouttiere: clamp(16px, 4vw, 40px);
  --largeur-max: 1240px;
  --largeur-lecture: 66ch;
}

/* Conteneur et lecture : à utiliser plutôt que des largeurs en pixels */
.conteneur { width: min(100% - 2 * var(--gouttiere), var(--largeur-max)); margin-inline: auto; }
.lecture { max-width: var(--largeur-lecture); }

/* Accessibilité */
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lien-evitement { position: absolute; left: var(--gouttiere); top: 0; z-index: 1000; padding: .6em 1em; background: #fff; color: #000; transform: translateY(-120%); }
.lien-evitement:focus { transform: none; }
main:focus { outline: none; }

/* Étiquette de démonstration (en haut de page) et mention du pied : texte toujours lisible, jamais masqué */
.etiquette-demo { position: relative; z-index: 60; padding: .35em var(--gouttiere); font-size: .8125rem; text-align: center; }
.mention-pied { margin: 0; padding: 1em var(--gouttiere); font-size: .8125rem; text-align: center; }

/* Barre d'appel collante : téléphone seulement. La vitrine la met en forme ; ici la structure. */
.barre-appel { display: none; }
@media (max-width: 767px) {
  .barre-appel { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding-bottom: env(safe-area-inset-bottom, 0); }
  .barre-appel a { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5em; min-height: 3.25rem; text-decoration: none; }
  body { padding-bottom: calc(3.25rem + env(safe-area-inset-bottom, 0)); }
}

/* Menu mobile. Sans JavaScript le menu reste affiché (le bouton est caché). */
html:not(.js) [data-menu-bouton] { display: none !important; }   /* !important : le style d'une vitrine ne doit jamais remontrer un bouton sans effet */
.menu-bouton { cursor: pointer; }
@media (min-width: 900px) { html [data-menu-bouton] { display: none !important; } }
@media (max-width: 899px) {
  html.js [data-menu]:not([data-ouvert]) { display: none; }
  html.js[data-menu-ouvert] { overflow: hidden; }
}

/* Apparitions : MÉCANISME D'OUVERTURE SÛR.
   Un élément marqué data-anim n'est caché que sous html.anim (JavaScript actif et mouvement non réduit). Sans action de personne il
   réapparaît après 2,5 s si le script de la vitrine n'a pas démarré (Galerie.pret retire html.anim dès qu'il démarre). */
html.anim [data-anim] { opacity: 0; animation: galerie-secours .5s ease-out 2.5s forwards; }
@keyframes galerie-secours { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.anim [data-anim] { opacity: 1; animation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Formulaire de démonstration */
.formulaire-statut:empty { display: none; }