/* ========================================================================= 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:#EEEDE7; /* fond de page — blanc froid, l'anti-crème */ --paper:#FFFFFF; /* surfaces claires */ --asphalte:#151E1B; /* encre et panneaux sombres */ --acier:#4E5A56; /* texte secondaire */ --bleu:#1B6B4C; /* 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(21,30,27,.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(251,250,247,.72)} .bloc--sombre .champ__nom{color:rgba(251,250,247,.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:#5CC79B} /* ---------- 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(21,30,27,.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(251,250,247,.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(21,30,27,.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(251,250,247,.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:#5CC79B} /* ---------- pied ---------- */ .pied{background:var(--asphalte);color:rgba(251,250,247,.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} /* 13/09/2026 — Aperçu du produit réel en tête des pages garage et restaurant. Remplace les paires d'images générées par IA (tiroir, assiette), retirées à la demande de Loann : « les photos sont mauvaises, on ne comprend pas ». Une capture d'un site livré se comprend seule. */ .hero__apercu{max-width:56rem;margin:clamp(2rem,5vw,3rem) auto 0} .hero__apercu img{display:block;width:100%;height:auto;border:1px solid var(--filet);border-radius:4px; background:#FFFCF7;box-shadow:0 24px 48px -24px rgba(21,30,27,.45)} .hero__apercu figcaption{margin-top:.8rem;font-size:.85rem;color:var(--acier);text-align:center} /* 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} } /* ========================================================================= RÉALISATIONS — grille de sites livrés (page Nancy, ajouté le 09/09/2026) Quatre captures de sites réellement en ligne, chacune reliée au site du client. Les fichiers sources (1200 × 900) sont des maquettes « téléphone » avec un large fond et une légende gravée dans l'image : le cadre 3/4 ne garde que la partie utile — le téléphone en grand, la légende gravée masquée (elle est réécrite en HTML, donc corrigeable et lisible par Google). Aucun chiffre, aucun prix, aucun prénom : la capture et le lien font la preuve, le texte ne fait que nommer. ========================================================================= */ .realisations{list-style:none;margin:0;padding:0;display:grid; gap:clamp(2rem,4vw,3rem) clamp(1.5rem,4vw,3rem)} @media(min-width:720px){.realisations{grid-template-columns:1fr 1fr}} .realisations li{margin:0} .realisations__cadre{display:block;aspect-ratio:3/4;overflow:hidden; border:1px solid var(--filet);border-radius:3px;background:#FFFCF7; box-shadow:0 18px 40px -18px rgba(21,30,27,.45)} .realisations__cadre img{width:100%;height:115%;object-fit:cover;object-position:50% 0} .realisations .champ__nom{margin-top:1.1rem} .realisations h3 a{text-decoration:none} .realisations h3 a:hover{color:var(--bleu)} .realisations .menu{margin:.45rem 0 0} .realisations__liens{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin-top:.6rem} .realisations__liens a{display:inline-block;padding-block:.35rem; font-family:var(--display);font-weight:600;font-size:.92rem;letter-spacing:.06em; text-transform:uppercase;color:var(--bleu);text-underline-offset:.22em} /* ========================================================================= PAGE GARAGE — compléments, ajouté le 09/09/2026 (refonte du positionnement). La nav commune vit dans le pied (.pied__liens, structure d'origine) et les réalisations reprennent le composant .realisations défini juste au-dessus pour la page Nancy : un seul composant pour toutes les pages. ========================================================================= */ /* Liste de prix : les marques « 300 € / 400 € / 35 € » s'alignent sur une même largeur au lieu de décaler chaque ligne. */ .liste--prix .liste__marque{min-width:4.6em} /* Objections posées sur un panneau sombre : le filet du haut devient clair. */ .objection--clair{border-top-color:rgba(255,255,255,.6)} .objection--clair .objection__rep{color:rgba(251,250,247,.72)} .objection--clair .objection__rep strong{color:#fff} /* ========================================================================= RÉALISATION EN GRAND — page négoce auto (ajouté le 09/09/2026) Le fichier 03-fensch-duo.jpg est un montage paysage (ordinateur + téléphone, 1200 × 900) : le cadre .ecran, pensé pour une capture verticale de 22 rem, le rendait minuscule. Ce modificateur libère la largeur de sa colonne ; rien d'autre n'est modifié. ========================================================================= */ .ecran--large{max-width:none;justify-self:stretch} .ecran--large img{background:#FFFCF7} /* ========================================================================= BARRE DE NAVIGATION SECONDAIRE — ajouté le 09/09/2026 Motif : `site-restaurant-moselle` et `site-negoce-auto-moselle` servaient depuis le 09/09 un