/* ============================================================ MASTERCLASS RESTAURANT / TRAITEUR — DevelopInk Socle du gabarit + thème restaurant-traiteur.css + mise en page signée. Ambiance : LA SALLE, LE SOIR. Le bandeau est une photo de salle chaude sur laquelle le texte est posé sur un panneau de VERRE DÉPOLI ; la page enchaîne nuit / crème / nuit / crème / nuit. Signature : LA CARTE IMPRIMÉE — panneau crème, double filet, fleuron losange, lignes séparées de pointillés. Elle sert deux fois, et c'est ce qui tient la page : « À table » en haut, « Contact » en bas. On ouvre sur une carte, on referme sur une carte. Deux polices, et deux seulement : Marcellus pour ce qui se lit une fois, Jost pour ce qui se lit en passant (voir plus bas). Quatre sections : le bandeau · À table · En images · Réserver. Pas de section « à propos », pas de leçon de service faite au restaurateur (retirée le 01.08.2026). Un défaut de mise en page métier se corrige ICI, jamais dans les copies de public//. ============================================================ */ /* ---------- LES DEUX VOIX, SERVIES PAR LE SITE ---------- Deux reproches du 01.08.2026, dans cet ordre : « ça marche pas d'utiliser à chaque fois la même police » « police en fonction de la cuisine, de la culture — changer PAR SITE, pas 47 fois dans un site » D'où la règle : DEUX voix à l'intérieur d'un site, et ces deux voix CHANGENT d'une culture à l'autre. voix de TITRE → ce qui se lit une fois : h1, h2, h3, le nom de la maison, le numéro de téléphone en grand. voix de LIBELLÉ → ce qui se lit en passant : menu, surtitres, libellés, boutons, petites capitales espacées. pile système → le corps de texte, qui ne se remarque nulle part. ⚠ Les deux familles s'appellent ici « PoliceTitre » et « PoliceLibelle », et les fichiers `police-titre.woff2` / `police-libelle.woff2`. Ce sont des NOMS DE POSTE, pas des noms de police : `monter-lot.mjs` copie dans ces deux fichiers la police que la variante demande (banque partagée : `gabarit-site/polices/`, catalogue dans `outils/police.mjs`) et remplace la pile de repli plus bas. Une trattoria reçoit Cormorant, une churrascaria Bitter — sans qu'une seule ligne de cette feuille bouge. Par défaut (aucune variante) : Marcellus + Jost, l'auberge romande. Toutes sous licence SIL Open Font 1.1, sous-ensemble latin, 10 à 27 Ko. Aucune requête vers un serveur de polices : ce ne sont pas des dépendances externes, ce sont deux fichiers du site. `swap` : le texte s'affiche tout de suite dans la pile de repli, la police prend le relais dès qu'elle est là — jamais de page blanche. */ @font-face{ font-family:'PoliceTitre'; font-style:normal; font-weight:400; font-display:swap; src:url('police-titre.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'PoliceLibelle'; font-style:normal; font-weight:500; font-display:swap; src:url('police-libelle.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ===== ZONE PERSO : COULEURS, POLICES, RYTHME ===== */ :root{ /* Thème restaurant-traiteur.css — terre cuite sur crème. CONTRASTES REMESURÉS le 01.08.2026 après le passage en duo de polices et la refonte du bas de page (plancher AA = 4,5:1). Le plus bas de toute la feuille est à 5,44 — aucun texte ne descend sous AA. Ce que la refonte a déplacé, et qui s'est AMÉLIORÉ à chaque fois, parce que le bloc contact est passé du fond-alt au panneau crème : numéro de téléphone 7,17 → 9,16 libellés Adresse/Horaires 5,46 → 6,98 valeurs des lignes 10,34 → 13,22 Bas de page (nuit) : nom 15,35 · lieu 10,11 · © 15,35 · crédit 10,11 Bande « En images » (nuit) : surtitre laiton 7,87 · titre crème 15,35 encre / fond 12,90 encre / fond-alt 10,34 encre / carte 13,22 encre-douce / fond 6,81 encre-douce / carte 6,98 encre-douce / fond-alt 5,46 blanc / marque (bouton) 9,30 blanc / marque-foncé 12,28 marque / fond 8,94 marque / carte 9,16 marque / fond-alt 7,17 Bandes de nuit : crème / nuit 15,35 crème-doux / nuit 10,11 laiton / nuit 7,87 laiton-clair / nuit 10,05 Panneau de VERRE du bandeau — mesuré dans le PIRE CAS, c'est-à-dire une photo entièrement blanche derrière le voile #22150f à 82 % : crème 8,79 · crème-doux 5,79 · laiton-clair 5,76 · blanc 10,18 Barre de navigation en verre — pire cas, photo NOIRE dessous (voile #fdfaf5 à 90 %) : encre 10,30 · encre-douce 5,44 · marque 7,14 */ --encre:#35251a; /* texte courant — foncé le 02.08 : plus de contraste avec le fond */ --encre-douce:#614c3c; /* texte secondaire — jamais plus clair que ça */ --fond:#fdfaf5; --fond-alt:#e7d7c4; /* sections alternées — creusé le 02.08 : la bande existe enfin */ --carte:#fffdf9; /* le panneau « carte du restaurant » */ --marque:#7a2f22; /* terre cuite : boutons, filets, numéro de téléphone */ --marque-clair:color-mix(in oklab, var(--marque) 10%, white); --marque-fonce:#5c231a; /* survol des boutons — mesuré, pas calculé */ --filet:#d3bdae; /* en dur depuis le 02.08 : une variante sombre doit pouvoir le reprendre */ --pointille:#dcc7bb; /* séparateurs de la carte (décor, pas du texte) */ --wa:#25d366; /* vert WhatsApp : texte FONCÉ dessus, jamais blanc */ /* Bandes de nuit : le bandeau, la bande « En images » et le pied. */ --nuit:#22150f; --creme:#f7ede0; /* texte sur nuit */ --creme-doux:#d5c0aa; /* texte secondaire sur nuit */ --laiton:#d7a44b; /* surtitres et filets sur nuit */ --laiton-clair:#e6bd72; /* accents sur le panneau de verre */ /* ---------- LES SURFACES — ce qui rend une CUISINE sombre ---------- 02.08.2026. Le responsable a demandé des fonds noirs, et pour le restaurant il a posé la condition lui-même : « mais resto en fonction du resto quoi ». C'est juste — une trattoria est une nappe blanche, une tasca est un azulejo blanc et bleu ; les passer au noir serait leur mentir. Mais un café, un libanais, un asiatique laqué, une churrascaria sont des salles SOMBRES, et le sont dans la vraie vie. La masterclass reste donc CLAIRE par défaut, et chaque variante décide — exactement comme elle décide déjà de son ourlet (--feston). Ces postes sont ce qui rend la bascule possible sans toucher au dessin : le liseré blanc du panneau, les ombres calées sur un brun clair, le halo de la section contact, le blanc des boutons. */ --liseret:rgba(255,255,255,.9); /* trait clair en haut du panneau */ --ombre-panneau:rgba(61,43,31,.6); --ombre-photo:rgba(61,43,31,.65); --halo-contact:color-mix(in srgb,var(--marque) 8%,transparent); --texte-bouton:#fff; /* Le RUBAN de démo. Il était peint avec --marque, et c'était juste tant que la marque était une brique foncée. Sur les palettes passées au noir le 02.08.2026, --marque a dû s'éclaircir pour rester lisible : le ruban est alors devenu une bande fluo en haut de page, plus voyante que le site lui-même. Il prend donc ses propres postes. Par défaut ils valent exactement ce qu'ils valaient — les métiers clairs ne bougent pas. */ --ruban-fond:var(--marque); --ruban-texte:var(--texte-bouton); /* ---------- LA BARRE DE NAVIGATION ---------- Consigne du 02.08.2026 : de meilleurs bandeaux, en transparence, foncés, qui contrastent avec le reste — dans l'esprit de celui de developink.ch. La barre du restaurant était un voile de --fond à 90 %, c'est-à-dire de la crème sur de la crème. Elle devient du VERRE FONCÉ construit sur --nuit, donc elle prend la couleur de la CUISINE : brun torréfié au café, laque verte à l'asiatique, bleu de tasca au portugais. Réglage identique à celui du tronc « bâtiment » — 85 %, mesuré dans les deux pires cas. */ --barre:color-mix(in srgb,var(--nuit) 85%,transparent); --barre-filet:color-mix(in srgb,var(--creme) 16%,transparent); --barre-texte:var(--creme); --barre-texte-doux:var(--creme-doux); --barre-accent:var(--laiton-clair); --police-texte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* La voix servie par le site d'abord, puis une pile de repli faite de polices déjà installées sur les machines courantes. La variante remplace CES DEUX LIGNES quand elle change de police : le repli doit rester du même genre que la police servie (une serif ne retombe jamais sur une sans, sinon la page change d'allure au chargement). Une police n'apparaît jamais dans son propre repli. */ --police-titre:'PoliceTitre',"Iowan Old Style","Palatino Linotype",Palatino, "Times New Roman",Georgia,serif; --police-libelle:'PoliceLibelle',"Avenir Next",Avenir,"Century Gothic","Segoe UI", system-ui,sans-serif; --rayon:8px; --rayon-bouton:2rem; /* pilule : un bouton n'est jamais un rectangle brut */ --largeur:1120px; --gouttiere:clamp(1rem,3vw,2rem); --hauteur-bandeau:76svh; } /* ===== FIN ZONE PERSO : COULEURS, POLICES, RYTHME ===== */ /* ---------- SOCLE : remise à zéro ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--police-texte); font-size:clamp(1rem,.95rem + .2vw,1.1rem); /* jamais sous 16px */ line-height:1.65; color:var(--encre); background:var(--fond); -webkit-font-smoothing:antialiased; } /* Pas d'overflow-x:hidden sur body, pas de 100vw : on travaille en width:100%. */ img,svg,video{max-width:100%;height:auto;display:block} figure{margin:0;max-width:100%} /* parade : une image cassée ne fait pas déborder la page */ h1,h2,h3{font-family:var(--police-titre);font-weight:400;line-height:1.12; margin:0 0 .6em;text-wrap:balance} h1{font-size:clamp(2.1rem,1.3rem + 3.4vw,3.9rem);letter-spacing:.005em} h2{font-size:clamp(1.8rem,1.2rem + 2.4vw,2.9rem);letter-spacing:.005em} h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem)} p{margin:0 0 1em} /* Largeur de lecture sur la PROSE seulement. Jamais sur `p` en général : le ruban et le pied sont des `p` pleine largeur. */ .hero__intro,.contact__phrase,.plat p{max-width:58ch} ul{margin:0;padding:0;list-style:none} a{color:inherit;text-decoration:none} main a:not(.bouton){text-decoration:underline;text-underline-offset:.15em} /* Cibles tactiles : un tel:/mailto: en cours de texte mesure 22px de haut sans ce padding (24px exigés, WCAG 2.5.8). */ main a[href^="tel:"]:not(.bouton),main a[href^="mailto:"]:not(.bouton){ display:inline-block;padding-block:.25rem} :focus-visible{outline:3px solid var(--marque);outline-offset:2px;border-radius:4px} .hero :focus-visible,.galerie :focus-visible,.pied :focus-visible{outline-color:var(--laiton)} .bande{width:100%;max-width:var(--largeur);margin-inline:auto;padding-inline:var(--gouttiere)} /* Lien d'évitement : caché VERS LE HAUT, pas vers la gauche (un left:-9999px est signalé comme débordement par le contrôle). */ .saut-contenu{position:absolute;top:-6rem;left:.5rem;z-index:50;background:var(--fond); color:var(--encre);padding:.6rem 1rem;border-radius:var(--rayon)} .saut-contenu:focus{top:.5rem} .ruban{margin:0;padding:.5rem var(--gouttiere);text-align:center;font-size:.85rem; background:var(--ruban-fond);color:var(--ruban-texte)} /* padding-block : sans lui ces liens en ligne mesurent 22px de haut. */ .ruban a,.pied a{display:inline-block;padding-block:.2rem;text-decoration:underline} /* ---------- SOCLE + MÉTIER : boutons ---------- Reproche du 01.08.2026 : « le bouton appeler pas beau, vraiment juste un rectangle avec des angles droits ». Réponse : pilule, capitales espacées dans la police d'affichage, liseré clair en haut (le relief), ombre portée chaude, et un léger soulèvement au survol. Pas de dégradé, pas de verre : c'est un bouton, pas un bijou. Toujours PLEIN, jamais de ghost transparent. Le libellé est en Jost : un bouton n'est pas un titre, il ne doit pas porter la même lettre que le h1 juste au-dessus de lui. */ .bouton{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; min-height:46px;padding:.8rem 1.6rem;border:0;border-radius:var(--rayon-bouton); font-family:var(--police-libelle);font-size:.95rem;font-weight:500; text-transform:uppercase;letter-spacing:.09em;text-align:center;cursor:pointer; transition:background-color .25s ease,box-shadow .25s ease,transform .25s ease; } .bouton--plein{background:var(--marque);color:var(--texte-bouton); /* 9,30 */ box-shadow:0 1px 0 color-mix(in srgb,var(--liseret) 24%,transparent) inset, 0 12px 26px -14px color-mix(in srgb,var(--marque) 70%,transparent)} .bouton--plein:hover,.bouton--plein:focus-visible{background:var(--marque-fonce); /* 12,28 */ transform:translateY(-2px); box-shadow:0 1px 0 color-mix(in srgb,var(--liseret) 28%,transparent) inset, 0 18px 34px -14px color-mix(in srgb,var(--marque) 80%,transparent)} .bouton--wa{background:var(--wa);color:#11221a} /* texte foncé : blanc sur #25d366 = 1,98:1 */ .bouton--wa:hover,.bouton--wa:focus-visible{background:color-mix(in oklab,var(--wa) 88%,black); transform:translateY(-2px)} .bouton--grand{min-height:54px;padding:.95rem 1.9rem;font-size:1rem} /* WhatsApp n'a de sens que sur un téléphone. */ .mobile-seulement{display:inline-flex} @media (min-width:48rem){.mobile-seulement{display:none}} /* ---------- SOCLE + MÉTIER : navigation (contrat #nav-toggle / #nav-links) ---------- La barre est en VERRE FONCÉ depuis le 02.08.2026 (voir --barre dans le :root). Avant, c'était un voile de --fond à 90 % : de la crème sur de la crème, une barre qui disparaissait dès qu'elle quittait la photo. Elle descend maintenant de --nuit, donc elle change avec la CUISINE sans qu'une ligne bouge ici. Le NOM garde Marcellus (c'est la signature de la maison) ; les entrées du menu passent en Jost — sinon la barre entière est écrite dans une seule lettre et le nom ne ressort plus de ses propres liens. */ .entete{position:sticky;top:0;z-index:30; background:var(--barre); border-bottom:1px solid var(--barre-filet); box-shadow:0 14px 34px -22px rgba(0,0,0,.8)} @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){ .entete{-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15)} } /* L'arête basse : un filet d'accent qui raccroche la barre à la couleur de la maison. Il est À L'INTÉRIEUR de la barre — il ne se pose sur aucune photo (consigne du 02.08.2026). */ .entete::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px; background:linear-gradient(90deg,var(--laiton) 0 30%, color-mix(in srgb,var(--laiton) 45%,transparent) 30% 56%,transparent 56% 100%); opacity:.85;pointer-events:none} .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem; flex-wrap:wrap;min-height:68px;padding-block:.5rem} .marque{display:flex;flex-direction:column;line-height:1.15} .marque__nom{font-family:var(--police-titre);font-size:1.2rem; text-transform:uppercase;letter-spacing:.07em;color:var(--barre-texte)} .marque__sous{font-family:var(--police-libelle);font-weight:500;font-size:.72rem; color:var(--barre-accent); /* mesuré au pire cas, photo claire */ text-transform:uppercase;letter-spacing:.18em;margin-top:.2rem} .entete :focus-visible{outline-color:var(--barre-accent)} #nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px; width:46px;height:46px;padding:0 11px;background:none;border:1px solid var(--barre-filet); border-radius:var(--rayon);cursor:pointer} .nav-toggle__trait{display:block;height:2px;background:var(--barre-accent);border-radius:2px} /* Repli sans JS : par défaut le menu est DÉPLIÉ. C'est la classe `js` posée dans le qui autorise à le replier. Un contenu n'est jamais masqué par du CSS que seul le JS peut défaire. */ #nav-links{display:flex;flex-direction:column;gap:.15rem;width:100%;padding-bottom:.6rem; border-top:1px solid var(--barre-filet);padding-top:.5rem;margin-top:.35rem} #nav-links a{display:flex;align-items:center;min-height:46px;padding:.5rem .25rem; font-family:var(--police-libelle);font-weight:500;font-size:.84rem; text-transform:uppercase;letter-spacing:.13em; color:var(--barre-texte-doux);transition:color .2s ease} #nav-links a:hover,#nav-links a:focus-visible{color:var(--barre-texte)} #nav-links a.bouton{justify-content:center;letter-spacing:.09em; color:var(--texte-bouton);margin-top:.4rem} .js #nav-links{display:none} .js #nav-links.is-open{display:flex} @media (min-width:62rem){ #nav-toggle{display:none} #nav-links,.js #nav-links{display:flex;flex-direction:row;align-items:center; gap:clamp(.9rem,2vw,2rem);width:auto;padding-bottom:0; border-top:0;padding-top:0;margin-top:0} #nav-links a{padding:.5rem .3rem} #nav-links a.bouton{margin-top:0;padding:.7rem 1.4rem;min-height:44px} /* Filet qui se déroule sous l'entrée survolée. En clair : sur du verre foncé, la terre cuite de --marque ne se voit pas. */ #nav-links li:not(:last-child) a{position:relative} #nav-links li:not(:last-child) a::after{content:"";position:absolute; left:.3rem;right:.3rem;bottom:.5rem;height:2px;background:var(--barre-accent); transform:scaleX(0);transform-origin:left;transition:transform .28s ease} #nav-links li:not(:last-child) a:hover::after, #nav-links li:not(:last-child) a:focus-visible::after{transform:scaleX(1)} } /* ---------- MÉTIER : en-têtes de section, fleuron ---------- Le fleuron losange entre deux filets : l'ornement des cartes imprimées. Géométrie pure — pas de dessin figuratif. */ .entete-section{margin-bottom:clamp(1.4rem,3vw,2rem)} .entete-section h2{margin:0 0 .75rem} .entete-section--centre{text-align:center} .entete-section--centre .fleuron{margin-inline:auto} /* Le surtitre est le libellé type : petites capitales très espacées. En Marcellus il ressemblait à une version réduite du h2 posé dessous ; en Jost c'est une autre voix, et le h2 redevient le seul titre. */ .sur{font-family:var(--police-libelle);font-weight:500;font-size:.74rem; text-transform:uppercase;letter-spacing:.24em;color:var(--marque);margin:0 0 .7rem} .fleuron{width:132px;height:10px;color:var(--marque)} .fleuron path{fill:none;stroke:currentColor;stroke-width:1} /* Spécificité : `.fleuron path` (0,1,1) l'emporterait sur `.fleuron__losange` seul (0,1,0) et le losange resterait vide. D'où les deux classes. */ .fleuron .fleuron__losange{fill:currentColor;stroke:none} /* ---------- MÉTIER : BANDEAU ---------- Photo pleine largeur en fond, voile dégradé, texte sur panneau de verre. */ .hero{position:relative;display:flex;align-items:flex-end; min-height:min(var(--hauteur-bandeau),42rem); padding-block:clamp(3rem,9vw,5rem) clamp(4.5rem,11vw,7rem); background:var(--nuit)} .hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center 55%} /* ⚠ Le voile et le panneau de verre étaient écrits en rgba() en dur — la couleur de --nuit recopiée à la main. Résultat mesuré le 01.08.2026 : sur la variante asiatique (palette encre et jade), tout le bandeau restait BRUN pendant que le reste du site était vert. Ils se calculent maintenant à partir de --nuit, donc ils suivent la variante. */ .hero__voile{position:absolute;inset:0; background:linear-gradient(180deg, color-mix(in srgb,var(--nuit) 55%,transparent) 0%, color-mix(in srgb,var(--nuit) 25%,transparent) 38%, color-mix(in srgb,var(--nuit) 72%,transparent) 100%)} .hero__bande{position:relative;z-index:2;width:100%} .hero__verre{ max-width:44rem;padding:clamp(1.5rem,4vw,2.6rem); border-radius:calc(var(--rayon) * 2.5); border:1px solid rgba(255,255,255,.16); background:color-mix(in srgb,var(--nuit) 82%,transparent); /* contrastes mesurés au pire cas */ box-shadow:0 26px 64px -28px rgba(0,0,0,.7); color:var(--creme); animation:verre-monte .65s cubic-bezier(.2,.75,.25,1) both; } @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){ .hero__verre{-webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15)} } @keyframes verre-monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .hero__etiquette{font-family:var(--police-libelle);font-weight:500;font-size:.76rem; text-transform:uppercase;letter-spacing:.26em; color:var(--laiton-clair);margin:0 0 .9rem} /* 5,76 au pire cas */ .hero__titre{color:var(--creme);margin:0 0 .9rem;line-height:1.08} /* 8,79 au pire cas */ .hero__accent{color:var(--laiton-clair);display:inline-block} .hero__intro{color:var(--creme-doux);font-size:1.08rem;margin:0} /* 5,79 au pire cas */ .hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem} /* ---------- MÉTIER : À TABLE — la carte ---------- Le panneau remonte par-dessus le bas du bandeau : la carte qu'on pose sur la table. La photo du plat descend, à droite : la composition est volontairement décalée, jamais deux colonnes alignées. */ .table-section{position:relative;z-index:2; margin-top:calc(clamp(2rem,5vw,4rem) * -1); padding-block:0 clamp(3rem,8vw,5.5rem)} .table__grille{display:grid;gap:clamp(1.6rem,4vw,3rem)} @media (min-width:62rem){ /* minmax(0,…) : une image cassée ne peut pas élargir sa colonne. */ .table__grille{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:start} .table__visuel{margin-top:clamp(4rem,9vw,7rem)} } .carte-menu{position:relative;background:var(--carte); border:1px solid var(--filet);border-radius:calc(var(--rayon) * 2.2); padding:clamp(1.7rem,4vw,3rem) clamp(1.2rem,3.5vw,2.6rem); box-shadow:0 1px 0 var(--liseret) inset,0 28px 64px -36px var(--ombre-panneau)} /* Le double filet de la carte imprimée — en `inset`, donc jamais de débordement. */ .carte-menu::before{content:"";position:absolute;inset:9px;pointer-events:none; border:1px solid var(--filet);border-radius:calc(var(--rayon) * 1.7)} .menu{display:grid} .plat{position:relative;padding:clamp(.95rem,2.2vw,1.2rem) 0 clamp(.95rem,2.2vw,1.2rem) 1.7rem; border-top:1px dotted var(--pointille)} .plat:first-child{border-top:0;padding-top:.3rem} /* Le losange du fleuron, repris en petit devant chaque ligne. */ .plat::before{content:"";position:absolute;left:.2rem;top:calc(clamp(.95rem,2.2vw,1.2rem) + .55em); width:7px;height:7px;background:var(--marque);opacity:.5; transform:rotate(45deg);transition:opacity .25s ease,transform .25s ease} .plat:first-child::before{top:calc(.3rem + .55em)} .plat:hover::before{opacity:1;transform:rotate(45deg) scale(1.4)} .plat h3{margin:0 0 .3rem;font-size:clamp(1.15rem,1rem + .6vw,1.45rem);color:var(--encre)} .plat p{margin:0;color:var(--encre-douce);font-size:.98rem} .js .plat.reveal{transition-delay:calc(var(--i,0) * 90ms)} /* Cadre photo : filet décalé de 10px — toujours moins que la gouttière minimale (16px), donc il ne peut pas dépasser du bord de l'écran. */ .cadre{position:relative} .cadre img{width:100%;border-radius:calc(var(--rayon) * 2.2);object-fit:cover; box-shadow:0 26px 52px -30px var(--ombre-photo)} /* ⚠ LE CADRE NE MORD PLUS SUR LA PHOTO — 02.08.2026. Il était posé en `inset:10px -10px -10px 10px` : 10 px À L'INTÉRIEUR de l'image en haut et à gauche, 10 px dehors en bas et à droite. Le cadre décalé que le responsable ne veut plus voir. Le tronc du bâtiment avait été corrigé le matin même ; le restaurant a sa PROPRE feuille, il n'en hérite pas — l'oubli n'a été vu qu'en repassant les douze métiers un par un. Le filet est maintenant entièrement à l'extérieur. */ .cadre::after{content:"";position:absolute;inset:-10px;pointer-events:none; border:1px solid var(--marque);opacity:.4;border-radius:calc(var(--rayon) * 2.2)} .cadre--gauche::after{inset:-10px} /* ---------- MÉTIER : EN IMAGES — la bande de photos ---------- Remplace la section « Trois manières de passer à table » (01.08.2026) : « ça m'étonnerait qu'il y ait un restaurant qui veuille ça sur son site ». On expliquait son métier au restaurateur ; on montre maintenant ce qu'il veut vraiment montrer, sa maison. Bande de nuit — l'alternance crème / nuit / crème / nuit est conservée. Deux photos de tailles DIFFÉRENTES alignées par le bas : la composition est décalée exprès, jamais deux vignettes jumelles. Le filet décalé est le motif .cadre des sections claires, simplement recoloré en laiton. */ /* ---------- MÉTIER : EN IMAGES — la galerie « vos photos » ---------- Ajoutée le 01.08.2026 : *« il faut garder des sections où on mettra leurs propres photos après, c'est pour se projeter et voir ce qui est possible. »* Trois emplacements sur fond clair, avant la bande sombre du savoir-faire — deux paysages empilés à gauche, la verticale à droite sur toute la hauteur. Une composition, pas trois vignettes alignées. ⚠ Les trois figures sont étirées et les images en `height:100%` : sans ça, la colonne de gauche et la colonne de droite ne finissent pas au même niveau et l'ensemble a l'air de tomber. */ .vitrine{padding-block:clamp(3rem,8vw,5rem);background:var(--fond)} .vitrine__grille{display:grid;gap:clamp(1rem,2.5vw,1.6rem); margin-top:clamp(1.8rem,4vw,2.6rem)} .vitrine__grille .cadre{display:flex} .vitrine__grille img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2} .vitrine__haute img{aspect-ratio:3/4} @media (min-width:52rem){ /* ⚠ Placement EXPLICITE. Sans `grid-column`, le placement automatique donnait le bon résultat par hasard — et un hasard change avec le navigateur. La verticale tient la colonne de gauche sur toute la hauteur, les deux paysages s'empilent à droite. La colonne de gauche est la plus étroite : c'est elle qui porte le format le plus haut, et à largeur égale elle écrasait tout le reste. */ .vitrine__grille{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} .vitrine__haute{grid-column:1;grid-row:1 / span 2} .vitrine__grille .cadre:not(.vitrine__haute){grid-column:2} .vitrine__grille img{aspect-ratio:auto} .vitrine__haute img{aspect-ratio:auto} } /* Le filet est entièrement dehors depuis le 02.08.2026, il n'y a donc plus de côté à inverser — on garde la règle pour que la colonne haute ait le même retrait que les autres. */ .vitrine__haute::after{inset:-10px} /* ---------- MÉTIER : L'ÉQUIPE — une photo, un titre ---------- Deuxième section « vos photos ». Rien d'autre qu'une image large : c'est elle qui donnera un visage à la maison quand le restaurateur enverra les siennes. Aucun paragraphe — on ne peut rien dire de vrai sur une équipe qu'on ne connaît pas. */ .equipe{padding-block:clamp(3rem,8vw,5rem);background:var(--fond-alt)} .equipe__photo{margin-top:clamp(1.8rem,4vw,2.6rem);max-width:56rem;margin-inline:auto} .equipe__photo img{width:100%;aspect-ratio:3/2;object-fit:cover} .galerie{color:var(--creme); padding-block:clamp(3rem,8vw,5.5rem); background:radial-gradient(115% 80% at 12% 0%,rgba(215,164,75,.15),transparent 62%), var(--nuit)} .galerie .sur{color:var(--laiton)} /* 7,87 */ .galerie .fleuron{color:var(--laiton)} .galerie h2{color:var(--creme)} /* 15,35 */ .galerie__bande{display:grid;gap:clamp(1.6rem,4vw,2.8rem)} /* Les rapports sont tenus par le CSS, pas par le fichier : le prospect peut déposer n'importe quelle photo, le cadre ne bouge pas (object-fit:cover). */ .galerie__large img{aspect-ratio:3/2} .galerie__haute img{aspect-ratio:4/5} @media (min-width:48rem){ /* minmax(0,…) : une image cassée ne peut pas élargir sa colonne. align-items:end — les deux photos partagent leur ligne de PIED, la haute dépasse vers le haut. C'est ce décalage qui fait la composition. */ .galerie__bande{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:end} .galerie__haute img{aspect-ratio:3/4} } /* Le filet de laiton, et la photo qui se soulève de son cadre au survol : l'écart entre la photo et son filet s'ouvre, le filet s'allume. */ .galerie .cadre::after{border-color:var(--laiton);opacity:.45; transition:opacity .35s ease} .galerie .cadre img{transition:transform .35s ease,box-shadow .35s ease} .galerie .cadre:hover::after{opacity:.85} .galerie .cadre:hover img{transform:translateY(-5px); box-shadow:0 34px 60px -28px color-mix(in srgb,var(--nuit) 88%,transparent)} .js .galerie .reveal{transition-delay:calc(var(--i,0) * 110ms)} /* ---------- MÉTIER : RÉSERVER — la carte de visite ---------- Reproche du 01.08.2026 : « la fin du site, c'est pas magnifique ». C'était une colonne de texte à plat sur un aplat, avec les coordonnées rangées en étiquettes de formulaire. C'est maintenant un PANNEAU, exactement celui de la carte du menu en haut de page (même fond crème, même double filet, même ombre) : la page s'ouvre sur une carte et se referme sur une carte. Tout est centré, le numéro tient le milieu — c'est le dernier écran avant qu'il décroche son téléphone, il n'y a rien d'autre à regarder. */ .contact{padding-block:clamp(3.5rem,9vw,6rem); background:radial-gradient(90% 70% at 78% 0%,var(--halo-contact),transparent 58%), var(--fond-alt)} .contact__grille{display:grid;gap:clamp(1.8rem,4vw,3rem)} /* En colonne, la photo devient une bande basse : à sa taille naturelle (4/3) elle faisait 540 px de haut sous une carte de 420 px et écrasait la fin de page — mesuré à 768 px le 01.08.2026. */ .contact__visuel img{aspect-ratio:16/9} @media (min-width:62rem){ /* stretch, et la photo prend TOUTE la hauteur de la carte : les deux blocs partagent leur ligne du haut ET celle du bas. Centrés verticalement, ils flottaient chacun de leur côté avec du vide au-dessus et au-dessous. */ /* 1,12 / 0,88 : la même répartition que la grille de « À table », et surtout assez de largeur pour que « 021 653 24 56 » tienne sur UNE ligne (à parts égales il se coupait après « 021 653 24 » — mesuré à 1280 px). */ .contact__grille{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:stretch} .contact__visuel img{height:100%;min-height:24rem;aspect-ratio:auto} } /* Le panneau : les mêmes règles que .carte-menu, écrites en liste de sélecteurs plutôt qu'en classe commune — la section « À table » n'est pas à retoucher, son HTML ne bouge pas. */ .contact__carte{position:relative;text-align:center; background:var(--carte); border:1px solid var(--filet);border-radius:calc(var(--rayon) * 2.2); padding:clamp(1.9rem,4.5vw,3.2rem) clamp(1.2rem,3.5vw,2.6rem); box-shadow:0 1px 0 var(--liseret) inset,0 28px 64px -36px var(--ombre-panneau)} .contact__carte::before{content:"";position:absolute;inset:9px;pointer-events:none; border:1px solid var(--filet);border-radius:calc(var(--rayon) * 1.7)} .contact__phrase{font-size:1.05rem;color:var(--encre); /* 13,22 sur --carte */ margin:0 auto .9rem;max-width:34ch} /* LE NUMÉRO — refait le 01.08.2026, deuxième reproche sur le bas de page. Il était posé dans la police de TITRE, souligné d'un trait de 2 px. Deux défauts que la capture a rendus évidents dès qu'une variante a changé de police : les garaldes (Cormorant, Spectral) dessinent des chiffres « à l'ancienne », de hauteurs inégales et à jambages descendants — le 4 et le 7 plongeaient DANS le soulignement. Et un long trait sous un numéro, ce n'est pas un bouton : rien ne disait qu'on pouvait cliquer. Maintenant : la police de LIBELLÉ (géométrique, chiffres tous de la même hauteur, tous de la même chasse) sur une plaque arrondie qui se remplit au survol. 56 px de haut au minimum — c'est une cible tactile, pas un lien de texte. */ /* LES DEUX TABLEAUX DU CONTACT — 01.08.2026, quatrième et dernier passage. Trois formes essayées pour le numéro de téléphone, trois refus : gros dans la police de titre et souligné, puis en plaque arrondie, puis en deux plaques étiquetées. Demande finale, mot pour mot : « un tableau classique clair avec toutes les infos, comme d'hab ». Alors c'est un tableau. Le même pour les coordonnées et pour les horaires : libellé à gauche, valeur à droite, un filet pointillé entre les lignes — celui de la carte du menu. Aucune forme inventée, rien à déchiffrer. Les horaires listent les SEPT jours, les jours non ouverts portant « Fermé » : « toutes les infos », et c'est aussi ce que le client vient chercher — il veut savoir si c'est ouvert LUNDI, pas lire un intervalle à décoder. */ .fiche{max-width:32rem;margin:clamp(1.4rem,3.5vw,1.9rem) auto 0;text-align:left; padding-top:clamp(1.2rem,3vw,1.6rem);border-top:1px dotted var(--pointille)} .fiche__titre{margin:0 0 .6rem;text-align:center; font-family:var(--police-libelle);font-weight:500;font-size:.7rem; text-transform:uppercase;letter-spacing:.18em;color:var(--encre-douce)} /* 6,98 */ .tableau{margin:0;display:grid} .tableau__ligne{display:flex;flex-wrap:wrap;align-items:baseline; justify-content:space-between;gap:.1rem .9rem; padding:clamp(.45rem,1.5vw,.62rem) .5rem;border-radius:7px} /* Le filet est porté par chaque ligne SAUF la première : côte à côte, deux lignes ne font qu'un trait, et une ligne retirée emporte le sien. */ .tableau__ligne + .tableau__ligne{border-top:1px dotted var(--pointille)} .tableau dt{color:var(--encre-douce);font-family:var(--police-libelle); font-weight:500;font-size:.9rem} /* 6,98 */ .tableau dd{margin:0;color:var(--encre);text-align:right; /* 13,22 */ font-variant-numeric:lining-nums tabular-nums} /* Le téléphone : même ligne que les autres, mais c'est LUI qu'on vient chercher — couleur de marque, un cran plus gros, et une cible tactile de 44 px (un lien de texte nu en mesure 22, WCAG 2.5.8 en exige 24). */ .tableau dd a[href^="tel:"]{display:inline-block;padding-block:.35rem; font-family:var(--police-libelle);font-weight:500; font-size:1.15rem;letter-spacing:.01em; color:var(--marque);text-decoration:none; /* 9,16 */ border-bottom:1px solid color-mix(in oklab,var(--marque) 35%,transparent); transition:color .25s ease,border-color .25s ease} .tableau dd a[href^="tel:"]:hover,.tableau dd a[href^="tel:"]:focus-visible{ color:var(--marque-fonce);border-bottom-color:var(--marque)} /* 12,08 */ /* Aujourd'hui : la ligne est posée sur un fond de marque très clair et le jour passe en couleur de marque. On ne dit PAS « ouvert » — un jour d'ouverture habituel n'est pas une promesse (vacances, jour férié). */ .tableau__ligne--aujourdhui{background:color-mix(in oklab,var(--marque) 7%,transparent)} .tableau__ligne--aujourdhui dt{color:var(--marque)} /* 9,16 */ .tableau--horaires .tableau__ligne--ferme dd{color:var(--encre-douce)} /* 6,98 */ .tableau__aujourdhui{margin-left:.5rem;padding:.12rem .45rem;border-radius:999px; background:var(--marque);color:var(--texte-bouton); /* 9,30 */ font-family:var(--police-libelle);font-weight:500;font-size:.6rem; text-transform:uppercase;letter-spacing:.12em;vertical-align:.08em} /* ---------- MÉTIER : PIED — la signature ---------- C'était une barre de 2,2 rem avec deux lignes poussées aux deux bouts : la page s'arrêtait, elle ne se terminait pas. C'est maintenant une signature centrée — fleuron de laiton, le nom en lettres gravées, le lieu dessous, un filet, et la mention légale en petit. Le nom n'est écrit qu'UNE fois. */ .pied{padding-block:clamp(2.8rem,7vw,4rem);background:var(--nuit);color:var(--creme)} .pied__interieur{text-align:center} .pied .fleuron{margin:0 auto clamp(1.1rem,3vw,1.5rem);color:var(--laiton)} .pied__nom{margin:0 0 .4rem;font-family:var(--police-titre); font-size:clamp(1.3rem,1.05rem + .9vw,1.75rem);line-height:1.2; text-transform:uppercase;letter-spacing:.14em;color:var(--creme)} /* 15,35 */ .pied__lieu{margin:0;font-family:var(--police-libelle);font-weight:500;font-size:.72rem; text-transform:uppercase;letter-spacing:.2em;color:var(--creme-doux)} /* 10,11 */ /* Une SEULE ligne. C'étaient deux paragraphes centrés côte à côte, séparés d'un grand vide : « © 2026 » d'un côté, le crédit de l'autre — ça se lisait comme une ligne cassée, pas comme une mention légale. */ .pied__bas{font-size:.82rem;text-align:center; margin-top:clamp(1.7rem,4vw,2.3rem);padding-top:clamp(1.1rem,2.5vw,1.5rem); border-top:1px solid rgba(215,164,75,.25)} .pied p{margin:0} .pied__credit{color:var(--creme-doux)} /* 10,11 */ /* ---------- SOCLE : apparition au défilement ---------- */ /* Sans la classe `js` (posée dans le ) les blocs sont visibles. Un contenu ne dépend jamais du JavaScript. */ .js .reveal{opacity:0;transform:translateY(16px); transition:opacity .55s ease,transform .55s ease} .js .reveal.est-vu{opacity:1;transform:none} /* ---------- MOUVEMENT RÉDUIT : on REMPLACE, on ne supprime pas ---------- Le déplacement devient un fondu d'opacité de même durée. Rien ne disparaît, rien ne s'affiche d'un coup sans transition : une machine réglée sur « réduire les animations » doit voir un site vivant. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js .reveal{transform:none;transition:opacity .55s ease} .js .reveal.est-vu{transform:none} .hero__verre{animation-name:paraitre} /* La photo ne se soulève plus de son cadre : c'est le filet de laiton qui s'allume à sa place. Le survol reste VISIBLE, il change juste de moyen. */ .galerie .cadre:hover img{transform:none} .bouton{transition:background-color .25s ease,box-shadow .25s ease} .bouton--plein:hover,.bouton--plein:focus-visible, .bouton--wa:hover,.bouton--wa:focus-visible{transform:none} .plat:hover::before{transform:rotate(45deg)} #nav-links li:not(:last-child) a::after{transform:scaleX(1);opacity:0; transition:opacity .25s ease} #nav-links li:not(:last-child) a:hover::after, #nav-links li:not(:last-child) a:focus-visible::after{opacity:1} } /* ============================================================ TROIS CORRECTIFS DE SÉRIE — ARGUS, 01.08.2026, verdict NE PAS ENVOYER. Ils ne se voyaient pas sur nos noms d'essai, courts. Sur 250 vrais prospects, ils se seraient déclenchés des dizaines de fois. ============================================================ */ /* 1. L'EN-TÊTE DÉCROCHE DÈS 22 CARACTÈRES DE NOM. `.nav` est en `flex-wrap:wrap` : un nom long poussait le bouton du menu à la ligne suivante, sous le nom. Mesuré : seuil entre 22 et 26 signes selon le métier, alors que « Entreprise de maçonnerie Duruz Sàrl » en fait 35. Le nom doit RÉTRÉCIR et se replier dans sa colonne ; le bouton, lui, ne bouge jamais. */ /* ⚠ `flex:1 1 0` — et surtout PAS `nowrap`. Deux essais avant de tomber juste : - `flex-wrap:wrap` + `flex:1 1 auto` : le nom garde une base égale à son contenu, donc il fait passer le bouton du menu à la ligne AVANT de rétrécir. C'était le défaut d'origine (seuil 22 signes). - `flex-wrap:nowrap` : le bouton reste en place, mais le menu déplié ne peut plus prendre sa propre ligne — la page débordait de 62 px SANS JavaScript, c'est-à-dire là où le menu est toujours ouvert. J'avais réparé un défaut en en créant un autre. La bonne écriture est `flex:1 1 0` : base ZÉRO, donc le nom ne force jamais de retour à la ligne, il grandit et rétrécit librement. Le menu, lui, garde `flex-basis:100%` et prend sa ligne quand il est déplié. */ .nav > .marque{min-width:0;flex:1 1 0} .nav > #nav-links{flex-basis:100%} /* ⚠ PAS de `hyphens:auto` : la césure automatique coupait la raison sociale en « MA-ÇONNERIE » à 320 px. On ne coupe pas le nom d'une entreprise — on réduit la lettre jusqu'à ce que ses mots tiennent. `break-word` ne reste que comme dernier recours, pour un mot vraiment plus large que la colonne. */ .marque__nom{overflow-wrap:break-word; font-size:clamp(.92rem,.78rem + .7vw,var(--taille-marque,1.15rem))} .nav > #nav-toggle{flex:none} /* 2. LE NUMÉRO D'APPEL SE COUPE EN DEUX SOUS 400 px. « APPELER LE 026 912 / 44 18 » : un numéro coupé au milieu ne se lit plus comme un numéro. On ne le laisse jamais se casser, et on réduit la lettre plutôt que la ligne. Le correctif du bandeau ne s'appliquait que sous 30 rem — or 320 px, c'est 20 rem, et rien ne couvrait la marche entre les deux. */ .bouton{white-space:nowrap} @media (max-width:26rem){ .bouton--grand{font-size:.82rem;letter-spacing:.05em;padding:.9rem 1rem} } @media (max-width:22rem){ .bouton--grand{font-size:.76rem;letter-spacing:.03em;padding:.85rem .7rem} } /* 3. LES LIGNES DU TABLEAU PARTAIENT EN ESCALIER. `flex-wrap:wrap` faisait passer la valeur SOUS son libellé dès que les deux ne tenaient plus — « Mercredi » avec un horaire de 24 signes, ou une adresse longue. Trois lignes sur neuf se décalaient, et le tableau perdait sa colonne. En grille, seule la VALEUR se replie, dans sa propre colonne : les libellés restent alignés quoi qu'il arrive. */ .tableau__ligne{display:grid;grid-template-columns:auto minmax(0,1fr); align-items:baseline;gap:0 .9rem} .tableau dd{min-width:0} /* ============================================================ SIGNATURE DU MÉTIER — LA CARTE ET LA NAPPE ------------------------------------------------------------ Écrite le 02.08.2026. Le restaurant était la dernière masterclass sans charpente propre : 671 lignes contre 1023 à 1298 pour les onze métiers du bâtiment. Ses six cuisines changeaient de couleur, de police et de photos — la mise en page, elle, était celle du tronc. Et c'est le plus gros métier du gisement de la série 4 : 410 des 1196 entreprises, un tiers du total. Deux objets, et deux seulement. Aucun ne touche une photo. LA CARTE Le signe le plus reconnaissable d'un restaurant n'est ni une fourchette ni une toque : c'est la LIGNE DE POINTS de la carte imprimée, celle qui court du nom du plat jusqu'au prix. On n'affiche aucun prix — on n'en invente pas — mais la conduite de points reste, et elle se termine sur le losange du fleuron. Personne d'autre que la restauration ne compose comme ça. LA NAPPE Les limites de section ne sont plus des traits : ce sont des OURLETS de nappe. Un feston régulier, comme le bord d'une nappe qui pend d'une table. Peint en dégradé radial répété : un seul élément, aucune image. ⚠ Aucune couleur en dur : tout dérive des variables, donc chaque cuisine garde la sienne. Rien n'est posé sur une image — consigne du responsable du 02.08.2026. ============================================================ */ /* ⚠ L'OURLET DOIT SUIVRE LA CULTURE — consigne du responsable, 02.08.2026 : « faut vraiment que ça puisse s'adapter à n'importe quel style, type culture de restaurant, fais gaffe à ça ». Un feston creux et serré, c'est la nappe d'une auberge européenne ; sur un restaurant asiatique ou une churrascaria, c'est faux. La forme de l'ourlet tient donc dans DEUX NOMBRES, que chaque cuisine règle dans son fichier de variante — ce sont des longueurs, elles passent par le même chemin que les couleurs : --feston la largeur d'une dent (grand = ourlet calme, petit = dentelle) --feston-h sa profondeur (0 ou presque = bord droit) Par défaut : large et peu profond, donc un bord fini plutôt qu'un festonnage. Les cuisines qui veulent la nappe de bistrot resserrent ; celles qui veulent un bord net aplatissent. */ :root{ --feston:44px; --feston-h:6px; --conduite:rgba(0,0,0,.28); } /* ---------- LA CARTE : la conduite de points ---------- */ /* Le titre du plat et la conduite partagent une ligne de base. La conduite prend toute la place restante, et se ferme sur un losange — le même que celui du fleuron, en plus petit. */ .plat h3{ display:grid;grid-template-columns:auto minmax(2rem,1fr) auto; align-items:baseline;column-gap:.6rem} .plat h3::after{ content:"";height:0;align-self:center; border-bottom:2px dotted color-mix(in oklab,var(--encre-douce) 55%,transparent)} /* Le losange de fin de ligne. */ .plat h3::before{ content:"";order:3;width:6px;height:6px;align-self:center; background:var(--marque);opacity:.75; transform:rotate(45deg)} /* Le repère en début de ligne du tronc devient inutile : la conduite suffit à dire « carte ». Deux marqueurs sur la même ligne, c'est un de trop. */ .plat{padding-left:0} .plat::before{display:none} /* ---------- LA NAPPE : l'ourlet des sections ---------- */ /* Le feston se dessine en creux : des demi-cercles de la couleur de la section SUIVANTE, mordus dans le bas de la section courante. */ .table-section::after, .vitrine::after, .equipe::after{ content:"";display:block;position:absolute;left:0;right:0;bottom:0; height:var(--feston-h);pointer-events:none; -webkit-mask-image:radial-gradient(var(--feston-h) at 50% 0,#000 99%,transparent 100%); mask-image:radial-gradient(var(--feston-h) at 50% 0,#000 99%,transparent 100%); -webkit-mask-size:var(--feston) 100%;mask-size:var(--feston) 100%; -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x} .table-section{position:relative} .vitrine,.equipe{position:relative} /* Chaque ourlet prend la couleur de ce qui vient après lui. */ .table-section::after{background:var(--fond-alt)} .vitrine::after{background:var(--nuit)} .equipe::after{background:var(--fond)} /* Le fil de l'ourlet : une piqûre fine juste au-dessus du feston. */ .table-section::before, .vitrine::before, .equipe::before{ content:"";position:absolute;left:0;right:0;bottom:var(--feston-h); height:1px;background:color-mix(in oklab,var(--encre) 14%,transparent); pointer-events:none} @media (max-width:48rem){ :root{--feston:18px;--feston-h:8px} }