/* ===========================================================================
   POLICES DES SITES CLIENTS
   ===========================================================================
   Exactement la même pile que Flopix (--police-principale dans css/variables.css),
   titres compris : la police système de chaque appareil — Segoe UI sur Windows,
   San Francisco sur macOS et iOS, Roboto sur Android.

   Un essai précédent séparait titres et texte sur des piles "de caractère"
   (Iowan Old Style / Trebuchet MS) pour éloigner les sites clients de l'allure de
   la plateforme. Rendu jugé peu soigné : ces polices ne se ressemblent pas d'un
   système à l'autre, et le mélange serif + sans donnait un résultat inégal selon
   l'appareil. La police système est la seule qui a l'air choisie partout.

   AUCUNE police n'est téléchargée : pas de requête vers un fournisseur extérieur,
   donc aucune adresse IP de visiteur transmise à un tiers — c'est le point que la
   CNIL sanctionne sur Google Fonts.

   Les deux variables sont conservées (et non fusionnées) : le jour où les titres
   doivent se distinguer, une seule ligne suffit à les séparer de nouveau. */
:root
{
  --police-site-titres: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-site-texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, *
{
  font-size: 100%;
  margin: 0;
  padding: 0;
}


img
{
  width: 100%;
}
video, audio
{
  width: 100%;
  height: 600px;
}

/* width:-webkit-fill-available est une propriété non standard, dont la résolution varie
   selon le navigateur et échoue dans une iframe imbriquée comme celle de l'aperçu :
   combinée à une hauteur fixe de 450px, la carte s'affichait en rectangle très large et
   court au lieu d'un carré. */
iframe
{
  width: 100%;
  height: 450px;
  border: 0;
}

.cviolet
{
  color: purple;
}
body
{
  width: 100%;
  height: 100%;
  background-color: var(--couleur-fond);
  color: var(--couleur-fond-ecriture);
  font-family: var(--police-site-texte);
}
body p
{
  font-size: 18px;
}
/* Titres en serif : c'est le contraste avec le texte courant qui donne son caractère
   au site, bien plus qu'un changement de taille. */
h1, h2, h3, h4
{
  font-family: var(--police-site-titres);
  letter-spacing: -0.01em;
}

h1
{
  font-size: 32px;
}
/* Titres de section (« Nos services », « Nos horaires »…).
   Ils étaient écrits en h3 jusqu'à ce que la hiérarchie soit corrigée pour le
   référencement : la page enchaînait un h1 puis des h3, en sautant le niveau h2. En
   passant les titres en h2, ils ont perdu du même coup la marge basse de 40px, qui
   n'était déclarée que sur h3 — plus aucun espace ne séparait un titre de son contenu.
   La règle est donc portée par h2, avec 70px au lieu de 40 : à 40px, le titre restait
   collé à ses pictogrammes et se lisait comme leur légende. */
h2
{
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 70px;
}

/* h3 sert désormais aux sous-titres de la modale des mentions légales, qui n'ont pas
   besoin de cet écart. */
h3
{
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 40px;
}

body a
{
  text-decoration: none;
  color: black;
  transition: 1s;
}
body a:hover
{
  text-decoration: underline;
}

/* ===========================================================================
   EN-TÊTE DU SITE CLIENT
   ===========================================================================
   Repris trait pour trait de l'en-tête de Flopix (css/layout.css) : barre pleine
   largeur, contenu centré, marque à gauche, menu à droite, hamburger sous 1150px.
   Mêmes dimensions, même logo de 44px, même graisse et même interlettrage sur le nom.
   Seules les couleurs changent : elles viennent du thème choisi par le client.

   L'ancien en-tête répartissait logo et nom sur 30/70 avec un logo de 125px, sans
   navigation. La barre faisait 80px de haut pour deux éléments centrés, alors que la
   même barre chez Flopix en fait 60 et porte tout un menu. */
header
{
  background-color: var(--couleur-header);
  color: var(--couleur-header-ecriture);
  /* Conservé : sans lui, un liseré d'un pixel apparaît entre l'en-tête et le corps,
     les deux bords s'arrondissant séparément au rendu. */
  margin-bottom: -1px !important;

  /* La barre reste en haut de l'écran pendant le défilement : le menu, le téléphone et
     le nom du commerce restent à portée sans avoir à remonter toute la page.

     sticky et non fixed : le résultat visible est le même, mais l'en-tête garde sa place
     dans le flux. En fixed il en sort, tout le contenu remonte de 76px sous la barre, et
     il faut compenser par un retrait en haut du corps — retrait qu'il aurait fallu tenir
     à jour à chaque changement de hauteur d'en-tête, et décliner pour le cas sans image
     (.container-sans-image) comme pour les 68px du téléphone.

     z-index 100 : au-dessus du contenu et du menu déroulant (10) et de son bouton (20),
     en dessous de la fenêtre des mentions légales (1000), qui doit pouvoir la recouvrir. */
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-entete-interieur
{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
  /* border-box : sans lui, le max-width porte sur la seule zone de contenu et les
     120px de retrait s'y ajoutent. La barre faisait alors 1520px de large quand le
     corps du site en faisait 1400, et les deux ne commençaient pas au même endroit. */
  box-sizing: border-box;
  /* 56px de logo plus 10px de marge intérieure en haut et en bas.
     Imposée en min-height pour que l'en-tête garde cette hauteur même sans logo, où le
     nom seul ne suffisait pas à la remplir (mesuré 51px pour une barre de 60).

     Plus haute que la barre de Flopix, qui fait 60px : les deux étaient alignées, mais
     le site client se regarde surtout à travers le mockup, réduit à un tiers de sa
     taille. À cette échelle, une barre de 60px se lisait comme un liseré. */
  min-height: 76px;
}

/* Le nom du site n'est CENTRÉ que dans un seul cas : ni logo, ni menu. La barre ne
   porte alors qu'un seul élément, et le laisser dans un coin déséquilibrait toute la
   largeur.

   Dès qu'il y a un menu, le nom repasse à gauche, même sans logo : la barre se lit
   alors comme celle de Flopix, marque à gauche et navigation à droite. Un nom centré
   entre les deux aurait donné trois zones à lire au lieu de deux, et se serait
   rapproché du menu à chaque mot ajouté.

   Positionnement absolu et non justify-content : sans logo comme avec, le menu doit
   rester calé à droite, et un centrage du conteneur flex l'aurait déplacé lui aussi.
   La largeur est bornée pour qu'un nom long ne vienne pas passer sous le menu. */
.site-entete-sans-logo:not(.site-entete-avec-menu) .site-marque
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 55%;
  text-align: center;
}

.site-marque
{
  padding: 8px 0;
  /* min-width:0 : sans lui, un nom de site long ne peut pas rétrécir sous sa largeur
     intrinsèque et pousse le menu hors de l'écran au lieu de passer à la ligne. */
  min-width: 0;
}

.site-marque a
{
  display: flex;
  align-items: center;
  /* 16px et non 10 : à 10px, le nom du site touchait presque le logo et les deux se
     lisaient comme un seul bloc. */
  gap: 16px;
  padding: 0;
  text-decoration: none;
  color: var(--couleur-header-ecriture);
}

.site-marque a:hover
{
  text-decoration: none;
}

.site-logo
{
  display: block;
  border-radius: 10px;
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex-shrink: 0;
}

.site-nom
{
  margin: 0;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 2px;
  line-height: 1.15;
  min-width: 0;
  overflow-wrap: break-word;
}

/* --- Menu -------------------------------------------------------------- */
/* margin-left:auto sur le menu ET sur le bouton hamburger : le justify-content du
   conteneur ne suffit pas.

   Quand le site n'a pas de logo, la marque passe en position absolue pour être centrée
   (voir .site-entete-sans-logo .site-marque). Elle sort alors du flux, et le menu se
   retrouve SEUL élément en flux : space-between n'a plus rien à répartir et le laisse
   collé à gauche. La marge automatique, elle, absorbe tout l'espace libre à sa gauche
   dans tous les cas de figure. */
.site-menu
{
  list-style: none;
  display: flex;
  margin: 0 0 0 auto;
  padding: 0;
}

.site-menu li
{
  margin-left: 25px;
}

.site-menu a
{
  position: relative;
  color: var(--couleur-header-ecriture);
  text-decoration: none;
  font-weight: 500;
  padding: 15px 0;
  display: block;
}

.site-menu a:hover
{
  text-decoration: none;
}

/* Soulignement animé qui se déploie de gauche à droite, comme sur Flopix. */
.site-menu a::after
{
  content: "";
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.site-menu a:hover::after
{
  transform: scaleX(1);
}

/* --- Bouton hamburger --------------------------------------------------- */
.site-menu-btn
{
  display: none;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--couleur-header-ecriture);
  z-index: 20;
  /* Même raison que pour .site-menu : sans logo, la marque quitte le flux et le bouton
     resterait calé à gauche. */
  margin-left: auto;
}

.site-menu-btn-icone
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 26px;
  height: 20px;
  box-sizing: border-box;
}

/* Hauteur fixe et flex-shrink:0 : sans quoi la dernière barre apparaît plus fine
   que les deux autres. */
.site-menu-btn-icone span
{
  display: block;
  flex-shrink: 0;
  height: 3px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.site-menu-btn-texte
{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}

.site-menu-btn.open .site-menu-btn-icone span:nth-child(1)
{
  transform: translateY(8px) rotate(45deg);
}

.site-menu-btn.open .site-menu-btn-icone span:nth-child(2)
{
  opacity: 0;
}

.site-menu-btn.open .site-menu-btn-icone span:nth-child(3)
{
  transform: translateY(-8px) rotate(-45deg);
}

/* Même point de bascule que Flopix : en dessous, la marque et les entrées de menu ne
   tiennent plus confortablement sur une ligne. */
@media (max-width: 1150px)
{
  .site-entete-interieur
  {
    padding: 0 40px;
  }

  .site-menu-btn
  {
    display: flex;
  }

  .site-menu
  {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--couleur-header);
    padding: 5px 30px 15px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
  }

  .site-menu.ouvert
  {
    display: flex;
  }

  .site-menu li
  {
    margin-left: 0;
  }
}

@media (max-width: 700px)
{
  .site-entete-interieur
  {
    padding: 0 20px;
    /* Un peu moins haute que sur ordinateur, la barre restant proportionnellement plus
       présente sur un écran étroit. */
    min-height: 68px;
  }

  /* 48px et non 38 : la barre passe à 68px sur téléphone, et un logo de 38px y flottait
     au milieu d'une bande vide. */
  .site-logo
  {
    width: 48px;
    height: 48px;
  }

  .site-nom
  {
    font-size: 18px;
    letter-spacing: 1px;
  }

  .site-marque a
  {
    gap: 12px;
  }
}

/* ===========================================================================
   APPARITION AU DÉFILEMENT
   ===========================================================================
   Le masquage n'est actif que si <html> porte la classe anim-actif, posée par un
   script en ligne dans le <head> de model.php. Sans JavaScript la classe n'existe
   pas, et rien n'est jamais masqué : le contenu reste lisible, y compris pour les
   robots d'indexation.

   L'animation ne porte que sur opacity et transform, les deux seules propriétés que
   le navigateur peut animer sans recalculer la mise en page ni repeindre la page.
   Animer une hauteur ou une marge à la place aurait fait saccader le défilement sur
   téléphone. */
/* Courbe d'accélération commune à toute la page.
   cubic-bezier(0.16, 1, 0.3, 1) part vite puis freine longuement : le mouvement se
   remarque dès la première fraction de seconde, et se pose sans à-coup. Un "ease"
   ordinaire, symétrique, donnait un glissement mou qui passait inaperçu. */
:root
{
  --courbe-apparition: cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-actif .anim-apparition
{
  opacity: 0;
  /* 34px au lieu de 18, et une légère réduction d'échelle : la section vient de plus
     loin, ce qui donne une impression de profondeur. Le scale reste discret (0.97) —
     au-delà, le texte se déforme visiblement pendant la transition.
     Seuls opacity et transform sont animés : ce sont les deux propriétés que le
     navigateur traite sans recalculer la mise en page. */
  transform: translateY(34px) scale(0.97);
  /* 0.9s au lieu de 0.5 : assez long pour qu'on ressente le mouvement en défilant.
     L'opacité monte un peu plus vite que le déplacement pour que le contenu devienne
     lisible avant la fin de la course. */
  transition: opacity 0.7s var(--courbe-apparition), transform 0.9s var(--courbe-apparition);
  /* Prévient le navigateur de préparer une couche dédiée avant l'animation. */
  will-change: opacity, transform;
}

.anim-actif .anim-apparition.anim-visible
{
  opacity: 1;
  transform: none;
  /* Libéré une fois l'apparition terminée : maintenir une couche pour un élément qui
     ne bougera plus consomme de la mémoire vidéo pour rien. */
  will-change: auto;
}

/* --- Apparition en cascade à l'intérieur d'une section ---------------------
   Les vignettes d'une même rangée (services, plateformes de livraison, réseaux
   sociaux, coordonnées, photos) arrivent l'une après l'autre plutôt que toutes
   ensemble. C'est ce décalage qui donne le mouvement : un bloc entier qui monte d'un
   seul tenant se lit comme une image qui apparaît, une rangée qui se remplit de gauche
   à droite se lit comme un geste.

   Le décalage est court (70 ms) : au-delà, les dernières vignettes traînent derrière le
   regard, qui a déjà quitté la rangée.

   Tout est conditionné à .anim-actif, posée par JavaScript : sans lui rien n'est jamais
   masqué, et le filet de sécurité de js/site-client.js peut retirer cette classe pour
   tout révéler d'un coup en cas d'imprévu. */
.anim-actif .anim-apparition #services-flex > .service-item,
.anim-actif .anim-apparition #commandes-flex > div,
.anim-actif .anim-apparition #reseaux-flex > div,
.anim-actif .anim-apparition #coordonnes-informations > div,
.anim-actif .anim-apparition.anim-cascade > div
{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s var(--courbe-apparition), transform 0.65s var(--courbe-apparition);
}

.anim-actif .anim-apparition.anim-visible #services-flex > .service-item,
.anim-actif .anim-apparition.anim-visible #commandes-flex > div,
.anim-actif .anim-apparition.anim-visible #reseaux-flex > div,
.anim-actif .anim-apparition.anim-visible #coordonnes-informations > div,
.anim-actif .anim-apparition.anim-visible.anim-cascade > div
{
  opacity: 1;
  transform: none;
}

/* Le retard démarre à la DEUXIÈME vignette : la première part avec sa section, sinon
   toute la rangée semblerait répondre en différé. */
.anim-actif .anim-apparition.anim-visible #services-flex > .service-item:nth-child(2),
.anim-actif .anim-apparition.anim-visible #commandes-flex > div:nth-child(2),
.anim-actif .anim-apparition.anim-visible #reseaux-flex > div:nth-child(2),
.anim-actif .anim-apparition.anim-visible #coordonnes-informations > div:nth-child(2) { transition-delay: 0.07s; }

.anim-actif .anim-apparition.anim-visible #services-flex > .service-item:nth-child(3),
.anim-actif .anim-apparition.anim-visible #commandes-flex > div:nth-child(3),
.anim-actif .anim-apparition.anim-visible #reseaux-flex > div:nth-child(3),
.anim-actif .anim-apparition.anim-visible #coordonnes-informations > div:nth-child(3) { transition-delay: 0.14s; }

.anim-actif .anim-apparition.anim-visible #services-flex > .service-item:nth-child(4),
.anim-actif .anim-apparition.anim-visible #commandes-flex > div:nth-child(4),
.anim-actif .anim-apparition.anim-visible #reseaux-flex > div:nth-child(4) { transition-delay: 0.21s; }

.anim-actif .anim-apparition.anim-visible #services-flex > .service-item:nth-child(5),
.anim-actif .anim-apparition.anim-visible #reseaux-flex > div:nth-child(5) { transition-delay: 0.28s; }

.anim-actif .anim-apparition.anim-visible #services-flex > .service-item:nth-child(6),
.anim-actif .anim-apparition.anim-visible #reseaux-flex > div:nth-child(6) { transition-delay: 0.35s; }

.anim-actif .anim-apparition.anim-visible #services-flex > .service-item:nth-child(n+7) { transition-delay: 0.42s; }

/* Le titre de section précède ses vignettes : il annonce ce qui arrive. */
.anim-actif .anim-apparition h2
{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--courbe-apparition), transform 0.6s var(--courbe-apparition);
}

.anim-actif .anim-apparition.anim-visible h2
{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce)
{
  /* Le visiteur a demandé à son système de limiter les animations : on ne discute pas,
     tout s'affiche sans transition. La règle couvre AUSSI les enfants en cascade, sans
     quoi ils seraient restés invisibles pour toujours, la transition qui devait les
     révéler ayant été supprimée. */
  .anim-actif .anim-apparition,
  .anim-actif .anim-apparition h2,
  .anim-actif .anim-apparition #services-flex > .service-item,
  .anim-actif .anim-apparition #commandes-flex > div,
  .anim-actif .anim-apparition #reseaux-flex > div,
  .anim-actif .anim-apparition #coordonnes-informations > div,
  .anim-actif .anim-apparition.anim-cascade > div
  {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Le corps du site s'aligne exactement sur l'en-tête : même largeur maximale, mêmes
   retraits latéraux que .site-entete-interieur, et donc que la barre de Flopix.
   Avec une largeur de 80%, le contenu et l'en-tête ne commençaient pas au même endroit,
   et l'écart grandissait avec la taille de l'écran. */
#container
{
  max-width: 1400px;
  margin: 70px auto;
  padding: 0 60px;
  box-sizing: border-box;
}

@media (max-width: 1150px)
{
  #container
  {
    padding: 0 40px;
  }
}

#commandes, #horaires, #coordonnes, #commander, #reseaux_sociaux, #deposer_avis, #temoignages
{
  margin-top: 70px;
}

/* Point d'arrivée des liens du menu.
   Sans ce réglage, le navigateur cale le HAUT EXACT de la section sur le bord supérieur
   de l'écran : le titre se retrouvait plaqué contre la barre, sans un pixel de
   respiration, et on ne voyait plus du tout d'où l'on venait. La réserve est prise
   au-dessus de la cible, la page s'arrête donc d'autant plus tôt.

   96px et non 50 depuis que l'en-tête est collant : il occupe en permanence les 76
   premiers pixels de l'écran, et une cible calée à 50px arrivait DERRIÈRE la barre.
   96 = 76 de barre + 20 de respiration. Sur téléphone la barre fait 68px, d'où 84.

   scroll-margin-top plutôt qu'un décalage en JavaScript : c'est le navigateur qui
   applique la règle, elle vaut donc aussi pour un lien ouvert directement avec son
   ancre dans l'adresse (model.php?mon-site#coordonnes), cas qu'un gestionnaire de clic
   ne verrait jamais passer. */
#commandes, #services, #deposer_avis, #coordonnes, #coordonnes-informations,
#horaires, #reseaux_sociaux, #text_libre, #images-presentation
{
  scroll-margin-top: 96px;
}

/* Placé JUSTE APRÈS la règle générale, et non dans le bloc téléphone plus haut dans le
   fichier : à spécificité égale c'est la dernière règle écrite qui l'emporte, et là-haut
   les 96px l'auraient écrasée. */
@media (max-width: 700px)
{
  #commandes, #services, #deposer_avis, #coordonnes, #coordonnes-informations,
  #horaires, #reseaux_sociaux, #text_libre, #images-presentation
  {
    scroll-margin-top: 84px;
  }
}

#images-presentation a
{
  text-decoration: underline;
}
#images-presentation a:hover
{
  text-decoration: none;
  transition: .2s;
}

/* La légende passe DANS l'image, en haut. Sous l'image, elle flottait entre deux
   photos sans qu'on sache toujours laquelle elle décrivait.

   width:fit-content est la clé : le bloc épouse alors la largeur réelle de l'image,
   et non celle de la colonne. Sans cela, une photo moins large que le conteneur se
   serait vu poser un bandeau dépassant de chaque côté. */
#images-presentation > div
{
  position: relative;
  width: fit-content;
  max-width: 100%;
  /* Aucune marge sous l'image : les photos se touchent. La version précédente laissait
     22px de vide de chaque côté du trait, ce qui coupait la série en blocs séparés par
     du blanc. Ici c'est le trait SEUL qui marque la coupure. */
  margin: 0 auto;
  text-align: center;
}

/* Trait de séparation entre deux photos. Sans lui, deux images de teintes proches se
   lisaient comme une seule, d'autant que la légende est maintenant DANS l'image et ne
   marque plus la coupure.

   Il est posé PAR-DESSUS le bas de l'image (bottom:0 sans padding) et non dans un
   espace réservé : c'est ce qui permet aux deux photos de se toucher tout en restant
   séparées par une barre nette.

   Couleur du header du site, et non currentColor semi-transparent comme avant : un
   trait à 18% d'opacité était lisible sur un fond uni, mais posé sur une photo il
   disparaissait dans l'image. La teinte du thème, elle, tranche sur n'importe quel
   cliché et rattache la barre à l'identité du site, comme les tableaux.

   :not(:last-child) : pas de trait sous la dernière, il fermerait la section pour rien. */
#images-presentation > div:not(:last-child)::after
{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--couleur-header);
}

/* display:block supprime l'espace de la ligne de base sous l'image : sinon le bloc
   est quelques pixels plus haut qu'elle, et le bandeau ne colle pas au bord. */
#images-presentation img,
#images-presentation video
{
  display: block;
  max-width: 100%;
}

/* Légende en PASTILLE, posée en bas de l'image et centrée, sur le modèle de l'encadré
   « Créez votre site facilement » de la page d'accueil.
   Elle occupait auparavant un bandeau pleine largeur collé en haut : lourd, et il
   recouvrait le sujet de la photo, qui est presque toujours cadré dans le tiers
   supérieur.

   Le texte est BLANC en dur, et non var(--couleur-fond-ecriture) : le fond de la
   pastille est toujours sombre, quelle que soit la couleur choisie par le client. Sur
   un thème clair, la variable aurait donné du blanc sur blanc.

   ELLE N'APPARAÎT QUE lorsque l'image traverse la bande centrale de l'écran, entre
   40% et 60% de sa hauteur : la légende accompagne alors la photo qu'on est en train
   de regarder, et s'efface pour les autres. C'est js/site-client.js qui pose la classe,
   sans aucun calcul de position (voir le rootMargin de l'observateur). */
#images-presentation p
{
  position: absolute;
  bottom: 18px;
  left: 50%;
  margin: 0;
  padding: 10px 20px;
  max-width: calc(100% - 32px);
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  word-wrap: break-word;
  /* translateX(-50%) centre la pastille sur sa propre largeur, quelle qu'elle soit ;
     le décalage vertical supplémentaire lui donne son mouvement d'arrivée. */
  transform: translate(-50%, 12px);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

#images-presentation p.legende-visible
{
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Sans JavaScript, la classe n'est jamais posée : la légende resterait invisible et
   l'information serait perdue. On la montre donc par défaut dans ce cas. */
html:not(.anim-actif) #images-presentation p
{
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce)
{
  #images-presentation p
  {
    transition: none;
  }
}

#text_libre
{
  padding: 40px 30px 0;
  margin: 40px 10% 70px 10%;
  text-align: center;
  border-top: 2px solid var(--couleur-fond-ecriture);
}
/* Le bouton reprend les couleurs de l en-tête du thème retenu, au lieu de deux
   couleurs choisies à part dans le formulaire. Elles donnaient des boutons sans
   rapport avec la charte du site, et ajoutaient deux décisions à une étape
   facultative. La couleur d écriture est celle déjà calculée pour l en-tête : elle
   garantit le contraste quelle que soit la teinte choisie. */
#text_libre a#texte_libre_bouton
{
  display: inline-block;
  margin-top: 15px;
  padding: 12px 30px;
  border: 2px solid;
  border-color: var(--couleur-header);
  background: var(--couleur-header);
  color: var(--couleur-header-ecriture);
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}

/* Rythme vertical du texte libre. Toute la respiration passe par une marge basse et
   une seule : le reset global (* { margin: 0 }) en haut de ce fichier prive les
   paragraphes de leurs marges, et une liste en inline-block ne fusionne jamais ses
   marges avec le bloc suivant. Résultat avant correction : deux paragraphes collés,
   mais 30px entre une liste et un tableau (15 + 15). Ici, chaque écart vaut 18px. */
#text_libre > p,
.texte-libre-liste,
.texte-libre-tableau
{
  margin-top: 0;
  margin-bottom: 18px;
}
#text_libre > *:last-child
{
  margin-bottom: 0;
}
.texte-libre-liste
{
  display: inline-block;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
}
.texte-libre-liste li
{
  margin-bottom: 6px;
}
/* Le tableau du texte libre reprend les couleurs du tableau des horaires : en-tête à la
   couleur du bandeau, corps dans une teinte légère de cette même couleur. Il était
   auparavant en gris neutre, sans aucun rapport avec la charte choisie par le client —
   deux tableaux sur la même page, deux apparences différentes.
   overflow:hidden est nécessaire pour que l arrondi rogne réellement les cellules :
   sans lui, les coins des cellules d en-tête dépassent du cadre. */
.texte-libre-tableau
{
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  width: 90%;
  max-width: 500px;
  border-radius: 3px;
  overflow: hidden;
}
.texte-libre-tableau th, .texte-libre-tableau td
{
  padding: 10px 14px;
  text-align: left;
  /* Une cellule contenant un mot long (adresse, référence produit) élargirait sinon
     le tableau au-delà de la largeur de l'écran sur téléphone. */
  overflow-wrap: break-word;
  word-break: break-word;
}
/* En-tête à la couleur pleine du bandeau, comme la première ligne des horaires. */
.texte-libre-tableau th
{
  font-weight: 700;
  background: var(--couleur-header);
  color: var(--couleur-header-ecriture);
}
/* Corps en teinte légère : le texte reste celui du site, lisible sur un fond aussi pâle.
   Employer la couleur d écriture du bandeau donnerait ici du blanc sur presque blanc. */
/* Aucun filet entre les lignes, comme le tableau des horaires : le contraste entre
   l'en-tête plein et le corps en teinte légère suffit à séparer les lignes, et les
   traits ajoutaient un quadrillage inutile. */
.texte-libre-tableau td
{
  background: var(--couleur-header-leger);
  color: var(--couleur-fond-ecriture);
  border: 0;
}
#deposer_avis
{
  background-color: white;
  border-radius: 15px;
}
#deposer_avis > div:first-child
{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--couleur-opacity-header);
  color: var(--couleur-opacity-header-ecriture);
  text-align: center;
  padding: 25px 5%;
  border-radius: 15px;
}
#deposer_avis > div:first-child > div:last-child img
{
  transform: rotate(30deg);
}
#deposer_avis h2
{
  margin-bottom: 0;
  text-align: center;
}
#deposer_avis > div:first-child div
{
  width: 33%;
}
#deposer_avis a
{
  color: var(--couleur-opacity-header-ecriture);
  font-weight: 700;
}
#deposer_avis > div:first-child div:nth-child(2) img
{
  width: 125px;
  max-width: 125px;
}
#deposer_avis img
{
  width: 100px;
  max-width: 100px;
}
#commandes #commandes-flex
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/* Toutes les cases de la même largeur, quelle que soit la longueur du libellé.
   « Uber eats » tient en un mot, alors que la livraison à domicile porte une phrase
   saisie par le client : sans largeur imposée, cette case s'étirait sur toute la ligne
   et occupait à elle seule plus de place que les trois autres réunies, avec son
   pictogramme perdu au milieu d'un grand vide.

   160px : de quoi loger le pictogramme (75px plus ses 28px de marge intérieure) et
   laisser le texte passer sur trois ou quatre lignes sans devenir illisible. */
#commandes #commandes-flex > div
{
  width: 160px;
  margin: 0 25px 25px 25px;
  text-align: center;
  cursor: pointer;

  /* Tout le contenu poussé vers le bas : les libellés se posent juste au-dessus de leur
     pictogramme, sur une même ligne d'appui, et les pictogrammes restent alignés entre
     eux. Le vide créé par une phrase de plusieurs lignes se retrouve ainsi en haut de
     la rangée, là où il ne sépare pas le mot de son image. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Rattrapage du vide laissé en haut des cases courtes quand la phrase de livraison à
   domicile occupe plusieurs lignes : la rangée entière remonte d'à peu près la hauteur
   de ce vide, si bien que la section retombe sur l'aplomb qu'elle aurait avec une phrase
   d'une seule ligne.
   Mesuré : à 160px de large et 18px de texte, une ligne fait 24px de haut ; le titre
   laisse 70px sous lui. Au dernier palier la rangée dépasse donc légèrement cette limite
   et la phrase monte au niveau du titre — sans le gêner, celui-ci étant aligné à gauche
   (60 à 247px) quand les cases sont centrées (à partir de 365px).
   Réservé aux écrans larges : sur téléphone les cases font 130px, la phrase y prend bien
   plus de lignes et la marge basse de 20px suffit à aérer. */
@media (min-width: 800px)
{
  /* Deux lignes : 24px de vide. */
  #commandes #commandes-flex.commandes-libelle-2-lignes
  {
    margin-top: -25px;
  }
  /* Trois lignes : 48px de vide. */
  #commandes #commandes-flex.commandes-libelle-3-lignes
  {
    margin-top: -50px;
  }
  /* Quatre lignes et plus : 72px de vide et davantage, plafonné à 80px. */
  #commandes #commandes-flex.commandes-libelle-4-lignes
  {
    margin-top: -80px;
  }
}

/* Le libellé passe à la ligne au lieu d'élargir la case. overflow-wrap traite le cas
   d'une adresse ou d'un mot très long saisi d'un trait, qui déborderait sinon. */
#commandes #commandes-flex > div > p:first-child
{
  overflow-wrap: break-word;
  line-height: 1.35;
  margin-bottom: 4px;
}
#commandes img
{
  width: 75px;
  margin-top: 10px;
}
/* --- Services proposés ---------------------------------------------------- */
/* Même grille que la livraison, à une différence près : ces pastilles ne mènent nulle
   part. Pas de cursor:pointer, pas de réaction au survol (voir plus bas, la règle des
   pastilles cliquables les écarte explicitement) : un pictogramme qui se soulève sous
   la souris promet un clic, et ici il n'y en a pas. */
#services #services-flex
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#services #services-flex > .service-item
{
  width: 110px;
  margin: 0 18px 22px 18px;
  text-align: center;
}
#services #services-flex > .service-item img
{
  box-sizing: content-box;
  width: 52px;
  padding: 14px;
  border-radius: 15px;
  background: var(--couleur-header-leger);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}
#services #services-flex > .service-item p
{
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.3;
}

#commandes a, #text_libre a, #images-presentation a, #coordonnes #coordonnes-informations a
{
  color: var(--couleur-fond-ecriture);
}

#horaires_message_fermeture
{
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  font-weight: 700;
  background-color: var(--couleur-opacity-header);
  color: var(--couleur-opacity-header-ecriture);
  border-radius: 10px;
}
#horaires table
{
  border-collapse: collapse;
  width: 80%;
  margin: auto;
  border-radius: 10px;
  border: 0;
  border-spacing: 0;
  background-color: white;
}
/* Corps du tableau nettement plus transparent que l'en-tête : il était à 50% de la
   couleur du bandeau, trop proche de la ligne de titre pleine pour qu'on distingue
   franchement l'une de l'autre. À 15%, la hiérarchie se lit d'un coup d'œil.
   La couleur du texte passe de celle du bandeau à celle du SITE : sur une teinte aussi
   pâle, une écriture pensée pour un fond plein serait illisible. */
#horaires table tbody
{
  color: var(--couleur-fond-ecriture);
  background-color: var(--couleur-header-leger);
}
/* "#horaires th, td" visait #horaires th ET tous les <td> de la page, y compris ceux
   du tableau de texte libre : la virgule sépare deux sélecteurs complets, elle ne
   distribue pas le préfixe. Corrigé en nommant les deux.
   Espacement porté de 8px à 14px verticalement et 18px horizontalement : les lignes
   se touchaient presque et le texte collait aux bords du tableau. */
#horaires th, #horaires td
{
  border: 0;
  padding: 14px 18px;
}
#horaires th:nth-child(1)
{
  width: 30%;
  border-top-left-radius: 10px;
}
#horaires th:nth-child(2)
{
  border-top-right-radius: 10px;
}
#horaires th
{
  padding: 16px 18px;
  font-weight: 700;
}
#horaires tr:first-child
{
  color: var(--couleur-header-ecriture);
  background-color: var(--couleur-header);
}
#horaires td:first-child, #horaires th:first-child
{
  text-align: center;
}
#horaires td:last-child
{
  text-align: center;
  font-weight: 700;
}

#coordonnes #coordonnes-flex
{
  display: flex;
  align-items: center;
}
#coordonnes #coordonnes-flex > div
{
  width: 48%;
  margin: 0 1%;
}

#coordonnes #coordonnes-informations > div
{
  width: 90%;
  margin: auto auto 40px;
  text-align: center;
}
#coordonnes #coordonnes-informations > div:last-child
{
  margin: auto;
}
#coordonnes #coordonnes-informations img
{
  width: 50px;
  margin-bottom: 10px;
}
#coordonnes #coordonnes-map img
{
  width: 80%;
  border-radius: 10px;
}

/* La carte prend une forme carrée, identique dans le mockup et sur le site réel.
   Le carré est obtenu par un padding en pourcentage sur le lien qui l'enveloppe, et
   non par aspect-ratio seul : un pourcentage de padding vertical se résout toujours
   sur la LARGEUR du bloc conteneur, ce qui donne un carré exact dans tous les
   navigateurs, y compris ceux qui ignorent aspect-ratio. Avec aspect-ratio seul et
   height:auto, une iframe retombe sur sa hauteur par défaut de 150px, donc un
   rectangle très aplati.

   Le max-width est porté par le conteneur et non par l'iframe : posé sur l'élément
   qui porte le padding, il aurait rogné la largeur sans rogner la hauteur, et cassé
   le carré au-delà de 520px. */
#coordonnes #coordonnes-map > div
{
  width: 80%;
  max-width: 520px;
  margin: 0 auto;
}

/* Le carré est désormais porté par .carte-cadre et non plus par le lien qui enveloppait
   la carte : ce lien a disparu (la carte n'est plus chargée d'emblée), et un sélecteur
   « > div a » attraperait maintenant le lien « Ouvrir dans Google Maps » placé en
   dessous, à qui il donnerait une hauteur d'un carré entier. */
#coordonnes #coordonnes-map .carte-cadre
{
  display: block;
  position: relative;
  width: 100%;
  padding-top: 100%;
}

/* Le déclencheur occupe exactement la place que prendra la carte : au clic, elle se
   substitue à lui sans que le reste de la page bouge d'un pixel. */
#coordonnes #coordonnes-map .carte-bouton
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  border: 1px dashed currentColor;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.2s ease;
}

#coordonnes #coordonnes-map .carte-bouton:hover
{
  opacity: 0.75;
}

#coordonnes #coordonnes-map .carte-bouton-picto
{
  width: 42px;
  height: auto;
}

#coordonnes #coordonnes-map .carte-bouton-titre
{
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* La mention est une information, pas un argument : plus petite et moins contrastée que
   l'action elle-même, mais lisible — c'est elle qui rend le consentement éclairé. */
#coordonnes #coordonnes-map .carte-bouton-note
{
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.75;
  max-width: 260px;
}

#coordonnes #coordonnes-map .carte-lien
{
  margin-top: 12px;
  font-size: 15px;
}

#coordonnes #coordonnes-map .carte-lien a
{
  text-decoration: underline;
  text-underline-offset: 3px;
}

#coordonnes #coordonnes-map iframe
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

#reseaux_sociaux #reseaux-flex
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#reseaux_sociaux #reseaux-flex > div
{
  margin: 0 25px 25px 25px;
  text-align: center;
  cursor: pointer;
}
#reseaux_sociaux img
{
  width: 60px;
  margin-top: 10px;
}

/* ===========================================================================
   PASTILLES CLIQUABLES
   ===========================================================================
   Réseaux sociaux, plateformes de livraison et coordonnées : les logos flottaient
   nus sur le fond, sans rien indiquer qu'on pouvait cliquer dessus. Ils sont
   maintenant posés dans un carré arrondi qui réagit au survol et à l'appui.

   Une seule règle pour les trois familles : ce sont les mêmes objets du point de vue
   du visiteur, un pictogramme qui mène quelque part, et les styler séparément aurait
   fini par les faire diverger.

   La teinte de fond vient du thème du client (--couleur-header-leger), pas d'un gris
   fixe : sur un thème sombre, un carré gris clair aurait fait tache. */
#reseaux_sociaux #reseaux-flex > div img,
#commandes #commandes-flex > div img,
#coordonnes #coordonnes-informations > div img
{
  box-sizing: content-box;
  padding: 14px;
  border-radius: 15px;
  background: var(--couleur-header-leger);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  /* Seules opacity et transform sont animées : ce sont les deux propriétés que le
     navigateur traite sans recalculer la mise en page. */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#reseaux_sociaux #reseaux-flex > div:hover img,
#commandes #commandes-flex > div:hover img,
#coordonnes #coordonnes-informations > div:hover img
{
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* L'appui enfonce la pastille : sur téléphone, où le survol n'existe pas, c'est le
   seul retour visuel qui confirme que le doigt a bien touché la cible. */
#reseaux_sociaux #reseaux-flex > div:active img,
#commandes #commandes-flex > div:active img,
#coordonnes #coordonnes-informations > div:active img
{
  transform: translateY(0) scale(0.94);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition-duration: 0.08s;
}

/* Le bloc entier des coordonnées est cliquable, pas seulement le pictogramme : le
   curseur doit le dire sur toute sa surface. */
#coordonnes #coordonnes-informations > div
{
  cursor: pointer;
}

/* --- Avis Google -------------------------------------------------------- */
/* SEUL le bouton Google réagit au survol. La flèche décorative est écartée
   explicitement : une règle qui visait « toutes les images de la carte » la faisait
   grandir elle aussi, alors qu'elle n'est pas cliquable et qu'elle est posée de
   travers, ce qui rendait le mouvement bancal. */
#deposer_avis > div:first-child > div:nth-child(2) img
{
  transition: transform 0.2s ease, filter 0.2s ease;
}

#deposer_avis > div:first-child > div:nth-child(2) a:hover img
{
  transform: scale(1.06);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
}

#deposer_avis > div:first-child > div:nth-child(2) a:active img
{
  transform: scale(0.95);
  transition-duration: 0.08s;
}

/* La flèche conserve exactement sa rotation d'origine, sans transition : elle ne doit
   ni bouger ni grandir. */
#deposer_avis > div:first-child > div:last-child img
{
  transform: rotate(30deg);
  transition: none;
}

/* --- Bouton du texte libre --------------------------------------------- */
#text_libre a#texte_libre_bouton
{
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#text_libre a#texte_libre_bouton:hover
{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

#text_libre a#texte_libre_bouton:active
{
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition-duration: 0.08s;
}

/* Le réglage système « réduire les animations » supprime les déplacements, mais garde
   le changement d'ombre : le retour visuel reste, le mouvement disparaît. */
@media (prefers-reduced-motion: reduce)
{
  #reseaux_sociaux #reseaux-flex > div img,
  #commandes #commandes-flex > div img,
  #coordonnes #coordonnes-informations > div img,
  #deposer_avis > div:first-child img,
  #text_libre a#texte_libre_bouton
  {
    transition: box-shadow 0.2s ease;
  }

  #reseaux_sociaux #reseaux-flex > div:hover img,
  #commandes #commandes-flex > div:hover img,
  #coordonnes #coordonnes-informations > div:hover img,
  #text_libre a#texte_libre_bouton:hover
  {
    transform: none;
  }
}


#mentions-legales-informations > div
{
  margin: 50px auto;
}
#mentions-legales-informations h2
{
  font-size: 35px;
  text-align: center;
}


footer
{
  width: 100%;
  margin: 100px auto 0;
  text-align: center;
  padding: 30px 0;
  background-color: var(--couleur-header);
  color: var(--couleur-header-ecriture);
}
footer p
{
  font-size: 14px;
  margin-bottom: 10px;
}
footer p a
{
  color: var(--couleur-header-ecriture);
  font-size: 14px;
}

/* Lien vers flopix.fr sur le copyright : discret au repos, souligné seulement au survol.
   C'est la signature de la plateforme, elle n'a pas à attirer le regard plus que le
   contenu du site lui-même. */
.lien-copyright-flopix
{
  text-decoration: none;
  text-underline-offset: 2px;
  opacity: 0.9;
}

.lien-copyright-flopix:hover
{
  text-decoration: underline;
  opacity: 1;
}

/* Modale mentions légales */
/* Mentions légales : souligné en permanence, le soulignement disparaissant au survol.
   Obligation légale, donc repérable du premier coup d'œil sans qu'il faille promener la
   souris sur le pied de page pour découvrir que c'est cliquable. */
.lien-mentions
{
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lien-mentions:hover
{
  text-decoration: none;
}

.modal-overlay-mentions
{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
}

.modal-overlay-mentions.actif
{
  display: flex;
}

.modal-boite-mentions
{
  background: white;
  color: #222;
  padding: 35px;
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  text-align: left;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

/* Titre et croix sur une même ligne. La croix est collée en haut de la boîte et reste
   visible pendant la lecture, la boîte défilant sous elle. */
.modal-boite-mentions .mentions-entete
{
  position: sticky;
  top: -35px; /* compense le padding de la boîte, sinon un liseré blanc passe au-dessus */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: white;
  padding-top: 35px;
  margin: -35px 0 10px;
  z-index: 2;
}

.modal-boite-mentions .mentions-entete h2
{
  margin: 0;
}

.modal-boite-mentions .mentions-fermer-haut
{
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #f1f3f5;
  color: #444;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.modal-boite-mentions .mentions-fermer-haut:hover
{
  background: #e2e6ea;
}

/* 34px au-dessus de chaque titre de section, 20px en dessous : sans marge haute, les
   sections s'enchaînaient sans respiration et « À propos de Flopix » se lisait comme la
   suite du paragraphe précédent au lieu d'ouvrir un nouveau sujet. */
.modal-boite-mentions h3
{
  margin: 34px 0 20px;
  font-size: 22px;
  text-align: left;
}

/* Le premier titre ne doit pas décoller du titre principal de la modale. */
.modal-boite-mentions .mentions-entete + h3
{
  margin-top: 6px;
}

.modal-boite-mentions h4
{
  font-size: 15px;
  font-weight: 700;
  margin: 20px 0 6px;
}

/* Absence de mentions légales : signalée par un encadré ambre, pas en rouge.
   Le rouge dirait « ce site est dangereux » ; il s'agit d'une obligation non remplie par
   le propriétaire, pas d'une fraude. L'encadré suffit à ce que la phrase ne se lise pas
   comme un paragraphe ordinaire, ce qu'elle deviendrait posée à plat au milieu du reste. */
.modal-boite-mentions .mentions-incompletes
{
  background: #FFF4E0;
  border-left: 4px solid #E8A33D;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
  color: #6B4A12;
}

.modal-boite-mentions p
{
  font-size: 14px;
  margin-bottom: 4px;
  color: #444;
}

.modal-boite-mentions a
{
  color: #14B3FF;
}

.modal-actions-mentions
{
  margin-top: 25px;
  text-align: right;
}

.bouton-fermer-mentions
{
  padding: 10px 20px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #f4f4f4;
  cursor: pointer;
  font-size: 14px;
}

.bouton-fermer-mentions:hover
{
  background: #e8e8e8;
}

/* Sélectionneur pour la scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--couleur-fond-ecriture);
  border-radius: 5px;
  border: 2px solid var(--couleur-fond-ecriture);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--couleur-fond);
}

::-webkit-scrollbar-track {
  background-color: #CCCCCC;
  border-radius: 5px;
}

::-webkit-scrollbar-corner {
  background-color: #DCDCDC;
}

@media all and (max-width: 980px)
{
  h1
  {
    font-size: 25px;
  }
  h3
  {
    font-size: 22px;
    text-align: center;
  }
  #horaires table
  {
    width: 100%;
  }
  #coordonnes #coordonnes-flex
  {
    display: block;
  }
  #coordonnes #coordonnes-flex > div
  {
    width: 100%;
    margin: auto;
  }
  #coordonnes #coordonnes-map img
  {
    width: 100%;
  }
  #coordonnes #coordonnes-map > div
  {
    margin: 50px auto;
    text-align: center;
  }
  #container
  {
    width: 100%;
    margin: 0px auto;
    /* Même retrait que l'en-tête sur petit écran, et non 0 : sans lui le texte venait
       toucher les deux bords de l'écran alors que le logo et le menu, eux, restaient
       en retrait. */
    padding: 0 20px;
  }
  /* Sans photo, le contenu ne doit plus toucher l'en-tête : c'est la photo pleine
     largeur qui justifiait ce collage, pas le texte. */
  #container.container-sans-image
  {
    padding-top: 30px;
  }
  #images-presentation p
  {
    text-align: center;
  }
  #text_libre
  {
    margin: 40px 5% 70px 5%;
    /* 30px de retrait intérieur de chaque côté sur un écran de 375px, cela ne laissait
       que 278px de contenu : le tableau (90% de cette largeur) devenait illisible. */
    padding: 30px 15px 0;
  }
  .texte-libre-tableau
  {
    /* Pleine largeur du bloc sur téléphone : le retrait de 90% n'a de sens que sur un
       écran large, où il évite un tableau qui traverse toute la page. */
    width: 100%;
  }
  .texte-libre-tableau th, .texte-libre-tableau td
  {
    padding: 8px 10px;
    font-size: 15px;
  }
  #commandes, #horaires, #commander, #reseaux_sociaux, #temoignages
  {
    margin: 50px auto 0px;
    width: 90%;
  }
  #deposer_avis, #coordonnes
  {
    margin: 50px auto 0px;
    width: 100%;
  }
  /* Bandeau d'avis sur TOUTE la largeur de l'écran sur téléphone.
     Il restait en retrait de 20px de chaque côté, hérité du retrait intérieur de
     #container : les marges négatives le font ressortir de ce retrait, exactement de la
     valeur qui l'enfermait. C'est le seul bloc traité ainsi, parce que c'est le seul
     dont le fond coloré doit toucher les bords pour se lire comme une bande. */
  #deposer_avis
  {
    width: auto;
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 0;
  }
  #deposer_avis > div:first-child
  {
    border-radius: 0;
  }
  #deposer_avis > div:first-child div:nth-child(2) img
  {
    width: 100px;
    max-width: 100px;
  }
  #deposer_avis > div:first-child div:last-child img
  {
    width: 70px;
    max-width: 70px;
  }
  #reseaux_sociaux img
  {
    width: 50px;
  }
  #commandes img
  {
    width: 60px;
  }
  /* Cases resserrées pour en garder deux par ligne. La section ne fait que 300px de
     large sur un téléphone : aux 160px de l'ordinateur, une seule case tenait par
     ligne et la livraison s'étalait sur quatre écrans de haut. */
  #commandes #commandes-flex > div
  {
    width: 130px;
    margin: 0 8px 20px 8px;
  }
}

/* Espace entre le titre d'une section et son contenu sur petit écran.
   Un peu resserré par rapport aux 70px de l'ordinateur : sur un écran de 390px, la même
   valeur occupe une part bien plus grande de la hauteur visible, et le titre finissait
   par se détacher complètement de ce qu'il annonce. */
@media (max-width: 700px)
{
  #services h2, #commandes h2, #reseaux_sociaux h2, #horaires h2, #coordonnes h2
  {
    margin-bottom: 52px;
  }
}