/* =====================================================================
   INTÉGRESTO — charte graphique
   Système relevé sur Uber Eats (structure noir/blanc, boutons, pastilles,
   barre d'onglets) et Brevo (sections pastel, cartes ombrées, titres).
   Polices libres équivalentes, hébergées chez nous (RGPD) :
   Plus Jakarta Sans (titres) · Inter (texte)
   ===================================================================== */
@font-face{font-family:"Jakarta";src:url(fonts/jakarta-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jakarta";src:url(fonts/jakarta-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Jakarta";src:url(fonts/jakarta-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  /* Couleurs */
  --noir:#1B1B1B;          /* boutons pleins, texte fort (Brevo 27,27,27) */
  --texte:#000000;         /* texte courant (Uber) */
  --discret:#696969;       /* texte secondaire (Brevo 105,105,105) */
  --gris:#F3F3F3;          /* boutons secondaires, pastilles (Uber 243,243,243) */
  --gris-clair:#F8F8F8;
  --trait:#D9D9D9;         /* bordures d'encadrés (Brevo 217,217,217) */
  --fond:#FFFFFF;
  --marque:#0E4D35;        /* vert profond Intégresto (titres de section) */
  --marque-vif:#1E7A52;
  --pastel-vert:#E8FEDF; --pastel-vert-2:#F9FFF6; --vert-flash:#C0FFA5;
  --pastel-bleu:#E4F2FF; --pastel-creme:#FFFAEB;
  --alerte:#C62828; --alerte-fond:#FDECEA;
  --attente:#8A5A00; --attente-fond:#FFF4D6;
  --ok:#1E7A52; --ok-fond:#E8FEDF;
  /* Formes */
  --r-bouton:8px;          /* Uber */
  --r-bouton-grand:16px;   /* Brevo, gros bouton d'appel */
  --r-carte:12px;          /* Brevo */
  --r-encadre:16px;        /* Brevo, encadré à bordure */
  --r-pastille:500px;      /* Uber */
  --ombre:0 4px 31px -2px rgba(0,0,0,.14);   /* Brevo */
  --ombre-bouton:-1px -3px 7.8px 0 rgba(27,27,27,.25) inset;
  /* Typo */
  --titre:"Jakarta","Inter",system-ui,sans-serif;
  --corps:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font:400 16px/24px var(--corps);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:var(--titre);color:var(--noir);letter-spacing:-.01em}
h1{font-size:40px;line-height:48px;font-weight:700;margin:0 0 16px}
h2{font-size:22px;line-height:28px;font-weight:700;margin:0 0 8px}
h3{font-size:18px;line-height:24px;font-weight:600;margin:0 0 8px}
p{margin:0 0 16px}

/* ---------- Barre du haut (Uber : 64 px, blanche) ---------- */
.barre{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px;padding:0 24px;background:#fff;border-bottom:1px solid var(--gris)}
.barre .logo{font:700 24px/1 var(--titre);color:var(--noir);text-decoration:none;letter-spacing:-.02em}
.barre .logo span{color:var(--marque-vif)}
.barre nav{display:flex;align-items:center;gap:8px;font-size:14px}
.barre .qui{color:var(--discret);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw;margin-right:8px}
.inline{display:inline;margin:0}

/* ---------- Boutons (Uber + Brevo) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 16px;border:2px solid var(--noir);border-radius:var(--r-bouton);background:var(--noir);color:#fff;font:500 16px/24px var(--corps);text-decoration:none;cursor:pointer;transition:transform .08s,opacity .15s}
.btn:hover{opacity:.88}
.btn:active{transform:scale(.98)}
.btn.secondaire{background:var(--gris);border-color:var(--gris);color:var(--noir)}
.btn.contour{background:transparent;color:var(--noir)}
.btn.grand{min-height:56px;font-size:18px;line-height:24px;border-radius:var(--r-bouton)}
.btn.appel{min-height:68px;padding:18px 24px;font-size:20px;border-radius:var(--r-bouton-grand);box-shadow:var(--ombre-bouton)}
.btn.petit{min-height:40px;padding:6px 16px;font-size:14px;line-height:20px;border-radius:12px}
.btn.plein{width:100%}
.btn.danger{background:var(--alerte);border-color:var(--alerte)}
button.lien{background:none;border:0;color:var(--noir);font:500 14px var(--corps);cursor:pointer;padding:8px 12px;border-radius:var(--r-pastille)}
button.lien:hover{background:var(--gris)}

/* ---------- Pastilles (Uber : 40 px, arrondi total) ---------- */
.pastille{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-pastille);background:var(--gris);font:500 14px/16px var(--corps);color:var(--noir);white-space:nowrap}
.pastille.ok{background:var(--ok-fond);color:var(--ok)}
.pastille.alerte{background:var(--alerte-fond);color:var(--alerte)}
.pastille.attente{background:var(--attente-fond);color:var(--attente)}

/* ---------- Mise en page ---------- */
.contenu{max-width:1080px;margin:0 auto;padding:32px 24px 120px}
.chapo{color:var(--discret);font-size:18px;line-height:28px;margin:0 0 24px}
.discret{color:var(--discret);margin:0 0 8px}
.petit{font-size:14px;line-height:20px}
.section{margin:40px 0 16px}
.carte{background:#fff;border-radius:var(--r-carte);box-shadow:var(--ombre);padding:24px}
.encadre{background:#fff;border:2px solid var(--trait);border-radius:var(--r-encadre);padding:24px}
.etroite{max-width:480px;margin:24px auto}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.vide{color:var(--discret)}

/* ---------- Formulaires ---------- */
form label{display:block;margin:0 0 16px;font:600 14px/20px var(--corps);color:var(--noir)}
.facultatif{font-weight:400;color:var(--discret)}
input[type=email],input[type=password],input[type=text],input[type=date],input:not([type]),select{display:block;width:100%;height:56px;margin-top:8px;padding:0 16px;font:400 16px/24px var(--corps);color:var(--texte);background:var(--gris);border:2px solid var(--gris);border-radius:var(--r-bouton);appearance:none}
input:focus,select:focus{outline:none;background:#fff;border-color:var(--noir)}
select{background-image:linear-gradient(45deg,transparent 50%,#000 50%),linear-gradient(135deg,#000 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.case{display:flex;gap:12px;align-items:flex-start;font-weight:400}
.case input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--noir)}
.bas{text-align:center;margin:24px 0 0;font-size:14px;color:var(--discret)}
.bas a{color:var(--noir);font-weight:600}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Messages ---------- */
.flash{padding:14px 16px;border-radius:var(--r-bouton);margin:0 0 16px;font-weight:500}
.flash.ok{background:var(--ok-fond);color:var(--ok)}
.flash.erreur{background:var(--alerte-fond);color:var(--alerte)}
.bandeau-verif{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:center;background:var(--attente-fond);color:#5A4200;padding:10px 16px;font-size:14px;text-align:center}
.lien-bandeau{background:none;border:0;color:#5A4200;text-decoration:underline;font:600 14px var(--corps);cursor:pointer;padding:0}

/* ---------- Pied ---------- */
.pied{border-top:1px solid var(--gris);color:var(--discret);font-size:14px;padding:32px 24px;text-align:center}

/* =====================================================================
   PAGE D'ACCUEIL (sections façon Brevo)
   ===================================================================== */
.accueil-page .contenu{max-width:none;padding:0}
.hero{background:var(--pastel-vert);padding:72px 24px 80px}
.hero .dedans{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{font-size:52px;line-height:64px;margin:0 0 20px}
.hero .chapo{font-size:20px;line-height:30px;color:#2B2B2B;margin:0 0 32px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}
.hero .preuve{margin:24px 0 0;font-size:14px;color:var(--discret)}
.maquette-tel{justify-self:center;width:300px;background:#fff;border-radius:32px;box-shadow:var(--ombre);padding:16px;border:8px solid var(--noir)}
.maquette-tel .ligne-app{display:flex;justify-content:space-between;align-items:center;padding:14px 12px;border-radius:12px;background:var(--gris-clair);margin:0 0 8px;font-size:14px;font-weight:500}
.maquette-tel .ligne-app b{font:700 18px var(--titre)}
.maquette-tel .t-app{font:700 18px var(--titre);margin:4px 4px 12px}
.bloc{padding:80px 24px}
.bloc .dedans{max-width:1080px;margin:0 auto}
.bloc h2.gros{font-size:40px;line-height:48px;color:var(--marque);margin:0 0 16px;max-width:760px}
.bloc .chapo{max-width:680px}
.bloc.bleu{background:var(--pastel-bleu)}
.bloc.creme{background:var(--pastel-creme)}
.bloc.vert{background:var(--pastel-vert-2)}
.atout{background:#fff;border-radius:var(--r-carte);box-shadow:var(--ombre);padding:32px}
.atout .ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:var(--vert-flash);font-size:28px;margin:0 0 20px}
.atout h3{font-size:22px;line-height:28px}
.atout p{color:var(--discret);margin:0}
.etapes{counter-reset:e;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.etape{border:2px solid var(--trait);border-radius:var(--r-encadre);padding:28px;background:#fff}
.etape::before{counter-increment:e;content:counter(e);display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;background:var(--noir);color:#fff;font:700 18px var(--titre);margin:0 0 16px}
.etape p{color:var(--discret);margin:0}
.tarif{max-width:520px;margin:40px auto 0;text-align:center}
.tarif .prix{font:700 56px/1 var(--titre);color:var(--noir);margin:8px 0}
.tarif ul{list-style:none;padding:0;margin:24px 0;text-align:left}
.tarif li{padding:10px 0;border-bottom:1px solid var(--gris);font-weight:500}
.tarif li::before{content:"✓";color:var(--ok);font-weight:700;margin-right:10px}
.faq{max-width:760px;margin:32px auto 0}
.faq details{border-bottom:1px solid var(--trait);padding:20px 0}
.faq summary{font:600 18px/26px var(--titre);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-size:24px;line-height:24px}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--discret);margin:12px 0 0}
.bande-finale{background:var(--noir);color:#fff;text-align:center;padding:72px 24px}
.bande-finale h2{color:#fff;font-size:40px;line-height:48px;margin:0 0 24px}
.bande-finale .btn{background:#fff;color:var(--noir);border-color:#fff}

/* =====================================================================
   APPLICATION
   ===================================================================== */
.fil{font-size:14px;color:var(--discret);margin:0 0 16px}
.fil a{color:var(--discret);text-decoration:none}
.fil a:hover{color:var(--noir)}
.lien-carte{display:block;text-decoration:none;color:inherit;transition:transform .1s}
.lien-carte:hover{transform:translateY(-2px)}
.etab h2{margin-bottom:4px}
.bientot{color:var(--discret);font-size:14px;margin:16px 0 0}
.ajout{border:2px dashed var(--trait);box-shadow:none}
.ajout input{margin:0 0 12px}
.modules{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.modules li{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-pastille);background:var(--gris);font-weight:500;font-size:14px}
.gratuit{color:var(--ok);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}

/* Tuiles d'accueil d'établissement (cartes Uber) */
.tuiles{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.tuile{display:flex;flex-direction:column;gap:6px;background:#fff;border-radius:var(--r-carte);box-shadow:var(--ombre);padding:24px;text-decoration:none;color:inherit;min-height:160px;transition:transform .1s}
.tuile:hover{transform:translateY(-2px)}
.tuile .ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:var(--gris);font-size:24px;margin:0 0 8px}
.tuile strong{font:700 20px/26px var(--titre);color:var(--noir)}
.tuile.discrete{box-shadow:none;border:2px solid var(--trait)}
.etat{font-size:14px;color:var(--discret);font-weight:500}
.etat.bon{color:var(--ok)}
.etat.attente{color:var(--attente)}
.etat.mauvais{color:var(--alerte)}

/* Listes de paramètres */
.ajout-ligne{margin:0 0 32px}
.ligne-champs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 16px}
.liste{display:flex;flex-direction:column;gap:8px}
details.ligne{background:#fff;border:2px solid var(--gris);border-radius:var(--r-carte)}
details.ligne[open]{border-color:var(--trait)}
details.ligne summary{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:16px 20px;cursor:pointer;list-style:none}
details.ligne summary::-webkit-details-marker{display:none}
details.ligne .nom{font-weight:600}
.meta{color:var(--discret);font-size:14px}
details.ligne.inactif{opacity:.5}
.edition{padding:8px 20px 20px;border-top:1px solid var(--gris)}
.edition .btn{margin:4px 8px 0 0}

/* Relevés */
.choix-releve{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 8px}
.choix-releve input[type=date]{width:auto;margin:0;height:48px}
.segments{display:inline-flex;background:var(--gris);border-radius:var(--r-pastille);padding:4px;gap:4px}
.segments button{border:0;background:transparent;color:var(--noir);height:40px;padding:0 20px;border-radius:var(--r-pastille);font:600 14px var(--corps);cursor:pointer}
.segments button.actif{background:var(--noir);color:#fff}
.qui-saisit{background:var(--gris-clair);border-radius:var(--r-carte);padding:16px 20px;margin:16px 0}
.qui-saisit select{background-color:#fff;border-color:#fff}
.appareil{background:#fff;border-radius:var(--r-carte);box-shadow:0 1px 3px rgba(0,0,0,.08),0 0 0 2px var(--gris);padding:16px 20px;margin:0 0 12px;position:relative}
.appareil.fait::after{content:"✓";position:absolute;top:14px;right:16px;width:24px;height:24px;border-radius:50%;background:var(--ok);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.appareil.alerte,.appareil.anomalie{box-shadow:0 0 0 2px var(--alerte);background:#FFFBFA}
.appareil.anomalie::after{background:var(--alerte);content:"!"}
.appareil.hors_service{box-shadow:0 0 0 2px var(--attente)}
.app-titre{display:flex;flex-direction:column;gap:2px;margin:0 0 12px;padding-right:32px}
.app-titre strong{font:700 17px/22px var(--titre)}
.app-saisie{display:flex;gap:10px;align-items:center}
.app-saisie .temp{flex:1;max-width:160px;margin:0;height:56px;font:700 24px var(--titre);text-align:center}
.signe{width:56px;height:56px;border:0;border-radius:var(--r-bouton);background:var(--gris);color:var(--noir);font-size:24px;font-weight:700;cursor:pointer}
.hs{display:inline-flex;gap:8px;align-items:center;margin:0 0 0 auto;height:40px;padding:0 14px;border-radius:var(--r-pastille);background:var(--gris);font:600 14px var(--corps)}
.hs input{accent-color:var(--noir);width:18px;height:18px;margin:0}
.action-corr{margin:14px 0 0;color:var(--alerte)}
.action-corr input{background:#fff;border-color:var(--alerte-fond)}
.collant{position:sticky;bottom:88px;z-index:5;box-shadow:0 8px 24px rgba(0,0,0,.2);margin-top:24px}
h2.section{font-size:22px;margin:32px 0 12px}
h3.zone{font:600 13px var(--corps);color:var(--discret);text-transform:uppercase;letter-spacing:.06em;margin:24px 0 10px}
.tache{display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r-carte);box-shadow:0 0 0 2px var(--gris);padding:16px 20px;margin:0 0 8px}
.tache.faite{background:var(--ok-fond);box-shadow:none}
.t-case{display:flex;gap:14px;align-items:center;margin:0;font-weight:400;width:100%;cursor:pointer}
.t-case input{width:26px;height:26px;flex:none;accent-color:var(--noir)}
.t-texte{display:flex;flex-direction:column}
.t-texte strong{font-weight:600}
.coche{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--ok);color:#fff;font-weight:700;font-size:14px;flex:none}
.lien-discret{margin-left:auto;background:none;border:0;color:var(--discret);text-decoration:underline;cursor:pointer;font:500 13px var(--corps)}

/* ---------- Barre d'onglets en bas (Uber, sur téléphone) ---------- */
.onglets{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;justify-content:space-around;background:#fff;border-top:1px solid var(--gris);padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.onglets a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;text-decoration:none;color:var(--discret);font:600 11px var(--corps)}
.onglets a .i{font-size:22px;line-height:26px;filter:grayscale(1);opacity:.7}
.onglets a.actif{color:var(--noir)}
.onglets a.actif .i{filter:none;opacity:1}

/* ---------- Téléphone ---------- */
@media (max-width:760px){
  h1{font-size:32px;line-height:40px}
  .barre{padding:0 16px}
  .barre .qui{display:none}
  .contenu{padding:20px 16px 120px}
  .hero{padding:40px 16px 56px}
  .hero .dedans{grid-template-columns:1fr}
  .hero h1{font-size:36px;line-height:44px}
  .hero .chapo{font-size:18px;line-height:28px}
  .maquette-tel{display:none}
  .bloc{padding:56px 16px}
  .bloc h2.gros,.bande-finale h2{font-size:30px;line-height:38px}
  .etapes{grid-template-columns:1fr}
  .btn.appel{width:100%}
  .onglets{display:flex}
  .collant{bottom:84px}
}