:root{
  --fond:#ffffff;
  --fond-doux:#f4f6ee;
  --encre:#33393a;
  --encre-douce:#6f7873;
  --accent:#2c4033;
  --accent-encre:#ffffff;
  --trait:#e4e7dd;
  --pois:#a0c638;
  --pois-fonce:#7ea224;
  --sauge:#809878;
  --sable:#e1ce93;
  --sable-clair:#f3ead2;
  --police-titre:"Outfit", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --police-courante:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --arrondi-petit:14px;
  --arrondi-moyen:22px;
  --arrondi-grand:32px;
  --arrondi-pastille:999px;
  --largeur:1240px;
  --ombre:0 1px 2px rgba(44,64,51,.05), 0 8px 24px -12px rgba(44,64,51,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  margin:0;background:var(--fond-doux);color:var(--encre);
  font-family:var(--police-courante);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--police-titre);line-height:1.15;letter-spacing:-.02em;margin:0 0 .6em}
h1{font-size:clamp(1.9rem,4vw,3rem);font-weight:700}
h2{font-size:clamp(1.35rem,2.6vw,2rem);font-weight:600}
h3{font-size:1.1rem;font-weight:600}
p{margin:0 0 1em;max-width:64ch}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Le lien de saut : hors de l'ecran tant qu'il n'a pas le focus, premier arret
   de la tabulation quand il l'a. */
.saut{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-encre);padding:.7rem 1.1rem;border-radius:0 0 var(--arrondi-petit) 0;z-index:10}
.saut:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.dedans{width:100%;max-width:var(--largeur);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}

.entete{background:var(--fond);border-bottom:1px solid var(--trait);position:sticky;top:0;z-index:5}
.entete .dedans{display:flex;align-items:center;gap:1.5rem;min-height:4.2rem;flex-wrap:wrap}
.marque{font-family:var(--police-titre);font-weight:700;font-size:1.15rem;text-decoration:none;line-height:1.2}
.marque small{display:block;font-family:var(--police-courante);font-weight:400;font-size:.78rem;color:var(--encre-douce);letter-spacing:0}
.menu{margin-left:auto;display:flex;gap:.4rem;flex-wrap:wrap;list-style:none;padding:0;margin-block:0}
.menu a{display:inline-block;padding:.5rem .95rem;border-radius:var(--arrondi-petit);text-decoration:none;font-size:.94rem;color:var(--encre-douce)}
.menu a:hover{background:var(--fond-doux);color:var(--encre)}
.menu a[aria-current="page"]{background:var(--accent);color:var(--accent-encre)}

.section{padding-block:clamp(2.2rem,5vw,3.6rem)}
.section+.section{padding-top:0}
.chapeau{color:var(--encre-douce);max-width:60ch}

.premier{background:var(--fond);border-radius:var(--arrondi-grand);padding:clamp(1.6rem,5vw,3.4rem);box-shadow:var(--ombre);margin-top:clamp(1.4rem,4vw,2.4rem)}

.grille{display:grid;gap:clamp(1rem,2.5vw,1.6rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));list-style:none;padding:0;margin:0}
.carte{background:var(--fond);border-radius:var(--arrondi-moyen);box-shadow:var(--ombre);overflow:hidden;display:flex;flex-direction:column}
.carte img{aspect-ratio:4/3;object-fit:cover;width:100%}
.carte .corps{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.carte h3{margin:0}
.carte a{text-decoration:none}
.carte a:hover h3{text-decoration:underline}
.carte .note{color:var(--encre-douce);font-size:.9rem;margin:0}
.prix{font-family:var(--police-titre);font-weight:700;font-size:1.15rem;margin-top:auto;padding-top:.4rem}
.sur-devis{font-weight:600;color:var(--encre-douce)}

.fiche{background:var(--fond);border-radius:var(--arrondi-grand);box-shadow:var(--ombre);padding:clamp(1.4rem,4vw,3rem);margin-top:clamp(1.4rem,4vw,2.4rem)}
.fiche .texte>:first-child{margin-top:0}
.fiche .texte ul,.fiche .texte ol{max-width:64ch}
.fiche .texte blockquote{margin:1.2em 0;padding-left:1.1rem;border-left:3px solid var(--accent);color:var(--encre-douce)}
.retour{display:inline-block;margin-bottom:1.2rem;font-size:.92rem;color:var(--encre-douce);text-decoration:none}
.retour:hover{text-decoration:underline}
/* Le bouton d'achat d'une fiche. Il n'apparait que sur un site qui vend, et
   seulement sur une fiche qui porte un prix. */
.achat{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.8rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--trait)}
.achat .quantite{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem;color:var(--encre-douce)}
.achat .quantite input{width:5.5rem;padding:.6rem .7rem;border:1px solid var(--trait);border-radius:var(--arrondi-petit);font:inherit;color:var(--encre);background:var(--fond)}
.achat button{padding:.85rem 1.5rem;border:0;border-radius:var(--arrondi-pastille);background:var(--accent);color:var(--accent-encre);font:inherit;font-weight:600;cursor:pointer}
.achat button:hover{opacity:.9}

.vide{color:var(--encre-douce);background:var(--fond);border:1px dashed var(--trait);border-radius:var(--arrondi-moyen);padding:1.6rem;max-width:60ch}

.pied{background:var(--fond);border-top:1px solid var(--trait);margin-top:clamp(2.4rem,6vw,4rem);padding-block:2rem;color:var(--encre-douce);font-size:.92rem}
.pied p{max-width:none}

/* ---------- boutons ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--arrondi-pastille);border:1.5px solid transparent;padding:.7rem 1.35rem;font-weight:600;font-size:.92rem;cursor:pointer;text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease}
.bouton-plein{background:var(--pois);color:var(--accent);border-color:var(--pois)}
.bouton-plein:hover{background:var(--pois-fonce);border-color:var(--pois-fonce);color:var(--fond)}
.bouton-clair{background:transparent;color:var(--fond-doux);border-color:rgba(244,246,238,.45)}
.bouton-clair:hover{background:rgba(244,246,238,.14);border-color:var(--fond-doux)}

/* ---------- bandeau et en-tete ---------- */
.annonce{background:var(--accent);color:var(--sable-clair);font-size:.83rem;text-align:center;padding:.55rem 1rem;margin:0;max-width:none}
.annonce b{color:var(--pois);font-weight:600}
.entete{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);z-index:60}
.entete .dedans{gap:1.25rem;min-height:4.25rem;flex-wrap:nowrap}
.entete .logo{display:inline-flex;flex:none}
.entete .logo img{height:30px;width:auto}
.entete .menu{margin-left:.5rem}
.entete .menu a{font-weight:500}
.outils{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.tiroir{display:none;position:relative}
.tiroir summary{list-style:none;background:var(--fond-doux);border:1px solid var(--trait);border-radius:var(--arrondi-pastille);width:42px;height:42px;display:grid;place-items:center;cursor:pointer;color:var(--accent)}
.tiroir summary::-webkit-details-marker{display:none}
.tiroir nav{position:absolute;right:0;top:calc(100% + .6rem);background:var(--fond);border:1px solid var(--trait);border-radius:var(--arrondi-moyen);box-shadow:var(--ombre);padding:.5rem;min-width:15rem}
.tiroir nav .menu{display:grid;gap:.15rem;margin:0}
.tiroir nav a{display:block;padding:.7rem .9rem;font-weight:600;color:var(--accent)}
@media (max-width:900px){.large-seul{display:none}.tiroir{display:block}}

/* ---------- premier ecran ---------- */
.ouverture{padding-top:clamp(1.2rem,3vw,2.2rem)}
.scene{background:var(--accent);border-radius:var(--arrondi-grand);overflow:hidden;color:var(--fond-doux);display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch}
@media (max-width:900px){.scene{grid-template-columns:1fr}}
.scene .mots{padding:clamp(1.8rem,4vw,3.2rem);display:flex;flex-direction:column;justify-content:center}
.scene h1{color:var(--fond-doux);max-width:14ch;margin-bottom:0}
.scene h1 em{font-style:normal;color:var(--sable)}
.scene p{color:rgba(244,246,238,.78);margin:.9rem 0 0;max-width:42ch;font-size:1rem}
.scene .actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem;max-width:none}
.pastille{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;background:rgba(160,198,56,.16);color:var(--pois);border-radius:var(--arrondi-pastille);padding:.38rem .85rem;font-size:.8rem;font-weight:600;margin-bottom:1.1rem}
.pastille .point{width:7px;height:7px;border-radius:50%;background:var(--pois)}
.scene .visuel{position:relative;min-height:20rem}
.scene .visuel img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.vignette{position:absolute;left:clamp(.9rem,2vw,1.6rem);bottom:clamp(.9rem,2vw,1.6rem);background:var(--fond);border-radius:var(--arrondi-moyen);padding:.85rem 1.1rem;box-shadow:var(--ombre);display:flex;align-items:center;gap:.85rem;color:var(--encre)}
.vignette .rond{width:44px;height:44px;border-radius:50%;background:var(--sable-clair);color:var(--accent);display:grid;place-items:center;flex:none}
.vignette .txt{font-size:.8rem;color:var(--encre-douce);line-height:1.35}
.vignette .txt b{display:block;font-family:var(--police-titre);font-size:1.05rem;color:var(--accent);font-weight:600}
@media (max-width:700px){.scene .visuel{min-height:14rem}.scene h1{max-width:none}.vignette{left:.7rem;right:.7rem;bottom:.7rem}}

/* ---------- les quatre promesses ---------- */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-top:.7rem}
@media (max-width:820px){.services{grid-template-columns:repeat(2,1fr)}}
.service{background:var(--fond);border:1px solid var(--trait);border-radius:var(--arrondi-moyen);padding:1rem 1.1rem;display:flex;gap:.75rem;align-items:flex-start}
.service .rond{width:34px;height:34px;border-radius:50%;background:var(--sable-clair);color:var(--accent);display:grid;place-items:center;flex:none}
.service b{font-family:var(--police-titre);font-weight:600;font-size:.94rem;display:block;color:var(--accent)}
.service span span{font-size:.82rem;color:var(--encre-douce);line-height:1.4}

/* ---------- titres de section ---------- */
.surtitre{font-family:var(--police-titre);font-weight:600;color:var(--sauge);font-size:.85rem;margin-bottom:.25rem}

/* ---------- pastilles de rayon ---------- */
.puces{display:flex;gap:.55rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:1.2rem;scrollbar-width:thin}
.puce{display:inline-flex;align-items:center;gap:.5rem;flex:none;background:var(--fond);border:1px solid var(--trait);border-radius:var(--arrondi-pastille);padding:.45rem 1rem;font-weight:600;font-size:.88rem;color:var(--accent);text-decoration:none;transition:border-color .18s,background .18s}
.puce:hover{border-color:var(--sauge)}
.puce[aria-current=true]{background:var(--accent);color:var(--fond-doux);border-color:var(--accent)}
.puce .compte{background:var(--fond-doux);color:var(--encre-douce);border-radius:var(--arrondi-pastille);padding:.05rem .45rem;font-size:.75rem;font-weight:700}
.puce[aria-current=true] .compte{background:var(--pois);color:var(--accent)}
.voir-plus{display:flex;justify-content:center;margin-top:1.6rem;max-width:none}
.voir-plus .bouton{background:var(--fond);color:var(--accent);border-color:var(--trait)}
.voir-plus .bouton:hover{border-color:var(--sauge)}

/* ---------- grille et vignettes ---------- */
.grille{grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.6vw,1.1rem)}
@media (max-width:980px){.grille{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.grille{grid-template-columns:repeat(2,1fr)}}
.article{background:var(--fond);border:1px solid var(--trait);border-radius:var(--arrondi-moyen);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.article:hover{transform:translateY(-3px);box-shadow:var(--ombre);border-color:var(--sauge)}
.article a{display:flex;flex-direction:column;height:100%;padding:.6rem .6rem .9rem;text-decoration:none;color:inherit}
.article .photo{display:block;border-radius:var(--arrondi-moyen);overflow:hidden;aspect-ratio:1;background:var(--sable-clair);position:relative}
.article .photo img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.article:hover .photo img{transform:scale(1.04)}
.article .etiquette{position:absolute;top:.5rem;left:.5rem;background:rgba(255,255,255,.92);color:var(--accent);border-radius:var(--arrondi-pastille);padding:.2rem .6rem;font-size:.72rem;font-weight:600}
.article .nom{display:block;font-family:var(--police-titre);font-weight:600;font-size:.95rem;line-height:1.3;margin:.75rem .25rem .1rem}
.article .origine{display:block;margin:0 .25rem;font-size:.78rem;color:var(--encre-douce)}
.article .bas{margin-top:auto;padding:.7rem .25rem 0;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.article .tarif{font-family:var(--police-titre);font-weight:700;color:var(--accent);font-size:1.02rem;font-variant-numeric:tabular-nums}
.article .tarif small{display:block;font-weight:500;font-size:.72rem;color:var(--encre-douce)}
.article .bas .rond{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--fond-doux);display:grid;place-items:center;flex:none;transition:background .18s ease}
.article:hover .bas .rond{background:var(--pois);color:var(--accent)}

/* ---------- le magasin ---------- */
.magasin{background:var(--fond);border-radius:var(--arrondi-grand);overflow:hidden;border:1px solid var(--trait)}
.dedans-magasin{display:grid;grid-template-columns:.95fr 1.05fr}
@media (max-width:900px){.dedans-magasin{grid-template-columns:1fr}}
.magasin .mots{padding:clamp(1.6rem,3.5vw,2.8rem)}
.magasin .mots p{color:var(--encre-douce)}
.magasin .signe{display:flex;align-items:center;gap:.75rem;margin:1.4rem 0 0}
.magasin .signe .rond{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--pois);display:grid;place-items:center;font-family:var(--police-titre);font-weight:700;flex:none}
.magasin .signe b{font-family:var(--police-titre);color:var(--accent);display:block;font-size:.98rem}
.magasin .signe span span{font-size:.82rem;color:var(--encre-douce)}
.mosaique{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.5rem}
.mosaique img{width:100%;height:100%;object-fit:cover;border-radius:var(--arrondi-moyen);aspect-ratio:4/3}
.mosaique img:first-child{grid-column:span 2;aspect-ratio:16/9}

/* ---------- venir ---------- */
.venir{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:820px){.venir{grid-template-columns:1fr}}
.bloc{background:var(--fond);border:1px solid var(--trait);border-radius:var(--arrondi-grand);padding:clamp(1.3rem,3vw,2rem)}
.bloc.vert{background:var(--accent);color:var(--fond-doux);border-color:var(--accent)}
.bloc.vert h2{color:var(--fond-doux)}
.bloc.vert p{color:rgba(244,246,238,.78)}
.bloc.vert .surtitre{color:var(--pois)}
.horaires{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.92rem}
.horaires th{text-align:left;font-weight:500;color:var(--encre-douce);padding:.5rem 0;border-bottom:1px solid var(--trait)}
.horaires td{text-align:right;padding:.5rem 0;border-bottom:1px solid var(--trait);font-variant-numeric:tabular-nums;color:var(--encre)}
.horaires tr:last-child th,.horaires tr:last-child td{border-bottom:0}
.coord{margin-top:1.2rem;display:grid;gap:.5rem;max-width:none}
.coord a{display:flex;gap:.6rem;align-items:center;font-size:.95rem;color:rgba(244,246,238,.9);text-decoration:none}
.coord .rond{width:34px;height:34px;border-radius:50%;background:rgba(244,246,238,.1);display:grid;place-items:center;flex:none;color:var(--pois)}
.coord a:hover{color:var(--pois)}

/* ---------- pied ---------- */
.pied{background:var(--fond)}
.colonnes{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
@media (max-width:820px){.colonnes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.colonnes{grid-template-columns:1fr;gap:1.6rem}}
.pied .marque{display:inline-flex;margin-bottom:.9rem}
.pied .marque img{height:30px;width:auto}
.pied .mot{max-width:30ch;font-size:.88rem}
.pied h3{font-size:.88rem;color:var(--accent);margin-bottom:.7rem}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.pied a{color:var(--encre-douce);font-size:.88rem;text-decoration:none}
.pied a:hover{color:var(--accent)}
.bas-pied{border-top:1px solid var(--trait);margin-top:2rem;padding-top:1.1rem;font-size:.8rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;max-width:none}

/* ---------- fiche ---------- */
.fiche{border:1px solid var(--trait)}
.fiche>img{border-radius:var(--arrondi-moyen);margin:1.2rem 0;max-height:26rem;object-fit:cover;width:100%}
.achat button{background:var(--pois);color:var(--accent)}
.achat button:hover{background:var(--pois-fonce);color:var(--fond);opacity:1}