/* Clic Chef — identité des maquettes 2012, organisation mobile d'abord. */
:root {
  --orange: #FF5A1F;
  --orange-fonce: #D9420A;
  --brique: #B33A00;
  --encre: #3B1A08;
  --doux: #6B4A38;
  --fond: #FFF7EF;
  --ligne: #F3DCC7;
  --beige1: #FAE6CF;
  --beige2: #F3D6B6;
  --beige-bord: #E8AE7E;
  --lilas: #E9D7F2;
  --lilas-bord: #CDB0DE;
  --lilas-texte: #6B2E8A;
  --jaune: #FFE7A0;
  --jaune-bord: #E3B23C;
  --rose: #F9DDEE;
  --rose-texte: #8E145C;
  --vert-fond: #E6F4D2;
  --vert-texte: #2F6B0A;
  --violet: #A21C78;
  --rouge: #C8102E;
  --titre: 'Delius Unicase', 'Comic Sans MS', cursive;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.5 Arial, Helvetica, sans-serif; }
a { color: var(--rouge); }
a:hover { color: #8A0A1F; }
img { max-width: 100%; }
h1, h2, h3, .titre { font-family: var(--titre); font-weight: 700; line-height: 1.15; }
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--brique); margin: 0 0 .4em; }
h2 { font-size: 1.4rem; color: var(--orange-fonce); margin: 0 0 .5em; }
.conteneur { max-width: 1180px; margin: 0 auto; padding: 0 18px; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.doux { color: var(--doux); }
.petit { font-size: .875rem; }
.centre { text-align: center; }
.pile { display: flex; flex-direction: column; gap: 12px; }
.rangee { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.entre { justify-content: space-between; }

/* Titre « Clic-Chef » d'origine, recoloré en dégradé */
.titre-clic { display: block; aspect-ratio: 278 / 65; filter: drop-shadow(0 0 1px #8A2C00) drop-shadow(0 0 1px #8A2C00); }
.titre-clic span { display: block; width: 100%; height: 100%;
  -webkit-mask: url(../img/titre-clic-chef.png) center/contain no-repeat; mask: url(../img/titre-clic-chef.png) center/contain no-repeat;
  background: linear-gradient(180deg, #FFD84A 0%, #FF9A00 45%, #F04A00 100%); }
.titre-mangez { display: block; width: 100%; max-width: 560px; aspect-ratio: 601 / 64; margin: 0;
  filter: drop-shadow(0 0 1px #7A2700) drop-shadow(0 0 1px #7A2700) drop-shadow(2px 3px 0 #B33A00); }
.titre-mangez span { display: block; width: 100%; height: 100%;
  -webkit-mask: url(../img/mangez-un-plat.png) center/contain no-repeat; mask: url(../img/mangez-un-plat.png) center/contain no-repeat;
  background: linear-gradient(180deg, #FFF6C4 0%, #FFE14D 60%, #FFC21A 100%); }
.titre-rouge { display: block; width: 240px; max-width: 60%; aspect-ratio: 278 / 65; filter: drop-shadow(0 0 1px #7A0010) drop-shadow(2px 2px 0 #FFE14D); }
.titre-rouge span { display: block; width: 100%; height: 100%;
  -webkit-mask: url(../img/clic-chef-rouge.png) center/contain no-repeat; mask: url(../img/clic-chef-rouge.png) center/contain no-repeat;
  background: linear-gradient(180deg, #FFD000 0%, #FF6A00 50%, #E8200A 100%); }

/* Pastilles blanches qui portent les légumes (fond blanc d'origine) */
.medaillon { flex-shrink: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 3px #FFE48A, 0 4px 12px rgba(80, 20, 0, .2);
  overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.medaillon img { width: 120%; max-width: none; }
.medaillon.haut img { width: auto; height: 112%; }

/* Boutons brillants */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px;
  border-radius: 999px; border: 2px solid transparent; font: 700 1rem/1.1 Arial, Helvetica, sans-serif; text-decoration: none;
  cursor: pointer; text-align: center; }
.btn-jaune { background: linear-gradient(180deg, #FFF07A 0%, #FFC83A 45%, #F59A00 100%); border-color: #FFE48A; color: #6B2E00;
  box-shadow: 0 4px 10px rgba(80, 20, 0, .3); }
.btn-jaune:hover { color: #4A1B00; filter: brightness(1.04); }
.btn-vert { background: linear-gradient(180deg, #C2EA6B 0%, #8CC63F 55%, #62A21B 100%); border-color: #E2F7B5; color: #1E3300;
  box-shadow: 0 3px 6px rgba(20, 40, 0, .3); }
.btn-orange { background: linear-gradient(180deg, #FFD36A 0%, #FFA41E 55%, #F07D00 100%); border-color: #FFE4A6; color: #3A1600; }
.btn-violet { background: linear-gradient(180deg, #E0479F 0%, #B5267A 60%, #8E145C 100%); border-color: #F7A8D3; color: #fff; font-family: var(--titre); }
.btn-violet:hover { color: #fff; }
.btn-contour { background: #fff; border-color: var(--violet); color: var(--rose-texte); font-family: var(--titre); }
.btn-grand { min-height: 56px; font-size: 1.05rem; }
.btn-bloc { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.fleche { width: 36px; height: 36px; border-radius: 999px; background: linear-gradient(180deg, #FFB43C, #F07800); border: 3px solid #FFF6C4;
  color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; margin-right: -12px; }

/* Pastilles et boîtes */
.pastille { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.p-rose { background: var(--rose); color: var(--rose-texte); }
.p-vert { background: var(--vert-fond); color: var(--vert-texte); border: 1px solid #9CCB5A; }
.p-jaune { background: var(--jaune); color: #6B2E00; border: 1px solid var(--jaune-bord); }
.p-lilas { background: var(--lilas); color: var(--lilas-texte); }
.p-gris { background: #F4ECE4; color: var(--doux); }
.carte { background: #fff; border: 1px solid var(--ligne); border-radius: 16px; padding: 14px; }
.boite-beige { background: linear-gradient(180deg, var(--beige1), var(--beige2)); border: 2px solid var(--beige-bord); border-radius: 16px; padding: 14px; }
.boite-lilas { background: var(--lilas); border: 1px solid var(--lilas-bord); border-radius: 16px; padding: 12px 14px; }
.boite-jaune { background: linear-gradient(180deg, #FFF07A 0%, #FFD24A 100%); border: 2px solid var(--jaune-bord); border-radius: 16px; padding: 12px 14px; }
.boite-verte { background: linear-gradient(135deg, #E6F4D2, #C9E89A); border: 2px solid #9CCB5A; border-radius: 16px; padding: 14px; }
.barre { height: 12px; border-radius: 999px; background: #F4ECE4; overflow: hidden; }
.barre > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(180deg, #FFB43C, #F07800); }
.barre.verte > span { background: linear-gradient(180deg, #C2EA6B, #62A21B); }

/* Messages */
.messages { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.msg { padding: 10px 14px; border-radius: 12px; font-weight: 700; }
.msg-erreur { background: #FDE2E2; color: #8A0A1F; border: 1px solid #F3A6A6; }
.msg-succes { background: var(--vert-fond); color: var(--vert-texte); border: 1px solid #9CCB5A; }
.msg-info { background: var(--lilas); color: var(--lilas-texte); }

/* Formulaires */
label.champ, div.champ { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: .9rem; }
/* Téléphone : indicatif + numéro */
.tel-ligne { display: flex; gap: 8px; }
.tel-ligne select.entree { flex: 0 0 9.2rem; width: 9.2rem; min-height: 48px; padding: 0 8px; font-size: .88rem; }
.tel-ligne input.entree { flex: 1 1 auto; min-width: 0; }
.aide-tel { font-weight: 400; font-size: .8rem; color: var(--doux); }
/* Champs obligatoires (*) et facultatifs */
.obligatoire { color: var(--rouge); font-weight: 700; margin-left: 2px; }
.facultatif { font-weight: 400; font-size: .82rem; color: var(--doux); }
.legende-obligatoire { margin: 0; font-size: .82rem; color: var(--doux); text-align: right; }
.entree { min-height: 48px; border-radius: 14px; border: 2px solid var(--jaune-bord); background: #FFF4D2; padding: 0 14px;
  font: inherit; font-size: 1rem; color: var(--encre); width: 100%; }
textarea.entree { padding: 10px 14px; min-height: 90px; }

/* Suggestions d'adresse sous le champ */
.suggestions { position: absolute; z-index: 50; margin: 0; padding: 6px; list-style: none; background: #fff; color: var(--encre);
  border: 2px solid var(--jaune-bord); border-radius: 14px; box-shadow: 0 10px 24px rgba(59, 26, 8, .2); max-height: 290px; overflow-y: auto; text-align: left; }
.suggestions li { padding: 11px 12px; border-radius: 10px; cursor: pointer; font-weight: 400; font-size: .95rem; line-height: 1.3; }
.suggestions li + li { border-top: 1px solid var(--ligne); }
.suggestions li:hover, .suggestions li.actif { background: var(--lilas); }
.entree:focus, .btn:focus-visible, a:focus-visible { outline: 3px solid #A21C78; outline-offset: 2px; }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; }
.case input { width: 22px; height: 22px; accent-color: var(--violet); flex-shrink: 0; }

/* En-tête du site */
.entete { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 3px solid #FFB22E; box-shadow: 0 2px 10px rgba(80, 20, 0, .12); }
.entete .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-top: 8px; padding-bottom: 8px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo .titre-clic { width: 150px; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-family: var(--titre); font-weight: 700; font-size: .95rem; }
.nav a { color: var(--encre); text-decoration: none; }

/* Bandeau d'accueil */
.bandeau { background: linear-gradient(160deg, #FF5A1F 0%, #FF7228 55%, #FF9A55 100%); overflow: hidden; }
.bandeau .conteneur { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 40px; padding-top: 40px; padding-bottom: 48px; }
.bandeau .texte { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bandeau .sous { font-family: var(--titre); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.2; color: #fff; text-shadow: 0 2px 0 #B33A00; margin: 0; }
.bandeau form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 580px; }
.bandeau .entree { flex: 1 1 240px; border-radius: 999px; border: 3px solid #FFE48A; background: #fff; min-height: 54px; padding: 0 20px; }
.decor { flex: 1 1 320px; position: relative; min-height: 320px; max-width: 440px; }
.decor .grand { position: absolute; left: 50%; top: 50%; width: 280px; height: 280px; margin: -150px 0 0 -160px;
  box-shadow: 0 0 0 12px rgba(255, 255, 255, .35), 0 16px 32px rgba(120, 30, 0, .35); }
.decor .moyen { position: absolute; left: 50%; top: 50%; width: 128px; height: 128px; margin: 40px 0 0 44px; box-shadow: 0 0 0 6px #FFE48A, 0 10px 20px rgba(120, 30, 0, .3); }
.decor .flotte { position: absolute; }

/* Cartes de plats */
.grille { display: flex; flex-wrap: wrap; gap: 18px; }
.carte-plat { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff;
  border: 2px solid var(--ligne); color: var(--encre); text-decoration: none; box-shadow: 0 4px 14px rgba(80, 20, 0, .1); max-width: 380px; }
.carte-plat:hover { color: var(--encre); border-color: #FFC83A; }
.photo { position: relative; height: 160px; background: linear-gradient(120deg, #FFD7BE, #FF9A55); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; color: #8A4A2A; font-size: .8rem; }
.photo img.vraie { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo .coin { position: absolute; left: 10px; top: 10px; }
.carte-plat .corps { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.carte-plat .nom { font-family: var(--titre); font-weight: 700; font-size: 1.2rem; color: var(--brique); }

/* Étapes */
.etapes { display: flex; flex-wrap: wrap; gap: 18px; }
.etape { flex: 1 1 280px; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; }

/* Bloc « Devenez Clic Chef » */
.devenez { border-radius: 22px; background: linear-gradient(135deg, #FF7AB0 0%, #FF4C78 38%, #F42A3C 70%, #E8170E 100%); color: #fff;
  padding: 24px 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; box-shadow: 0 8px 24px rgba(120, 0, 20, .25); }
.devenez .legumes { width: 270px; max-width: 100%; height: auto; background: #fff; border-radius: 18px; padding: 6px 10px;
  box-shadow: 0 6px 16px rgba(120, 0, 20, .3); transform: rotate(-2deg); }
.devenez .puce { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .5); font-size: .9rem; font-weight: 700; }

.autocollant { position: relative; width: 150px; height: 112px; transform: rotate(-4deg); flex-shrink: 0; }
.autocollant img.papier { position: absolute; inset: 0; width: 150px; height: 112px; }
.autocollant .txt { position: absolute; inset: 18px 8px 0; text-align: center; font-family: var(--titre); font-weight: 700; color: #1B3A00; line-height: 1.15; }

.pied { border-top: 4px solid #FFD23F; background: #fff; margin-top: 40px; }
.pied .conteneur { padding-top: 16px; padding-bottom: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px;
  font-family: var(--titre); font-size: .85rem; }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* Pages mobiles (offre, suivi, appli) */
.ecran { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--fond); }
.ecran .haut { position: sticky; top: 0; z-index: 10; min-height: 56px; padding: 6px 12px; background: #fff; border-bottom: 3px solid #FFB22E;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ecran .haut .titre-clic { width: 116px; }
.ecran .contenu { flex: 1; padding: 12px 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.ecran .bas { position: sticky; bottom: 0; z-index: 10; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: #fff;
  box-shadow: 0 -4px 14px rgba(80, 20, 0, .15); display: flex; flex-direction: column; gap: 6px; }
.visuel { position: relative; height: 200px; background: linear-gradient(120deg, #FFD7BE 0%, #FFB487 50%, #FF8A45 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #8A4A2A; font-size: .8rem; }
.visuel img.vraie { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compteur { display: inline-flex; align-items: center; gap: 6px; padding: 3px; border-radius: 999px; border: 2px solid var(--ligne); background: #fff; }
.compteur button { width: 40px; height: 40px; border-radius: 999px; border: 0; background: linear-gradient(180deg, #E0479F, #A21C78); color: #fff;
  font-size: 1.25rem; font-weight: 700; cursor: pointer; }
.compteur output { min-width: 24px; text-align: center; font-weight: 700; font-size: 1.15rem; }
.ligne-plat { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--ligne); }
.ligne-plat .vignette { width: 52px; height: 52px; border-radius: 10px; background: linear-gradient(120deg, #FFE7F1, #FFB4CF); flex-shrink: 0; object-fit: cover; }
/* Plat sans photo : le dessin du poivron (plat) ou de la poire (dessert) */
.ligne-plat .vignette.dessin { object-fit: contain; background: #fff; border: 1px solid var(--ligne); padding: 2px; }
.photo .medaillon.dessin { width: 124px; height: 124px; }
.visuel .medaillon.dessin { width: 156px; height: 156px; }

/* Frise d'avancement */
.frise { list-style: none; margin: 0; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .92); display: flex; justify-content: space-between;
  font-size: .72rem; font-weight: 700; text-align: center; max-width: 320px; }
.frise li { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 68px; }
.frise .rond { width: 24px; height: 24px; border-radius: 999px; border: 2px solid #E3D6CA; display: flex; align-items: center; justify-content: center; color: #fff; }
.frise .fait .rond { background: linear-gradient(180deg, #C2EA6B, #62A21B); border: 0; }
.frise .encours { color: var(--brique); }
.frise .encours .rond { background: linear-gradient(180deg, #FFB43C, #F07800); border: 3px solid #FFE48A; }
.frise .avenir { color: #8A7060; }
.suivi { list-style: none; margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.suivi li { display: flex; align-items: center; gap: 10px; }
.suivi .rond { width: 24px; height: 24px; flex-shrink: 0; border-radius: 999px; border: 2px solid #E3D6CA; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .8rem; }
.suivi .fait .rond { background: linear-gradient(180deg, #C2EA6B, #62A21B); border: 0; }
.suivi .encours { font-weight: 700; }
.suivi .encours .rond { background: linear-gradient(180deg, #FFB43C, #F07800); border: 3px solid #FFE48A; }
.suivi .avenir { color: #8A7060; }

/* Appli cuisinier */
.app-entete { position: relative; padding: 14px 14px 16px; background: linear-gradient(160deg, #FF5A1F 0%, #FF7A2E 60%, #FF9A55 100%); overflow: hidden; }
.app-entete h1 { color: #fff; text-shadow: 0 2px 0 #B33A00; margin: 2px 0 10px; font-size: 1.6rem; }
.app-entete .medaillon { position: absolute; right: 12px; top: 12px; width: 84px; height: 84px; box-shadow: 0 0 0 4px #FFE48A, 0 6px 14px rgba(120, 30, 0, .3); }
.onglets { position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: space-around; padding: 6px 6px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 3px solid #FFB22E; font-family: var(--titre); font-weight: 700; font-size: .75rem; }
.onglets a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 72px; min-height: 48px; padding: 4px 6px; color: var(--doux);
  text-decoration: none; border-radius: 14px; }
.onglets a[aria-current="page"] { background: var(--jaune); color: #6B2E00; }
.onglets svg { width: 22px; height: 22px; }
.stat { flex: 1; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--ligne); display: flex; flex-direction: column; }
.stat strong { font-family: var(--titre); font-size: 1.7rem; }
.liste { border-radius: 16px; background: #fff; border: 1px solid var(--ligne); overflow: hidden; }
.liste > * { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 14px; border-bottom: 1px solid #F4ECE4;
  color: var(--encre); text-decoration: none; }
.liste > *:last-child { border-bottom: 0; }
.prochaine { border-radius: 18px; background: #fff; border: 3px solid #FFC83A; box-shadow: 0 6px 16px rgba(80, 20, 0, .12); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.prochaine .qui { font-family: var(--titre); font-weight: 700; font-size: 1.7rem; line-height: 1.1; }

/* Ma semaine */
.semaine-page { max-width: 1260px; margin: 0 auto; padding: 16px; }
.semaine { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 10px; min-width: 1080px; }
.defile { overflow-x: auto; padding-bottom: 6px; }
.jour { border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 240px; background: #F4ECE4; }
.jour.ouvert { background: #fff; border: 2px solid #8CC63F; }
.jour.passe { opacity: .55; }
.jour .plat { border-radius: 10px; background: #FFF4D2; border: 1px solid var(--jaune-bord); padding: 8px; display: flex; flex-direction: column; gap: 6px; font-size: .85rem; }
.mini { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--jaune-bord); background: #fff; cursor: pointer; font-weight: 700; }
.interrupteur { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border-radius: 999px; border: 0; font-weight: 700; font-size: .8rem; cursor: pointer; }
.interrupteur.on { background: linear-gradient(180deg, #C2EA6B, #62A21B); color: #1E3300; }
.interrupteur.off { background: #E3D6CA; color: var(--doux); }
select.entree { padding: 0 10px; min-height: 38px; font-size: .85rem; }

@media (min-width: 900px) {
  .ecran.large { max-width: 1100px; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: filter .15s; }
}