/* ACP Services : adaptation téléphone (devis option B). Tout est sous @media (max-width: 800px) :
   au-dessus de 800 px de large, la mise en page d'origine ne change pas. */
@media (max-width: 800px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { font-size: 16px; line-height: 1.5; margin: 0; }

  /* Grand tableau de mise en page (995 px) : ses cellules s'empilent sur toute la largeur. */
  body > table, body > table > tbody, body > table > tbody > tr, body > table > tbody > tr > td {
    display: block; width: auto !important; max-width: 100%; box-sizing: border-box;
  }
  body > table > tbody > tr > td.shadowg, body > table > tbody > tr > td.shadowd,
  body > table > tbody > tr:first-child > td:first-child, body > table > tbody > tr:first-child > td:last-child,
  body > table > tbody > tr:last-child { display: none !important; }
  /* Le visuel de la camionnette (200 px) se prolonge dans le bandeau : seul le bandeau reste. */
  body > table > tbody > tr:first-child > td:nth-child(2) { display: none !important; }

  /* Bandeau : image pleine largeur. Sa carte cliquable a des coordonnées fixes qui ne suivent pas l'image réduite :
     on la neutralise et la rangée de liens texte prend le relais. */
  img.acp-bandeau { width: 100% !important; height: auto !important; pointer-events: none; }
  .acp-rubriques { display: flex !important; flex-wrap: wrap; gap: 6px; padding: 8px; background: #fff; }
  .acp-rubriques a {
    flex: 1 1 calc(50% - 6px); box-sizing: border-box; display: flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 6px 10px; text-align: center; font-size: 15px; line-height: 1.25;
    background: #13227f; color: #fff; border-radius: 6px; text-decoration: none; font-weight: bold;
  }
  .acp-rubriques a:hover { color: #fff; background: #015df4; }

  /* Le contenu passe avant le menu de gauche, qui suit juste après sous forme de liste à toucher. */
  body > table > tbody > tr:nth-child(2) { display: flex !important; flex-direction: column; }
  body > table > tbody > tr:nth-child(2) > td:nth-child(3) { order: -1; }
  #menu { width: auto !important; padding: 8px 12px; border-top: 2px solid #D7E4E2; }
  #menu ul { padding: 0; line-height: 1.3; }
  #menu li { padding-left: 22px; background-position: 4px 50%; }
  #menu li a { display: flex; align-items: center; min-height: 44px; font-size: 16px; }
  #recherche { display: none; }
  body > table > tbody > tr:nth-child(2) > td:nth-child(2) > p { padding: 0 12px; }

  /* Contenu : texte lisible, images et tableaux à la largeur de l'écran. */
  #contenu { padding: 10px 12px; overflow-wrap: anywhere; word-wrap: break-word; }
  #ariane { font-size: 14px; padding: 10px 12px 6px; overflow-wrap: anywhere; }
  #ariane a { display: inline-block; padding: 8px 0; }
  h1 { font-size: 21px; line-height: 1.3; padding-left: 48px; background-position: left 2px; }
  h2 { font-size: 20px; line-height: 1.3; }
  h3, h3 a, h4 { font-size: 18px; line-height: 1.35; }
  li a, .txt_ptit { font-size: 16px; }
  .actu { font-size: 15px; }
  img { max-width: 100% !important; height: auto !important; }
  img[src*="spacer.gif"] { display: none; }
  #contenu table, #contenu tbody, #contenu tr, #contenu td { display: block; width: auto !important; max-width: 100%; box-sizing: border-box; }
  #contenu table[width="224"] { width: 224px !important; margin: 0 auto 16px; }
  .spip_documents, .spip_documents_left, .spip_documents_right { max-width: 100% !important; box-sizing: border-box; }
  .spip_documents[style*="width:350px"], .spip_documents[style*="width: 350px"] { float: none !important; width: auto !important; margin: 0 auto 12px; text-align: center; }
  .spip_doc_titre, .spip_doc_descriptif { width: auto !important; max-width: 100%; }
  #documents_portfolio a { display: inline-block; margin: 0 4px 4px 0; }
  iframe, embed, object, video { max-width: 100%; }

  /* Numéros : visiblement touchables. */
  /* zone de 44 px au toucher, sans écarter les lignes du paragraphe (la marge négative annule le padding dans la ligne) */
  a.acp-tel { color: #015df4 !important; text-decoration: underline !important; display: inline-block; padding: 10px 0; margin: -10px 0; }

  /* Bouton « Appeler » fixé en bas (APPEL) ; le pied de page garde la place de le voir en entier. */
  .acp-appel {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center;
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50;
    min-height: 54px; padding: 6px 12px; box-sizing: border-box; border-radius: 10px;
    background: #13227f; color: #fff !important; text-decoration: none !important; font-weight: bold; font-size: 17px; line-height: 1.2;
    box-shadow: 0 6px 18px rgba(19, 34, 127, .35);
  }
  .acp-appel span { font-size: 14px; font-weight: normal; letter-spacing: .02em; }
  .acp-appel:active { background: #015df4; }
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

  /* Visionneuse photo des galeries : textes à leur taille d'origine pour ne pas se chevaucher. */
  #colorbox { font-size: 11px; line-height: normal; }

  /* Pied de page */
  body > table > tbody > tr:nth-child(3) > td:nth-child(2) { width: auto !important; }
  #footer { height: auto; padding: 8px 12px; font-size: 14px; line-height: 1.6; }
  #footer a { display: inline-block; padding: 10px 2px; }
}

/* Petits téléphones (13/11) : une photo flottante de 125 px ou plus laissait au texte une colonne de quelques lettres
   (« A ss ur e la pr ot ec... » sur l'adoucisseur à 360 px). Ces photos passent au-dessus du texte, centrées.
   Les petits logos (40 à 98 px) restent à côté du texte, ainsi que la photo des mains (233 px, page Nos partenaires) :
   elle longe une liste de noms courts, la passer au-dessus coupait la liste en deux. */
@media (max-width: 560px) {
  #contenu .spip_documents[style*="width:125px"], #contenu .spip_documents[style*="width:132px"],
  #contenu .spip_documents[style*="width:143px"], #contenu .spip_documents[style*="width:145px"],
  #contenu .spip_documents[style*="width:200px"] {
    float: none !important; display: block; margin: 0 auto 12px; max-width: 100%; text-align: center;
  }
}