/*
  La page d'accueil de klader.app.

  Elle reprend au point près la page d'entrée de l'app (mobile/src/app/
  site.tsx), que la maquette ne décrit plus : c'est elle qui fait foi. Les
  nombres viennent du rendu relevé dans un vrai navigateur, pas d'une
  lecture du code - react-native-web ajoute ses propres règles, et c'est
  ce qu'il affiche qu'on reproduit. Seul ajout : la bande-annonce.

  Les chemins sont absolus (/accueil/…) : la construction y ajoute la
  version de chaque fichier, et la page doit se lire depuis n'importe
  quelle adresse du site.
*/

/*
  Libre Franklin, les fichiers mêmes de l'app (@expo-google-fonts 0.4.2),
  seulement recompressés en WOFF : mêmes contours, mêmes réglages de
  rendu, donc mêmes largeurs de texte et mêmes retours à la ligne. La
  version de Google Fonts, qu'utilisait la maquette, n'est pas la même
  révision.

  `swap` : le script attend les polices avant de faire entrer le panneau
  (une seconde au plus). Au delà, mieux vaut un texte dans une autre police
  qu'un bouton invisible.
*/
@font-face {
  font-family: 'Libre Franklin Klader';
  src: url('/accueil/polices/libre-franklin-400.woff?v=3afe06db5a') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin Klader';
  src: url('/accueil/polices/libre-franklin-500.woff?v=0b645968e8') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin Klader';
  src: url('/accueil/polices/libre-franklin-600.woff?v=130fd7d0fa') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin Klader';
  src: url('/accueil/polices/libre-franklin-700.woff?v=a8dbaa5e60') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin Klader';
  src: url('/accueil/polices/libre-franklin-800.woff?v=15b159df1c') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Les jetons de la charte (mobile/src/constants/theme.ts). */
:root {
  --papier: #f2f2f2;
  --craie: #ffffff;
  --encre: #212121;
  --graphite: #707070;
  --ligne: #e3e3e3;
  --flash: #e8175d;
  --shot: #eaeaea;
  /* Le contour de focus de l'app web (habillage-web.web.tsx). */
  --action: #df2b60;
  --police: 'Libre Franklin Klader', 'Libre Franklin', Arial, sans-serif;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--papier);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

h1,
p {
  margin: 0;
}

/*
  La page : tout ce qui s'y pose est centré sur les deux axes.

  L'app la rognait - ses colonnes dépassent la fenêtre. Ici le fond se
  rogne lui-même ; la page, elle, peut défiler : dans une fenêtre basse
  ou un téléphone en paysage, la bande-annonce et le panneau ne tiennent
  pas toujours dans un seul écran, et le bouton ne doit jamais tomber
  hors d'atteinte. Un téléphone en portrait tient, lui, sur un seul
  écran (plus bas, « téléphone »).
*/
.page {
  position: relative;
  box-sizing: border-box;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*
    La page sur sa propre couche, comme l'écran de l'app.

    Là-bas, chaque écran vit dans une carte de navigation, sur une couche
    à part, et Chrome y rend le texte en niveaux de gris. Ici, sans
    couche, le même texte sortait lissé par sous-pixels - franges colorées,
    graisse apparente un peu plus forte : plus tout à fait le panneau de
    l'app. La couche part du coin de l'écran, comme la carte : les filets
    tombent sur les mêmes pixels (vérifié au pixel sur Windows).

    Elle devient aussi le repère du fond et du voile, « fixés » : ils
    couvrent la page entière, ce qui revient au même tant qu'elle tient
    dans l'écran, et suit le défilement quand elle le dépasse.
  */
  will-change: transform;
}

/* ------------------------------------------------------------ le fond */

/*
  Six colonnes de même poids et la même marge des deux côtés, comme dans
  l'app. Seulement sur bureau : un téléphone n'a que le panneau.
*/
.fond {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: row;
  box-sizing: border-box;
  padding: 0 40px;
  gap: 22px;
  overflow: hidden;
  pointer-events: none;
}

.colonne {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.glisse,
.pile {
  display: flex;
  flex-direction: column;
}

.pile {
  gap: 26px;
}

.pile + .pile {
  margin-top: 26px;
}

/* Une carte du catalogue (mobile/src/components/carte-produit.tsx). */
.carte {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--shot);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-cadre {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  overflow: hidden;
}

/* Le fondu d'expo-image à l'arrivée d'une photo : 160 ms. */
.photo-cadre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.16s;
}

.photo-cadre img.arrivee {
  opacity: 1;
}

/* Sans photo, le dessin de la famille, teint du gris des contours. */
.vetement {
  width: 50px;
  height: 50px;
  background: var(--ligne);
  -webkit-mask: var(--dessin) center / contain no-repeat;
  mask: var(--dessin) center / contain no-repeat;
}

/*
  Le coin plié d'une remise : 44 points de maquette, agrandis de 1,12 sur
  le web comme dans l'app. Le pourcentage est placé en parts du côté.
*/
.coin {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 49.28px;
  height: 49.28px;
}

.coin svg {
  position: absolute;
  inset: 0;
}

.coin-texte {
  position: absolute;
  top: 10.8662px;
  right: -8.18048px;
  width: 49.28px;
  transform: rotate(45deg);
  font: 800 10.6445px / 10.6445px var(--police);
  letter-spacing: -0.19px;
  color: var(--craie);
  text-align: center;
  white-space: pre-wrap;
}

/* L'étiquette de prix, variante « carte », agrandie de 1,12 sur le web. */
.etiquette {
  position: absolute;
  left: -3.36px;
  bottom: -7.84px;
  z-index: 3;
  display: flex;
  flex-direction: column;
}

.bulle {
  transform: rotate(-3deg);
  background: var(--encre);
  border-radius: 8.96px;
  padding: 7.1904px 10.08px 5.1296px 10.08px;
}

.bulle.promo {
  background: var(--flash);
}

.bulle.double {
  padding-right: 7.84px;
}

.bulle-ligne {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 3.36px;
}

.prix {
  font: 700 16.8px / 18.48px var(--police);
  letter-spacing: -0.336px;
  color: var(--craie);
  white-space: pre-wrap;
}

.avant {
  font: 500 10.08px / 11.2px var(--police);
  color: var(--craie);
  opacity: 0.6;
  text-decoration: line-through;
  white-space: pre-wrap;
}

.marque-carte,
.nom {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

.marque-carte {
  margin-top: 13px;
  font: 600 10px / 16px var(--police);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--graphite);
}

.nom-ligne {
  margin-top: 2px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
}

.nom {
  flex: 1 1 0%;
  min-width: 0;
  font: 600 13px / 16.25px var(--police);
  color: var(--encre);
}

.votes {
  margin-top: 7px;
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.vote {
  height: 26px;
  border-radius: 8px;
  background: var(--papier);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.vote-non {
  flex: 0 0 52px;
}

.vote-oui {
  flex: 1 1 0%;
  min-width: 0;
}

.vote svg path {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.compte {
  font: 600 10px / 16px var(--police);
  color: var(--graphite);
  white-space: pre-wrap;
}

/* Le pouce déjà levé par ce visiteur : la pastille se remplit d'encre. */
.vote.on {
  background: var(--encre);
}

.vote.on svg path {
  stroke: var(--craie);
}

.vote.on .compte {
  color: var(--craie);
}

/* ------------------------------------------------------------ le voile */

/* Un voile d'encre : le panneau blanc reste la seule chose claire. */
.voile {
  position: fixed;
  inset: 0;
  background: rgba(33, 33, 33, 0.62);
  pointer-events: none;
}

/* ------------------------------------------------------------ le panneau */

/*
  Sur téléphone, le panneau est toute la page : sans bord ni coin, le
  contenu centré en hauteur, la bande-annonce au-dessus.
*/
.panneau {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--craie);
  padding: 44px 26px 40px 26px;
}

.contenu {
  display: flex;
  flex-direction: column;
}

.bloc {
  display: flex;
  flex-direction: column;
}

.marque {
  font: 800 64px / 64px var(--police);
  letter-spacing: -1.8px;
  color: var(--encre);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.point {
  color: var(--flash);
  letter-spacing: -0.021em;
}

.these {
  margin-top: 14px;
  font: 400 16px / 25px var(--police);
  color: var(--graphite);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.fort {
  font-weight: 600;
  color: var(--encre);
}

.etiquette-stores,
.ou-texte {
  font: 600 11px var(--police);
  line-height: normal;
  letter-spacing: 2.2px;
  color: var(--graphite);
  white-space: pre-wrap;
}

.etiquette-stores {
  margin: 30px 0 10px 0;
  text-transform: uppercase;
}

.badges {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/*
  Le badge des boutiques, noir plein et cerclé de gris : c'est le noir
  des badges officiels, pas l'encre de la charte.

  Tant que l'app n'est pas publiée, il s'affiche tel quel mais ne mène
  nulle part (aria-disabled) ; le script en fait un lien le jour où
  mobile/src/constants/stores.ts en donne un.
*/
.badge {
  flex: 1 1 0%;
  min-width: 0;
  box-sizing: border-box;
  height: 54px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 12px;
  background: #000000;
  border: 1px solid #a6a6a6;
  border-radius: 9px;
  text-decoration: none;
  color: var(--craie);
}

/* Le logo cède un peu de place avant le texte, comme dans l'app où les
   vues ne rétrécissent pas et le dessin, si. */
.badge svg {
  flex: 0 1 auto;
  min-width: 0;
}

.badge-textes {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.badge-sous {
  font: 500 10.5px / 13px var(--police);
  white-space: pre-wrap;
}

.badge-nom {
  font: 600 19px / 22px var(--police);
  letter-spacing: -0.3px;
  white-space: pre-wrap;
}

a.badge[href] {
  cursor: pointer;
  touch-action: manipulation;
}

.ou {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
}

.filet {
  flex: 1 1 0%;
  height: 1px;
  background: var(--ligne);
}

.ou-texte {
  flex-shrink: 0;
}

.web {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 12px;
  background: var(--flash);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.web span {
  font: 700 14px var(--police);
  line-height: normal;
  color: var(--craie);
  white-space: pre-wrap;
}

/* L'appui de l'app : une opacité, pas de survol. */
.web:active,
a.badge[href]:active {
  opacity: 0.75;
}

.web:focus-visible,
a.badge[href]:focus-visible,
.film-son:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ la bande-annonce */

/*
  Sans JavaScript, pas de vidéo : c'est le script qui choisit laquelle
  charger, et une boîte vide ne dirait rien. Le panneau reste celui
  d'avant.
*/
.film-colonne {
  display: none;
}

/*
  Sous 900 points, le film vient en bas du bloc, sous les portes : on lit
  d'abord ce qu'est Klader et ce qu'on peut faire, le film suit. Il passe
  après le contenu par `order`, sans toucher à l'ordre du document.
*/
.js .film-colonne {
  display: flex;
  justify-content: center;
  order: 1;
  margin-top: 28px;
}

/*
  Le film horizontal, aussi sur téléphone : toute la largeur du contenu,
  en 16:9.
*/
.film {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: var(--shot);
  isolation: isolate;
}

.film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Un filet de la couleur des bords du panneau : sur les plans clairs du
   film, le cadre se perd sinon dans le blanc. */
.film::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(33, 33, 33, 0.08);
  pointer-events: none;
}

/* Toute la vidéo est un bouton : un clic met en pause ou relance. */
.film-bascule {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.film-bascule:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--action);
}

/* Le gros bouton de lecture, seulement à l'arrêt. */
.film-lecture {
  display: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(33, 33, 33, 0.78);
  /* Un liseré clair : sur les plans noirs du film, le rond d'encre seul
     disparaissait. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  align-items: center;
  justify-content: center;
}

.film[data-etat='pause'] .film-lecture {
  display: flex;
}

.film-lecture svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
}

/*
  « Activer le son », une pastille d'encre comme celles du film. En bas
  à droite : c'est le coin que ses plans laissent le plus souvent vide.
*/
.film-son {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: 0;
  padding: 0 13px 0 10px;
  border: 0;
  border-radius: 16px;
  background: var(--encre);
  color: var(--craie);
  font: 600 12px / 1 var(--police);
  cursor: pointer;
  touch-action: manipulation;
}

.film[data-demarre='1'] .film-son {
  display: flex;
}

.film-son svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.film-son svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.film-son .son-actif,
.film[data-son='actif'] .film-son .son-muet {
  display: none;
}

.film[data-son='actif'] .film-son .son-actif {
  display: inline;
}

.film-son:active {
  opacity: 0.75;
}

.film[data-etat='erreur'] .film-son,
.film[data-etat='erreur'] .film-lecture {
  display: none;
}

/* ------------------------------------------------------------ bureau */

/*
  Sur bureau, le panneau devient une carte à deux colonnes : le film à
  gauche, le contenu d'avant à droite, inchangé - même largeur, mêmes
  marges.

  640 × 360 n'est pas pris au hasard : avec les 47,5 points qui l'entourent
  en haut et en bas, le film fait exactement la hauteur du contenu (455).
  La carte garde donc la hauteur du panneau d'avant. Plus étroite, la
  fenêtre réduit le film, jamais le texte.

  Pas pour un téléphone (`:not(.telephone)`), même en paysage au-delà de
  900 points : il garde sa page à lui, plus bas.
*/
@media (min-width: 900px) {
  :root:not(.telephone) .page {
    flex-direction: row;
    padding: 24px 0;
  }

  :root:not(.telephone) .fond.pret {
    display: flex;
  }

  /*
    Sur bureau aussi, une seule colonne (choix du 30 sept. 2026) : le
    contenu en haut, le film dessous, de la même largeur que le haut du
    bloc. Si la fenêtre manque de hauteur, accueil.js réduit la carte
    entière (ajusterCarte), jamais le film seul.
  */
  :root:not(.telephone) .panneau {
    box-sizing: border-box;
    width: min(704px, calc(100vw - 48px));
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    /* En bas, le même écart que celui qui sépare les liens de droit du
       film (.liens-legaux, 18) : les liens sont centrés dans cet espace. */
    padding: 44px 48px 18px 48px;
    border: 1px solid var(--ligne);
    border-radius: 22px;
  }

  :root:not(.telephone).js .film-colonne {
    order: 1;
    flex: none;
    justify-content: center;
    margin: 28px 0 0 0;
    padding: 0;
  }

  :root:not(.telephone) .film {
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }

  :root:not(.telephone) .liens-legaux {
    margin-top: 18px;
  }

  :root:not(.telephone) .contenu {
    box-sizing: border-box;
    width: auto;
    padding: 0;
  }
}

/* ------------------------------------------------------------ les textes de droit */

/*
  Tout en bas du bloc, après le film (`order` : le film vient en 1) :
  trois liens très discrets, petits et en gris clair, qui ouvrent chacun
  leur page entière. Ils foncent au survol.
*/
.liens-legaux {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 16px;
  margin-top: 16px;
}

.liens-legaux a {
  font: 400 10.5px / 14px var(--police);
  color: #a8a8a8;
  text-decoration: none;
}

.liens-legaux a:hover {
  color: var(--graphite);
  text-decoration: underline;
}

.liens-legaux a:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------------------------------------ téléphone */

/*
  Un téléphone - la classe `telephone`, que aiguillage.js pose d'après
  l'agent utilisateur - n'a que les boutiques : la version web ne lui est
  pas servie (mobile/public/.htaccess). Ni « OU » ni « Continuer » : le
  script les retire du document, la feuille de style les cache dès le
  premier dessin.

  Une tablette ou une fenêtre d'ordinateur étroite n'est pas concernée :
  elle garde la page d'au-dessus, « Continuer » compris.
*/
.telephone .bloc-3 {
  display: none;
}

/*
  Pas de pop-up sur un téléphone : ni fond, ni voile, ni carte posée
  dessus. Une page blanche, tout de suite là - le bloc en haut, le film en
  bas (règles du portrait plus bas). Le blanc couvre aussi ce que la
  fenêtre montre autour quand les barres du navigateur bougent.
*/
.telephone,
.telephone body {
  background: var(--craie);
}

.telephone .fond,
.telephone .voile {
  display: none;
}

.js.telephone .panneau {
  opacity: 1;
}

/*
  Le contenu et le film ne s'étirent pas au-delà de 480 points : en
  portrait, un téléphone n'y arrive pas ; en paysage, les badges et le
  film resteraient sinon larges comme l'écran.
*/
.telephone .contenu,
.telephone .film-colonne {
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  align-self: center;
}

/*
  Sur un écran de 320 points, les deux badges côte à côte n'ont que 134
  points chacun : le logo, écrasé par le texte, disparaissait. Le nom de
  la boutique et les marges se resserrent avec la largeur ; 19 points
  dès 405.
*/
.telephone .badge {
  gap: clamp(7px, 2.5vw, 10px);
  padding: 0 clamp(8px, 2.5vw, 12px);
}

.telephone .badge-nom {
  font-size: clamp(15px, 4.7vw, 19px);
}

/* La pastille du son, plus petite : sur un film de 280 points de large,
   celle du bureau en couvrait près de la moitié. */
.telephone .film-son {
  right: 8px;
  bottom: 8px;
  gap: 5px;
  height: 26px;
  padding: 0 10px 0 8px;
  border-radius: 13px;
  font-size: 11px;
}

.telephone .film-son svg {
  width: 14px;
  height: 14px;
}

/*
  En portrait, un seul écran, sans défiler : la marque, la phrase, les
  badges, puis le film, qui prend la place qui reste.

  La hauteur est celle de l'écran barres du navigateur comprises (svh) :
  la page ne passe jamais sous la barre d'adresse ni sous celle des
  onglets. Tailles et espacements se resserrent avec elle, de leur taille
  d'origine à 600 points de haut jusqu'à leur plus petite à 460 - un
  iPhone SE de 2016 dans Safari, barres comprises. Chaque valeur suit la
  même droite : min + (hauteur − 460) × (max − min) / 140, bornée. Dès
  600 points, tout tient à taille pleine, même sur 320 de large : se
  resserrer plus haut ne laissait que du blanc.

  Au-delà de 600, les deux écarts entre les blocs - avant les boutiques,
  avant le film - continuent de grandir, jusqu'à 860 : le film, en 16:9,
  est limité par la largeur, et sans cela tout le surplus d'un grand
  téléphone partait en blanc au-dessus et au-dessous d'un bloc qui
  flottait au milieu. Les tailles, elles, restent celles de l'app. Une
  fois ces écarts pleins, le reste du blanc est celui d'un film large dans
  un écran haut : on le laisse, centré.

  Le film garde son 16:9 et ne se rogne jamais : il fait la largeur du
  contenu quand la hauteur le permet, et rétrécit sinon, centré.

  En paysage, la hauteur manque : on laisse la page défiler plutôt que
  de tout écraser (règles d'au-dessus, sans celles-ci).
*/
.telephone {
  --ecran: 100vh;
}

@supports (height: 100svh) {
  .telephone {
    --ecran: 100svh;
  }
}

@media (orientation: portrait) {
  /* Le rebond d'iOS en haut et en bas : une page qui ne défile pas n'a
     pas à glisser sous le doigt. */
  .telephone,
  .telephone body {
    overscroll-behavior: none;
  }

  .telephone .page {
    height: var(--ecran);
    min-height: 0;
  }

  /* Le temps de l'entrée, le panneau arrive de 28 points plus bas : sans
     cela, la page déborderait d'autant et se laisserait tirer. Une fois
     entré (`entree-faite`, posée par accueil.js, ou le filet
     d'aiguillage.js), plus rien ne rogne : si le contenu ne tenait pas,
     il défilerait plutôt que d'être coupé. */
  .telephone:not(.entree-faite):not(.entree-finie) .page {
    overflow: hidden;
  }

  /* Le bloc en haut de l'écran, le film et les liens de droit en bas : la
     marge automatique sous le contenu prend toute la place libre. */
  .telephone .panneau {
    justify-content: flex-start;
    flex: 1 1 auto;
    min-height: 0;
    /* La largeur du contenu, que le film lit (100cqw) pour sa hauteur. */
    container-type: inline-size;
    padding: clamp(20px, calc(20px + (var(--ecran) - 460px) * 0.1715), 44px) clamp(20px, 6.7vw, 26px)
      clamp(18px, calc(18px + (var(--ecran) - 460px) * 0.1572), 40px);
  }

  .telephone .contenu {
    margin-bottom: auto;
  }

  .telephone .marque {
    font-size: clamp(44px, calc(44px + (var(--ecran) - 460px) * 0.1429), 64px);
    line-height: clamp(44px, calc(44px + (var(--ecran) - 460px) * 0.1429), 64px);
    /* −1,8 à 64 points, en proportion en dessous. */
    letter-spacing: -0.028125em;
  }

  .telephone .these {
    margin-top: clamp(9px, calc(9px + (var(--ecran) - 460px) * 0.0358), 14px);
    font-size: clamp(14.5px, calc(14.5px + (var(--ecran) - 460px) * 0.01072), 16px);
    line-height: clamp(21px, calc(21px + (var(--ecran) - 460px) * 0.0286), 25px);
  }

  /* Deux droites bout à bout : 16 → 30 de 460 à 600, puis 30 → 46 de 600
     à 860. */
  .telephone .etiquette-stores {
    margin-top: calc(
      clamp(16px, calc(16px + (var(--ecran) - 460px) * 0.1), 30px) +
        clamp(0px, calc((var(--ecran) - 600px) * 0.0616), 16px)
    );
    margin-bottom: clamp(8px, calc(8px + (var(--ecran) - 460px) * 0.0143), 10px);
  }

  .telephone .badge {
    height: clamp(44px, calc(44px + (var(--ecran) - 460px) * 0.0715), 54px);
  }

  /*
    La place du film : sa hauteur pleine largeur (16:9 de la largeur du
    contenu), qu'il cède s'il le faut - le seul bloc qui rétrécit. Il est
    lui-même un conteneur : le film y prend la plus grande taille 16:9
    qui tient dans les deux sens.
  */
  .telephone .film-colonne {
    flex: 0 1 auto;
    min-height: 0;
    height: calc(100cqw * 9 / 16);
    align-items: center;
    container-type: size;
    /* 14 → 28 de 460 à 600, puis 28 → 46 de 600 à 860. */
    margin-top: calc(
      clamp(14px, calc(14px + (var(--ecran) - 460px) * 0.1), 28px) +
        clamp(0px, calc((var(--ecran) - 600px) * 0.0693), 18px)
    );
  }

  .telephone .film {
    width: min(100cqw, 100cqh * 16 / 9);
  }

  /* Les liens de droit ne se resserrent qu'un peu : c'est le film qui
     cède la place, pas eux. */
  .telephone .liens-legaux {
    flex: none;
    margin-top: clamp(8px, calc(8px + (var(--ecran) - 460px) * 0.0572), 16px);
  }

  .telephone .liens-legaux a {
    font-size: 10px;
    line-height: 14px;
  }

  /* Sans unités de conteneur (Safari avant 16) : le film pleine largeur,
     comme avant ; sur les plus petits écrans, la page défile. */
  @supports not (width: 1cqw) {
    .telephone .film-colonne {
      height: auto;
      flex-shrink: 0;
      container-type: normal;
    }

    .telephone .film {
      width: 100%;
    }
  }
}

/* ------------------------------------------------------------ l'entrée */

/*
  Le script fait entrer le voile puis le panneau ; en attendant, ils sont
  cachés. Sans script (classe `js` absente), tout est là d'emblée. Le
  filet d'aiguillage.js et le mouvement réduit posent l'état final.
*/
.js .voile,
.js .panneau {
  opacity: 0;
}

.entree-finie .voile,
.entree-finie .panneau,
.entree-finie .bloc,
.entree-finie .film-colonne {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .js .voile,
  .js .panneau {
    opacity: 1;
  }

  .photo-cadre img {
    transition: none;
  }
}