/* ============================================================
   MJ Solution Informatique — feuille de style (version 2)
   Palette : bleu pétrole + orange, fond crème "papier"
   Animations : uniquement transform/opacity (fluide même sur
   les vieilles machines), coupées si l'utilisateur préfère
   réduire les animations.
   ============================================================ */

/* ------------------------------------------------------------
   Polices hébergées sur place (pas d'appel à Google Fonts,
   donc pas de cookie ni de requête vers un tiers)
   ------------------------------------------------------------ */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------
   PALETTE CLAIRE (celle par défaut)
   ------------------------------------------------------------ */
:root {
  --encre:          #0f333d;   /* couleur du texte */
  --petrole:        #0b4f5c;   /* le pétrole exact du logo (fonds pétrole) */
  --petrole-texte:  #0b4f5c;   /* le même, quand il sert de couleur de texte */
  --petrole-clair:  #1d6a7d;
  /* Trois oranges, chacun son rôle :
     --orange        : décor (traits, bordures, icônes de l'illustration)
     --orange-texte  : orange écrit sur le fond de page (assez foncé pour
                       rester lisible ; il s'éclaircit en mode sombre)
     --orange-fonce  : fond des boutons portant du texte blanc
                       (contraste 4,5:1, le seuil de lisibilité) */
  --orange:         #e8632a;
  --orange-texte:   #c14a17;
  --orange-fonce:   #c94e1b;
  --orange-survol:  #a63d13;
  --halo-hero:      rgba(11, 79, 92, .13);
  --creme:          #faf5ec;   /* fond de page */
  --creme-fonce:    #f1e8d8;   /* sections alternées (équipe, questions) */
  --blanc:          #fffdf8;   /* fond des cartes */
  --fond-sombre:    #0f333d;   /* contact et pied de page : sombre dans les deux modes */
  --vert:           #4d8f5f;   /* la petite pousse */
  --ligne:          rgba(15, 51, 61, .14);
  --teinte-icone:   rgba(11, 79, 92, .1);
  --ombre-illu:     rgba(15, 51, 61, .08);

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --rayon: 14px;
  --ombre-carte: 0 1px 2px rgba(15, 51, 61, .06), 0 10px 30px -12px rgba(15, 51, 61, .18);
}

/* ------------------------------------------------------------
   PALETTE SOMBRE
   Deux blocs identiques, c'est volontaire :
   — le premier suit le réglage du téléphone ou de l'ordinateur,
     sauf si le visiteur a explicitement demandé le mode clair ;
   — le second s'applique quand il a explicitement demandé le sombre.
   Si vous modifiez une couleur, pensez aux DEUX blocs.
   L'orange ne change pas : il reste parfaitement lisible sur fond
   sombre et c'est la couleur de la marque.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --encre:         #e6edef;
    --petrole:       #10586a;
    --petrole-texte: #5cc2d8;
    --petrole-clair: #7ec2d4;
    --orange-texte:  #f2814e;
    --halo-hero:     rgba(92, 194, 216, .11);
    --creme:         #0b2129;
    --creme-fonce:   #0e2831;
    --blanc:         #143540;
    --fond-sombre:   #061a21;
    --vert:          #5aa36d;
    --ligne:         rgba(230, 237, 239, .16);
    --teinte-icone:  rgba(92, 194, 216, .14);
    --ombre-illu:    rgba(0, 0, 0, .35);
    --ombre-carte:   0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -12px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --encre:         #e6edef;
  --petrole:       #10586a;
  --petrole-texte: #5cc2d8;
  --petrole-clair: #7ec2d4;
  --orange-texte:  #f2814e;
  --halo-hero:     rgba(92, 194, 216, .11);
  --creme:         #0b2129;
  --creme-fonce:   #0e2831;
  --blanc:         #143540;
  --fond-sombre:   #061a21;
  --vert:          #5aa36d;
  --ligne:         rgba(230, 237, 239, .16);
  --teinte-icone:  rgba(92, 194, 216, .14);
  --ombre-illu:    rgba(0, 0, 0, .35);
  --ombre-carte:   0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -12px rgba(0, 0, 0, .55);
}

/* Le navigateur dessine ses propres éléments (ascenseurs, champs) dans
   le bon ton */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px; /* pour ne pas passer sous la barre de nav collante */
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--encre);
  background-color: var(--creme);
  /* léger grain de papier, dessiné en SVG pour éviter une image externe */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .025 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
}

/* Équilibrage des retours à la ligne réservé aux grands titres : le
   navigateur essaie plusieurs découpes et relance la mise en page à
   chaque fois. Sur les trente titres de cartes, qui tiennent de toute
   façon sur une ligne, on payait le calcul pour rien. */
h1, h2 { text-wrap: balance; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--petrole-texte); }

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

::selection { background: var(--orange); color: #fff; }

.conteneur {
  width: min(1120px, 100% - 2.5rem);
  margin-inline: auto;
}

/* Lien d'évitement clavier */
.evitement {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--fond-sombre);
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 8px;
  z-index: 100;
}
.evitement:focus { left: 8px; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   Boutons
   ------------------------------------------------------------ */
.btn {
  display: inline-block;
  background: var(--orange-fonce);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  padding: .8rem 1.5rem;
  border: 2px solid var(--orange-fonce);
  border-radius: 999px;
  /* L'ombre change d'un coup au lieu d'être animée : interpoler un flou
     oblige la carte graphique à redessiner la zone à chaque image, ce qui
     se voit sur un ordinateur ancien. Le léger soulèvement suffit à
     l'effet, et lui ne coûte rien. */
  transition: transform .18s ease, background-color .18s ease,
              border-color .18s ease;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
}
.btn:hover {
  background: var(--orange-survol);
  border-color: var(--orange-survol);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(166, 61, 19, .55);
}
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }

.btn--contour {
  background: transparent;
  color: var(--encre);
  border-color: var(--encre);
}
.btn--contour:hover {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--creme);
  box-shadow: 0 8px 20px -8px rgba(15, 51, 61, .5);
}

.btn--petit { padding: .5rem 1.1rem; font-size: .95rem; }
.btn--plein-large { width: 100%; }

/* ------------------------------------------------------------
   Banderole « offre de lancement »
   À RETIRER quand les 5 premiers clients seront passés : supprimer
   le bloc <aside class="promo"> dans index.html ET dans
   mentions-legales.html (ce style peut rester, il ne sert plus).
   ------------------------------------------------------------ */
.promo {
  background: var(--orange-fonce);
  color: #fff;
}

.promo__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem .9rem;
  padding-block: .65rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  font-size: .95rem;
}

.promo__badge {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.15;
  background: #fff;
  color: var(--orange-survol);
  border-radius: 999px;
  padding: .12rem .7rem;
  white-space: nowrap;
  animation: promo-battement 3.4s ease-in-out infinite;
}
@keyframes promo-battement {
  0%, 70%, 100% { transform: scale(1); }
  80%           { transform: scale(1.07); }
}

.promo__texte strong { font-weight: 700; }

.promo__action {
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 2px solid rgba(255, 255, 255, .55);
  transition: border-color .15s ease;
}
.promo__inner:hover .promo__action { border-bottom-color: #fff; }

/* ------------------------------------------------------------
   Enseigne : grand logo centré
   ------------------------------------------------------------ */
.entete {
  background: var(--creme);
  padding-block: 1.4rem .9rem;
}

.entete__inner {
  display: flex;
  justify-content: center;
}

/* Le logo horizontal est large (2,45 fois plus large que haut) : on le
   cale sur la largeur, jamais sur la hauteur, pour qu'il ne déborde
   sur aucun écran. La largeur est portée par le lien lui-même, sinon
   celui-ci s'étire et le centrage ne se voit pas. */
.logo {
  display: block;
  width: min(440px, 100%);
}

.logo__img {
  width: 100%;
  height: auto;
}

/* Le logo suit le mode : nom en pétrole sur fond clair, nom en blanc
   (et halo néon) sur fond sombre. */
.logo__img--sombre { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo__img--clair  { display: none; }
  :root:not([data-theme="light"]) .logo__img--sombre { display: block; }
}
:root[data-theme="dark"] .logo__img--clair  { display: none; }
:root[data-theme="dark"] .logo__img--sombre { display: block; }
:root[data-theme="light"] .logo__img--clair  { display: block; }
:root[data-theme="light"] .logo__img--sombre { display: none; }

/* ------------------------------------------------------------
   Barre de navigation collante
   ------------------------------------------------------------ */
.barre-nav {
  position: sticky;
  top: 0;
  /* au-dessus du bouton d'appel flottant (60), sinon celui-ci passerait
     par-dessus le menu déroulant une fois ouvert */
  z-index: 70;
  /* fond quasi opaque plutôt qu'un flou : même rendu à l'œil, mais
     rien à recalculer pour la carte graphique pendant le défilement */
  background: var(--creme);
  border-block: 1px solid var(--ligne);
}

.barre-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: .55rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.nav a:not(.btn) {
  text-decoration: none;
  color: var(--encre);
  font-weight: 500;
  font-size: .98rem;
  padding-block: .3rem;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease;
}
.nav a:not(.btn):hover { border-bottom-color: var(--orange); }

.burger {
  display: none;
  align-items: center;
  gap: .55rem;
  background: none;
  border: 0;
  padding: .6rem .4rem .6rem .6rem;
  cursor: pointer;
  font: inherit;
  color: var(--encre);
}
.burger__traits {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.burger__traits span {
  width: 24px;
  height: 2.5px;
  background: var(--encre);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
/* le mot « Menu » : beaucoup de gens ne savent pas que trois traits
   veulent dire « menu » */
.burger__label { font-weight: 600; font-size: .95rem; }
.burger[aria-expanded="true"] .burger__traits span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__traits span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__traits span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ------------------------------------------------------------
   Accueil
   ------------------------------------------------------------ */
.hero {
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 8vw, 6.5rem);
  overflow: hidden;
}

.hero__grille {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Entrée en scène au chargement, décalée élément par élément
   via la variable --d posée dans le HTML */
@keyframes entree {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.hero__texte > * { animation: entree .65s ease both; animation-delay: var(--d, 0s); }

.hero__slogan {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--blanc);
  border: 1.5px solid var(--ligne);
  border-radius: 999px;
  padding: .45rem 1rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--petrole-texte);
  box-shadow: var(--ombre-carte);
  transform: rotate(-1deg);
}
.hero__slogan svg { color: var(--orange-texte); flex-shrink: 0; }

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.1rem);
  font-weight: 700;
  margin-top: 1.1rem;
  letter-spacing: -.01em;
}

/* soulignement "au feutre orange" */
.souligne {
  position: relative;
  white-space: nowrap;
  color: var(--petrole-texte);
}
.souligne::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: .04em;
  height: .32em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 16 C 60 8, 130 6, 296 12' fill='none' stroke='%23e8632a' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  z-index: -1;
}

.hero__pitch {
  font-size: 1.15rem;
  max-width: 34em;
  color: color-mix(in srgb, var(--encre) 82%, transparent);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.6rem;
}

.hero__points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  padding: 0;
  margin: 1.8rem 0 0;
  font-size: .95rem;
  font-weight: 500;
  color: var(--petrole-clair);
}
.hero__points li {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.hero__points li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

/* Illustration */
.hero__visuel { position: relative; animation: entree .8s ease .25s both; }

/* halo diffus derrière l'ordinateur : donne de la profondeur sans image */
.hero__visuel::before {
  content: "";
  position: absolute;
  inset: -8% -4%;
  background: radial-gradient(circle at 52% 46%, var(--halo-hero), transparent 68%);
  pointer-events: none;
}

.illu { width: 100%; height: auto; position: relative; }
.illu__ombre   { fill: var(--ombre-illu); }
.illu__coque   { fill: var(--petrole); }
.illu__ecran   { fill: #0c2831; }
.illu__clavier { fill: var(--petrole-clair); }
.illu__pave    { fill: var(--creme); opacity: .85; }
.illu__courbe  { fill: rgba(232, 99, 42, .16); }
.illu__trait   { stroke: var(--orange); stroke-width: 4; stroke-linecap: round; }
.illu__point   { fill: var(--orange); }
.illu__pousse path:first-child { stroke: var(--vert); stroke-width: 4; stroke-linecap: round; }
.illu__feuille { fill: var(--vert); }
.illu__cle    { fill: var(--encre); }

/* La courbe de l'écran se dessine, la pousse se balance,
   l'étiquette flotte doucement */
@keyframes dessiner { to { stroke-dashoffset: 0; } }
.illu__trait {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: dessiner 1.4s ease .7s forwards;
}
@keyframes apparaitre { from { opacity: 0; } to { opacity: 1; } }
.illu__point { opacity: 0; animation: apparaitre .4s ease 2s forwards; }

@keyframes balancer {
  from { transform: rotate(-2.5deg); }
  to   { transform: rotate(2deg); }
}
.illu__pousse {
  transform-box: fill-box;
  transform-origin: bottom right;
  animation: balancer 3.8s ease-in-out infinite alternate;
}

@keyframes flotter {
  from { transform: rotate(2deg) translateY(0); }
  to   { transform: rotate(2deg) translateY(-8px); }
}
.hero__etiquette {
  position: absolute;
  right: -6px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--blanc);
  border: 1.5px solid var(--ligne);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  padding: .7rem 1rem;
  max-width: 250px;
  animation: flotter 3.2s ease-in-out infinite alternate;
}
.hero__etiquette strong {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--orange-texte);
  line-height: 1;
}
.hero__etiquette span {
  font-size: .8rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--encre) 80%, transparent);
}

/* ------------------------------------------------------------
   Bandeau des points forts (sous l'accueil)
   ------------------------------------------------------------ */
.bandeau {
  background: var(--blanc);
  border-block: 1px solid var(--ligne);
}

.bandeau__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2.5rem;
  padding-block: 1.4rem;
}

.bandeau__item {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.bandeau__item > svg {
  width: 27px;
  height: 27px;
  color: var(--orange-texte);
  flex-shrink: 0;
  margin-top: .1rem;
}
.bandeau__texte strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.3;
}
.bandeau__texte > span {
  font-size: .88rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--encre) 72%, transparent);
}

/* ------------------------------------------------------------
   Têtes de section
   ------------------------------------------------------------ */
.section-tete { max-width: 620px; margin-bottom: clamp(2rem, 5vw, 3.2rem); }

.section-tete h2,
.equipe h2,
.contact h2,
.impot h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
}

.surtitre {
  display: inline-block;
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--orange-texte);
  margin-bottom: .6rem;
}
.surtitre--clair { color: #f0a077; }

.section-tete__intro {
  color: color-mix(in srgb, var(--encre) 78%, transparent);
  font-size: 1.08rem;
}

/* ------------------------------------------------------------
   Services — filtres + "la carte"
   ------------------------------------------------------------ */
.services { padding-block: clamp(3rem, 7vw, 5.5rem); }

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.6rem;
}

.filtre {
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: var(--petrole-texte);
  background: var(--blanc);
  border: 1.5px solid var(--ligne);
  border-radius: 999px;
  padding: .45rem 1.05rem;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease,
              color .15s ease, border-color .15s ease;
}
.filtre:hover { transform: translateY(-2px); border-color: var(--petrole-texte); }
.filtre[aria-pressed="true"] {
  background: var(--petrole);
  border-color: var(--petrole);
  color: #fff;
}

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1.3rem;
}

.carte {
  position: relative;
  background: var(--blanc);
  border: 1.5px solid var(--ligne);
  border-radius: var(--rayon);
  padding: 1.5rem 1.4rem 1.2rem;
  box-shadow: var(--ombre-carte);
  display: flex;
  flex-direction: column;
  /* Voir .btn : l'ombre n'est volontairement pas animée. */
  transition: transform .18s ease;
}
.carte:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 3px rgba(15, 51, 61, .06), 0 18px 40px -14px rgba(15, 51, 61, .28);
}
.carte:hover .carte__icone { transform: rotate(-6deg) scale(1.08); }

/* carte masquée par un filtre / petite entrée quand elle revient */
.carte.est-cachee { display: none; }
@keyframes surgir {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.carte.surgit { animation: surgir .3s ease both; }

.carte__icone {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--teinte-icone);
  color: var(--petrole-texte);
  margin-bottom: 1rem;
  transition: transform .25s ease;
}
.carte__icone svg { width: 26px; height: 26px; }

.carte h3 { font-size: 1.18rem; }

.carte p:not(.carte__prix):not(.carte__ruban) {
  font-size: .95rem;
  color: color-mix(in srgb, var(--encre) 78%, transparent);
  flex-grow: 1;
}

.carte__prix {
  margin-top: 1.1rem;
  padding-top: .9rem;
  /* pointillés façon ticket de caisse */
  border-top: 2px dotted color-mix(in srgb, var(--encre) 25%, transparent);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--petrole-texte);
}
.carte__prix span {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .8rem;
  color: color-mix(in srgb, var(--encre) 60%, transparent);
  margin-right: .3rem;
}
.carte__prix small {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .78rem;
  color: color-mix(in srgb, var(--encre) 60%, transparent);
}

/* La carte vedette s'étale sur deux colonnes dès qu'il y en a deux.
   Elle casse l'alignement trop régulier de la grille — une grille dont
   tous les modules font la même largeur sent le gabarit — et donne à
   notre spécialité la place qu'elle mérite. */
@media (min-width: 640px) {
  .carte--star { grid-column: span 2; }
  .carte--star h3 { font-size: 1.45rem; }
  .carte--star p:not(.carte__prix):not(.carte__ruban) { font-size: 1.02rem; max-width: 42em; }
}

.carte--star {
  background: var(--petrole);
  border-color: var(--petrole);
  color: #faf5ec;   /* fond toujours pétrole : le texte reste clair */
}
.carte--star h3 { color: #fff; }
.carte--star .carte__icone {
  background: rgba(255, 253, 248, .12);
  color: #ffb48a;
}
.carte--star p:not(.carte__prix):not(.carte__ruban) { color: rgba(250, 245, 236, .82); }
.carte--star .carte__prix { color: #fff; border-top-color: rgba(250, 245, 236, .35); }
.carte--star .carte__prix span,
.carte--star .carte__prix small { color: rgba(250, 245, 236, .65); }

.carte__ruban {
  position: absolute;
  top: -12px;
  right: 14px;
  background: var(--orange-fonce);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .28rem .7rem;
  border-radius: 999px;
  transform: rotate(2deg);
  margin: 0;
}

.services__vide {
  margin-top: 1.4rem;
  font-size: 1rem;
  color: color-mix(in srgb, var(--encre) 75%, transparent);
}

.services__note {
  margin-top: 1.8rem;
  font-size: .92rem;
  color: color-mix(in srgb, var(--encre) 65%, transparent);
  max-width: 46em;
}

/* ------------------------------------------------------------
   Crédit d'impôt + simulateur
   ------------------------------------------------------------ */
.impot {
  background: var(--petrole);
  color: #faf5ec;
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-radius: 32px;
  width: min(1220px, 100% - 1.6rem);
  margin-inline: auto;
}

.impot__inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.impot__chiffre {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  line-height: 1;
  color: var(--orange);
  transform: rotate(-4deg);
  text-shadow: 4px 4px 0 rgba(0, 0, 0, .18);
  display: inline-block;
  margin-bottom: 1rem;
}
.impot__chiffre span { font-size: .55em; }

.impot h2 { color: #fff; }
.impot__texte p { color: rgba(250, 245, 236, .88); max-width: 54em; }
.impot__texte strong { color: #ffb48a; }

.impot__mention {
  font-size: .82rem;
  color: rgba(250, 245, 236, .55) !important;
  margin-top: 1rem;
}

/* Le simulateur : une carte claire posée sur le bloc pétrole */
.simulateur {
  background: var(--blanc);
  color: var(--encre);
  border-radius: var(--rayon);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .45);
}

.simulateur h3 { font-size: 1.25rem; }

.simulateur__ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
}
.simulateur__ligne label { font-weight: 600; font-size: .95rem; }
.simulateur__ligne output {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--petrole-texte);
}

.simulateur input[type="range"] {
  width: 100%;
  margin: .8rem 0 1.2rem;
  accent-color: var(--orange);
  cursor: pointer;
  height: 28px; /* zone de prise généreuse, tactile compris */
}

.simulateur__resultat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}
.simulateur__resultat > div {
  border: 1.5px dashed color-mix(in srgb, var(--encre) 25%, transparent);
  border-radius: 10px;
  padding: .7rem .9rem;
}
.simulateur__resultat span {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--encre) 65%, transparent);
}
.simulateur__resultat strong {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--petrole-texte);
}
.simulateur__final {
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  border-style: solid !important;
  border-color: var(--orange) !important;
}
.simulateur__final strong { color: var(--orange-fonce); }

/* ------------------------------------------------------------
   Engagements
   ------------------------------------------------------------ */
/* Les sections alternent fond de page / fond légèrement teinté, pour
   qu'on voie où l'une s'arrête et où l'autre commence. */
.engagements {
  background: var(--creme-fonce);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.engagements__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2rem 2.5rem;
}

.engagement {
  background: var(--blanc);
  border: 1.5px solid var(--ligne);
  border-top: 3px solid var(--orange);
  border-radius: var(--rayon);
  padding: 1.2rem 1.3rem 1.3rem;
  box-shadow: var(--ombre-carte);
  /* Voir .btn : l'ombre n'est volontairement pas animée. */
  transition: transform .18s ease;
}
.engagement:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 3px rgba(15, 51, 61, .06), 0 18px 40px -14px rgba(15, 51, 61, .28);
}

.engagement h3 { font-size: 1.15rem; }
.engagement p {
  font-size: .95rem;
  color: color-mix(in srgb, var(--encre) 78%, transparent);
}

/* ------------------------------------------------------------
   Équipe
   ------------------------------------------------------------ */
.equipe { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

.equipe__grille {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.equipe__portraits {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.portrait {
  width: clamp(120px, 14vw, 165px);
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  box-shadow: var(--ombre-carte);
  border: 4px solid var(--blanc);
  transition: transform .25s ease;
}
.portrait span {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
}
.portrait small { font-weight: 600; font-size: .95rem; }

.portrait--theo {
  background: var(--petrole);
  color: #faf5ec;
  transform: rotate(-4deg) translateY(10px);
}
.portrait--kelly {
  background: var(--orange-fonce);
  color: #fff;
  transform: rotate(3deg) translateY(-6px);
}
.portrait--theo:hover { transform: rotate(-2deg) translateY(6px); }
.portrait--kelly:hover { transform: rotate(1.5deg) translateY(-10px); }

.equipe__avenir {
  margin-top: 1.8rem;
  background: var(--blanc);
  border: 1.5px solid var(--ligne);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 1.1rem 1.3rem;
}
.equipe__avenir h3 { font-size: 1.1rem; }
.equipe__avenir p { font-size: .95rem; margin: 0; color: color-mix(in srgb, var(--encre) 80%, transparent); }

/* ------------------------------------------------------------
   Étapes
   ------------------------------------------------------------ */
.etapes {
  background: var(--creme-fonce);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.etapes__liste {
  counter-reset: etape;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

.etapes__liste li {
  counter-increment: etape;
  position: relative;
  padding-top: 3.4rem;
}
.etapes__liste li::before {
  content: counter(etape);
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--orange-fonce);
  color: #fff;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.3rem;
}
/* petit trait qui relie les étapes */
.etapes__liste li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 56px;
  right: -1rem;
  border-top: 2px dashed color-mix(in srgb, var(--encre) 22%, transparent);
}

.etapes__liste h3 { font-size: 1.15rem; }
.etapes__liste p {
  font-size: .95rem;
  color: color-mix(in srgb, var(--encre) 78%, transparent);
}

/* ------------------------------------------------------------
   FAQ dépliante
   ------------------------------------------------------------ */
.faq { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

.faq__inner { max-width: 780px; }

.faq__liste { display: grid; gap: .8rem; }

.faq__item {
  background: var(--blanc);
  border: 1.5px solid var(--ligne);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
}
.faq__item h3 { margin: 0; }

.faq__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font: inherit;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.08rem;
  text-align: left;
  color: var(--encre);
  background: none;
  border: 0;
  padding: 1.05rem 1.3rem;
  cursor: pointer;
}
.faq__question svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--orange-texte);
  transition: transform .3s ease;
}
.faq__item.est-ouvert .faq__question svg { transform: rotate(180deg); }

/* Dépliage fluide sans calcul de hauteur en JS.
   On anime « max-height » et non la grille : la technique
   « grid-template-rows: 0fr → 1fr » demande un navigateur récent
   (fin 2022 minimum) et n'est pas rendue partout. Celle-ci marche
   dans tous les navigateurs, même anciens.
   La valeur 45rem (720 px) est un plafond : elle doit rester supérieure
   à la plus longue réponse, sinon celle-ci serait coupée. (La plus longue
   mesure 606 px sur un écran de 320 px ; la marge couvre les visiteurs
   qui agrandissent le texte de leur navigateur.)
   Plus le plafond est haut, plus l'ouverture paraît se bloquer à
   mi-chemin : le texte a fini de se déplier, mais l'animation continue
   de parcourir le vide jusqu'au plafond. */
.faq__reponse {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease;
}
.faq__reponse p {
  padding: 0 1.3rem 1.15rem;
  margin: 0;
  font-size: .98rem;
  color: color-mix(in srgb, var(--encre) 80%, transparent);
}
.faq__item.est-ouvert .faq__reponse {
  max-height: 45rem;
  opacity: 1;
}

/* Les navigateurs récents savent animer vers la hauteur réelle du
   contenu : plus de plafond arbitraire, plus de vide à parcourir.
   Les autres gardent le comportement ci-dessus, identique à avant. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq__item.est-ouvert .faq__reponse { max-height: max-content; }
}

/* ------------------------------------------------------------
   Contact
   ------------------------------------------------------------ */
.contact {
  background: var(--fond-sombre);
  color: #faf5ec;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.contact__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.contact h2 { color: #fff; }
.contact__texte > p { color: rgba(250, 245, 236, .82); }

.contact__infos {
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 0;
  display: grid;
  gap: 1rem;
}
.contact__infos li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: .98rem;
}
.contact__infos svg {
  width: 22px;
  height: 22px;
  color: var(--orange);
  flex-shrink: 0;
  margin-top: .15rem;
}
.contact__infos a { color: #ffb48a; }
.contact__infos a:hover { color: #ffcdb0; }

/* ------------------------------------------------------------
   Réseaux sociaux et messageries
   (version claire sur fond sombre : pied de page)
   ------------------------------------------------------------ */
.reseaux {
  list-style: none;
  display: flex;
  gap: .6rem;
  padding: 0;
  margin: 0;
}
.reseaux a {
  display: grid;
  place-items: center;
  width: 44px;   /* assez large pour un doigt */
  height: 44px;
  border-radius: 50%;
  background: rgba(250, 245, 236, .1);
  color: rgba(250, 245, 236, .8);
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.reseaux a:hover {
  background: var(--orange);
  color: #fff;
  transform: translateY(-3px);
}
.reseaux svg { width: 21px; height: 21px; fill: currentColor; }

/* Version compacte dans la barre de menu (fond clair) */
.reseaux--nav {
  gap: .15rem;
  margin-left: .5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--ligne);
}
.reseaux--nav a {
  width: 34px;
  height: 34px;
  background: transparent;
  color: var(--petrole-texte);
}
.reseaux--nav a:hover {
  background: var(--orange);
  color: #fff;
  transform: translateY(-2px);
}
.reseaux--nav svg { width: 19px; height: 19px; }

/* ------------------------------------------------------------
   Adresse de courriel + bouton « Copier »
   (tout le monde n'a pas de logiciel de messagerie configuré)
   ------------------------------------------------------------ */
.courriel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .7rem;
}
.copier {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: rgba(250, 245, 236, .75);
  background: rgba(250, 245, 236, .1);
  border: 1px solid rgba(250, 245, 236, .25);
  border-radius: 999px;
  padding: .3rem .75rem;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.copier:hover {
  background: rgba(250, 245, 236, .2);
  color: #fff;
}
.copier svg { width: 15px; height: 15px; flex-shrink: 0; }
.copier.est-copie {
  background: var(--vert);
  border-color: var(--vert);
  color: #fff;
}

.formulaire {
  background: var(--blanc);
  color: var(--encre);
  border-radius: var(--rayon);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .45);
  display: grid;
  gap: 1.1rem;
}

.champ { display: grid; gap: .35rem; }

.champ label { font-weight: 600; font-size: .92rem; }

.champ input,
.champ select,
.champ textarea {
  font: inherit;
  font-size: .98rem;
  color: var(--encre);
  background: var(--creme);
  border: 1.5px solid var(--ligne);
  border-radius: 10px;
  padding: .7rem .9rem;
  width: 100%;
  transition: border-color .15s ease;
}
.champ textarea { resize: vertical; min-height: 110px; }

.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-color: var(--orange);
}

.champ input.champ--erreur,
.champ textarea.champ--erreur { border-color: #c0392b; }

.formulaire__note {
  font-size: .8rem;
  color: color-mix(in srgb, var(--encre) 60%, transparent);
  text-align: center;
  margin: 0;
}
.formulaire__note a { color: var(--petrole-texte); }

/* Le pot de miel : sorti de l'écran, invisible pour les humains */
.champ--piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire__erreur {
  background: #fdecea;
  border: 1.5px solid #c0392b;
  border-radius: 10px;
  padding: .8rem 1rem;
  font-size: .92rem;
  margin: 0;
  color: #6b1f16;   /* fond toujours clair : texte foncé imposé */
}
.formulaire__erreur a { color: var(--orange-survol); font-weight: 600; }

.formulaire__merci { text-align: center; padding: 1.5rem .5rem; }
.formulaire__merci h3 { font-size: 1.4rem; color: var(--petrole-texte); }
.formulaire__merci p { color: color-mix(in srgb, var(--encre) 75%, transparent); }

/* ------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------ */
.pied {
  background: var(--fond-sombre);
  color: rgba(250, 245, 236, .75);
  border-top: 1px solid rgba(250, 245, 236, .12);
  padding-block: 2.2rem;
  font-size: .92rem;
}

.pied__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  align-items: center;
  justify-content: space-between;
}

.pied__marque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
}
.pied__logo { width: min(330px, 100%); height: auto; }
.pied__marque p { margin: 0; font-size: .85rem; font-style: italic; }

.pied__nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.pied__nav a,
.pied__legal a {
  color: rgba(250, 245, 236, .75);
  text-decoration: none;
}
.pied__nav a:hover,
.pied__legal a:hover { color: #ffb48a; }
.pied__legal a { text-decoration: underline; }

.pied__legal { margin: 0; width: 100%; font-size: .82rem; color: rgba(250, 245, 236, .5); }

/* ------------------------------------------------------------
   Bouton mode clair / mode sombre
   ------------------------------------------------------------ */
.bascule-theme {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: .7rem;
  flex-shrink: 0;
  border: 1.5px solid var(--ligne);
  border-radius: 50%;
  background: var(--blanc);
  color: var(--petrole-texte);
  cursor: pointer;
  padding: 0;
  transition: transform .18s ease, background-color .18s ease,
              color .18s ease, border-color .18s ease;
}
.bascule-theme:hover {
  transform: translateY(-2px) rotate(-12deg);
  border-color: var(--orange-texte);
  color: var(--orange-texte);
}
.bascule-theme svg { width: 19px; height: 19px; }

/* On affiche l'icône de ce vers quoi le clic emmène :
   une lune quand on est en clair, un soleil quand on est en sombre. */
.bascule-theme__soleil { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bascule-theme__lune   { display: none; }
  :root:not([data-theme="light"]) .bascule-theme__soleil { display: block; }
}
:root[data-theme="dark"] .bascule-theme__lune   { display: none; }
:root[data-theme="dark"] .bascule-theme__soleil { display: block; }
:root[data-theme="light"] .bascule-theme__lune   { display: block; }
:root[data-theme="light"] .bascule-theme__soleil { display: none; }

/* ------------------------------------------------------------
   Bouton contact flottant (téléphone uniquement)
   ------------------------------------------------------------ */
.cta-mobile {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 60;
  align-items: center;
  gap: .5rem;
  background: var(--orange-fonce);
  color: #fff;
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  box-shadow: 0 10px 30px -8px rgba(166, 61, 19, .6);
  transform: translate(-50%, 90px);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.cta-mobile.est-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ------------------------------------------------------------
   Apparition au scroll (le JS pose .est-visible, et décale
   chaque enfant d'un groupe pour l'effet cascade)
   ------------------------------------------------------------ */
.a-revele {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: var(--retard, 0s);
}
.a-revele.est-visible {
  opacity: 1;
  transform: none;
}

/* À l'impression : tout est visible, et on retire ce qui ne sert qu'à
   l'écran (menu, bandeau promo, bouton de mode, bouton d'appel). */
@media print {
  .a-revele { opacity: 1; transform: none; }
  .cta-mobile, .barre-nav, .promo, .bascule-theme { display: none; }
}

/* ------------------------------------------------------------
   Animations réduites : tout apparaît sans bouger
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .a-revele { opacity: 1; transform: none; transition: none; }
  .hero__texte > *, .hero__visuel,
  .illu__trait, .illu__point, .illu__pousse, .hero__etiquette,
  .carte.surgit, .promo__badge { animation: none; }
  .illu__trait { stroke-dashoffset: 0; }
  .illu__point { opacity: 1; }
  .btn, .carte, .filtre, .portrait, .carte__icone,
  .faq__reponse, .faq__question svg, .cta-mobile { transition: none; }
}

/* ------------------------------------------------------------
   Tablette et téléphone
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .hero__grille { grid-template-columns: 1fr; }
  .bandeau__inner { grid-template-columns: 1fr; gap: 1.1rem; }
  .hero__visuel { max-width: 440px; margin-inline: auto; }
  .equipe__grille { grid-template-columns: 1fr; }
  .equipe__portraits { order: 2; margin-top: 1rem; }
  .contact__grille { grid-template-columns: 1fr; }
  .etapes__liste { grid-template-columns: 1fr; gap: 1.4rem; }
  .etapes__liste li { padding-top: 0; padding-left: 3.6rem; }
  .etapes__liste li::after { display: none; }
  .impot__inner { grid-template-columns: 1fr; }
}

/* Mesuré : la barre de menu (liens + bouton + 4 icônes + bouton de mode)
   réclame 1009 px pour tenir sur une ligne. On bascule sur le menu
   déroulant dès 1080 px, la marge absorbant les différences de rendu
   des polices d'un système à l'autre. */
@media (max-width: 1080px) {
  .burger { display: flex; }

  .barre-nav__inner {
    justify-content: flex-end;
    padding-block: .15rem;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--creme);
    border-bottom: 1px solid var(--ligne);
    padding: .5rem 1.25rem 1.25rem;
    display: none;
  }
  .nav.est-ouverte { display: flex; }
  .nav a:not(.btn) {
    padding: .85rem 0;
    border-bottom: 1px solid var(--ligne);
    font-size: 1.05rem;
  }
  .nav .btn { margin-top: 1rem; text-align: center; }

  /* Dans le menu déroulant : les icônes passent en grand format,
     centrées sous le bouton de contact */
  .reseaux--nav {
    justify-content: center;
    gap: .5rem;
    margin: 1.1rem 0 .2rem;
    padding: 1.1rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--ligne);
  }
  .reseaux--nav a {
    width: 46px;
    height: 46px;
    background: var(--teinte-icone);
  }
  .reseaux--nav svg { width: 23px; height: 23px; }

  .cta-mobile { display: inline-flex; }

  .pied__logo { width: min(280px, 100%); }
  .simulateur__resultat { grid-template-columns: 1fr; }
}

/* Très petits téléphones (iPhone SE, 320 px) : le titre passe un cran
   en dessous et « On ne jette pas. » a le droit de se couper */
@media (max-width: 380px) {
  .hero h1 { font-size: 2.15rem; }
  .souligne { white-space: normal; }
  .hero__etiquette { max-width: 200px; right: 0; }
}

/* Écrans tactiles : des boutons assez grands pour le doigt (44 px mini) */
@media (pointer: coarse) {
  .filtre { padding: .7rem 1.2rem; min-height: 44px; }
  .nav a:not(.btn) { min-height: 44px; display: flex; align-items: center; }

  /* Le numéro de téléphone, le courriel et WhatsApp faisaient 26 px de
     haut : c'est le plus petit de tous les éléments à toucher alors que
     ce sont les plus importants de la page. Idem pour les liens du pied
     de page, serrés les uns sous les autres.
     Les liens au fil d'un paragraphe ne sont volontairement pas touchés :
     les agrandir casserait l'interligne du texte. */
  .contact__infos a,
  .pied__nav a,
  .copier {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .bascule-theme { width: 44px; height: 44px; }
}