/* ═══════════════════════════════════════════════════════════════════════
   ERASIC — CORRECTIONS DU RENDU SUR TÉLÉPHONE
   Posé le 22 octobre 2026.

   LA RÈGLE QUI COMMANDE TOUT CE FICHIER
   Nouhaila : « le site dans le pc est top, je veux franchement que rien ne
   soit touché, c'est une interdiction totale. » Donc :

     1. ce fichier est appelé avec media="(max-width:767px)" : un ordinateur
        ne le télécharge même pas ;
     2. et tout son contenu est malgré tout enfermé dans @media, pour que
        l'interdiction tienne même si quelqu'un retire l'attribut un jour.

   Deux verrous, parce qu'un seul se retire par distraction.

   CE QU'IL CORRIGE, constaté le 22/10 sur iPhone 390 px :
     · 12 pages sur 40 glissaient de côté ;
     · l'adresse contact@erasic.fr sortait de sa case sur la page canapé ;
     · le bandeau du bas collait aux deux bords, « WhatsApp » coupé ;
     · 14 photos de haut de page étaient agrandies jusqu'à 76 %, au point
       de ne plus rien montrer ;
     · les bulles d'appel masquaient le texte des articles.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── 1. LE BANDEAU DU BAS ────────────────────────────────────────────
     Son conteneur porte un style="padding:48px 0" écrit dans la page :
     la forme courte remet les côtés à zéro et annule la classe px-4. Sur
     un écran large ça ne se voit pas, le bloc est centré dans 1200 px.
     Sur un téléphone, le numéro commence au pixel 0 et « WhatsApp » sort
     de l'écran. On rend les côtés.
     Les séparateurs « · » disparaissent : alignés en colonne ils tombent
     en fin de ligne et pendent dans le vide. L'espacement les remplace. */
  footer > .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  footer > .container > div {
    gap: 10px 18px !important;
    line-height: 1.9;
  }
  footer > .container > div > span { display: none !important; }
  footer a { word-break: break-word; }

  /* ── 2. LES CASES DONT LE CONTENU SORT ───────────────────────────────
     Les grilles sont écrites dans les pages, en style="", en trois ou
     quatre colonnes fixes. Trois colonnes sur 390 px font 118 px chacune :
     « contact@erasic.fr » n'y tient pas et déborde. On passe à une
     colonne, à deux quand il y en avait quatre. */
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Et le filet de sécurité : une adresse, une URL ou un numéro ne doit
     jamais pousser sa boîte. On autorise la coupure là où le texte est
     saisi, pas partout : couper n'importe quel mot rendrait la lecture
     désagréable. */
  a[href^="mailto:"], a[href^="tel:"], a[href^="http"] {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ── LES TROIS BOUTONS DE CONTACT : L'ICÔNE SEULE ───────────────────
     Ce bloc est écrit en trois colonnes par une classe, pas par un style
     en ligne : la règle ci-dessus ne l'attrapait pas. Sur 390 px, chaque
     colonne fait 118 px, et « contact@erasic.fr » n'y tient pas. Il se
     cassait lettre par lettre, une par ligne.

     On ne garde que les icônes. Trois pastilles nettes valent mieux qu'une
     adresse illisible, et le geste reste le même : on appuie, le téléphone
     fait le reste. Le texte est masqué par font-size:0 sur le lien, et
     l'icône reprend sa taille. Chaque lien porte un aria-label, posé dans
     les pages, pour que le lecteur d'écran dise toujours ce qu'il fait. */
  .grid-cols-3 > a[href^="tel:"],
  .grid-cols-3 > a[href^="https://wa.me"],
  .grid-cols-3 > a[href^="mailto:"] {
    font-size: 0 !important;
    gap: 0 !important;
    padding: 15px 0 !important;
    justify-content: center;
    min-width: 0;
  }
  .grid-cols-3 > a[href^="tel:"] i,
  .grid-cols-3 > a[href^="https://wa.me"] i,
  .grid-cols-3 > a[href^="mailto:"] i {
    font-size: 20px !important;
    margin: 0 !important;
  }

  /* ── LES GRANDS TITRES ───────────────────────────────────────────────
     Beaucoup de titres sont écrits en clamp(1.5rem, 3vw, 2.1rem). Sur un
     écran de 390 px, 3vw ne vaut que 11,7 px : le clamp retient donc son
     minimum, 24 px, quelle que soit la largeur de l'écran. Un titre de
     cinq mots à 24 px en graisse 900 demande plus de 400 px et sort de
     l'écran. « Bordeaux & Gironde — rayon 30 km » y perdait son dernier
     mot.

     On remplace le minimum fixe par une part de la largeur réelle : le
     titre suit l'écran au lieu de l'ignorer. Et on autorise la coupure,
     pour qu'un mot long ne puisse jamais pousser la ligne. */
  h1[style*="clamp"] { font-size: clamp(1.45rem, 6.6vw, 2.1rem) !important; }
  h2[style*="clamp"] { font-size: clamp(1.2rem, 5.6vw, 1.75rem) !important; }
  h3[style*="clamp"] { font-size: clamp(1.05rem, 4.6vw, 1.4rem) !important; }
  h1, h2, h3, h4 { overflow-wrap: break-word; }

  /* ── 3. LES TABLEAUX ─────────────────────────────────────────────────
     Le tableau des formules fait 636 px. On ne le rétrécit pas, les
     colonnes deviendraient illisibles : il défile tout seul, à l'horizontale,
     à l'intérieur de sa propre zone. Le reste de la page ne bouge plus. */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table > thead, table > tbody { display: table; width: max-content; min-width: 100%; }

  /* ── 4. LES PHOTOS DE HAUT DE PAGE ───────────────────────────────────
     C'est le défaut le plus visible. Les photos sont en paysage, autour
     de 4:3. Sur un téléphone, le bandeau d'accueil fait 390 px de large
     pour 1100 à 1300 px de haut, parce que le titre et les boutons
     s'empilent. Une photo 4:3 forcée à remplir ce format est agrandie
     deux fois et demie : il n'en reste qu'une bande verticale floue, on
     ne reconnaît plus ni le tapis, ni le chantier, ni la pièce peinte.

     On arrête de lui demander de remplir toute la hauteur. Avec height:auto
     et bottom:auto, elle reprend son format d'origine : plus aucun
     recadrage, on voit la photo entière. Elle occupe le haut du bandeau
     puis s'efface en fondu vers le fond sombre, qui existe déjà
     (.hero porte background:#060d1c). La mise en page ne change pas.

     POURQUOI UN ATTRIBUT ET PAS TOUTES LES PHOTOS : la moitié des bandeaux
     étaient déjà au bon format, 260 à 290 px de haut, photo entière. Une
     règle appliquée à toutes les abîmait — mesuré le 22/10 : treize pages
     passées de 0 % à 30 % de perte. L'attribut data-tel="bandeau" n'est
     donc posé que sur les photos réellement mal cadrées, et il ne produit
     aucun effet sur un ordinateur : il ne sert qu'ici.

     PAS DE max-height : il recadrait les photos en format portrait, qui
     sont plus hautes que larges. Sur la page peinture, une photo 1600×2400
     plafonnée à 46vh reperdait un tiers de l'image. La consigne est
     qu'aucune photo ne soit coupée : on laisse donc chacune prendre sa
     hauteur naturelle, quitte à ce qu'un bandeau soit haut. */
  img[data-tel="bandeau"] {
    height: auto !important;
    bottom: auto !important;
    object-position: center 38% !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, .45) 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, .45) 84%, transparent 100%);
  }

  /* Le bandeau d'accueil respire moins haut : 80 px en haut et en bas sur
     un téléphone, c'est un écran perdu avant d'arriver au titre. */
  section.hero > .container { padding-top: 52px !important; padding-bottom: 52px !important; }

  /* ── 5. LES BULLES D'APPEL ───────────────────────────────────────────
     Elles sont fixées à mi-hauteur, à droite. Sur un téléphone elles
     recouvrent la fin des phrases : « L'injection-extraction, le test des
     couleurs, et le… » était illisible. On les réduit et on les resserre,
     elles restent accessibles sans manger le texte. */
  /* Les bulles quittent le milieu de l'écran pour le coin bas droit. À
     mi-hauteur elles se posaient sur le contenu : elles masquaient le
     bouton courriel du bloc de contact et mordaient sur les titres. En
     bas à droite, c'est la place attendue d'un bouton flottant, et plus
     rien ne passe dessous. L'assistant est en bas à gauche : ils ne se
     gênent pas. */
  .bulles {
    gap: 8px !important;
    right: 10px !important;
    top: auto !important;
    bottom: 84px !important;
    transform: none !important;
  }
  .bulle { height: 42px !important; width: 42px !important; }
  .bulle i, .bulle svg { font-size: 15px; }

  /* Le lanceur de l'assistant est fixé en bas à gauche. Arrivé en bas de
     page il se posait sur le numéro de téléphone du bandeau. On le réduit,
     et surtout on donne au bandeau de quoi respirer en dessous : le dernier
     écran se termine alors par du vide, pas par un bouton posé sur un
     numéro qu'on veut pouvoir lire et appuyer. */
  .cv-lanceur { transform: scale(.82); transform-origin: left bottom; }
  footer { padding-bottom: 150px; }

  /* ── 6. LE FILET DE SÉCURITÉ ─────────────────────────────────────────
     Après les corrections ci-dessus, plus rien ne devrait dépasser. Si un
     élément ajouté plus tard dépassait quand même, la page ne doit pas se
     mettre à glisser de côté : c'est le défaut que le visiteur remarque
     en premier et qui donne l'impression d'un site cassé.

     « clip » plutôt que « hidden » : hidden crée une zone défilante, ce qui
     décroche l'en-tête collé en haut de page. clip coupe sans rien rendre
     défilant, donc l'en-tête tient. hidden reste écrit juste avant, comme
     repli pour un navigateur qui ne connaîtrait pas encore clip. */
  html, body { overflow-x: hidden; overflow-x: clip; }

}