/* Exceptions responsive — et rien d'autre.
   La maquette Épi v3 est reprise au balisage près et apporte sa propre
   feuille, inlinée dans chaque page. Ce fichier ne contient QUE les écarts
   rendus nécessaires par les petits écrans. Aucun n'a d'effet à 1280 px,
   la largeur de composition d'origine. */

/* Un bloc que la maquette posait en absolu sur la composition de 1280 px
   (`left:96px`, `left:28px`…) sort de l'écran sur un téléphone, et comme la
   page ne défile pas horizontalement il est rogné. Le générateur marque ces
   blocs ; ils reviennent dans le flux. */
@media (max-width: 900px) {
  .pose {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [style*="display:flex"],
  [style*="display: flex"] {
    flex-wrap: wrap;
  }

  /* Une vignette de galerie porte `grid-column: span 2`, hérité des trois
     colonnes. Avec une seule colonne, ce `span` crée une colonne IMPLICITE
     de 0 px : les vignettes qui y tombent sont écrasées à zéro. */
  [style*="grid-column"],
  [style*="grid-row:"] {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* Les sections pleine largeur.
   Dans la maquette, une section de héros portait `max-width:900px` et
   96 px de retrait : 1092 px au total, soit presque toute la page de
   1280 px. Depuis que la composition occupe la fenêtre, cette section
   s'arrête court — et comme elle porte `overflow:hidden`, elle tranche net
   le halo décoratif qui la déborde. C'est le bord visible signalé sur la
   page Contact.

   Une section est pleine largeur quand elle est enfant direct de <main> :
   son contenu garde ses propres mesures, seul le fond s'étend. */
main > [style*="overflow:hidden"] {
  max-width: none !important;
}

/* Les deux portables, « toujours ensemble » à la demande du client, font une
   ligne de trente caractères. À 34 px elle ne tient pas sur un téléphone :
   mesurée à 519 px pour 285 px disponibles, elle coupait le premier numéro
   en deux et laissait la barre de séparation ouvrir la ligne suivante.
   La tenir sur une seule ligne demanderait 18 px — trop petit pour un numéro
   qu'on tape du pouce. On les empile donc, l'un sous l'autre et toujours
   côte à côte, en retirant la barre qui n'a plus de sens à la verticale. */
@media (max-width: 640px) {
  footer div[style*="align-items:baseline"] {
    flex-direction: column;
    align-items: flex-end !important;
    gap: 2px !important;
  }

  footer div[style*="align-items:baseline"] > span[aria-hidden="true"] {
    display: none !important;
  }

  footer div[style*="align-items:baseline"] > a {
    font-size: clamp(22px, 7vw, 30px) !important;
  }
}

/* Le menu du téléphone.
   La maquette ne prévoyait qu'une barre horizontale, pensée pour 1280 px.
   Sous 900 px ses sept entrées s'empilaient sur cinq lignes désordonnées,
   la bande de langue coincée au milieu : haut de page illisible et deux
   écrans de défilement avant le contenu. Les entrées passent donc dans un
   panneau que le bouton ouvre. Au-dessus de 900 px, rien de tout ceci ne
   s'applique et la barre reste celle de la maquette. */
@media (max-width: 900px) {
  header [data-menu] {
    display: flex !important;
    order: 3;
  }

  header nav[aria-label="Principale"] {
    display: none !important;
  }

  header[data-menu-ouvert] nav[aria-label="Principale"] {
    display: flex !important;
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 10px);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border-radius: 22px;
    background: #FFFFFF;
    border: 1px solid rgba(21, 128, 61, .18);
    box-shadow: 0 26px 54px -26px rgba(14, 59, 34, .55);
    font-size: 16px;
  }

  header[data-menu-ouvert] nav[aria-label="Principale"] a {
    padding: 13px 15px !important;
    border-radius: 14px;
    border-bottom: 0 !important;
  }

  header[data-menu-ouvert] nav[aria-label="Principale"] a[aria-current="page"] {
    background: rgba(34, 160, 79, .12);
    color: #127036 !important;
  }

  /* Le logo cède la place au bouton et à la bande de langue : à 375 px, les
     trois ensemble dépassaient la largeur disponible. Avec l'écart de 28 px
     de la maquette, le bouton tombait encore à la ligne : 146 + 96 + 46 et
     deux fois 28 font 344 pour 333 disponibles. */
  header {
    gap: 10px !important;
  }

  header > a[aria-label^="Sanata"] {
    margin-right: auto;
  }

  header > a[aria-label^="Sanata"] img {
    height: 40px !important;
  }
}

/* Le sélecteur de photos de la fiche produit.
   La maquette dessinait le liseré blanc « voici la photo affichée » en style
   EN LIGNE sur la première vignette. Un style en ligne bat la feuille : le
   liseré n'aurait pas pu suivre les clics. Il est retiré du balisage et piloté
   ici par `aria-pressed`, qui porte en même temps l'information aux lecteurs
   d'écran — l'attribut dit l'état, la règle ne fait que le montrer. */
[data-photo][aria-pressed="true"] {
  outline: 3px solid #FFFFFF;
  outline-offset: -3px;
}

[data-photo][aria-pressed="false"]:hover {
  outline: 3px solid rgba(255, 255, 255, .55);
  outline-offset: -3px;
  transform: scale(1.04);
}

/* Le liseré de sélection est blanc sur fond sombre : au clavier il faut une
   couleur qui s'en distingue, sinon on ne sait plus laquelle est visée. */
[data-photo]:focus-visible {
  outline: 3px solid #FD9000;
  outline-offset: 2px;
}

[data-photo] {
  transition: transform 160ms cubic-bezier(.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  [data-photo] {
    transition: none;
  }

  [data-photo][aria-pressed="false"]:hover {
    transform: none;
  }
}

/* La barre de navigation reste visible au défilement (demande du client,
   29/10). Elle est donc `position:fixed` : un lien d'ancre amènerait sa cible
   SOUS la barre, puisque le navigateur aligne le haut de la cible sur le haut
   de la fenêtre. On lui réserve la hauteur de la barre. */
html {
  scroll-padding-top: 96px;
}

@media (max-width: 900px) {
  html {
    scroll-padding-top: 84px;
  }
}