/* ============================================================
   VERNHES PLOMBERIE — feuille de style unique
   Démonstration de la formule ESSENTIEL (290 €)
   ------------------------------------------------------------
   PARTI PRIS : « la matière ».
   Un fond nuit, UNE seule couleur d'accent (le jaune de
   signalisation), des angles droits, une typographie énorme
   et surtout : DES PHOTOS QUI PRENNENT TOUTE LA PLACE.
   Peu d'éléments, très grands, très espacés.

   TROIS EFFETS SUR TOUTE LA PAGE, PAS UN DE PLUS :
     1. les blocs montent en apparaissant (opacity + transform) ;
     2. la photo du haut glisse plus lentement que la page
        (transform) ;
     3. les grandes photos zooment très légèrement au survol
        (transform).
   Aucun « filter », aucun « backdrop-filter », aucune animation
   de largeur, de hauteur, de position ni d'ombre : ce sont
   elles qui font ramer un site.

   Tout est ici. Aucune police téléchargée, aucune dépendance
   extérieure. Pour changer l'identité d'un client, il suffit
   de toucher au bloc « LES COULEURS » juste en dessous.
   ============================================================ */

/* ---------- LES COULEURS -------------------------------------
   Ces quelques lignes suffisent à changer toute l'ambiance. */
:root {
  --nuit:       #0d1013;   /* fond sombre, presque noir           */
  --nuit-2:     #161b21;   /* variante un peu plus claire         */
  --acier:      #2b333b;   /* filets et bordures sur fond sombre  */
  --jaune:      #ffd028;   /* la couleur de signalisation         */
  --jaune-fonce:#d9a800;   /* même jaune, en plus sourd           */
  --rouge:      #c62d1f;   /* urgence, jours de fermeture         */
  --ciment:     #f2f0ec;   /* fond clair, ton béton               */
  --ciment-2:   #ffffff;   /* cartes sur fond clair               */
  --encre:      #11161a;   /* texte sur fond clair                */
  --encre-douce:#4b545c;   /* texte secondaire sur fond clair     */
  --clair:      #f5f4f1;   /* texte sur fond sombre               */
  --clair-doux: #a7b0b8;   /* texte secondaire sur fond sombre    */
  --trait:      #d6d2ca;   /* filets sur fond clair               */

  --largeur: 1240px;       /* largeur maximale du contenu         */
  --marge: 2rem;           /* air sur les côtés                   */

  /* Polices installées d'office sur tous les appareils. */
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  /* Police à chasse fixe : sert aux numéros et aux repères. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

/* ---------- RÉGLAGES DE BASE -------------------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* La barre du haut est collée : on décale les ancres d'autant,
     sinon les titres passent dessous. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.62;
  color: var(--encre);
  background: var(--ciment);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
svg { max-width: 100%; }

/* ---------- LA TYPOGRAPHIE ----------------------------------
   C'est elle qui frappe en premier. Les titres sont énormes,
   très serrés, en majuscules : on doit les lire de loin. */
h1, h2, h3 { margin: 0 0 .5em; }

h1, h2 {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .93;
}
h1 { font-size: clamp(2.9rem, 8.4vw, 6.6rem); }
h2 { font-size: clamp(2.2rem, 5.6vw, 4rem); }
h3 {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

p { margin: 0 0 1.1em; }
a { color: inherit; }

/* Contour visible au clavier : obligatoire pour l'accessibilité. */
:focus-visible {
  outline: 3px solid var(--jaune);
  outline-offset: 3px;
}

.conteneur {
  width: min(100% - var(--marge) * 2, var(--largeur));
  margin-inline: auto;
}
/* Une variante plus large pour les grandes photos. */
.conteneur--large {
  width: min(100% - var(--marge) * 2, 1480px);
  margin-inline: auto;
}

/* Texte lu par les lecteurs d'écran mais invisible à l'œil. */
.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Lien « Aller au contenu », visible seulement au clavier. */
.evite {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--jaune); color: var(--nuit);
  font-weight: 700; padding: .8rem 1.2rem;
}
.evite:focus { left: 0; }

/* ---------- LE PETIT REPÈRE ---------------------------------
   « 01 — Dépannage ». Un trait jaune, deux mots. */
.repere {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--mono); font-size: .76rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--jaune);
  margin: 0 0 1.6rem;
}
.repere::before {
  content: ""; width: 42px; height: 3px; flex: none;
  background: var(--jaune);
}
/* Le même repère sur fond clair : le jaune y serait illisible. */
.repere--sombre { color: var(--encre); }
.repere--sombre::before { background: #9c7500; }

/* ---------- BANDEAU DE DÉMONSTRATION ------------------------
   À SUPPRIMER (ici et dans le HTML) pour un vrai client. */
.demo-bandeau {
  margin: 0;
  background: var(--rouge);
  color: #fff;
  text-align: center;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .5rem 1rem;
}

/* ---------- BARRE DU HAUT -----------------------------------
   Elle reste collée en haut : le numéro ne quitte jamais la vue. */
.barre {
  position: sticky; top: 0; z-index: 100;
  background: var(--nuit);
  border-bottom: 1px solid var(--acier);
}
.barre__in {
  display: flex; align-items: center; gap: 1.6rem;
  min-height: 72px;
}

.marque {
  display: flex; align-items: center; gap: .8rem;
  text-decoration: none; color: var(--clair);
  margin-right: auto;
}
.marque__signe { width: 36px; height: 36px; flex: none; }
.marque__txt { display: flex; flex-direction: column; line-height: 1.08; }
.marque__txt b {
  font-size: 1.1rem; text-transform: uppercase;
  letter-spacing: .01em; font-weight: 800;
}
.marque__txt small {
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--jaune);
}

.menu { display: flex; gap: 1.8rem; }
.menu a {
  color: var(--clair-doux); text-decoration: none;
  font-family: var(--mono); font-size: .76rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--jaune); border-bottom-color: var(--jaune); }

/* ---------- BOUTONS -----------------------------------------
   Angles droits, pas d'ombre. Une seule action mise en avant
   par écran : c'est toujours le téléphone. */
.bouton {
  display: inline-flex; align-items: center; gap: .65rem;
  background: var(--jaune); color: var(--nuit);
  text-decoration: none; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: .95rem;
  padding: 1.05rem 1.9rem;
  border: 2px solid var(--jaune);
}
.bouton:hover { background: #fff; border-color: #fff; }
.bouton--petit { padding: .55rem 1.05rem; font-size: .86rem; gap: .45rem; }

.ic {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   SUJET 1 — ACCUEIL
   La photo occupe tout l'écran. Le titre par-dessus, un seul
   geste possible : appeler. Le bas de la section est coupé en
   biais — la seule diagonale du site, elle évoque la coupe
   nette d'un tube.
   ============================================================ */
.accueil {
  position: relative;
  isolation: isolate;
  background: var(--nuit);
  color: var(--clair);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 88vh;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.2vw), 0 100%);
}

/* La photo. Elle dépasse en haut et en bas pour pouvoir
   glisser sans jamais laisser de vide. */
.accueil__fond {
  position: absolute; inset: -14% 0;
  /* Le sujet de la photo est décalé à droite : le texte se pose
     sur la partie calme, à gauche. */
  background: url("../images/hero.webp") 66% center / cover no-repeat;
  /* --parallaxe est mis à jour par le petit script en bas de page */
  transform: translate3d(0, var(--parallaxe, 0px), 0);
  will-change: transform;
  z-index: -2;
}

/* Le voile sombre : c'est lui qui rend le texte lisible
   quelle que soit la photo mise à la place. */
.accueil__voile {
  position: absolute; inset: 0; z-index: -1;
  /* 🔴 MESURÉ : avec les valeurs d'origine (.74/.92) le voile écrasait la
     photo à une luminosité moyenne de 27 sur 255 — le haut de la page se
     lisait comme un grand rectangle noir vide, alors que la photo elle-même
     est à 122. Le voile doit assombrir assez pour que le texte blanc passe,
     pas au point de faire disparaître l'image qu'on a choisie. */
  background:
    linear-gradient(to top, var(--nuit) 2%, rgba(13,16,19,.46) 34%, rgba(13,16,19,0) 92%),
    linear-gradient(100deg, rgba(13,16,19,.80) 0%, rgba(13,16,19,.42) 46%, rgba(13,16,19,0) 88%);
}

/* Attention : « ch » se calcule sur la police du bloc où on
   l'écrit. On limite donc la largeur du titre SUR LE TITRE
   lui-même, sinon la colonne se retrouve minuscule. */
.accueil__in { position: relative; max-width: min(100%, 54rem); }

.accueil h1 { color: #fff; margin-bottom: .38em; max-width: 11ch; }
.accueil h1 em {
  font-style: normal;
  color: var(--jaune);
  display: block;
}

.chapo {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  color: var(--clair-doux);
  max-width: 46ch;
  margin-bottom: 2.6rem;
}

/* ---------- LE GROS NUMÉRO ----------------------------------
   L'unique action de cet écran : un numéro qu'on voit de loin
   et sur lequel le doigt tombe tout seul. */
.tel-geant {
  display: inline-flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border-left: 6px solid var(--jaune);
  padding: .2rem 0 .2rem 1.4rem;
}
.tel-geant span {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--jaune);
  margin-bottom: .3rem;
}
.tel-geant b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  /* 🔴 MESURÉ sur téléphone : avec « 5vw » le numéro tombait à 30 px de
     haut sur un écran de 390 px, alors que c'est L'ACTION du site. On
     part de plus gros ; le maximum ne change pas sur ordinateur. */
  font-size: clamp(2.1rem, 7vw, 3.1rem);
  font-weight: 700; letter-spacing: -.03em;
  color: #fff;
  line-height: 1;
}
.tel-geant:hover b { color: var(--jaune); }

/* Les trois arguments, tout en bas de l'écran d'accueil,
   sur une seule ligne discrète. */
.jetons {
  list-style: none; margin: 3rem 0 0; padding: 1.4rem 0 0;
  display: flex; flex-wrap: wrap; gap: .6rem 2.4rem;
  border-top: 1px solid rgba(255,255,255,.16);
  max-width: 46rem;
}
.jetons li {
  font-family: var(--mono); font-size: .76rem;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--clair);
}
.jetons li::before { content: "— "; color: var(--jaune); }

/* ============================================================
   SUJETS COURANTS
   Beaucoup d'air : c'est ce qui distingue un site cher
   d'un site bon marché.
   ============================================================ */
.sujet { padding: clamp(5rem, 11vw, 9rem) 0; }
.sujet--nuit { background: var(--nuit); color: var(--clair-doux); }
.sujet--nuit h2, .sujet--nuit h3 { color: #fff; }

.sujet__tete { max-width: min(100%, 52rem); margin-bottom: clamp(3rem, 6vw, 5rem); }
/* Même remarque que pour le titre d'accueil : le « ch » se
   règle sur le h2, pas sur le bloc qui le contient. */
.sujet__tete h2 { color: var(--encre); max-width: 15ch; }
.sujet--nuit .sujet__tete h2 { color: #fff; }
.sujet__tete .intro { max-width: 52ch; }

.intro {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--encre-douce);
  max-width: 52ch;
}
.sujet--nuit .intro { color: var(--clair-doux); }

/* ============================================================
   SUJET 2 — CE QUE JE RÉPARE
   Quatre prestations. Chacune a une GRANDE photo, une par
   ligne, en alternance gauche/droite. C'est la photo qui
   occupe la plus grande moitié : c'est elle qu'on regarde.
   ============================================================ */
.travaux {
  list-style: none; padding: 0;
  /* Attention : ne PAS écrire « margin: 0 » ici, cela annulerait
     le centrage donné par la classe « conteneur--large ». */
  margin-block: 0;
  display: grid;
  gap: clamp(4rem, 9vw, 7.5rem);
}

.travail {
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Une ligne sur deux, la photo passe à droite — et la colonne
   large la suit, pour qu'elle garde toujours la même taille. */
.travail:nth-child(even) { grid-template-columns: .95fr 1.25fr; }
.travail:nth-child(even) .travail__photo { order: 2; }

/* La photo : très grande, jamais décorative. */
.travail__photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--trait);
}
.travail__photo img {
  width: 100%; height: 100%; object-fit: cover;
  /* EFFET 3 sur 3 : un zoom très léger au survol. Uniquement
     « transform », donc aucun recalcul de mise en page. */
  transform: scale(1.001);
  transition: transform .7s cubic-bezier(.2,.7,.25,1);
}
.travail__photo:hover img { transform: scale(1.045); }

.travail__num {
  display: block;
  font-family: var(--mono);
  font-size: .8rem; letter-spacing: .2em;
  color: #7a5b00;
  margin-bottom: 1.1rem;
}
.travail__txt h3 { color: var(--encre); margin-bottom: .45em; }
.travail__txt p {
  margin: 0; color: var(--encre-douce);
  font-size: 1.05rem; max-width: 42ch;
}

/* ============================================================
   SUJET 3 — ZONE D'INTERVENTION
   Aucun dessin, aucune carte décorative : juste les noms des
   communes, écrits en grand. C'est plus honnête et ça se lit
   au premier coup d'œil.
   ============================================================ */
.communes {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  column-gap: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--acier);
}
.communes li {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--clair);
  padding: 1.15rem .2rem;
  border-bottom: 1px solid var(--acier);
}
.communes li span {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .16em; color: var(--jaune);
  margin-right: .9rem;
  vertical-align: .18em;
  font-weight: 400;
}

.zone__note {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  font-size: 1.02rem;
  color: var(--clair-doux);
  border-left: 4px solid var(--jaune);
  padding-left: 1.2rem;
  max-width: 46ch;
}

/* ============================================================
   SUJET 4 — HORAIRES
   Un tableau, un encart. Deux éléments, rien d'autre.
   ============================================================ */
.horaires__in {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1.1fr .9fr;
  align-items: start;
}
.tableau {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  border-top: 3px solid var(--encre);
}
.tableau th, .tableau td {
  text-align: left; padding: 1.15rem .4rem;
  border-bottom: 1px solid var(--trait);
}
.tableau th {
  font-size: 1.05rem;
  font-weight: 700; color: var(--encre); width: 40%;
}
.tableau td { font-size: 1.02rem; color: var(--encre-douce); }

.ligne-urgence td { color: var(--encre); font-weight: 700; }
.ligne-fermee th, .ligne-fermee td { color: #8b949c; }

/* L'encart noir « en dehors des heures ».
   Fond plein, sans photo : la photo servirait à rien ici. */
.encart {
  background: var(--nuit);
  color: var(--clair-doux);
  border-top: 6px solid var(--jaune);
  padding: clamp(1.8rem, 4vw, 2.8rem);
}
.encart h3 { color: #fff; margin-bottom: .6em; }
.encart p { font-size: 1rem; }
.encart b { color: var(--jaune); }
.encart .bouton { margin-top: .6rem; }

/* ============================================================
   SUJET 5 — CONTACT
   Pas de formulaire : c'est la formule Visibilité (390 €) qui
   en ajoute un. Ici, tout passe par un seul numéro, énorme.
   ============================================================ */
.appel {
  display: block; text-decoration: none; color: inherit;
  border-top: 1px solid var(--acier);
  border-bottom: 1px solid var(--acier);
  padding: clamp(2.2rem, 5vw, 3.6rem) 0;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.appel__label {
  display: block;
  font-family: var(--mono); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--jaune); margin-bottom: 1rem;
}
.appel__num {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  /* Même remarque : sur 390 px le numéro géant faisait 33 px et
     laissait un grand vide à droite. Mesuré : 2.2rem tient dans la
     largeur d'un Android de 360 px sans jamais se couper. */
  font-size: clamp(2.2rem, 9.4vw, 6rem);
  font-weight: 700; letter-spacing: -.045em;
  color: #fff; line-height: .95;
}
.appel:hover .appel__num { color: var(--jaune); }
.appel__note {
  display: block; margin-top: 1.1rem;
  font-size: .88rem; color: #8b949c;
}

.coord {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.coord__bloc { display: block; text-decoration: none; color: inherit; }
.coord__bloc b {
  display: block; color: var(--jaune);
  font-family: var(--mono); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: .8rem;
}
.coord__bloc span {
  display: block; color: #fff;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 600; letter-spacing: -.01em;
  line-height: 1.35;
  word-break: break-word;
}
a.coord__bloc:hover span { color: var(--jaune); }
.coord__bloc em {
  display: block; margin-top: .6rem;
  font-size: .82rem; font-style: normal; color: #8b949c;
}
.contact__note {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  font-size: .88rem; color: #8b949c;
}

/* ---------- PIED DE PAGE ------------------------------------ */
.pied { background: var(--nuit-2); color: var(--clair-doux); padding: 4rem 0 1.6rem; }
.pied__in {
  display: flex; flex-wrap: wrap; gap: 2rem 3rem;
  justify-content: space-between;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--acier);
}
.pied__nom {
  color: #fff; font-weight: 800; font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: .01em; margin-bottom: .4rem;
}
.pied__in p { margin: 0; font-size: .95rem; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: flex-start; }
.pied__liens a {
  color: var(--clair-doux); text-decoration: none;
  font-family: var(--mono); font-size: .76rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.pied__liens a:hover { color: var(--jaune); }
.pied__bas {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .05em; color: #8b949c;
}
.pied__bas p { margin: 0; }

/* ---------- BARRE D'APPEL DU BAS ----------------------------
   Sur téléphone, une barre jaune reste collée en bas : le
   doigt tombe dessus sans chercher. Cachée sur ordinateur. */
.appel-bas {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--jaune); color: var(--nuit);
  text-decoration: none;
  align-items: center; justify-content: center; gap: .7rem;
  padding: 1rem;
  font-family: var(--mono); font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  border-top: 3px solid var(--nuit);
}

/* ---------- PAGE MENTIONS LÉGALES --------------------------- */
.doc { padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem); }
.doc__in { max-width: 70ch; }
.doc h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); margin-bottom: 1.6rem; }
.doc h2 {
  font-size: 1.1rem; margin-top: 3rem; letter-spacing: .04em;
  padding-bottom: .5rem; border-bottom: 2px solid var(--encre);
}
.doc__retour {
  display: inline-block; margin-bottom: 2rem;
  font-family: var(--mono); font-size: .76rem;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--encre-douce);
}
.doc__retour:hover { color: var(--encre); }
.doc .avis {
  background: var(--nuit); color: var(--clair-doux);
  border-top: 5px solid var(--rouge);
  padding: 1.5rem 1.7rem; margin-bottom: 2.5rem;
}
.doc .avis b { color: #fff; }
.doc .avis p:last-child { margin: 0; }

/* ============================================================
   EFFET 1 sur 3 — LES APPARITIONS AU DÉFILEMENT
   ------------------------------------------------------------
   IMPORTANT : au repos, tout est VISIBLE. La règle qui masque
   ne s'applique que si la classe « js » a été posée par le
   script. Si le fichier d'effets ne se charge pas, le HTML
   retire cette classe au bout de trois secondes et la page
   redevient entièrement lisible. Un site ne doit jamais
   rester blanc à cause d'une animation.
   ============================================================ */
.js .apparait {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.25,1);
  transition-delay: calc(var(--pas, 0) * 80ms);
}
.js .apparait.vu { opacity: 1; transform: none; }

/* ============================================================
   RESPECT DES PRÉFÉRENCES : PAS D'ANIMATION
   Certaines personnes coupent les animations dans les réglages
   de leur appareil. On coupe absolument tout pour elles.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .apparait { opacity: 1; transform: none; }
  .accueil__fond { transform: none !important; }
  .travail__photo:hover img { transform: none; }
}

/* ============================================================
   VERSION TABLETTE ET TÉLÉPHONE
   ============================================================ */
@media (max-width: 1000px) {
  :root { --marge: 1.5rem; }
  html { scroll-padding-top: 72px; }

  /* Sur écran étroit, une seule colonne, et la photo passe
     toujours au-dessus du texte. Il faut répéter le sélecteur
     « nth-child(even) » : sinon la règle du haut, plus précise,
     garderait ses deux colonnes. */
  .travail,
  .travail:nth-child(even) { grid-template-columns: 1fr; gap: 1.8rem; }
  .travail:nth-child(even) .travail__photo { order: 0; }
  .travail__photo { aspect-ratio: 16 / 10; }

  .horaires__in { grid-template-columns: 1fr; }
  .accueil__in { max-width: 100%; }
}

@media (max-width: 780px) {
  body { font-size: 16px; }
  :root { --marge: 1.25rem; }

  /* ---------- LE MENU SUR TÉLÉPHONE ------------------------
     🔴 MESURÉ à 390 px : l'ancienne version mettait les quatre
     liens sur UNE ligne que l'on faisait glisser du doigt. Elle
     demandait 361 px pour 350 px disponibles : le mot « CONTACT »
     était coupé net au bord de l'écran, et rien n'indiquait qu'il
     fallait faire glisser. Les liens ne faisaient que 34 px de
     haut (il en faut 44 pour un doigt) et « ZONE » ne mesurait
     que 34 px de large.

     Maintenant : quatre pavés de 48 px de haut, deux par ligne,
     encadrés, entièrement visibles. Toujours aucun JavaScript,
     donc rien qui puisse casser.

     Conséquence assumée : sur téléphone la barre du haut ne reste
     PLUS collée (elle mesurerait 170 px, soit un cinquième de
     l'écran). Le numéro reste joignable en permanence grâce à la
     barre jaune collée en bas de l'écran, qui est faite pour ça. */
  .barre { position: static; }
  html { scroll-padding-top: 1rem; }

  .barre__in { flex-wrap: wrap; padding-block: .7rem; min-height: 0; gap: .8rem 1rem; }

  .menu {
    order: 3; width: 100%;
    display: grid;
    /* Deux pavés par ligne sur un téléphone, quatre sur une petite
       tablette : la grille s'adapte toute seule. */
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .5rem;
  }
  .menu a {
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    min-height: 48px;
    padding: .55rem .5rem;
    font-size: .73rem;
    letter-spacing: .07em;
    border: 1px solid var(--acier);
    color: var(--clair);
  }
  .menu a:hover { color: var(--jaune); border-color: var(--jaune); }

  /* Le nom et le bouton d'appel : au moins 44 px de haut, eux aussi. */
  .marque { min-height: 44px; }
  .marque__txt small { display: none; }
  .barre .bouton--petit {
    font-size: .82rem; padding: .55rem .9rem;
    min-height: 44px;
  }

  /* Les liens du pied de page faisaient 20 px de haut : deux
     tombaient sous le même doigt. */
  .pied__liens { gap: 0 1.4rem; }
  .pied__liens a { display: flex; align-items: center; min-height: 44px; }

  .accueil {
    min-height: 88svh;
    padding-top: 5rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
  }
  .accueil__voile {
    background:
      linear-gradient(to top, var(--nuit) 6%, rgba(13,16,19,.86) 46%, rgba(13,16,19,.55) 100%);
  }
  .jetons { margin-top: 2.2rem; gap: .5rem 1.6rem; }
  .jetons li { font-size: .7rem; }

  .communes { grid-template-columns: 1fr; }

  /* Page « mentions légales » : le lien de retour doit lui aussi
     être assez haut pour le doigt. */
  .doc__retour { display: inline-flex; align-items: center; min-height: 44px; }

  /* On laisse la place à la barre d'appel collée en bas. */
  .appel-bas { display: flex; min-height: 56px; }
  .pied { padding-bottom: 6rem; }
}

/* ---------- IMPRESSION -------------------------------------- */
@media print {
  .barre, .appel-bas, .accueil__fond, .accueil__voile { display: none; }
  .accueil { min-height: 0; clip-path: none; padding: 1rem 0; }
  body { background: #fff; color: #000; }
}