/* Anthony Henry, conseil aux bars et restaurants. Une seule feuille de style, aucune ressource externe. */
:root{
  --sapin:#052A30;--sapin2:#0B3A42;--creme:#FBF4E3;--surface:#FFFDF7;--menthe:#0FBF8F;
  --texte:#1d2b2d;--douce:#4b6063;--trait:#d9d0bc;--lien:#0A6B50;--sur-sapin:#cfe0da;
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --gouttiere:1.25rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light;scroll-padding-top:4.5rem}
body{margin:0;background:var(--creme);color:var(--texte);font:400 1.0625rem/1.6 var(--sans);overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}
a{color:var(--lien);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--sapin);outline-offset:3px;border-radius:2px}
.bloc-sapin :focus-visible,.entete :focus-visible,.pied :focus-visible{outline-color:var(--menthe)}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--sapin);margin:0 0 .6em;line-height:1.18}
h1{font-size:clamp(1.9rem,7vw,3rem)}
h2{font-size:clamp(1.55rem,5.2vw,2.15rem)}
h3{font-size:1.25rem;line-height:1.25}
p,ul,ol{margin:0 0 1em}
.wrap{width:100%;max-width:70rem;margin-inline:auto;padding-inline:var(--gouttiere)}
.texte{max-width:40rem}
.chapo{font-size:1.15rem;color:var(--texte)}
.petit{font-size:.9375rem;color:var(--douce)}
.sur{font:600 .78rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--lien);margin:0 0 .9rem}
.skip{position:absolute;left:-999px;top:0;background:var(--sapin);color:var(--creme);padding:.75rem 1rem;z-index:20}
.skip:focus{left:0}

/* en-tête */
.entete{background:var(--sapin);color:var(--creme);position:relative;z-index:10}
.entete-in{display:flex;align-items:center;justify-content:space-between;min-height:3.75rem;gap:1rem}
.marque{display:flex;flex-direction:column;text-decoration:none;color:var(--creme);line-height:1.15;padding:.5rem 0}
.marque-nom{font:400 1.25rem/1.1 var(--serif)}
.marque-sous{font:600 .68rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--menthe)}
.menu-case{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.menu-bouton{cursor:pointer;border:1.5px solid var(--creme);border-radius:999px;padding:.55rem 1.1rem;font:600 .95rem/1 var(--sans);min-height:2.75rem;display:inline-flex;align-items:center}
.menu-case:focus-visible + .menu-bouton{outline:3px solid var(--menthe);outline-offset:3px}
.menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--sapin);border-top:1px solid var(--sapin2);padding:.5rem var(--gouttiere) 1.25rem;box-shadow:0 14px 24px rgba(5,42,48,.35)}
.menu-case:checked ~ .menu{display:block}
.menu ul{list-style:none;margin:0;padding:0}
.menu a{display:flex;align-items:center;min-height:3rem;color:var(--creme);text-decoration:none;border-bottom:1px solid var(--sapin2);font-size:1.05rem}
.menu a[aria-current="page"]{color:var(--menthe)}
.menu li:last-child a{border:0;margin-top:.9rem;justify-content:center;background:var(--menthe);color:var(--sapin);font-weight:700;border-radius:999px}

/* boutons */
.boutons{display:flex;flex-direction:column;gap:.75rem;margin:1.25rem 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.7rem 1.5rem;border-radius:999px;font:700 1.05rem/1.2 var(--sans);text-decoration:none;text-align:center;border:2px solid transparent}
.btn-plein{background:var(--menthe);color:var(--sapin)}
.btn-plein:hover{background:#27d4a3}
.btn-contour{border-color:var(--creme);color:var(--creme)}
.btn-contour:hover{background:var(--sapin2)}
.btn-fonce{border-color:var(--sapin);color:var(--sapin)}
.btn-fonce:hover{background:var(--surface)}
.btn-sapin{background:var(--sapin);color:var(--creme)}
.btn-sapin:hover{background:var(--sapin2)}

/* blocs */
.bloc{padding-block:3rem}
.bloc-surface{background:var(--surface);border-block:1px solid var(--trait)}
.bloc-sapin{background:var(--sapin);color:var(--creme)}
.bloc-sapin h1,.bloc-sapin h2,.bloc-sapin h3{color:var(--creme)}
.bloc-sapin .sur{color:var(--menthe)}
.bloc-sapin a:not(.btn){color:var(--menthe)}
.bloc-sapin .petit{color:var(--sur-sapin)}
.hero{padding-block:2.25rem 3rem}
.hero .formule{font-size:clamp(1.75rem,6.6vw,2.9rem);line-height:1.16;margin:0 0 1rem}
.hero .sous{font-size:1.1rem;color:var(--sur-sapin);margin:0 0 .25rem}
.cta-titre{font:400 1.35rem/1.2 var(--serif);color:var(--creme);margin:1.6rem 0 0}
.hero-image{margin-top:2rem}
.hero-image img{border:1px solid var(--sapin2);border-radius:6px;width:100%}
.cta h2{margin-bottom:.4em}
.cta .boutons{margin-top:1.25rem}

/* cartes et grilles */
.grille{display:grid;gap:1rem;margin:1.5rem 0 0}
.carte{background:var(--surface);border:1px solid var(--trait);border-top:4px solid var(--menthe);border-radius:6px;padding:1.4rem 1.3rem 1.2rem}
.bloc-surface .carte{background:var(--creme)}
.carte h3{margin-bottom:.45em}
.carte p:last-child{margin-bottom:0}
.carte a.suite{font-weight:700;display:inline-block;margin-top:.4rem}

/* étapes */
.etapes{list-style:none;padding:0;margin:1.75rem 0 0;counter-reset:e;display:grid;gap:.9rem}
.etapes li{counter-increment:e;position:relative;background:var(--surface);border:1px solid var(--trait);border-radius:6px;padding:1.1rem 1.2rem 1.1rem 4rem}
.etapes li::before{content:counter(e);position:absolute;left:1rem;top:1rem;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--sapin);color:var(--creme);font:700 1rem/2.1rem var(--sans);text-align:center}
.etapes + p{margin-top:1.5rem}
.etapes h3{font-size:1.12rem;margin:0 0 .25em}
.etapes p{margin:0}

/* prix */
.prix-grille{display:grid;gap:1rem;margin:1.5rem 0 0}
.prix{background:var(--surface);border:1px solid var(--trait);border-radius:6px;padding:1.4rem 1.3rem}
.prix .nom{font:600 .78rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--douce);margin:0 0 .4rem}
.prix .montant{font:400 2.6rem/1.05 var(--serif);color:var(--sapin);margin:0 0 .2rem}
.prix .ht{font-size:.9rem;color:var(--douce);margin:0 0 .8rem}
.prix p:last-child{margin-bottom:0}
.ordres{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.ordres li{border-left:4px solid var(--menthe);padding:.2rem 0 .2rem 1rem}
.ordres strong{font-family:var(--serif);font-weight:400;font-size:1.2rem;color:var(--sapin);display:block}

/* listes */
.liste{list-style:none;padding:0;margin:0 0 1em}
.liste li{position:relative;padding-left:1.4rem;margin:0 0 .55rem}
.liste li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:.6rem;border-radius:50%;background:var(--menthe)}
.liste-non li::before{background:transparent;border:2px solid var(--douce);width:.6rem;height:.6rem}
.deux{display:grid;gap:1.5rem;margin-top:1.5rem}
.deux > div{background:var(--surface);border:1px solid var(--trait);border-radius:6px;padding:1.3rem}
.deux h3{margin-bottom:.7em}

/* images */
figure{margin:0}
figcaption{font-size:.92rem;line-height:1.45;color:var(--douce);margin-top:.5rem}
.fig img{width:100%;border:1px solid var(--trait);border-radius:6px;background:var(--surface)}
.fig-plan a{display:block;cursor:zoom-in}
.fig-plan img{background:#fff}
.fig-bande{display:grid;gap:1rem;margin:1.75rem 0 0}
.fig-bande img{aspect-ratio:4/3;object-fit:cover}
.fig-bande img.ct{object-fit:contain}
.etude-bloc{display:grid;gap:1.1rem;padding-block:2.25rem;border-top:1px solid var(--trait)}
.etude-bloc:first-of-type{border-top:0}
.etude-num{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--sapin);color:var(--creme);font:700 1rem/1 var(--sans);margin-right:.6rem;vertical-align:.12em}
.etude-bloc h2{font-size:1.55rem}
.etude-bloc .texte{margin-bottom:0}
.etude-img-portrait img{max-height:42rem;width:auto;margin-inline:auto;max-width:100%}
.citation{border-left:4px solid var(--menthe);padding:.4rem 0 .4rem 1.1rem;font:italic 1.25rem/1.45 var(--serif);color:var(--sapin);margin:1.5rem 0}

/* zones */
.zones{display:grid;gap:1rem;margin-top:1.5rem}
.zone h3{margin-bottom:.35em}
.periodes{display:grid;gap:1rem;margin-top:1.5rem}

/* questionnaire */
.quiz fieldset{border:1px solid var(--trait);border-radius:6px;background:var(--surface);margin:0 0 1rem;padding:1.1rem 1.1rem .8rem;min-width:0}
.quiz legend{float:left;width:100%;padding:0;margin:0 0 .8rem;font:400 1.15rem/1.3 var(--serif);color:var(--sapin)}
.quiz legend + *{clear:both}
.quiz legend .n{display:inline-block;min-width:1.7rem;color:var(--lien);font-family:var(--sans);font-weight:700;font-size:.95rem}
.choix{display:flex;align-items:flex-start;gap:.7rem;min-height:2.9rem;padding:.55rem .7rem;margin:0 0 .45rem;border:1.5px solid var(--trait);border-radius:6px;background:var(--creme);cursor:pointer;line-height:1.35}
.choix:hover{border-color:var(--douce)}
.choix input{flex:none;width:1.25rem;height:1.25rem;margin:.1rem 0 0;accent-color:var(--sapin)}
.choix:has(input:checked){border-color:var(--sapin);background:#e9f3ec}
.choix:has(input:focus-visible){outline:3px solid var(--sapin);outline-offset:2px}
.quiz-barre{position:sticky;bottom:0;background:var(--creme);border-top:1px solid var(--trait);padding:.8rem 0;margin-top:1rem;display:none;z-index:5}
html.js .quiz-barre{display:block}
.quiz-barre .wrap{display:flex;align-items:center;gap:1rem;justify-content:space-between;flex-wrap:wrap}
.quiz-barre p{margin:0}
.quiz-barre .btn{min-height:3rem;padding-inline:1.2rem;font-size:1rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.resultat{margin-top:2rem;background:var(--surface);border:1px solid var(--trait);border-top:4px solid var(--menthe);border-radius:6px;padding:1.5rem 1.3rem}
.resultat[hidden]{display:none}
.resultat ul{padding-left:1.2rem}
.resultat li{margin-bottom:.8rem}
.mail-texte{width:100%;min-height:15rem;font:400 .92rem/1.5 var(--sans);color:var(--texte);background:var(--creme);border:1.5px solid var(--trait);border-radius:6px;padding:.8rem;margin:.5rem 0 0}
.js-only{display:none}
html.js .js-only{display:block}
html.js .no-js-only{display:none}
.note-sans-script{background:var(--surface);border:1px solid var(--trait);border-radius:6px;padding:1.2rem}

/* pied */
.pied{background:var(--sapin);color:var(--creme);padding-block:2.25rem 2rem;font-size:.97rem}
.pied a{color:var(--creme)}
.pied .pied-nom{font:400 1.2rem/1.2 var(--serif);margin:0 0 .6rem}
.pied ul{list-style:none;padding:0;margin:1rem 0;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.pied li a{display:inline-block;padding:.35rem 0}
.pied .sanitaire{border-top:1px solid var(--sapin2);padding-top:1rem;margin:1rem 0 .3rem;color:var(--sur-sapin)}
.pied .petit{color:var(--sur-sapin);margin:0}

@media (min-width:40em){
  :root{--gouttiere:2rem}
  .boutons{flex-direction:row;flex-wrap:wrap}
  .grille-3,.zones,.periodes{grid-template-columns:repeat(2,1fr)}
  .prix-grille{grid-template-columns:repeat(2,1fr)}
  .deux{grid-template-columns:1fr 1fr}
  .fig-bande{grid-template-columns:repeat(3,1fr)}
  .fig-bande-2{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:62em){
  .bloc{padding-block:5rem}
  .hero{padding-block:4.5rem 5.5rem}
  .hero-in{display:grid;grid-template-columns:1.25fr 1fr;gap:3.5rem;align-items:center}
  .hero-image{margin-top:0}
  .grille-3{grid-template-columns:repeat(3,1fr)}
  .zones,.periodes{grid-template-columns:repeat(2,1fr)}
  .prix-grille{grid-template-columns:repeat(2,1fr)}
  .etapes{grid-template-columns:repeat(3,1fr)}
  .etapes-4{grid-template-columns:repeat(4,1fr)}
  .etapes li{padding:3.7rem 1.2rem 1.2rem}
  .etapes li::before{left:1.2rem;top:1.1rem}
  .etude-bloc{grid-template-columns:1fr 1.4fr;gap:3rem;align-items:center}
  .etude-bloc.inverse > :first-child{order:2}
  .quiz-grille{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;align-items:start}
}
@media (min-width:75em){
  .entete .wrap{max-width:78rem}
  .menu-bouton,.menu-case{display:none}
  .menu{display:block;position:static;background:none;border:0;padding:0;box-shadow:none}
  .menu ul{display:flex;gap:.95rem;align-items:center}
  .menu a{min-height:2.75rem;border:0;font-size:.88rem;white-space:nowrap}
  .menu li:last-child a{margin:0;padding:.55rem 1rem;min-height:2.75rem}
  .marque{flex:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.etude-pleine{grid-template-columns:1fr!important;gap:1.1rem!important;align-items:start!important}
.etude-pleine .fig + .fig{margin-top:1.1rem}
.hero-image img{aspect-ratio:4/5;object-fit:cover}
.legal h2{font-size:1.35rem;margin-top:2rem}
.legal p,.legal ul{max-width:40rem}

.chapo-clair{color:var(--sur-sapin);max-width:40rem}
.mt-05{margin-top:.5rem}.mt-125{margin-top:1.25rem}.mt-15{margin-top:1.5rem}.mt-2{margin-top:2rem}.mt-225{margin-top:2.25rem}.mb-15{margin-bottom:1.5rem}
.h2-carte{font-size:1.4rem}
.fig-etroite{max-width:26rem}
.grille-1{margin:0;grid-template-columns:1fr!important}
.etude-nue{border:0;padding:0}
.citation footer{font:400 .9rem/1.4 var(--sans);font-style:normal;margin-top:.4rem}

/* calculateur « Le vrai coût de votre cocktail » */
.calcul .boutons-ligne{margin:0 0 1.25rem}
.calcul .boutons-ligne .btn{min-height:2.75rem;padding:.5rem 1.1rem;font-size:.97rem}
.calcul .lignes{display:grid;gap:.75rem}
.calcul fieldset{border:1px solid var(--trait);border-radius:6px;background:var(--creme);margin:0;padding:.7rem .9rem .9rem;min-width:0}
.calcul legend{font:600 .85rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--douce);padding:0 .4rem}
.ligne{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:.6rem .6rem}
.ligne .champ{justify-content:flex-end}
.champ{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.champ label{font-size:.9rem;line-height:1.3;color:var(--texte)}
.champ input[type="text"]{font:400 1.05rem/1.2 var(--sans);color:var(--texte);background:var(--surface);border:1.5px solid var(--douce);border-radius:6px;padding:.6rem .7rem;min-height:2.9rem;width:100%;min-width:0}
.champ-nom{grid-column:1 / -1}
.plus-lignes{margin:.75rem 0 0}
.plus-lignes summary{cursor:pointer;font-weight:700;color:var(--lien);min-height:2.75rem;display:flex;align-items:center}
.plus-lignes .lignes{margin-top:.5rem}
.reglages{display:grid;gap:1rem;margin:1.5rem 0 0}
.choix-tva .choix{margin-bottom:.45rem}
.resultats{margin-top:2rem;background:var(--surface);border:1px solid var(--trait);border-top:4px solid var(--menthe);border-radius:6px;padding:1.3rem 1.2rem}
.resultats h3{margin-bottom:.8rem}
.boites{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.boite{background:var(--creme);border:1px solid var(--trait);border-radius:6px;padding:.8rem .9rem}
.boite .nom{font:600 .72rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--douce);margin:0 0 .3rem}
.boite .val{font:400 1.55rem/1.1 var(--serif);color:var(--sapin);margin:0;overflow-wrap:anywhere}
.boite-large{grid-column:1 / -1;border-color:var(--sapin)}
.boite-large .val{font-size:2rem}
.messages{margin:1rem 0 0;padding-left:1.2rem;color:var(--texte)}
.messages:empty{display:none}
.table-ex{overflow-x:auto}
.table-ex table{border-collapse:collapse;width:100%;font-size:.85rem;background:var(--creme)}
.table-ex caption{text-align:left;font-weight:700;padding:0 0 .5rem;color:var(--sapin)}
.table-ex th,.table-ex td{border:1px solid var(--trait);padding:.4rem .3rem;text-align:right;vertical-align:top}
.table-ex th[scope="row"],.table-ex thead th:first-child{text-align:left}
.table-ex thead th{background:var(--surface);font-size:.74rem;line-height:1.25;overflow-wrap:normal}
.table-ex tfoot th,.table-ex tfoot td{font-weight:700}
@media (min-width:40em){
  .ligne{grid-template-columns:2fr 1fr 1.4fr 1fr;gap:.6rem .8rem}
  .champ-nom{grid-column:auto}
  .reglages{grid-template-columns:1fr 1fr 1fr;align-items:start}
  .boites{grid-template-columns:repeat(4,1fr)}
  .boite-large{grid-column:1 / -1}
  .table-ex th,.table-ex td{padding:.55rem .8rem}
}