/* Gabarit « Camion » (l'intention : camion.js). Aucune couleur hors des jetons. */
@font-face{font-family:"Rubik";font-weight:400 900;font-display:swap;src:url(/fonts/camion-1.woff2) format("woff2")}
/* Les grands titres : Caprasimo (OFL, la police de Soleil, un seul poids : jamais de gras simulé), Rubik pour ce qu'elle n'a pas. */
@font-face{font-family:"Caprasimo";font-weight:400;font-display:swap;src:url(/fonts/soleil-1.woff2) format("woff2")}

/* La carrosserie : la couleur de la maison en version vive (--vif), ses deux tons (--clair, --fonce : les vagues), le noir AA dessus et elle AA sur le noir. */
.r--g-camion,.r--g-camion.r--rouge{--vif:#FF5A3C;--clair:#FF7C60;--fonce:#EC4528}
.r--g-camion.r--or{--vif:#FFC72C;--clair:#FFD55E;--fonce:#F7B418}
.r--g-camion.r--olive{--vif:#A9BF4E;--clair:#BCD060;--fonce:#97AC3C}
.r--g-camion.r--ardoise{--vif:#7FA8CC;--clair:#9AC0DE;--fonce:#6C95BB}

/* Encre, blanc d'autocollant, crème (carte, contour du nom), papier (bord d'un tirage), béton au soleil, gris (texte second sur clair), pâle (sur noir), ruban adhésif, ombre.
   Le grain de papier (sept couches de points d'un demi-pixel, de périodes premières entre elles : aucune ne fait trame) et les vagues (deux ellipses tonales, en bas à gauche) : du CSS, jamais une image. */
.r--g-camion{--encre:#141414;--blanc:#FFF;--creme:#FFF6DF;--papier:#FBF7EC;--sol:#F3F0E8;--gris:#57524A;--pale:#C2BBAF;--scotch:#EADFBBCC;--ombre:#14141438;--bande:var(--vif);
--f:"Rubik",system-ui,sans-serif;--titre:"Caprasimo","Rubik",system-ui,sans-serif;--trait:3px solid var(--encre);--rond:1.25rem;
--grain:radial-gradient(circle at 23% 31%,#1414140E .5px,#0000 1px) 0 0/5px 7px,radial-gradient(circle at 71% 63%,#FFFFFF1A .5px,#0000 1px) 0 0/7px 11px,radial-gradient(circle at 41% 83%,#1414140C .5px,#0000 1px) 0 0/11px 13px,radial-gradient(circle at 87% 17%,#FFFFFF14 .5px,#0000 1px) 0 0/13px 17px,radial-gradient(circle at 53% 47%,#1414140A .6px,#0000 1.1px) 0 0/17px 19px,radial-gradient(circle at 12% 74%,#FFFFFF10 .5px,#0000 1px) 0 0/19px 23px,radial-gradient(circle at 66% 9%,#1414140A .5px,#0000 1px) 0 0/23px 29px;
--grain-n:radial-gradient(circle at 71% 63%,#FFFFFF0F .5px,#0000 1px) 0 0/7px 11px,radial-gradient(circle at 87% 17%,#FFFFFF0C .5px,#0000 1px) 0 0/13px 17px,radial-gradient(circle at 12% 74%,#FFFFFF0A .5px,#0000 1px) 0 0/19px 23px;
--vagues:radial-gradient(ellipse 150% 44% at 6% 114%,var(--fonce) 0 58%,#0000 58.4%),radial-gradient(ellipse 175% 68% at -12% 106%,var(--clair) 0 62%,#0000 62.4%);
--marge:1rem;--bord:max(var(--marge),50% - 38rem);--pas:4.5rem;--plein:max(0px,40svh - var(--pas) - 3rem);
margin:0;background:var(--grain),var(--sol);color:var(--encre);overflow-x:clip;overflow-wrap:break-word;
font:400 1.0625rem/1.6 var(--f);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (min-width:40rem){.r--g-camion{--marge:2rem;--pas:6rem}}
@media (min-width:64rem){.r--g-camion{--marge:clamp(2.5rem,4vw,4rem);--pas:clamp(6.5rem,8vw,8.5rem);font-size:1.125rem;
--vagues:radial-gradient(ellipse 62% 82% at 4% 120%,var(--fonce) 0 58%,#0000 58.4%),radial-gradient(ellipse 90% 98% at -8% 112%,var(--clair) 0 62%,#0000 62.4%)}}
:where(.r--g-camion) *{box-sizing:border-box}
:where(.r--g-camion) :is(p,ul,ol,h1,h2,h3,figure){margin:0}
:where(.r--g-camion) :is(ul,ol){padding:0;list-style:none}
:where(.r--g-camion) img{display:block;max-width:100%;height:auto}
:where(.r--g-camion) a{color:inherit;text-underline-offset:.22em}
.r--g-camion :focus-visible{outline:3px solid var(--encre);outline-offset:3px}
:is(.cm-bandeau,.cm-avis,.cm-tableau,.cm-pied,.cm-appel) :focus-visible{outline-color:var(--vif)}
.cm-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:where(.cm-tete__corps,.cm-texte,.cm-maison,.cm-avis,.cm-rdv__lignes,.cm-sem,.cm-tournee,.cm-etape__marches,.cm-boutique,.cm-adresse,.cm-heures,.cm-galerie,.cm-breves,.cm-contact__bloc,.cm-pied){grid-template-columns:minmax(0,1fr)}

/* Les traits au marqueur : des fuseaux effilés (clip-path: path(), des px) sur un aplat d'encre ; en gerbe d'éventail (.cm-trait, le logo) et en couronne (l'épingle). */
.cm-trait,.cm-logo::after{content:"";position:absolute;width:52px;height:52px;background:var(--encre);clip-path:path("M8.6 33.5C13.4 27.9 14.4 18.6 14.3 12.2C11 17.7 7.2 26.3 8.6 33.5ZM14.9 37.1C22.7 33.8 29.4 25.1 33.3 18.7C26.9 22.6 18.2 29.3 14.9 37.1ZM18.5 43.4C25.7 44.8 34.3 41 39.8 37.7C33.4 37.6 24.1 38.6 18.5 43.4Z");pointer-events:none}

/* Les étiquettes */
.cm-etiquette,.cm-sem__legende,.cm-bandeau,.cm-avis__date,.cm-pied__metier{font-weight:800;font-size:.8125rem;line-height:1.3;letter-spacing:.08em;text-transform:uppercase}

/* Boutons en pilule cernée, liens ; l'appel porte un combiné (le sien : un tracé de 24 px) */
.cm-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.cm-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:3.25rem;padding:.55rem 1.35rem;border:var(--trait);border-radius:99px;background:var(--blanc);
font:700 1.0625rem/1.15 var(--f);text-align:center;text-decoration:none}
.cm-btn:hover{background:var(--encre);color:var(--blanc)}
.cm-btn--plein{background:var(--encre);color:var(--blanc)}
.cm-btn--plein:hover{background:var(--blanc);color:var(--encre)}
.cm-btn--tel::before{content:"";flex:none;width:24px;height:24px;background:currentColor;clip-path:path("M4 3H8L9.6 7.6L7.4 9.2A12.5 12.5 0 0 0 14.8 16.6L16.4 14.4L21 16V20A1 1 0 0 1 20 21C10.6 21 3 13.4 3 4A1 1 0 0 1 4 3Z")}
.cm-btn--ext::after,.cm-lien--ext::after{content:"";flex:none;width:.8em;height:.6em;background:currentColor;clip-path:polygon(0 40%,55% 40%,55% 5%,100% 50%,55% 95%,55% 60%,0 60%);rotate:-45deg}
.cm-lien{display:inline-flex;align-items:center;gap:.45em;min-height:2.75rem;max-width:100%;font-weight:700;overflow-wrap:anywhere;text-decoration:underline 2px;text-underline-offset:.28em}
.cm-lien:hover{text-decoration-thickness:4px}

/* L'en-tête : le bandeau noir, la scène sur la carrosserie (grain, vagues). La plaque du rendez-vous déborde sa scène de --chev. */
.cm-tete{--pb:clamp(2.5rem,6vw,4rem);--chev:2.25rem;position:relative;z-index:1;background:var(--grain),var(--vagues),var(--vif);border-bottom:var(--trait)}
.cm-bandeau{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 0;min-height:3rem;padding:.35rem var(--bord);background:var(--grain-n),var(--encre);color:var(--blanc);letter-spacing:.16em}
/* Le métier, un petit filet blanc, puis la commune sur une pastille de la couleur de la maison */
.cm-bandeau__ville{position:relative;max-width:min(17rem,calc(100% - 8rem));margin-left:1.9rem;padding:.2rem .9rem;border-radius:99px;background:var(--vif);color:var(--encre);overflow-wrap:anywhere}
.cm-bandeau__ville::before{content:"";position:absolute;left:-.95rem;top:12%;height:76%;width:1px;background:var(--blanc)}
.cm-bandeau__nav{display:none;gap:0 1.75rem;letter-spacing:.14em}
.cm-bandeau__lien{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none}
.cm-bandeau__lien:hover{color:var(--vif)}
.cm-tete__corps{display:grid;padding:clamp(1.75rem,5vw,3rem) var(--bord) var(--pb)}
.cm-tete__texte{display:contents}
.cm-tete__titre{order:-2;container-type:inline-size}

/* Le logo dans son anneau : noir épais, liseré crème, trois traits d'énergie ; un logo carré (fond opaque) devient rond, un logo large ou haut garde ses proportions. */
.cm-logo{position:relative;display:grid;place-items:center;width:fit-content;max-width:100%;margin-bottom:1.5rem;padding:.6rem;background:var(--blanc);border:.3rem solid var(--encre);border-radius:1rem;box-shadow:0 0 0 .22rem var(--creme);rotate:-4deg;line-height:0}
.cm-logo img{width:auto;max-width:min(15rem,60vw);max-height:4.75rem;border-radius:.5rem;
filter:drop-shadow(1px 0 0 var(--encre)) drop-shadow(-1px 0 0 var(--encre)) drop-shadow(0 1px 0 var(--encre)) drop-shadow(0 -1px 0 var(--encre))}
.cm-logo::after{right:-2.4rem;top:-2.3rem;scale:.8;transform-origin:0 100%}
.cm-logo--carre,.cm-logo--inconnu{width:7rem;aspect-ratio:1;padding:0;border-radius:50%}
.cm-logo--carre img,.cm-logo--inconnu img{width:100%;height:100%;max-width:none;max-height:none;border-radius:50%;object-fit:cover;filter:none}
:is(.cm-logo--paysage,.cm-logo--large){padding-inline:1.25rem;border-radius:99px}

/* Le nom : Caprasimo noir, un épais contour crème comme découpé dans du vinyle, une légère ombre. */
.cm-nom{font-family:var(--titre);font-weight:400;line-height:.98;letter-spacing:-.005em;text-wrap:balance;-webkit-text-stroke:.17em var(--creme);paint-order:stroke fill;filter:drop-shadow(0 .045em .05em var(--ombre))}
.cm-nom--xxl{font-size:min(20.5cqi,8.25rem)}
.cm-nom--xl{font-size:min(15.8cqi,7rem)}
.cm-nom--l{font-size:min(12.8cqi,5.75rem)}
.cm-nom--m{font-size:min(9.9cqi,4.5rem)}
.cm-nom--s{font-size:min(7.6cqi,3.5rem)}
.cm-nom--xs{font-size:min(5.8cqi,2.85rem)}
.cm-tete--nu .cm-nom--l{font-size:min(14cqi,6.75rem)}
.cm-tete--nu .cm-nom--m{font-size:min(11.2cqi,5.25rem)}
.cm-nom--xxs{font-size:max(1.75rem,min(6.6cqi,3.1rem));overflow-wrap:anywhere}

/* La couverture en tirage : large bord blanc cassé, ombre portée, de travers, deux bouts de scotch sur des coins opposés, des traits aux deux autres. */
.cm-couv{order:-1;position:relative;margin:1.75rem .35rem .25rem;padding:.6rem .6rem 1.15rem;background:var(--papier);border-radius:.35rem;box-shadow:0 .1rem .25rem var(--ombre),0 1.1rem 1.75rem -.55rem var(--ombre);rotate:-1.2deg}
.cm-couv__img,.cm-illus img,.cm-ph img{width:100%;object-fit:cover;border-radius:.2rem;background:var(--blanc)}
.cm-couv__img{max-height:72svh}
:is(.cm-couv--haut,.cm-couv--inconnu) .cm-couv__img{aspect-ratio:4/5}
@media (max-width:63.99rem){.cm-couv--large .cm-couv__img{aspect-ratio:4/3}}
:is(.cm-couv,.cm-illus,.cm-ph)::before,:is(.cm-couv,.cm-illus)::after{content:"";position:absolute;z-index:1;width:5.25rem;height:1.55rem;background:var(--scotch);rotate:-38deg;pointer-events:none;
clip-path:polygon(0 0,5% 12%,0 25%,5% 38%,0 50%,5% 62%,0 75%,5% 88%,0 100%,100% 100%,95% 88%,100% 75%,95% 62%,100% 50%,95% 38%,100% 25%,95% 12%,100% 0)}
:is(.cm-couv,.cm-illus,.cm-ph)::before{top:-.35rem;left:-.9rem}
:is(.cm-couv,.cm-illus)::after{bottom:-.35rem;right:-.9rem}
.cm-trait{z-index:2}
.cm-trait--a{top:-2.1rem;right:-.6rem}
.cm-trait--b{bottom:-2.1rem;left:-.6rem;rotate:180deg}
.cm-accroche{max-width:32em;margin-top:1.75rem;font-weight:500;font-size:clamp(1.125rem,2vw,1.4rem);line-height:1.4;text-wrap:pretty}
.cm-tete .cm-actions{margin-top:1.5rem}
.cm-note{margin-top:1rem;font-weight:500}

/* La plaque du rendez-vous : un ruban noir incliné (« Aujourd'hui, dimanche 25 octobre »), une carte crème, l'épingle, la commune, les heures en chiffres énormes, un trait jaune à la main. */
.cm-rdv{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.4rem 1rem;width:min(100%,34rem);margin-top:2.75rem;padding:2.1rem 1.25rem 1rem 1.1rem;background:var(--creme);border:var(--trait);border-radius:var(--rond);box-shadow:0 .9rem 1.25rem -.7rem var(--ombre)}
.cm-rdv__quand{position:absolute;top:0;left:-.7rem;max-width:calc(100% - 1rem);padding:.4rem 1.6rem .4rem 1.4rem;background:var(--encre);color:var(--blanc);
font-weight:800;font-size:.8125rem;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;translate:0 -55%;rotate:-2deg;clip-path:polygon(0 0,100% 0,calc(100% - .6rem) 50%,100% 100%,0 100%,.6rem 50%)}
.cm-rdv__pin{position:relative;display:block;width:2.25rem;height:2.25rem;margin:.2rem .5rem .2rem .9rem;border:var(--trait);border-radius:50% 50% 50% 0;background:var(--vif);rotate:-45deg}
.cm-rdv__pin::before{content:"";position:absolute;inset:.4rem;border-radius:50%;background:var(--encre)}
.cm-rdv__pin::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-35px 0 0 -35px;background:var(--encre);rotate:45deg;
clip-path:path("M11.2 20C11 16.8 8.2 16.6 6 17C6.8 19.1 8.4 21.4 11.2 20ZM20 11.2C20.8 7.3 17.6 4.3 15 2.6C15.2 5.7 16.2 9.9 20 11.2ZM32 8C34.6 6.2 33.4 3.7 32 2C30.6 3.7 29.4 6.2 32 8ZM44 11.2C47.2 11 47.4 8.2 47 6C44.9 6.8 42.6 8.4 44 11.2ZM52.8 20C55.6 21.4 57.2 19.1 58 17C55.8 16.6 53 16.8 52.8 20Z")}
.cm-rdv__lignes{display:grid;gap:1rem}
.cm-rdv__ou{display:block;font-weight:800;font-size:1.5rem;line-height:1.15}
:is(.cm-rdv__h,.cm-marche__h){display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .3em;font-weight:800;font-size:1.375rem;line-height:1}
.cm-h{white-space:nowrap}
.cm-h__n{font-weight:900;font-size:clamp(3.75rem,13vw,5rem);letter-spacing:-.03em}
.cm-rdv .cm-h__n{font-size:clamp(3rem,10vw,3.75rem)}
.cm-rdv__h--mots,.cm-marche__h--mots{display:block;font-size:1.25rem;line-height:1.3}
.cm-rdv__suite{grid-column:2}
/* Sans photo, la plaque a son éclat de traits au coin */
.cm-tete--nu .cm-rdv::before{content:"";position:absolute;right:-.5rem;top:-2.4rem;width:52px;height:52px;background:var(--encre);pointer-events:none;clip-path:path("M8.6 33.5C13.4 27.9 14.4 18.6 14.3 12.2C11 17.7 7.2 26.3 8.6 33.5ZM14.9 37.1C22.7 33.8 29.4 25.1 33.3 18.7C26.9 22.6 18.2 29.3 14.9 37.1ZM18.5 43.4C25.7 44.8 34.3 41 39.8 37.7C33.4 37.6 24.1 38.6 18.5 43.4Z")}
@media (min-width:40rem){
.cm-tete--nu .cm-rdv::before{right:-1.5rem}
.cm-rdv{padding-right:6.25rem}
.cm-rdv__quand{font-size:.875rem;letter-spacing:.1em}
.cm-rdv::after{content:"";position:absolute;right:1.5rem;top:46%;width:4.5rem;height:1.9rem;background:var(--vif);rotate:-8deg;translate:0 -50%;
clip-path:polygon(0% 59.1%,4.5% 61.8%,9.1% 64.9%,13.6% 65.4%,18.2% 62.8%,22.7% 57.3%,27.3% 49.4%,31.8% 40.2%,36.4% 30.9%,40.9% 22.6%,45.5% 16.4%,50% 13.2%,54.5% 13.4%,59.1% 16.9%,63.6% 23.3%,68.2% 31.7%,72.7% 41.2%,77.3% 50.5%,81.8% 58.4%,86.4% 64.3%,90.9% 67.6%,95.5% 68.7%,100% 65.7%,100% 71.7%,95.5% 77.2%,90.9% 81.3%,86.4% 81.4%,81.8% 78.3%,77.3% 72.7%,72.7% 65.5%,68.2% 57.8%,63.6% 50.9%,59.1% 45.8%,54.5% 43.4%,50% 43.9%,45.5% 47.6%,40.9% 53.9%,36.4% 62%,31.8% 70.8%,27.3% 79.1%,22.7% 85.6%,18.2% 89.3%,13.6% 89.4%,9.1% 85.7%,4.5% 78.2%,0% 65.1%)}
}

/* Le plan de la semaine : sept pastilles */
.cm-sem{display:grid;gap:.6rem;margin-top:2rem}
.cm-sem__jours{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem;max-width:27rem}
.cm-sem__j{display:grid;place-items:center;aspect-ratio:1;border:2px dashed;border-radius:50%;font-weight:800;font-size:clamp(.75rem,3vw,.9375rem);text-transform:uppercase}
.cm-sem .cm-sem__j--oui{border:var(--trait);background:var(--encre);color:var(--vif)}
.cm-sem__j--auj{background:var(--blanc);box-shadow:0 0 0 3px var(--blanc),0 0 0 6px var(--encre);rotate:-10deg}
.cm-sem--marches{margin:0 0 2.75rem}

/* Les rubriques ; le titre en Caprasimo, noir sur une bande de couleur */
.cm-rub,.cm-contact{padding:var(--pas) var(--bord) 0}
.cm-titre{margin-bottom:clamp(1.5rem,3vw,2.5rem);font-family:var(--titre);font-weight:400;font-size:clamp(2.1rem,5.6vw,3.9rem);line-height:1.04;letter-spacing:-.005em;text-wrap:balance}
.cm-titre__t{padding:0 .1em;background:linear-gradient(transparent 58%,var(--bande) 0 90%,transparent 0);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cm-texte{display:grid;gap:1em;max-width:40em;text-wrap:pretty}
.cm-texte--grand{font-size:clamp(1.125rem,2vw,1.3125rem);line-height:1.5}
.cm-rub__corps > .cm-actions{margin-top:1.75rem}
.cm-rub--plein > .cm-rub__corps,.cm-avis.cm-rub--plein{min-height:var(--plein)}
.cm-er{font-size:.7em;letter-spacing:0;text-transform:none;vertical-align:super;line-height:0}

/* Un petit éclat de traits après le titre d’une rubrique (pas ceux des brèves) */
.cm-rub:not(.cm-rub--breve) > .cm-titre::after,.cm-contact > .cm-titre::after{content:"";display:inline-block;width:34px;height:34px;margin:-.6rem 0 0 .45rem;vertical-align:top;background:var(--encre);clip-path:path("M5.1 23.3C8.5 19.8 9 13.9 8.7 9.7C6.4 13.2 3.8 18.6 5.1 23.3ZM8.7 25.3C14 23.4 18.2 17.6 20.7 13.3C16.4 15.8 10.6 20 8.7 25.3ZM10.7 28.9C15.4 30.2 20.8 27.6 24.3 25.3C20.1 25 14.2 25.5 10.7 28.9Z")}

/* Les illustrations : un petit tirage scotché et penché, jamais un second en-tête */
.cm-illus{position:relative;margin:0 .35rem 2rem;padding:.5rem .5rem .85rem;background:var(--papier);border-radius:.3rem;box-shadow:0 .1rem .2rem var(--ombre),0 .8rem 1.25rem -.5rem var(--ombre);rotate:-1.2deg}
.cm-rub--gauche .cm-illus{rotate:1.2deg}
.cm-rub--bas .cm-illus{margin-block:2.25rem 0}
.cm-rub--gauche .cm-illus::before{left:auto;right:-.9rem;rotate:38deg}
.cm-rub--gauche .cm-illus::after{right:auto;left:-.9rem;rotate:38deg}
.cm-illus img{aspect-ratio:3/2;max-height:calc(45svh - 1.5rem)}

/* Le message du moment : un panneau noir, la pastille « ! » */
.cm-avis{position:relative;display:grid;gap:.75rem;margin:var(--pas) var(--bord) 0;padding:clamp(1.75rem,4vw,2.75rem) clamp(1.25rem,4vw,2.75rem);background:var(--grain-n),var(--encre);color:var(--blanc);border-radius:var(--rond)}
.cm-avis::after{content:"!" / "";position:absolute;top:-1.1rem;right:1.25rem;display:grid;place-items:center;width:2.75rem;height:2.75rem;border:var(--trait);border-radius:50%;background:var(--vif);color:var(--encre);font-weight:900;font-size:1.5rem;rotate:12deg}
.cm-avis__titre{padding-right:2.5rem;font-weight:900;font-size:clamp(1.5rem,3vw,2.125rem);line-height:1.1;color:var(--vif)}
.cm-avis__texte{font-size:clamp(1.125rem,2vw,1.375rem);line-height:1.45}
.cm-avis__date{color:var(--pale)}

/* Le plan de tournée : une carte par jour, le jour sur son étiquette */
.cm-tournee{display:grid;gap:2.5rem 1.5rem;align-items:start;padding-top:.75rem}
.cm-etape{position:relative;padding:2.1rem 1.25rem 1.25rem;background:var(--blanc);border:var(--trait);border-radius:var(--rond)}
.cm-etape--auj{background:var(--vif)}
.cm-etape__jour{position:absolute;top:0;left:.9rem;padding:.2rem .75rem;border-radius:.45rem;background:var(--encre);color:var(--vif);font-weight:900;font-size:1.25rem;line-height:1.2;letter-spacing:.03em;text-transform:uppercase;translate:0 -50%;rotate:-3deg}
/* « Aujourd’hui » : un autocollant à cheval sur le coin de la carte */
.cm-auj{position:absolute;top:0;width:fit-content;right:-.6rem;padding:.3rem .7rem;border:var(--trait);border-radius:99px;background:var(--blanc);font-weight:800;font-size:.75rem;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;translate:0 -60%;rotate:8deg}
.cm-etape__marches{display:grid;gap:1.25rem}
.cm-marche + .cm-marche{padding-top:1.25rem;border-top:2px dashed}
.cm-marche__commune{font-weight:800;font-size:clamp(1.375rem,3vw,1.75rem);line-height:1.15}
.cm-marche__heures{margin-top:.35rem}
.cm-marche .cm-h__n{font-size:3rem}
.cm-marche__lieu{margin-top:.35rem;line-height:1.45}

/* La boutique */
.cm-boutique{display:grid;gap:2rem clamp(2rem,4vw,3.5rem);align-items:start}
.cm-carton{padding:1.25rem;background:var(--blanc);border:var(--trait);border-radius:var(--rond)}
.cm-adresse,.cm-heures{display:grid;gap:.6rem;align-content:start}
.cm-adresse__ligne{font-weight:800;font-size:clamp(1.375rem,3vw,1.75rem);line-height:1.2}
.cm-horaire{display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding:.6rem .9rem;border-bottom:2px dashed}
.cm-horaire__jour{font-weight:700}
.cm-horaire__h{margin-left:auto;font-weight:800;text-align:right}
.cm-horaire--ferme{color:var(--gris)}
.cm-horaire--auj{border:var(--trait);border-radius:99px;background:var(--vif);color:var(--encre)}
.cm-horaire--auj.cm-horaire--ferme{background:var(--blanc)}

/* La carte : le tableau noir du camion, les prix en pastilles */
.cm-tableau{padding:clamp(1.75rem,4vw,3rem) clamp(1.25rem,4vw,3rem);background:var(--grain-n),var(--encre);color:var(--blanc);border-radius:1.5rem}
.cm-groupe{padding-bottom:2.25rem}
.cm-groupe:last-child{padding-bottom:0}
.cm-groupe__titre{break-after:avoid;margin-bottom:.6rem;line-height:1}
.cm-groupe__titre span{display:inline-block;padding:.3rem .75rem;border-radius:.45rem;background:var(--vif);color:var(--encre);font-weight:900;font-size:clamp(1.125rem,2.5vw,1.375rem);line-height:1.2;letter-spacing:.03em;text-transform:uppercase;rotate:-2deg}
.cm-plat{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.2rem 1rem;padding-block:.9rem;border-bottom:2px dashed var(--gris)}
.cm-plat:last-child{border-bottom:0;padding-bottom:0}
.cm-plat__nom{font-weight:700;font-size:1.125rem;line-height:1.3}
.cm-plat__prix{grid-column:2;grid-row:1/span 3}
.cm-prix{display:block;padding:.3rem .7rem;border-radius:.9rem;background:var(--vif);color:var(--encre);font-weight:900;font-size:1.125rem;line-height:1.15;text-align:center;white-space:nowrap;rotate:-3deg}
.cm-plat:nth-child(even) .cm-prix{rotate:2deg}
.cm-prix__u{display:block;font-weight:700;font-size:.75rem}
.cm-prix.cm-prix--mots{max-width:8.5em;white-space:normal;background:none;color:var(--blanc);border:2px solid var(--vif);font-weight:700;font-size:.9375rem}
:is(.cm-plat__desc,.cm-plat__allergenes){grid-column:1;color:var(--pale);line-height:1.45}
.cm-plat__allergenes{font-size:.9375rem}

/* Qui nous sommes */
.cm-maison{display:grid;gap:1.25rem;max-width:44rem}
.cm-chapo{font-weight:500;font-size:clamp(1.25rem,2.4vw,1.625rem);line-height:1.42}
.cm-chapo--long{font-size:clamp(1.125rem,1.8vw,1.3125rem)}

/* Les photos : des tirages penchés, un bout de scotch chacun */
.cm-galerie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem .9rem}
.cm-ph{position:relative;padding:.45rem .45rem .75rem;background:var(--papier);border-radius:.3rem;box-shadow:0 .1rem .2rem var(--ombre),0 .8rem 1.25rem -.5rem var(--ombre);rotate:-1.5deg}
.cm-ph:nth-child(even){rotate:1.5deg}
.cm-ph img{aspect-ratio:4/5}
.cm-galerie--impaire .cm-ph:last-child{grid-column:1/-1}
.cm-galerie--impaire .cm-ph:last-child img{aspect-ratio:16/9}
.cm-rub--ecart{padding-top:max(var(--pas),40svh - 3rem)}

/* Le traiteur : la plaque de couleur */
.cm-rub.cm-rub--plaque{--bande:var(--blanc);margin:var(--pas) var(--bord) 0;padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,4vw,3.5rem);background:var(--grain),var(--vif);border:var(--trait);border-radius:1.5rem}

/* Les brèves, sur des cartes blanches */
.cm-breves{display:grid;gap:1.5rem;padding:var(--pas) var(--bord) 0}
.cm-breves > .cm-rub{padding:clamp(1.5rem,3vw,2.25rem);background:var(--blanc);border:var(--trait);border-radius:var(--rond)}
.cm-rub--breve .cm-titre{font-size:clamp(1.75rem,3vw,2.25rem);margin-bottom:1.25rem}

/* Le contact, sur la carrosserie (grain, vagues) : le numéro en très grands chiffres */
.cm-contact{--bande:var(--blanc);margin-top:var(--pas);padding-bottom:var(--pas);background:var(--grain),var(--vagues),var(--vif);border-top:var(--trait)}
.cm-contact__tel{container-type:inline-size;margin-bottom:1.75rem}
.cm-contact__num{font-weight:900;font-size:min(13cqi,9rem);line-height:.95;letter-spacing:-.03em;white-space:nowrap;text-decoration:none}
.cm-contact__num:hover{text-decoration:underline .08em}
.cm-contact__tel--long .cm-contact__num{font-size:min(9cqi,5.5rem);white-space:normal;overflow-wrap:anywhere}
.cm-contact__tel--vide{font-weight:900;font-size:min(11cqi,5rem);line-height:1}
.cm-contact .cm-actions{margin-bottom:2.5rem}
.cm-contact__infos{display:grid;gap:1.75rem 2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.cm-contact__bloc{display:grid;gap:.5rem;align-content:start}
.cm-services{display:flex;flex-wrap:wrap;gap:.5rem}
.cm-services li{padding:.25rem .8rem;border:var(--trait);border-radius:99px;background:var(--blanc);font-weight:700;font-size:.9375rem}
.cm-reseaux{display:flex;flex-wrap:wrap;gap:0 1.5rem}

/* Le pied, sur le noir */
.cm-pied{display:grid;gap:.6rem;padding:clamp(2.5rem,6vw,4rem) var(--bord) 2.5rem;background:var(--grain-n),var(--encre);color:var(--pale);font-size:.9375rem;line-height:1.5}
.cm-pied__nom{font-family:var(--titre);font-weight:400;font-size:clamp(1.75rem,4vw,2.75rem);line-height:1.05;color:var(--vif);overflow-wrap:anywhere}
.cm-pied__metier{color:var(--blanc)}
.cm-pied a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--blanc)}
.cm-pied--appel{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}

/* La barre d'appel (la première case pleine) ; l'en-tête et le contact n'en répètent pas l'appel */
.cm-appel{position:fixed;inset:auto 0 0;z-index:10;display:flex;gap:.5rem;padding:.5rem var(--marge) calc(.5rem + env(safe-area-inset-bottom));background:var(--encre);border-top:3px solid var(--vif)}
.cm-appel a{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 .4em;min-width:0;min-height:3.25rem;padding:.3rem 1.1rem;border-radius:99px;font-weight:800;font-size:1.0625rem;line-height:1.1;text-decoration:none}
.cm-appel>:first-child{flex:1;background:var(--vif);color:var(--encre)}
.cm-appel>a+a{flex:none;border:2px solid var(--blanc);color:var(--blanc)}
/* Le « Commander » de la barre n'y paraît qu'à son heure (parcours) : sans lui, l'appel retrouve la barre entière, pleine, et son numéro. */
.r--g-camion .cm-appel__cmd.cc-masque~.cm-appel__tel{flex:1;border:0;background:var(--vif);color:var(--encre)}
.r--g-camion .cm-appel__cmd:not(.cc-masque)~.cm-appel__tel .cm-appel__num{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media screen and (max-width:63.99rem){:root:has(.cm-appel){scroll-padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
:root:has(.cm-appel) :is(.cm-tete,.cm-contact) :is(.cm-btn--plein:not(.cm-btn--cmd),.cm-btn--appel,.cm-actions:has(> .cm-btn--plein:only-child)){display:none}}

/* La plaque déborde la scène : elle passe devant la rubrique qui suit (qui a toujours --pas d'espace en haut) */
.cm-tete__jour{position:relative;z-index:2;margin-bottom:calc(-1 * (var(--pb) + var(--chev)))}

/* Tablette */
@media (min-width:40rem){
.cm-btn{min-width:12rem}
.cm-bandeau__nav{display:flex;margin-left:auto}
.cm-tournee{grid-template-columns:repeat(auto-fill,minmax(max(17rem,30%),1fr))}
.cm-etape:nth-child(odd){rotate:-.6deg}
.cm-etape:nth-child(even){rotate:.7deg}
.cm-boutique{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.cm-breves--2,.cm-breves--3{grid-template-columns:repeat(2,minmax(0,1fr))}
.cm-galerie{display:flex;flex-wrap:wrap;gap:1.75rem}
.cm-ph{flex:0 1 clamp(14rem,28vw,22rem)}
.cm-galerie--impaire .cm-ph:last-child img{aspect-ratio:4/5}
}

/* Dès la tablette, à l'écran : l'illustration à droite du titre et du début du contenu (le plan de la semaine,
   pas la tournée ; ni le tableau, sous elle, plus basse), son haut au haut du titre ;
   près de la galerie, un dernier rang garde l'écart sous elle (--plein). En bas, elle suit le texte, sur le même tiers (à côté de lui à l'ordinateur). */
@media screen and (min-width:40rem){
.cm-rub--illus:not(.cm-rub--bas){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,36%);column-gap:clamp(2rem,4vw,3rem);align-items:start}
.cm-rub__tete{display:contents}
.cm-rub__tete .cm-illus{grid-area:1/2/3;margin:.35rem .35rem 2.25rem}
.cm-rub--illus:not(.cm-rub--bas) .cm-rub__corps,.cm-rub--marches .cm-tournee{grid-area:2/1/4}
.cm-rub--marches:not(.cm-rub--bas) .cm-rub__corps{display:contents}
.cm-rub--carte:not(.cm-rub--bas) .cm-rub__corps,.cm-sem--marches + .cm-tournee{grid-area:3/1/4/3}
.cm-rub--carte .cm-rub__tete img{aspect-ratio:2}
.cm-rub--plein:not(.cm-rub--bas){grid-template-rows:auto auto minmax(var(--plein),auto)}
.cm-rub--bas .cm-illus{width:36%;margin-left:auto}
.cm-rub--bas.cm-rub--gauche .cm-illus{margin-left:.35rem}
}

/* Ordinateur */
@media (min-width:64rem){
.cm-appel{display:none}
.cm-pied--appel{padding-bottom:2.5rem}
.cm-tete__corps{column-gap:clamp(3rem,5vw,5.5rem);align-items:start;padding-top:2.5rem}
.cm-tete__texte{display:flex;flex-direction:column}
.cm-tete--cote .cm-tete__corps{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr}
.cm-tete--paysage .cm-tete__corps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cm-couv{order:0;padding:clamp(.7rem,1.2vw,1rem) clamp(.7rem,1.2vw,1rem) clamp(1.3rem,2vw,1.75rem)}
.cm-tete--cote .cm-couv{grid-column:2;grid-row:1/span 2;align-self:center;margin:.5rem 0 0;rotate:2deg}
.cm-tete--cote .cm-couv__img{max-height:min(44rem,78svh)}
.cm-tete__jour{grid-column:1;align-self:end}
:is(.cm-tete--plein,.cm-tete--nu) .cm-tete__corps{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
:is(.cm-tete--plein,.cm-tete--nu) .cm-tete__jour{grid-column:2;grid-row:1;align-self:start}
:is(.cm-tete--plein,.cm-tete--nu) .cm-tete__jour > :first-child{margin-top:.5rem}
.cm-tete--plein .cm-tete__jour{margin-bottom:0}
.cm-tete--plein .cm-couv{grid-column:1/-1;margin:3rem 0 0;rotate:-.8deg}
.cm-tete--plein .cm-couv__img{max-height:70svh}
.cm-rub--illus:not(.cm-rub--bas){grid-template-columns:minmax(0,1fr) minmax(0,30%)}
/* En bas : à côté du texte, au pied de sa colonne, assez bas pour s'écarter de l'image d'avant (40 % d'écran). */
.cm-rub--bas{display:grid;grid-template:auto 1fr/minmax(0,1fr) minmax(0,30%);column-gap:clamp(2rem,4vw,3rem)}
.cm-rub--bas>.cm-rub__corps{grid-area:2/1}
.cm-rub--bas .cm-illus{grid-area:1/2/3;align-self:end;width:auto;margin:max(2.25rem,40svh + 1rem - var(--pas)) .35rem 0}
.cm-tableau--colonnes{columns:18rem 2;column-gap:clamp(3rem,6vw,5rem)}
.cm-tableau--colonnes .cm-plat,.cm-groupe--entier{break-inside:avoid}
.cm-tableau--court{max-width:46rem}
.cm-breves--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cm-maison{max-width:48rem}
.cm-couv{rotate:2deg}
.cm-trait--a{top:-2.3rem;right:-1rem;scale:1.1;transform-origin:0 100%}
.cm-trait--b{bottom:-2.3rem;left:-1.2rem;scale:1.1;transform-origin:100% 0}
}

/* L'impression : noir sur blanc, ni aplats ni barre ; chaque photo tenue avec sa rubrique. */
@media print{
.r--g-camion.r--g-camion{--vif:#000;--sol:#FFF;--pale:#333;--gris:#333;--plein:0px;font-size:11pt;background:var(--sol)}
.cm-tete__corps{display:flex;flex-direction:column}
.cm-rub--ecart{padding-top:var(--pas)}
.r--g-camion *{rotate:none!important}
.cm-appel,.cm-bandeau__nav,.cm-sem,.cm-rdv__suite,.cm-trait,.cm-rdv__pin,.cm-rdv::after,.cm-logo::after,:is(.cm-couv,.cm-illus,.cm-ph)::before,:is(.cm-couv,.cm-illus)::after,.cm-avis::after{display:none}
.r--g-camion :is(.cm-tete,.cm-bandeau,.cm-bandeau__ville,.cm-avis,.cm-tableau,.cm-rub--plaque,.cm-contact,.cm-pied,.cm-etape,.cm-etape__jour,.cm-rdv,.cm-rdv__quand,.cm-prix,.cm-horaire--auj,.cm-btn,.cm-titre__t,.cm-groupe__titre span,.cm-couv,.cm-illus,.cm-ph){background:none;color:var(--encre);box-shadow:none}
:is(.cm-rdv__quand,.cm-etape__jour,.cm-auj){position:static;translate:none}
.cm-rdv__quand{clip-path:none}
.cm-rdv__quand,.cm-etape__jour{padding:0}
.cm-pied__metier,.cm-pied a,.cm-bandeau__ville{color:var(--encre)}
:is(.cm-avis,.cm-tableau){border:var(--trait)}
.cm-nom{-webkit-text-stroke:0;filter:none;font-size:2.5rem!important}
.cm-contact__num{font-size:2.5rem}
.r--g-camion img{max-height:8cm;width:auto!important}
.cm-logo img{max-height:3cm}
.cm-tete__jour{margin-bottom:0}
:is(.cm-couv,.cm-ph,.cm-etape,.cm-plat,.cm-contact__bloc,.cm-rdv){break-inside:avoid}
.cm-illus{break-inside:avoid;break-before:avoid;break-after:avoid}
.cm-titre{break-inside:avoid;break-after:avoid}
}

/* LE MOUVEMENT : un autocollant qu'on plaque ; tout est visible sans lui. */
@media screen and (prefers-reduced-motion:no-preference){
.cm-btn{transition:background-color .2s,color .2s,rotate .2s}
.cm-btn:hover{rotate:-2deg}
.cm-nom{animation:cm-monte .7s cubic-bezier(.2,.8,.2,1) both}
:is(.cm-couv,.cm-logo){animation:cm-plaque .55s cubic-bezier(.3,1.5,.5,1) .2s both}
.cm-tete :is(.cm-accroche,.cm-actions,.cm-tete__jour){animation:cm-monte .7s cubic-bezier(.2,.8,.2,1) .35s both}
.cm-trait{animation:cm-trace .35s ease-out .7s both}
@supports (animation-timeline:view()){
:is(.cm-titre,.cm-etape,.cm-carton,.cm-heures,.cm-groupe__titre,.cm-plat,.cm-avis,.cm-breves > .cm-rub,.cm-contact__tel,.cm-maison > *){animation:cm-monte linear both;animation-timeline:view(block 0 5rem);animation-range:entry 0 entry 6rem}
:is(.cm-illus,.cm-ph){animation:cm-plaque linear both;animation-timeline:view();animation-range:entry 0 cover 25%}
}
}
@keyframes cm-monte{from{opacity:0;translate:0 1.5rem}}
@keyframes cm-plaque{from{opacity:0;scale:.85;rotate:-6deg}}
@keyframes cm-trace{from{opacity:0;scale:.4}}

/* L'aperçu */
:root:has(> body.r--apercu){scrollbar-width:none}
:root:has(> body.r--apercu)::-webkit-scrollbar{display:none}

/* Le click & collect (commande-site.css) : le « + » sur le tableau noir de la carte prend la couleur de la maison, pour se voir. */
.r--g-camion .cm-tableau .cc-pas__plus{background:var(--vif);color:var(--encre)}

/* CADRAGE DES PHOTOS : data-cx et data-cy, le point de la photo que le cadre garde visible (outils-dev/cadrage-css.mjs) */
img[data-cx],img[data-cy]{object-position:var(--cx,50%) var(--cy,50%)!important}img[data-cx="0"]{--cx:0%}img[data-cx="5"]{--cx:5%}img[data-cx="10"]{--cx:10%}img[data-cx="15"]{--cx:15%}img[data-cx="20"]{--cx:20%}img[data-cx="25"]{--cx:25%}img[data-cx="30"]{--cx:30%}img[data-cx="35"]{--cx:35%}img[data-cx="40"]{--cx:40%}img[data-cx="45"]{--cx:45%}img[data-cx="50"]{--cx:50%}img[data-cx="55"]{--cx:55%}img[data-cx="60"]{--cx:60%}img[data-cx="65"]{--cx:65%}img[data-cx="70"]{--cx:70%}img[data-cx="75"]{--cx:75%}img[data-cx="80"]{--cx:80%}img[data-cx="85"]{--cx:85%}img[data-cx="90"]{--cx:90%}img[data-cx="95"]{--cx:95%}img[data-cx="100"]{--cx:100%}img[data-cy="0"]{--cy:0%}img[data-cy="5"]{--cy:5%}img[data-cy="10"]{--cy:10%}img[data-cy="15"]{--cy:15%}img[data-cy="20"]{--cy:20%}img[data-cy="25"]{--cy:25%}img[data-cy="30"]{--cy:30%}img[data-cy="35"]{--cy:35%}img[data-cy="40"]{--cy:40%}img[data-cy="45"]{--cy:45%}img[data-cy="50"]{--cy:50%}img[data-cy="55"]{--cy:55%}img[data-cy="60"]{--cy:60%}img[data-cy="65"]{--cy:65%}img[data-cy="70"]{--cy:70%}img[data-cy="75"]{--cy:75%}img[data-cy="80"]{--cy:80%}img[data-cy="85"]{--cy:85%}img[data-cy="90"]{--cy:90%}img[data-cy="95"]{--cy:95%}img[data-cy="100"]{--cy:100%}
/* FIN DU CADRAGE DES PHOTOS */