/* ===========================================================================
   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;
  }

  /* Le lien ne prend que la largeur de son texte, au lieu de toute la largeur du menu
     déroulant. En display:block — la valeur héritée du menu horizontal, où elle est
     justifiée — la zone cliquable s'étendait jusqu'au bord droit : on ouvrait une section
     en visant le vide à côté du mot, et le soulignement au survol traversait tout le
     panneau. */
  .site-menu a
  {
    display: inline-block;
  }
}

@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;
}

/* Respiration sous les pictogrammes de livraison, avant le titre de la section suivante.
   En PADDING et non en marge : deux marges verticales voisines fusionnent en une seule,
   la plus grande l'emportant. Un margin-bottom ici aurait donc été entièrement absorbé
   par les 70px de marge haute de la section suivante, sans rien ajouter. */
#commandes
{
  padding-bottom: 30px;
}

/* 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 PLEINE et non currentColor semi-transparent comme à l'origine : un trait à 18%
   d'opacité était lisible sur un fond uni, mais posé sur une photo il disparaissait dans
   l'image. La teinte retenue est détaillée sur la déclaration elle-même.

   :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;
  /* NOIR fixe, indépendant du thème.
     Le trait sépare deux photos, pas deux sections du site : il n'a aucune raison de
     porter l'identité colorée du site, et une teinte qui change d'un client à l'autre
     rendait la séparation tantôt discrète tantôt criarde.
     Le noir tranche sur la très grande majorité des clichés. Réserve assumée : sur un
     site à fond sombre il se verra peu — mais il est posé entre deux photos, donc sur
     les photos elles-mêmes, et non sur le fond de la page. */
  background: #000000;
}

/* 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
{
  /* Plus de border-top. Le trait qui séparait ce bloc des photos se lisait comme une
     barre en travers de la page juste sous la dernière image, sans rien séparer
     d'utile : les sections du site se distinguent déjà par leurs espacements et leurs
     titres. Le retrait du padding haut évite le grand blanc qu'il laissait derrière lui,
     la marge suffisant à détacher le bloc. */
  padding: 0 30px;
  margin: 40px 10% 70px 10%;
  text-align: center;
}
/* 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;
  /* Couleurs fournies par la page (voir les blocs :root dans s/index.php) plutôt que
     reprises de l'en-tête : sur un thème sombre, un en-tête noir donnait un bouton noir
     sur fond gris foncé, invisible. Les variables basculent alors sur la couleur du
     texte et celle du fond, dont le contraste est garanti puisqu'elles ont été choisies
     l'une pour l'autre. Le repli conserve l'ancien comportement si la page ne les
     définit pas. */
  border-color: var(--couleur-bouton-fond, var(--couleur-header));
  background: var(--couleur-bouton-fond, var(--couleur-header));
  color: var(--couleur-bouton-texte, 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
{
  /* Mêmes dimensions et même arrondi que le tableau des horaires : les deux se suivent
     souvent sur la même page, et deux largeurs différentes se lisaient comme deux
     gabarits sans raison. Le plafond de 500px a sauté avec — il rendait le tableau du
     texte libre nettement plus étroit dès qu'on avait un écran large. */
  /* Le tableau épouse la BOÎTE de #text_libre, retrait intérieur compris : celle-ci fait
     exactement la même largeur que le tableau des horaires (80% du conteneur), les deux
     s'alignent donc au pixel près quand ils se suivent sur la page.
     Un simple width:80% aurait été 80% d'un bloc déjà réduit de 10% de chaque côté — le
     tableau démarrait 116px plus à droite que celui des horaires. */
  border-collapse: collapse;
  width: calc(100% + 60px);
  margin-left: -30px;
  margin-right: -30px;
  border-radius: 10px;
  overflow: hidden;
}
.texte-libre-tableau th, .texte-libre-tableau td
{
  /* Même espacement intérieur que les horaires : 14px verticalement, 18px
     horizontalement. */
  padding: 14px 18px;
  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;
  /* Traitement PROPRE aux en-têtes de tableau, et non celui du bouton.
     Le bouton passe au blanc plein sur fond sombre : c'est justifié pour un appel à
     l'action isolé, mais sur toute la largeur d'un tableau cela donnait un bandeau blanc
     éclatant à écriture noire, en rupture avec le reste de la page. Ces variables posent
     à la place un voile discret, dans l'esprit des pastilles, et laissent le thème clair
     strictement inchangé. */
  background: var(--couleur-entete-tableau, var(--couleur-header));
  color: var(--couleur-entete-tableau-ecriture, 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
{
  /* Teinte PROPRE au corps de tableau, plus légère que celle de l'en-tête.
     Le corps partageait la variable des pastilles, montée à 25% pour rester visible sur
     fond sombre — exactement la valeur retenue pour l'en-tête. Les deux se sont donc
     retrouvés de la même couleur, et le tableau n'avait plus de tête. Ici 12% : sur un
     fond très sombre, cela donne #2e2e2e contre #4d4d4d pour l'en-tête, une différence
     franche, avec du texte blanc à plus de 13:1 de contraste. */
  background: var(--couleur-corps-tableau, var(--couleur-pastille, 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;
  /* Bandeau d'avis laissé sur --couleur-opacity-header, volontairement.
     Sa couleur de texte est calculée à part, sur la teinte composée « en-tête à 50% posé
     sur blanc » (voir couleurSur50PourcentBlanc), un réglage déjà éprouvé et jugé bon.
     Le basculer sur le voile clair des thèmes sombres changeait son aspect sans corriger
     de défaut. */
  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
{
  /* Même couleur que le bandeau qui le porte : voir la règle ci-dessus. */
  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;
}

/* Le déclencheur des informations de livraison à domicile : un vrai <button>, dépouillé
   de l'apparence que le navigateur lui donne, pour qu'il se présente exactement comme
   les logos voisins. On garde le comportement (clavier, lecteurs d'écran) sans hériter
   du cadre gris et de la police système. */
#commandes .livraison-domicile-bouton
{
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

/* Le texte replié ne doit pas bousculer la rangée quand il se déploie : les cases
   s'alignent par le bas (voir #commandes-flex > div), la phrase pousse donc vers le
   haut et les pictogrammes restent sur leur ligne d'appui. */
#commandes .livraison-domicile-infos
{
  margin-bottom: 6px;

  /* Coupure AUTORISÉE AU MILIEU D'UN MOT.
     La case fait 160px de large et le texte est libre : « xcvxcvcxvwxcvwxcv... » saisi
     d'un trait est un seul mot pour le navigateur, qui refuse de le couper. Il débordait
     donc de la case et passait par-dessus les voisines.
     overflow-wrap:anywhere et non break-word : break-word ne coupe qu'en dernier recours
     et laissait justement passer ce cas. anywhere coupe dès que nécessaire, sans jamais
     toucher aux phrases normales, dont les espaces suffisent. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* --- 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-pastille, 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-voile, var(--couleur-opacity-header));
  color: var(--couleur-voile-ecriture, 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
{
  /* Voir .texte-libre-tableau td : corps plus léger que l'en-tête, sinon les deux se
     confondent sur un thème sombre. */
  color: var(--couleur-fond-ecriture);
  background-color: var(--couleur-corps-tableau, var(--couleur-pastille, 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
{
  /* Voir .texte-libre-tableau th : même surface, même traitement. */
  color: var(--couleur-entete-tableau-ecriture, var(--couleur-header-ecriture));
  background-color: var(--couleur-entete-tableau, 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;
  /* Même teinte que les pastilles de coordonnées, juste au-dessus dans la page.
     Le fond était transparent : sur un thème sombre, il ne restait que le liseré
     pointillé pour signaler une zone cliquable, et on ne voyait plus qu'un grand vide à
     la place de la carte.
     C'est bien --couleur-pastille et NON la version pré-inversée : ce bouton ne subit
     aucun filtre, contrairement aux pictogrammes de coordonnées. Les deux aboutissent
     donc à la même couleur à l'écran, chacune par son chemin. */
  background: var(--couleur-pastille, var(--couleur-header-leger));
  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
{
  /* Couleur HÉRITÉE du bloc coordonnées, au lieu du bleu de lien par défaut du
     navigateur. Sur un site à fond sombre, ce bleu passait à peine : le lien « Ouvrir
     dans Google Maps » devenait presque invisible, alors que le texte des coordonnées
     juste au-dessus reste toujours lisible, sa couleur étant calculée d'après le fond
     choisi par le client (--couleur-fond-ecriture). Reprendre la même couleur, c'est
     rester lisible quel que soit le thème, sans avoir à traiter chaque cas.
     Le soulignement suffit à signaler qu'il s'agit d'un lien. */
  color: inherit;
  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;
  /* --couleur-pastille-brute : valeur éventuellement PRÉ-INVERSÉE, pour les seuls
     pictogrammes qui subissent un filtre (voir la règle .coordonnes_img plus bas). Sur
     tous les autres, elle vaut simplement --couleur-pastille. */
  background: var(--couleur-pastille-brute, var(--couleur-pastille, 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;
}

/* Curseur en main sur tous les liens du site, déclaré explicitement.
   ------------------------------------------------------------------
   Sur le site publié, chaque lien porte une adresse et le navigateur met le curseur en
   main tout seul. Dans l'aperçu du formulaire, les adresses sont retirées pour qu'il
   cesse d'annoncer une destination en bas de fenêtre — et un <a> sans href retombe sur
   le curseur par défaut, c'est-à-dire la barre de saisie au-dessus d'un texte. Le menu
   et les boutons paraissaient morts tout en réagissant au survol.
   Déclarer la règle ici plutôt que dans l'aperçu : c'est le même fichier des deux côtés,
   et sur le site publié elle ne change rien puisque le curseur y est déjà celui-là. */
#deposer_avis > div:first-child > div:nth-child(2) a,
#coordonnes #coordonnes-map .carte-lien a,
.site-menu a,
.site-marque a,
#text_libre a,
#coordonnes #coordonnes-informations a
{
  cursor: pointer;
}

#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;
  }
  /* BORD À BORD sur téléphone, comme les photos : horaires, carte et tableaux du texte
     libre ressortent du retrait de 20px du conteneur par des marges négatives, et perdent
     leurs coins arrondis.
     Un arrondi n'a de sens que sur un bloc détaché du bord ; collé aux deux côtés de
     l'écran, il laisse deux entailles de fond dans les angles. */
  #horaires table
  {
    /* Pleine largeur d'ÉCRAN, quelles que soient les largeurs des blocs parents.
       Des marges négatives fixes ne suffisaient pas : la section #horaires fait 90% de
       large et #text_libre porte 5% de marge, il restait 17 à 32px de chaque côté.
       calc(-50vw + 50%) ramène le bloc au bord de l'écran sans avoir à connaître le
       retrait de chacun de ses ancêtres. */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    border-radius: 0;
  }

  /* L'arrondi des horaires n'est PAS porté par le tableau mais par ses deux cellules
     d'en-tête (10px sur le coin haut gauche et le coin haut droit) : le mettre à zéro sur
     le tableau ne changeait donc rien, les angles restaient ronds. */
  #horaires th:first-child,
  #horaires th:last-child,
  #horaires td:first-child,
  #horaires td:last-child
  {
    border-radius: 0;
  }

  #coordonnes #coordonnes-flex
  {
    display: block;
  }
  #coordonnes #coordonnes-flex > div
  {
    width: 100%;
    margin: auto;
  }
  #coordonnes #coordonnes-map img
  {
    width: 100%;
  }
  /* Carte bord à bord. Le lien « Ouvrir dans Google Maps » sous le cadre garde, lui, le
     retrait du texte : c'est une ligne de texte, pas un visuel. */
  #coordonnes #coordonnes-map .carte-cadre,
  #coordonnes #coordonnes-map iframe,
  #coordonnes #coordonnes-map .carte-bouton
  {
    border-radius: 0;
  }
  #coordonnes #coordonnes-map > div
  {
    width: calc(100% + 40px);
    max-width: none;
    margin: 50px -20px;
    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;
  }
  /* PHOTOS BORD À BORD sur téléphone.
     Le conteneur impose 20px de retrait de chaque côté, utile au texte mais pas aux
     photos : une image encadrée de deux bandes de fond fait vignette d'article, là où
     une photo pleine largeur fait devanture. Les marges négatives la font ressortir de
     ce retrait, exactement de la valeur qui l'enfermait — même procédé que le bandeau
     d'avis juste au-dessus.
     La largeur imposée remplace le width:fit-content de l'ordinateur, qui faisait épouser
     au bloc la largeur RÉELLE de l'image : sur un écran étroit, une photo peu large
     serait restée centrée au milieu de deux vides. */
  #images-presentation
  {
    margin-left: -20px;
    margin-right: -20px;
  }
  #images-presentation > div
  {
    width: 100%;
    max-width: none;
  }
  #images-presentation img,
  #images-presentation video
  {
    width: 100%;
    max-width: none;
  }
  /* Pastille de légende resserrée sur téléphone.
     Aux valeurs de l'ordinateur (10px/20px de retrait, 18px du bas), elle occupait une
     part bien plus grande d'une photo affichée en 375px de large qu'elle ne le fait sur
     un écran large — c'est la photo qui rétrécit, pas la pastille. */
  #images-presentation p
  {
    text-align: center;
    bottom: 12px;
    padding: 7px 14px;
    font-size: 13px;
  }
  #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
  {
    /* Bord à bord : le retrait de 90% n'a de sens que sur un écran large, où il évite un
       tableau qui traverse toute la page. Voir le commentaire des horaires ci-dessus pour
       l'arrondi retiré. Le bloc #text_libre porte en plus une marge de 5%, annulée ici. */
    /* Pleine largeur d'ÉCRAN, quelles que soient les largeurs des blocs parents.
       Des marges négatives fixes ne suffisaient pas : la section #horaires fait 90% de
       large et #text_libre porte 5% de marge, il restait 17 à 32px de chaque côté.
       calc(-50vw + 50%) ramène le bloc au bord de l'écran sans avoir à connaître le
       retrait de chacun de ses ancêtres. */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    border-radius: 0;
  }
  .texte-libre-tableau th, .texte-libre-tableau td
  {
    padding: 8px 10px;
    font-size: 15px;

    /* Centré sur téléphone, en-têtes comme cellules. Sur ordinateur l'alignement à gauche
       aide à parcourir une colonne du regard ; sur un écran étroit, le tableau occupe
       toute la largeur et son texte calé à gauche jurait avec le reste du bloc, centré.
       C'est aussi ce que font les horaires juste à côté. */
    text-align: center;
  }
  #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;
  }
}

/* Pastille des pictogrammes de coordonnées, quand ils sont inversés.
   ------------------------------------------------------------------
   Ces pictogrammes sont des PNG noirs. Sur un thème sombre, ils reçoivent
   filter: invert(1) pour devenir blancs — et le filtre s'applique à TOUT l'élément,
   fond compris. La pastille claire qu'on venait de leur donner redevenait donc sombre,
   et le carré restait invisible sur la page : c'est ce qu'on observait encore après la
   correction générale des pastilles.

   Le fond et le filtre étant portés par le même <img>, on ne peut pas inverser l'un sans
   l'autre. On donne donc ici la couleur PRÉ-INVERSÉE : du noir à 25%, qui ressort en
   blanc à 25% une fois le filtre appliqué — exactement la teinte voulue.

   La variable n'est définie que sur les thèmes où le filtre existe. Ailleurs, la règle
   ci-dessus retombe sur --couleur-pastille et rien ne change. */
#coordonnes #coordonnes-informations > div img.coordonnes_img
{
  background: var(--couleur-pastille-coordonnees, var(--couleur-pastille, var(--couleur-header-leger)));
}