/* =========================================================================
   PAGES MÉTIER — direction « plaque & parc »           Loann Kotarlic · 2026
   =========================================================================
   Feuille AUTONOME, volontairement séparée de styles.css (Tailwind compilé).
   Motif : ces trois pages testent une direction visuelle distincte de
   l'accueil. Les mélanger dans le même build brouillerait les deux, et le
   mode de panne documenté du site (« une classe absente du CSS compilé rend
   silencieusement en valeur par défaut ») disparaît quand le CSS est écrit
   à la main. Si la direction est retenue, c'est ce fichier qui remonte vers
   l'accueil — une passe à la fois.

   Zéro CDN. Zéro dépendance. Polices auto-hébergées en .woff2.
   ========================================================================= */

/* ---------- polices ---------- */
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- jetons ---------- */
:root{
  --plaque:#F2F3F5;      /* fond de page — blanc froid, l'anti-crème */
  --paper:#FFFFFF;       /* surfaces claires */
  --asphalte:#1B1E22;    /* encre et panneaux sombres */
  --acier:#5A6169;       /* texte secondaire */
  --bleu:#0B3EAE;        /* accent unique — le bandeau de plaque */
  --perte:#C4322A;       /* UNIQUEMENT ce qui est prélevé. Jamais un « avant »,
                            jamais l'inverse d'un « après » : la page ne promet
                            aucune progression, elle constate un prélèvement. */
  --filet:rgba(27,30,34,.14);
  --filet-clair:rgba(255,255,255,.16);

  --display:"Barlow Condensed",-apple-system,"Arial Narrow",sans-serif;
  --texte:"Barlow",-apple-system,system-ui,sans-serif;

  --page:68rem;          /* largeur de lecture */
  --gouttiere:clamp(1.25rem,5vw,3rem);
}

/* ---------- socle ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--plaque);color:var(--asphalte);
  font-family:var(--texte);font-size:1.0625rem;line-height:1.6;
  font-weight:400;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}

.enveloppe{max-width:var(--page);margin-inline:auto;padding-inline:var(--gouttiere)}
.saut{height:1px;background:var(--filet);border:0;margin:0}

/* ---------- typographie ---------- */
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;
  letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(2.9rem,7vw,5.25rem);line-height:.94}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.04}
h3{font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.12;font-weight:600}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.55;color:var(--acier);max-width:54ch}
.lede strong{color:var(--asphalte);font-weight:600}
.menu{font-size:.95rem;color:var(--acier);max-width:56ch}

/* le mot-repère : le vocabulaire des prospects, jamais celui du métier SEO */
.repere{font-weight:600;color:var(--asphalte);box-shadow:inset 0 -.4em 0 rgba(11,62,174,.14)}

/* ---------- la marque partagée : le bandeau ---------- */
/* Bleu plein, capitales condensées. C'est la seule chose que les trois pages
   ont en commun visuellement — le reste, chaque métier le porte lui-même. */
.bandeau{
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--bleu);color:#fff;
  font-family:var(--display);font-weight:600;font-size:.8rem;
  letter-spacing:.16em;text-transform:uppercase;
  padding:.42em .85em .32em;border-radius:2px;
}
.bandeau--clair{background:#fff;color:var(--bleu)}

/* étiquette de champ — le motif de base, repris partout : libellé au-dessus,
   valeur en dessous. C'est ainsi que se lisent une carte grise, une étiquette
   de pare-brise et un ticket. */
.champ{display:block}
.champ__nom{
  display:block;font-family:var(--display);font-weight:600;
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--acier);margin-bottom:.15em;
}
.champ__val{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;
  font-variant-numeric:tabular-nums;
}

/* ---------- barre de navigation ---------- */
.barre{border-bottom:1px solid var(--filet);background:var(--plaque);
  position:sticky;top:0;z-index:20}
.barre__int{display:flex;align-items:center;gap:1rem;
  min-height:60px;flex-wrap:wrap}
.barre__nom{font-family:var(--display);font-weight:700;font-size:1.15rem;
  letter-spacing:-.01em;text-decoration:none;margin-right:auto}
.barre__nom span{color:var(--acier);font-weight:600;font-size:.8rem;
  letter-spacing:.13em;text-transform:uppercase;display:block;line-height:1}
.barre__tel{font-family:var(--display);font-weight:600;font-size:1.05rem;
  letter-spacing:.02em;text-decoration:none;font-variant-numeric:tabular-nums}
/* Sous 560 px, le bouton passait à la ligne et doublait la hauteur d'une barre
   collante. Sur téléphone l'action utile est l'appel ; les deux boutons sont
   de toute façon juste en dessous, dans le hero. */
@media(max-width:559px){.barre .bouton{display:none}}

/* ---------- boutons ---------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:1.05rem;
  letter-spacing:.03em;text-transform:uppercase;text-decoration:none;
  padding:.7em 1.25em .6em;border-radius:2px;border:2px solid var(--asphalte);
  background:var(--asphalte);color:#fff;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.bouton:hover{background:var(--bleu);border-color:var(--bleu)}
.bouton--creux{background:transparent;color:var(--asphalte)}
.bouton--creux:hover{background:var(--asphalte);border-color:var(--asphalte);color:#fff}
.boutons{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ---------- rythme des sections : des panneaux, pas des filets ---------- */
.bloc{padding-block:clamp(3.5rem,8vw,6rem)}
.bloc--serre{padding-block:clamp(2.5rem,5vw,3.75rem)}
.bloc--sombre{background:var(--asphalte);color:var(--plaque)}
.bloc--sombre h2,.bloc--sombre h3{color:#fff}
.bloc--sombre .lede,.bloc--sombre .menu{color:rgba(242,243,245,.72)}
.bloc--sombre .champ__nom{color:rgba(242,243,245,.6)}
.bloc--sombre a{color:#fff}
.bloc--bleu{background:var(--bleu);color:#fff}
.bloc--bleu h2{color:#fff}
.bloc--bleu .lede{color:rgba(255,255,255,.82)}

.entete{margin-bottom:clamp(2rem,4vw,3rem);max-width:34ch}
.entete .bandeau{margin-bottom:1.1rem}
.entete p{margin-top:1rem;max-width:52ch}

/* Grille éditoriale : le titre de section tient la colonne de gauche et sert
   de note de marge ; le contenu occupe la droite. Sans elle, chaque section
   dérive vers la gauche d'un cadre trop large et la page a l'air inachevée. */
.grille{display:grid;gap:clamp(1.75rem,4vw,3.5rem)}
@media(min-width:900px){
  .grille{grid-template-columns:minmax(0,23rem) minmax(0,1fr);
    gap:clamp(2.5rem,5vw,4.5rem)}
  .grille>.entete{margin-bottom:0;max-width:none}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,6vw,4.5rem)}
.hero__grille{display:grid;gap:clamp(2.25rem,5vw,3.5rem);align-items:center}
@media(min-width:960px){
  .hero__grille{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(2.5rem,5vw,4rem)}
}
.hero h1{margin-block:1.1rem .9rem;max-width:16ch}
.hero .boutons{margin-top:1.9rem}
.hero__pied{margin-top:1.4rem;font-size:.85rem;color:var(--acier);
  display:flex;flex-wrap:wrap;gap:.4rem 1.35rem}

/* ---------- listes ---------- */
.liste{list-style:none;margin:0;padding:0;display:grid;gap:0}
.liste li{padding:.85rem 0;border-top:1px solid var(--filet);
  display:flex;gap:.9rem;align-items:baseline}
.liste li:last-child{border-bottom:1px solid var(--filet)}
.bloc--sombre .liste li{border-color:var(--filet-clair)}
.liste__marque{font-family:var(--display);font-weight:700;color:var(--bleu);
  font-size:.95rem;letter-spacing:.08em;flex:0 0 auto;min-width:1.6em}
.bloc--sombre .liste__marque{color:#7FA0F0}

/* ---------- objections ---------- */
.objection{border-top:2px solid var(--asphalte);padding-top:1.1rem;
  margin-bottom:2.25rem}
.objection__dit{font-family:var(--display);font-weight:700;
  font-size:clamp(1.3rem,2.5vw,1.75rem);line-height:1.14;margin-bottom:.6rem}
.objection__rep{color:var(--acier);max-width:54ch;margin:0}
.objection__rep strong{color:var(--asphalte);font-weight:600}
.duo{display:grid;gap:clamp(1.5rem,4vw,2.75rem)}
@media(min-width:820px){.duo{grid-template-columns:1fr 1fr}}

/* ---------- tableau de coût ---------- */
.tableau-enrobe{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--filet);border-radius:2px;background:var(--paper)}
table.cout{border-collapse:collapse;width:100%;min-width:34rem;font-size:.95rem}
table.cout th,table.cout td{padding:.75rem .9rem;text-align:left;
  border-bottom:1px solid var(--filet)}
table.cout thead th{font-family:var(--display);font-weight:600;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acier);
  background:var(--plaque)}
table.cout td.n,table.cout th.n{text-align:right;font-variant-numeric:tabular-nums;
  font-family:var(--display);font-weight:600;font-size:1.05rem}
table.cout tbody tr:last-child td{border-bottom:0}
table.cout tr.mien td{background:rgba(11,62,174,.06);font-weight:600}
table.cout tr.mien td.n{color:var(--bleu);font-weight:700}
.source{font-size:.8rem;color:var(--acier);margin-top:.9rem;max-width:60ch}
.source a{color:var(--acier)}

/* ---------- prix ---------- */
.prix{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  margin-bottom:.5rem}
.prix__n{font-family:var(--display);font-weight:700;
  font-size:clamp(4rem,13vw,8rem);line-height:.85;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.prix__q{font-family:var(--display);font-weight:600;font-size:1.15rem;
  letter-spacing:.12em;text-transform:uppercase}

/* =========================================================================
   SIGNATURE 1 — NÉGOCE VO : l'étiquette de pare-brise
   Les libellés sont là dès le premier pixel ; seules les VALEURS arrivent,
   décalées, comme importées du logiciel de gestion. Un seul mouvement sur
   toute la page.
   ========================================================================= */
.etiquette{background:var(--paper);border:1px solid var(--filet);border-radius:2px;
  max-width:30rem;box-shadow:0 1px 0 rgba(27,30,34,.06)}
.etiquette__cadre{max-width:30rem}
.etiquette__cadre .champ__nom{margin-bottom:.5rem}
.etiquette__cadre .menu{margin:.9rem 0 0;font-size:.82rem}
.etiquette__haut{background:var(--asphalte);color:#fff;padding:.6rem .95rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.etiquette__titre{font-family:var(--display);font-weight:600;font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase}
.etiquette__corps{padding:1.15rem .95rem 1.05rem}
.etiquette__ligne{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--filet)}
.etiquette__ligne:last-of-type{border-bottom:0}
.etiquette__nom{font-family:var(--display);font-weight:600;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acier)}
.etiquette__val{font-family:var(--display);font-weight:700;font-size:1.2rem;
  font-variant-numeric:tabular-nums;text-align:right}
.etiquette__val--fort{font-size:2rem;line-height:1;color:var(--bleu)}
.etiquette__pied{border-top:1px solid var(--filet);padding:.7rem .95rem;
  font-size:.78rem;color:var(--acier);background:var(--plaque)}

.arrive{animation:arrive .5s cubic-bezier(.2,.7,.3,1) both}
.etiquette__ligne:nth-of-type(1) .arrive{animation-delay:.35s}
.etiquette__ligne:nth-of-type(2) .arrive{animation-delay:.50s}
.etiquette__ligne:nth-of-type(3) .arrive{animation-delay:.65s}
.etiquette__ligne:nth-of-type(4) .arrive{animation-delay:.80s}
.etiquette__pied .arrive{animation-delay:1s}
@keyframes arrive{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}

/* =========================================================================
   SIGNATURE 2 — GARAGE : la ligne oubliée
   Une liste de prestations dont UNE est sortie du rang, parce qu'elle a été
   trouvée sur un chevalet de comptoir et n'était écrite nulle part en ligne.
   ========================================================================= */
.prestations{list-style:none;margin:0 0 1.5rem;padding:0;
  display:grid;gap:0;border-top:1px solid var(--filet-clair)}
.prestations li{padding:.62rem 0;border-bottom:1px solid var(--filet-clair);
  font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:.01em;
  color:rgba(242,243,245,.6)}
.oubliee{background:var(--bleu);border:0;border-radius:2px;
  margin-top:1.5rem;padding:clamp(1.25rem,3vw,1.9rem)}
.oubliee__nom{font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,5.5vw,3.4rem);line-height:1;color:#fff;
  letter-spacing:-.01em;margin-bottom:.5rem}
.oubliee p{color:rgba(255,255,255,.88);margin:0;max-width:48ch}

/* =========================================================================
   SIGNATURE 3 — RESTAURATION : le ticket
   Le montant de la commission est laissé VIDE, et c'est l'argument : aucune
   plateforme ne publie de grille tarifaire en France.
   ========================================================================= */
.tickets{display:grid;gap:clamp(1.25rem,3vw,2rem)}
@media(min-width:780px){.tickets{grid-template-columns:1fr 1fr;align-items:start}}
.tickets--seul{grid-template-columns:1fr!important;max-width:26rem}
.ticket{background:var(--paper);border:1px solid var(--filet);border-radius:2px;
  padding:1.1rem 1.15rem 1.2rem;color:var(--asphalte)}
.ticket__titre{font-family:var(--display);font-weight:600;font-size:.75rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--acier);
  padding-bottom:.7rem;border-bottom:2px solid var(--asphalte);margin-bottom:.4rem}
.ticket__l{display:flex;justify-content:space-between;gap:1rem;
  padding:.5rem 0;font-variant-numeric:tabular-nums}
.ticket__l span:first-child{color:var(--acier)}
.ticket__l b{font-family:var(--display);font-weight:600;font-size:1.15rem}
.ticket__l--total{border-top:1px solid var(--filet);margin-top:.35rem;
  padding-top:.7rem}
.ticket__l--total b{font-size:1.8rem;font-weight:700;line-height:1}
.illisible{color:var(--bleu);letter-spacing:.1em}
.ticket--net{border-color:var(--bleu);border-width:2px}
.ticket__note{font-size:.82rem;color:var(--acier);margin:.9rem 0 0;
  padding-top:.8rem;border-top:1px solid var(--filet)}

/* =========================================================================
   LA RÉALISATION — un vrai site fini, en grand
   Ajouté le 16/08/2026 : les pages expliquaient le produit au lieu de le
   montrer. Une capture d'un site réellement en ligne fait le travail que
   trois paragraphes ne faisaient pas.
   ========================================================================= */
.realisation{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:center}
@media(min-width:900px){
  .realisation{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
    gap:clamp(2.5rem,5vw,4rem)}
}
.ecran{margin:0;max-width:22rem;justify-self:center}
.ecran img{width:100%;border:1px solid var(--filet);border-radius:3px;
  box-shadow:0 18px 40px -18px rgba(27,30,34,.45)}
.bloc--sombre .ecran img{border-color:rgba(255,255,255,.22)}
.ecran figcaption{font-family:var(--display);font-weight:600;font-size:.72rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--acier);
  margin-top:.7rem;text-align:center}
.bloc--sombre .ecran figcaption{color:rgba(242,243,245,.6)}
.faits{list-style:none;margin:1.5rem 0 0;padding:0}
.faits li{display:flex;gap:.85rem;align-items:baseline;padding:.55rem 0;
  border-top:1px solid var(--filet)}
.bloc--sombre .faits li{border-color:var(--filet-clair)}
.faits li:last-child{border-bottom:1px solid var(--filet)}
.bloc--sombre .faits li:last-child{border-color:var(--filet-clair)}
.faits b{font-family:var(--display);font-weight:700;color:var(--bleu);
  flex:0 0 auto;min-width:4.5em;font-variant-numeric:tabular-nums}
.bloc--sombre .faits b{color:#7FA0F0}

/* ---------- pied ---------- */
.pied{background:var(--asphalte);color:rgba(242,243,245,.75);
  padding-block:clamp(2.5rem,5vw,3.5rem);font-size:.9rem}
.pied a{color:#fff}
.pied__liens{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin-bottom:1.5rem;
  font-family:var(--display);font-weight:600;letter-spacing:.02em;font-size:1.05rem}
.pied__legal{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.25rem;
  font-size:.82rem;padding-top:1.25rem;border-top:1px solid var(--filet-clair)}
/* cibles tactiles : sans ça les liens légaux tombent à 21 px de haut */
.pied__legal a{display:inline-block;padding-block:.3rem}

/* ---------- accessibilité du mouvement ---------- */
@media(prefers-reduced-motion:reduce){
  .arrive{animation:none!important;opacity:1;transform:none}
  *{transition-duration:.01ms!important}
}

/* =========================================================================
   LES DEUX ZÉROS — page restaurant (16/08/2026)
   Remplace un tableau comparatif qui nommait deux concurrents et en omettait
   un troisième, moins cher : présenté comme un panorama du marché, il tombait
   sous la tromperie par omission. Ici on n'affirme plus rien sur le marché,
   seulement sur l'offre — et les deux chiffres sont vérifiables sur le contrat.
   ========================================================================= */
.deux-zeros{display:grid;gap:clamp(1.25rem,3vw,2rem);margin-top:clamp(1.5rem,4vw,2.5rem)}
@media(min-width:720px){.deux-zeros{grid-template-columns:1fr 1fr}}
.zero{border-top:2px solid var(--asphalte);padding-top:1.1rem}
.zero__n{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(3.5rem,10vw,5.5rem);line-height:.85;letter-spacing:-.02em;
  color:var(--bleu);font-variant-numeric:tabular-nums}
.zero__nom{display:block;font-family:var(--display);font-weight:600;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acier);margin:.45rem 0 .9rem}
.zero p{margin:0;color:var(--acier);max-width:44ch}

/* =========================================================================
   SUR VOS CHIFFRES — le calcul de la commission (page restaurant, 16/08/2026)
   Les taux sont des RÉGLAGES, pas une grille attribuée à qui que ce soit :
   aucune plateforme n'en publie pour la France, c'est l'argument du hero.
   ========================================================================= */
.reglages{display:grid;gap:clamp(1.5rem,4vw,2.5rem);margin-bottom:clamp(2rem,4vw,2.75rem)}
@media(min-width:760px){.reglages{grid-template-columns:minmax(0,18rem) minmax(0,1fr);align-items:start}}
.reglage__saisie{display:flex;align-items:center;gap:.7rem;margin-top:.35rem}
.reglage__saisie input[type=number]{
  font-family:var(--display);font-weight:700;font-size:1.9rem;width:7.5ch;
  padding:.15em .35em;border:2px solid var(--asphalte);border-radius:2px;
  background:var(--paper);color:var(--asphalte);font-variant-numeric:tabular-nums;
  -moz-appearance:textfield}
/* Les flèches du champ numérique rognaient la valeur et ne servent à rien ici :
   on saisit un chiffre d'affaires, pas un incrément. */
.reglage__saisie input[type=number]::-webkit-outer-spin-button,
.reglage__saisie input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.reglage__saisie input[type=range]{flex:1 1 auto;accent-color:var(--bleu);min-width:0;height:44px}
.reglage__unite{font-family:var(--display);font-weight:700;font-size:1.5rem;
  color:var(--bleu);font-variant-numeric:tabular-nums;white-space:nowrap}
.raccourcis{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.raccourcis button{
  font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:.06em;
  min-height:44px;padding:0 1em;border:1px solid var(--filet);border-radius:2px;
  background:var(--paper);color:var(--acier);cursor:pointer;
  font-variant-numeric:tabular-nums;transition:border-color .15s ease,color .15s ease}
.raccourcis button:hover{border-color:var(--bleu);color:var(--bleu)}
.reglage__aide{font-size:.82rem;color:var(--acier);margin:.7rem 0 0;max-width:52ch}

.graphes{display:grid;gap:clamp(1.75rem,4vw,2.5rem)}
@media(min-width:760px){.graphes{grid-template-columns:1fr 1fr}}
.graphe{margin:0;border-top:2px solid var(--asphalte);padding-top:1rem}
.graphe figcaption{font-family:var(--display);font-weight:600;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acier);margin-bottom:.9rem}
.graphe svg{width:100%;height:auto;display:block;overflow:visible}
.graphe .axe line{stroke:var(--filet);stroke-width:1}
.graphe .lab text{font-family:var(--display);font-weight:600;font-size:9px;
  fill:var(--acier);font-variant-numeric:tabular-nums}
.trace{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.trace--commission{stroke:var(--asphalte)}
.trace--mien{stroke:var(--bleu);stroke-dasharray:5 4}
.graphe__val{margin:.9rem 0 0;font-size:.92rem;color:var(--acier)}
.graphe__val strong{font-family:var(--display);font-weight:700;font-size:1.6rem;
  color:var(--asphalte);display:block;font-variant-numeric:tabular-nums;line-height:1.1}

/* =========================================================================
   HERO CENTRÉ — variante (page restaurant, 16/08/2026)
   Repris de la mise en page de monsnack.fr : une phrase centrée qui dit quoi,
   pour qui et quel avantage, sans figure de style. Le titre n'est plus une
   provocation à déchiffrer, il se comprend d'un coup d'œil.
   Le ticket au montant vide reste : il passe simplement SOUS le titre.
   ========================================================================= */
.hero--centre{text-align:center;padding-block:clamp(2.5rem,6vw,5rem) clamp(2.5rem,5vw,4rem)}
.hero__centre{max-width:44rem;margin-inline:auto}
.hero--centre h1{max-width:none;margin-block:1.2rem 1rem;
  font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:1.02;text-wrap:balance}
.hero--centre .lede{margin-inline:auto;max-width:46ch}
.hero--centre .boutons{justify-content:center}
.hero--centre .hero__pied{justify-content:center}
.etiquette__cadre--centre{margin-inline:auto;margin-top:clamp(2rem,5vw,3rem);text-align:left}
.etiquette__cadre--centre > .champ__nom{text-align:center}

/* =========================================================================
   LES DEUX ASSIETTES — hero de la page restaurant (16/08/2026)
   Le même plat deux fois : à gauche une part prélevée, à droite intact.
   Les libellés sont en HTML et non dans l'image — ils se corrigent sans
   régénérer un fichier, Google les lit, et aucun modèle d'image ne sait
   écrire « Commandée chez vous » sans faute.
   ========================================================================= */
.assiettes{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(.75rem,3vw,2.5rem);max-width:46rem;
  margin:clamp(2rem,5vw,3rem) auto 0;align-items:start}
.assiette{margin:0}
.assiette img{width:100%;height:auto;border-radius:2px;background:var(--paper)}
.assiette figcaption{
  font-family:var(--display);font-weight:600;
  font-size:clamp(.72rem,2vw,.86rem);letter-spacing:.13em;text-transform:uppercase;
  color:var(--acier);text-align:center;margin-top:.35rem;
  padding-top:.7rem;border-top:1px solid var(--filet)}
.assiette--nette figcaption{color:var(--bleu);border-top-color:var(--bleu);border-top-width:2px}
.assiettes__note{max-width:44rem;margin:1.1rem auto 0;
  font-size:.8rem;color:var(--acier);text-align:center}

/* Sous chaque assiette : la même question, deux réponses. On ne compare pas
   « moins » à « plus » — ce serait une promesse de résultat — mais « prélevé »
   à « rien prélevé ». D'où l'absence de flèche montante côté offre. */
.preleve{margin:.9rem 0 0;text-align:center}
.preleve__val{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.6rem,4vw,2.3rem);line-height:1;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;margin-top:.2rem}
.preleve--perte .preleve__val{color:var(--perte)}
.preleve--net .preleve__val{color:var(--bleu)}
.preleve--perte .champ__nom::before,
.preleve--net .champ__nom::before{
  content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;
  margin-right:.5em;vertical-align:baseline}
.preleve--perte .champ__nom::before{background:var(--perte)}
.preleve--net .champ__nom::before{background:var(--bleu)}
/* « exemple » collé au chiffre : un taux affiché sans cette mention se lit
   comme un relevé, et la page dit ailleurs qu'aucun n'est public. */
.preleve__ex{font-family:var(--texte);font-weight:600;font-size:.34em;
  letter-spacing:.1em;text-transform:uppercase;color:var(--acier);
  margin-left:.35em;vertical-align:super}
.assiettes__note a{color:var(--bleu);text-underline-offset:.2em}
/* Le parc est panoramique, pas carré : sous 640 px deux bandes côte à côte
   rendraient les voitures minuscules. On empile. */
@media(max-width:640px){.assiettes--large{grid-template-columns:1fr}}
.assiettes--large{max-width:56rem}
/* Hero à une seule colonne : l'étiquette de pare-brise a été retirée le 16/08,
   le parc juste en dessous fait désormais le travail d'illustration. */
.hero__une{max-width:46rem}

/* Tableau de coût : deux groupes nommés plutôt qu'une nuance de fond.
   « Chez moi » et « ailleurs » ne se distinguaient que par une teinte bleutée
   très légère — insuffisant pour que la lecture soit immédiate, et invisible
   pour qui ne perçoit pas bien les contrastes de couleur. */
table.cout tr.groupe-ligne th{
  background:var(--asphalte);color:#fff;text-align:left;
  font-family:var(--display);font-weight:600;font-size:.74rem;
  letter-spacing:.15em;text-transform:uppercase;padding:.6rem .9rem}
table.cout tr.mien td:first-child{
  box-shadow:inset 3px 0 0 var(--bleu)}

/* =========================================================================
   BARRES DE COÛT — remplacent le tableau (16/08/2026)
   Entre 300 € et 9 600 € il y a un facteur 32 : une colonne de chiffres
   oblige le lecteur à faire la division, une barre la lui donne. Les
   montants restent en texte, la barre n'est qu'une aide visuelle.
   ========================================================================= */
.barres{display:grid;gap:.55rem;max-width:44rem}
.barres__groupe{
  font-family:var(--display);font-weight:600;font-size:.74rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--acier);
  margin:1.2rem 0 .3rem;padding-bottom:.4rem;border-bottom:1px solid var(--filet)}
.barres__groupe:first-child{margin-top:0}
.cbarre{display:grid;grid-template-columns:minmax(0,12rem) 1fr auto;
  align-items:center;gap:.8rem}
.cbarre__nom{font-size:.92rem;color:var(--acier)}
.cbarre__piste{display:block;height:12px;background:var(--filet);border-radius:2px}
.cbarre__jauge{display:block;height:100%;background:var(--asphalte);border-radius:2px}
.cbarre--mien .cbarre__nom{color:var(--asphalte);font-weight:500}
.cbarre--mien .cbarre__jauge{background:var(--bleu)}
.cbarre__val{font-family:var(--display);font-weight:700;font-size:1.15rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;min-width:6ch}
.cbarre--mien .cbarre__val{color:var(--bleu)}
@media(max-width:560px){
  /* Sur téléphone la barre passe sous son libellé : trois colonnes à 375 px
     réduiraient la jauge à quelques pixels. */
  .cbarre{grid-template-columns:1fr auto;gap:.2rem .8rem}
  .cbarre__nom{grid-column:1}
  .cbarre__val{grid-column:2;grid-row:1}
  .cbarre__piste{grid-column:1 / -1}
}