/* Danlio Delivery : site vitrine. Charte : danlio-mobile/design-system/danlio/MASTER.md */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-latin-600-normal.woff2) format("woff2")}

:root{
  --rouge:#E8192C; --rouge-fonce:#C41424; --sur-rouge:#fff; --teinte:#FDECEE;
  --encre:#222; --texte-2:#5F5F5F; --fond:#F5F5F5; --surface:#fff;
  --filet:#ECECEC; --contour:#8C8C8C;
  --succes:#166534; --succes-fond:#E8F6EC; --erreur:#B91C1C; --erreur-fond:#FBEAEA;
  --r-carte:16px; --r-bouton:12px; --r-pill:999px;
  --ombre:0 4px 16px rgba(34,34,34,.10);
  --largeur:1120px; --gouttiere:clamp(16px,4vw,32px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.6;color:var(--encre);background:var(--fond);text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
h1,h2,h3{line-height:1.2;font-weight:600;margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px;border-radius:4px}
.sur-rouge :focus-visible{outline-color:#fff}
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:16px;top:-60px;z-index:100;background:#fff;color:var(--encre);padding:12px 16px;border-radius:var(--r-bouton);font-weight:500}
.evitement:focus{top:16px}
.conteneur{max-width:var(--largeur);margin:0 auto;padding:0 var(--gouttiere)}

/* ---------- En-tête rouge ---------- */
.entete{background:var(--rouge);color:var(--sur-rouge);position:relative;overflow:hidden}
.barre{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.barre .logo img{width:132px;height:auto}
.nav{display:flex;align-items:center}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.nav a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:var(--r-bouton);text-decoration:none;font-weight:500;font-size:15px}
.nav a:hover{background:rgba(255,255,255,.14)}
.menu-mobile{display:none}
.menu-mobile summary{list-style:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--r-bouton);cursor:pointer}
.menu-mobile summary::-webkit-details-marker{display:none}
.menu-mobile .ic-fermer,.menu-mobile[open] .ic-menu{display:none}
.menu-mobile[open] .ic-fermer{display:block}
.menu-mobile ul{position:absolute;right:var(--gouttiere);top:68px;z-index:20;list-style:none;margin:0;padding:8px;background:#fff;color:var(--encre);border-radius:var(--r-carte);box-shadow:var(--ombre);min-width:220px}
.menu-mobile ul a{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:var(--r-bouton);text-decoration:none;font-weight:500}
.menu-mobile ul a:hover{background:var(--fond)}
@media (max-width:760px){.nav ul{display:none}.menu-mobile{display:block}}

/* Flèche du logo en filigrane */
.filigrane{position:absolute;right:-8%;bottom:-18%;width:min(70vw,640px);height:auto;color:#fff;opacity:.07;pointer-events:none}

.heros{position:relative;display:grid;gap:40px;align-items:center;padding:32px 0 96px}
@media (min-width:900px){.heros{grid-template-columns:1.1fr .9fr;padding:56px 0 120px}}
.heros h1{font-size:clamp(30px,6.4vw,52px);letter-spacing:-.01em;max-width:16ch}
.heros .chapo{margin-top:16px;font-size:clamp(16px,2.2vw,19px);max-width:46ch;color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.stores{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:15px}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-bouton);border:2px solid transparent;font:inherit;font-weight:600;font-size:16px;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.btn .ic{width:20px;height:20px}
/* Couleur du texte fixée pour chaque état : :is() donne à ces règles la priorité sur
   toute règle de lien (a, .doc a, a:visited...). Contrastes vérifiés >= 4,5:1. */
.btn-blanc,.btn-blanc:is(:link,:visited,:focus,:focus-visible){background:#fff;color:var(--rouge)}                 /* 4,56:1 */
.btn-blanc:is(:hover,:active){background:var(--teinte);color:var(--rouge-fonce)}                              /* 5,30:1 */
.btn-contour,.btn-contour:is(:link,:visited,:focus,:focus-visible){border-color:rgba(255,255,255,.7);color:#fff} /* 4,56:1 */
.btn-contour:is(:hover,:active){background:rgba(0,0,0,.12);color:#fff}                                        /* 5,66:1 */
.btn-rouge,.btn-rouge:is(:link,:visited,:focus,:focus-visible){background:var(--rouge);color:#fff}             /* 4,56:1 */
.btn-rouge:hover{background:#D5172A;color:#fff}                                                               /* 5,27:1 */
.btn-rouge:active{background:var(--rouge-fonce);color:#fff}                                                   /* 6,05:1 */
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Téléphone d'illustration ---------- */
.telephone{justify-self:center;width:min(100%,300px);background:#fff;border-radius:36px;padding:12px;box-shadow:0 24px 48px rgba(0,0,0,.22);color:var(--encre)}
.ecran{background:var(--fond);border-radius:26px;overflow:hidden}
.ecran-tete{background:var(--rouge);color:#fff;padding:18px 18px 44px;font-size:13px}
.ecran-tete strong{display:block;font-size:17px;font-weight:600;margin-top:2px}
.ecran-carte{margin:-30px 12px 12px;background:#fff;border-radius:var(--r-carte);padding:14px}
.plan{height:96px;border-radius:12px;background:#EEF0F2;position:relative;overflow:hidden}
.plan svg{position:absolute;inset:0;width:100%;height:100%}
.etapes-mini{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;font-size:13px}
.etapes-mini li{display:flex;align-items:center;gap:10px}
.etapes-mini .pt{width:12px;height:12px;border-radius:50%;border:2px solid var(--contour);flex:none}
.etapes-mini .fait .pt{background:var(--rouge);border-color:var(--rouge)}
.etapes-mini .encours .pt{border-color:var(--rouge);box-shadow:0 0 0 4px var(--teinte)}
.etapes-mini .encours{font-weight:600}
.etapes-mini .avenir{color:var(--texte-2)}
.ecran-code{margin:0 12px 14px;background:#fff;border-radius:var(--r-carte);padding:12px 14px;display:flex;align-items:center;gap:12px;font-size:13px}
.ecran-code .ic{width:32px;height:32px;color:var(--rouge)}
.ecran-code strong{display:block;font-size:14px}

/* ---------- Repères ---------- */
.reperes{position:relative;z-index:2;margin-top:-56px;display:grid;gap:12px}
@media (min-width:760px){.reperes{grid-template-columns:repeat(3,1fr);gap:16px}}
.repere{background:#fff;border-radius:var(--r-carte);padding:18px 20px;display:flex;align-items:center;gap:14px;box-shadow:var(--ombre)}
.repere strong{display:block;font-weight:600}
.repere span{color:var(--texte-2);font-size:14px}

/* ---------- Sections ---------- */
.section{padding:72px 0}
@media (min-width:900px){.section{padding:96px 0}}
.surtitre{display:inline-block;font-size:14px;font-weight:600;color:var(--rouge-fonce);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.section h2{font-size:clamp(26px,4.4vw,38px);letter-spacing:-.01em;max-width:22ch}
.intro{margin-top:14px;color:var(--texte-2);font-size:17px;max-width:60ch}
.pastille{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:var(--teinte);color:var(--rouge);flex:none}

/* Étapes */
.etapes{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:16px}
@media (min-width:760px){.etapes{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.etapes{grid-template-columns:repeat(4,1fr)}}
.etape{background:#fff;border-radius:var(--r-carte);padding:24px;position:relative}
.etape .num{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--rouge);color:#fff;font-weight:600;margin-bottom:18px}
.etape h3{font-size:18px}
.etape p{margin-top:8px;color:var(--texte-2)}

/* Grille de fonctions */
.duo{display:grid;gap:40px}
@media (min-width:960px){.duo{grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}}
.fonctions{display:grid;gap:12px}
@media (min-width:600px){.fonctions{grid-template-columns:repeat(2,1fr);gap:16px}}
.fonction{background:#fff;border-radius:var(--r-carte);padding:22px;display:flex;flex-direction:column;gap:14px}
.fonction h3{font-size:17px}
.fonction p{color:var(--texte-2);font-size:15px;margin-top:-6px}
.fond-blanc{background:#fff}
.fond-blanc .fonction,.fond-blanc .etape{background:var(--fond)}
.fond-blanc .pastille{background:#fff}
.badge{align-self:flex-start;display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--contour);color:var(--texte-2);font-size:12px;font-weight:500;letter-spacing:.02em;background:transparent}
.cta-section{margin-top:28px}

/* Bandeau recrutement */
.rejoindre{background:var(--encre);color:#fff;border-radius:24px;padding:clamp(28px,5vw,48px);display:grid;gap:28px}
@media (min-width:900px){.rejoindre{grid-template-columns:1fr 1fr;align-items:center}}
.rejoindre h2{color:#fff}
.rejoindre .intro{color:#D6D6D6}
.rejoindre-liste{display:grid;gap:12px}
.rejoindre-liste a{display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 18px;border-radius:var(--r-carte);background:rgba(255,255,255,.08);text-decoration:none;transition:background-color .18s ease}
.rejoindre-liste a:hover{background:rgba(255,255,255,.14)}
.rejoindre-liste strong{display:block}
.rejoindre-liste span{color:#D6D6D6;font-size:14px}
.rejoindre-liste .ic-fleche{margin-left:auto}

/* ---------- Contact ---------- */
.canaux{display:grid;gap:12px;margin-top:28px}
.canal{display:flex;align-items:center;gap:14px;background:#fff;border-radius:var(--r-carte);padding:14px 18px;text-decoration:none;min-height:64px;transition:background-color .18s ease}
.canal:hover{background:var(--teinte)}
.canal span{display:block;font-size:13px;color:var(--texte-2)}
.canal strong{font-weight:600;word-break:break-word}
.formulaire{background:#fff;border-radius:var(--r-carte);padding:clamp(20px,4vw,32px)}
.champ{margin-bottom:20px}
.champ label,.champ legend{display:block;font-size:14px;font-weight:500;margin-bottom:6px;padding:0}
.champ .aide{display:block;font-size:13px;color:var(--texte-2);margin-top:6px}
.champ input,.champ select,.champ textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--contour);border-radius:var(--r-bouton);background:#fff;color:var(--encre);font:inherit;font-size:16px}
.champ textarea{min-height:140px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--encre);box-shadow:0 0 0 3px rgba(34,34,34,.18)}
.champ [aria-invalid=true]{border-color:var(--erreur)}
.champ .err{display:none;align-items:center;gap:6px;color:var(--erreur);font-size:14px;margin-top:6px}
.champ .err:not(:empty){display:flex}
fieldset.champ{border:0;margin:0 0 20px;padding:0;min-width:0}
.choix{display:flex;flex-wrap:wrap;gap:8px}
.choix label{position:relative;margin:0}
.choix input{position:absolute;opacity:0;width:1px;height:1px}
.choix span{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:1px solid var(--contour);border-radius:var(--r-pill);font-weight:500;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.choix input:checked+span{background:var(--teinte);border-color:var(--rouge);color:var(--rouge-fonce)}
.choix input:focus-visible+span{outline:3px solid var(--encre);outline-offset:2px}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.captcha{min-height:65px;margin-bottom:20px}
.message-etat{display:none;gap:12px;align-items:flex-start;border-radius:var(--r-bouton);padding:14px 16px;margin-bottom:20px}
.message-etat.ok{display:flex;background:var(--succes-fond);color:var(--succes)}
.message-etat.ko{display:flex;background:var(--erreur-fond);color:var(--erreur)}
.message-etat a{font-weight:600}
.secours{margin-top:16px;font-size:14px;color:var(--texte-2)}
.secours a{color:var(--encre);font-weight:500}
.envoi .btn-rouge{width:100%}
@media (min-width:600px){.envoi .btn-rouge{width:auto}}

/* ---------- Pages légales ---------- */
.page{padding:48px 0 80px}
.doc{max-width:760px;background:#fff;border-radius:var(--r-carte);padding:clamp(22px,5vw,48px)}
.doc h1{font-size:clamp(28px,5vw,38px)}
.doc .maj{color:var(--texte-2);font-size:14px;margin-top:10px}
.doc h2{font-size:21px;margin:36px 0 10px}
.doc h3{font-size:17px;margin:22px 0 6px}
.doc p,.doc li{color:#333}
.doc p+p{margin-top:12px}
.doc ul{padding-left:22px;margin:10px 0}
.doc li+li{margin-top:6px}
.doc a:not(.btn){color:var(--rouge-fonce);font-weight:500}
.doc table{width:100%;border-collapse:collapse;margin:12px 0;font-size:15px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 8px;border-bottom:1px solid var(--filet)}
.doc th{font-weight:600}
.table-defile{overflow-x:auto}
.voies{display:grid;gap:12px;margin:16px 0}
.voie{border:1px solid var(--filet);border-radius:var(--r-carte);padding:18px 20px}
.voie h3{margin:0 0 6px;display:flex;align-items:center;gap:10px}
.voie .btn{margin-top:12px}

/* ---------- 404 ---------- */
.erreur404{min-height:60vh;display:grid;place-items:center;text-align:center;padding:64px 0}
.erreur404 .code{font-size:clamp(64px,14vw,120px);font-weight:600;color:var(--rouge);line-height:1}
.erreur404 p{color:var(--texte-2);margin:12px auto 28px;max-width:40ch}

/* ---------- Pied de page ---------- */
.pied{background:var(--encre);color:#D6D6D6;padding:56px 0 32px;font-size:15px}
.pied-grille{display:grid;gap:32px}
@media (min-width:760px){.pied-grille{grid-template-columns:1.2fr 1fr 1fr}}
.pied img{width:120px;height:auto}
.pied-accroche{margin-top:14px}
.pied h2{font-size:14px;color:#fff;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.pied ul{list-style:none;margin:0;padding:0}
.pied li a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none}
.pied li a:hover,.pied address a:hover{color:#fff;text-decoration:underline}
.pied address{font-style:normal;line-height:1.7}
.pied address a{text-decoration:none}
.pied .legal{margin-top:40px;padding-top:20px;border-top:1px solid #3A3A3A;font-size:13px;color:#BDBDBD}

/* ---------- Apparition discrète ---------- */
.js .apparait{opacity:0;transform:translateY(12px);transition:opacity .4s ease-out,transform .4s ease-out}
.js .apparait.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .apparait{opacity:1;transform:none;transition:none}
  *{transition:none!important}
}