/* Ajustements mobile (écrit à la main, non généré).
   Le design est pensé pour l'ordinateur ; ces règles reprennent sa mise en page
   sous 760 px (le même seuil que app.js). Les sélecteurs sont structurels : ils ne
   dépendent pas des styles en ligne, que les animations réécrivent. */
@media (max-width: 759px) {

  /* --- Hero : la maquette de site respire, la notification ne masque plus rien --- */
  [data-par="-0.05"] { width: 88% !important; }
  [data-par="-0.05"] > div:first-child > span:last-child { white-space: nowrap; }        /* barre d'adresse */
  [data-par="-0.05"] > div:nth-child(2) { gap: 16px !important; padding: 16px 18px !important; }
  [data-par="-0.05"] > div:nth-child(2) > div:nth-child(2) { grid-template-columns: 1fr !important; }
  [data-par="-0.05"] > div:nth-child(2) > div:nth-child(2) > div:last-child { display: none !important; } /* photo factice */
  [data-par="-0.05"] > div:nth-child(2) > div:nth-child(2) > div:first-child > span:nth-child(2) { font-size: 34px !important; }
  [data-par="-0.05"] > div:nth-child(2) > div:nth-child(2) > div:first-child > span:nth-child(3) { font-size: 13px !important; max-width: 32ch !important; }
  [data-par="-0.1"] {
    top: auto !important; bottom: 12px; right: 14px !important; left: auto !important;
    width: min(280px, calc(100% - 28px)) !important; padding: 12px !important; border-radius: 16px !important;
  }
  [data-par="-0.1"] > span:first-child { width: 38px !important; height: 38px !important; }

  /* --- Rangée de confiance : plus de séparateur orphelin --- */
  #accueil > div:last-child { row-gap: 14px !important; }
  #accueil > div:last-child > span:nth-child(2) { display: none; }

  /* --- Manifeste : un seul libellé, sur une ligne --- */
  [data-bt-wrap] > div > div:first-child > span:last-child { display: none; }

  /* --- Services : numéro | nom | (+), description alignée sous le nom --- */
  #services [data-on^="mouseenter:s"] > button { grid-template-columns: 30px minmax(0, 1fr) 28px !important; gap: 12px !important; }
  #services [data-on^="mouseenter:s"] > button > span:nth-child(1) { grid-column: 1; grid-row: 1; white-space: nowrap; }
  #services [data-on^="mouseenter:s"] > button > span:nth-child(1) > span { display: none; } /* « / » décoratifs */
  #services [data-on^="mouseenter:s"] > button > span:nth-child(2) { grid-column: 3; grid-row: 1; justify-self: end; }
  #services [data-on^="mouseenter:s"] > button > span:nth-child(3) { grid-column: 2; grid-row: 1; font-size: 17px !important; line-height: 1.25; }
  #services [data-on^="mouseenter:s"] > div > div > div { grid-template-columns: 30px minmax(0, 1fr) !important; gap: 12px !important; }
  #services [data-on^="mouseenter:s"] > div > div > div > span:nth-child(2) { display: none; }
  #services [data-on^="mouseenter:s"] > div > div > div p { font-size: 15.5px !important; }

  /* --- Cartes « Pour qui » : version compacte, pour qu'elles s'empilent comme sur ordinateur --- */
  [data-card] { min-height: 0 !important; padding: 20px 20px 18px !important; gap: 18px !important; justify-content: flex-start !important; }
  [data-card] > div:first-child { gap: 12px !important; padding-right: 52px; }
  [data-card] > div:first-child > div { flex: none !important; gap: 7px !important; padding-top: 2px !important; }
  [data-card] > div:first-child > h3 { font-size: 27px !important; line-height: 1.04 !important; }
  [data-card] > div:first-child > a { height: 42px !important; font-size: 13.5px !important; }
  [data-card] > div:first-child > a > span { width: 30px !important; height: 30px !important; }
  [data-card] > div:nth-child(2) { gap: 12px !important; }
  /* Le pictogramme passe en pastille, en haut à droite de la carte */
  [data-card] > div:nth-child(2) > div:first-child {
    position: absolute; top: 18px; right: 18px; width: 40px !important; aspect-ratio: 1 !important;
    background: none !important; border-radius: 50% !important;
  }
  [data-card] > div:nth-child(2) > div:first-child > span { width: 100% !important; }
  [data-card] > div:nth-child(2) > p { font-size: 15px !important; line-height: 1.5 !important; }
  [data-card] > div:nth-child(2) > ul li { padding: 9px 0 !important; font-size: 14px !important; }

  /* --- Contact : le titre garde ses deux pastilles sur la même ligne --- */
  #contact h2 { font-size: clamp(40px, 12.4vw, 56px) !important; }

  /* --- Pied de page : deux colonnes au lieu d'une longue liste --- */
  footer > div:first-child { display: grid !important; grid-template-columns: 1fr 1fr; gap: 32px 20px !important; }
  /* marque (pleine largeur) / navigation | suivre + retour en haut / contact (pleine largeur) */
  footer > div:first-child > div:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  footer > div:first-child > div:nth-child(2) { grid-column: 1; grid-row: 2; }
  footer > div:first-child > div:nth-child(4) { grid-column: 2; grid-row: 2; }
  footer > div:first-child > div:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  footer > div:first-child > a[aria-label="Retour en haut"] { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; width: 58px !important; height: 58px !important; }
  footer > div:first-child > div { min-width: 0; }
  footer > div:last-child { flex-direction: column; gap: 10px !important; }

  /* --- Navigation flottante : tous les liens, en défilement horizontal --- */
  nav[aria-label="Navigation rapide"] { width: calc(100vw - 24px) !important; }
  nav[aria-label="Navigation rapide"] > div {
    flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  nav[aria-label="Navigation rapide"] > div::-webkit-scrollbar { display: none; }
  nav[aria-label="Navigation rapide"] > div > a { flex: none; scroll-snap-align: start; white-space: nowrap; }
  nav[aria-label="Navigation rapide"] > div.at-end { -webkit-mask-image: none; mask-image: none; }
}

/* Très petits écrans (iPhone SE 1re génération, Android compacts) */
@media (max-width: 374px) {
  [data-card] > div:first-child > h3 { font-size: 24px !important; }
  #accueil h1 { font-size: 40px !important; }
}