@font-face{font-family:"Alata";src:url("/assets/fonts/alata-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Mulish";src:url("/assets/fonts/mulish-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

/* ===== Système de design : jetons ===== */
:root{
  --noir:#231F20;          /* noir du logo Caffitaly 2026 */
  --blanc:#FFFFFF;
  --lait:#F1F0EF;          /* blanc cassé Caffitaly */
  --sable:#E3BEA4;         /* sable Caffitaly */
  --sable-pale:#F7E9DF;
  --moka:#6E5750;          /* moka Caffitaly assombri pour le contraste AA */
  --moka-deco:#876C63;     /* moka Caffitaly d'origine, décor uniquement */
  --lagon:#0B6E69;         /* touche caribéenne : liens, focus, repères */
  --lagon-clair:#5DC2BA;   /* lagon sur fond noir */
  --gris:#5C5552;          /* texte secondaire */
  --gris-sur-noir:#C9C2BE;
  --trait:#DDD8D5;
  --champ:#857C78;         /* bordure des champs, contraste 3:1 minimum */
  --wa:#25D366;
  --wa-survol:#1FBD5A;
  --wa-texte:#0F2A1D;
  --erreur:#A3262A;

  --f-titre:"Alata","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-texte:"Mulish",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --t-hero:clamp(2.375rem,1.3rem + 3vw,3.875rem);
  --t-h2:clamp(1.875rem,1.2rem + 2.3vw,3rem);
  --t-h3:1.375rem;
  --t-chapo:clamp(1.0625rem,1rem + .35vw,1.25rem);
  --t-petit:.9375rem;

  --largeur:1200px;
  --gouttiere:clamp(16px,4vw,40px);
  --esp-section:clamp(64px,9vw,128px);
  --r-bouton:999px;
  --r-carte:14px;
  --r-champ:8px;
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;font-family:var(--f-texte);font-size:1.0625rem;line-height:1.6;color:var(--noir);background:var(--blanc);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--f-titre);font-weight:400;line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance}
p,ul,ol,dl,dd,figure{margin:0}
a{color:inherit;text-underline-offset:.2em}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--lagon);outline-offset:3px;border-radius:4px}
.sur-noir :focus-visible{outline-color:var(--lagon-clair)}
.visuellement-cache{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lien-evitement{position:absolute;left:16px;top:-120px;z-index:100;background:var(--noir);color:var(--blanc);padding:12px 18px;border-radius:8px;font-weight:700}
.lien-evitement:focus{top:12px}
.conteneur{max-width:var(--largeur);margin-inline:auto;padding-inline:var(--gouttiere)}
.section{padding-block:var(--esp-section)}
.fond-lait{background:var(--lait)}
.fond-sable{background:var(--sable-pale)}
.fond-noir{background:var(--noir);color:var(--blanc)}
.titre-section{font-size:var(--t-h2);max-width:20ch}
.chapo{font-size:var(--t-chapo);color:var(--gris);max-width:58ch;margin-top:20px}
.fond-noir .chapo{color:var(--gris-sur-noir)}
.entete-section{margin-bottom:clamp(32px,5vw,56px)}

/* ===== Boutons ===== */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:var(--r-bouton);border:2px solid transparent;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.bouton svg{width:20px;height:20px;flex:none}
.bouton-principal{background:var(--noir);color:var(--blanc)}
.bouton-principal:hover{background:#463D3E}
.bouton-whatsapp{background:var(--wa);color:var(--wa-texte)}
.bouton-whatsapp:hover{background:var(--wa-survol)}
.bouton-contour{background:transparent;border-color:currentColor}
.bouton-contour:hover{background:var(--noir);border-color:var(--noir);color:var(--blanc)}
.fond-noir .bouton-principal{background:var(--blanc);color:var(--noir)}
.fond-noir .bouton-principal:hover{background:var(--sable)}
.fond-noir .bouton-contour:hover{background:var(--blanc);border-color:var(--blanc);color:var(--noir)}
.bouton-petit{min-height:44px;padding:10px 18px;font-size:var(--t-petit)}

/* ===== En-tête ===== */
.entete{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--trait)}
.entete-barre{display:flex;align-items:center;gap:20px;min-height:72px}
.marque{display:flex;flex-direction:column;text-decoration:none;line-height:1.15;margin-right:auto}
.marque-nom{font-family:var(--f-titre);font-size:1.5rem;letter-spacing:-.02em}
.marque-sous{font-size:.8125rem;color:var(--gris)}
.nav-principale ul{display:flex;gap:2px;list-style:none;padding:0}
.nav-principale a{display:block;padding:10px 12px;border-radius:var(--r-bouton);font-weight:600;font-size:var(--t-petit);text-decoration:none}
.nav-principale a:hover{background:var(--lait)}
.entete-tel{font-weight:700;text-decoration:none;white-space:nowrap;padding:10px 4px}
.entete-tel:hover{color:var(--lagon)}
.burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;border:0;background:transparent;border-radius:12px;cursor:pointer}
.burger svg{width:26px;height:26px}
.burger .icone-fermer{display:none}
.burger[aria-expanded="true"] .icone-ouvrir{display:none}
.burger[aria-expanded="true"] .icone-fermer{display:block}
@media (max-width:1079px){
  .entete-tel{display:none}
  .burger{display:inline-flex}
  .nav-principale{position:absolute;left:0;right:0;top:100%;background:var(--blanc);border-bottom:1px solid var(--trait);padding:8px var(--gouttiere) 20px;display:none}
  .entete[data-menu="ouvert"] .nav-principale{display:block}
  .nav-principale ul{flex-direction:column}
  .nav-principale a{padding:14px 12px;font-size:1.0625rem;border-radius:10px}
}
@media (max-width:520px){
  .marque-sous{display:none}
  .entete .bouton-devis{padding:10px 16px}
}

/* ===== Bandeau de couleurs ===== */
.spectre-legende{display:flex;justify-content:flex-end;margin-top:8px}
.spectre-legende a{font-size:var(--t-petit);font-weight:700;color:var(--noir);padding:10px 0}
.spectre-legende a:hover{color:var(--lagon)}
.spectre{display:flex;height:clamp(18px,2.6vw,30px)}
.spectre span{flex:1;background:var(--c)}/* ===== Cartes produit ===== */
.produit{position:relative;display:flex;flex-direction:column;border:1px solid var(--trait);border-radius:var(--r-carte);overflow:hidden;background:var(--blanc)}
.produit::before{content:"";height:6px;background:var(--c,var(--moka-deco))}
.produit-visuel{position:relative;aspect-ratio:1/1}
.produit-visuel picture{position:absolute;inset:16px;display:block}
.produit-visuel img{width:100%;height:100%;object-fit:contain}
.produit-visuel-typo{display:grid;background:var(--lait);margin:12px 12px 0;border-radius:10px;padding:16px;text-align:center;align-content:center;gap:6px}
.typo-nom{font-family:var(--f-titre);font-size:clamp(1.875rem,1.4rem + 1.2vw,2.5rem);letter-spacing:-.02em;line-height:1}
.typo-detail{font-size:.875rem;color:var(--moka)}
.typo-filet{width:40px;height:2px;background:var(--moka-deco);margin:8px auto}
.produit-visuel-typo:has(.badge){padding-top:44px}
.badge{position:absolute;z-index:1;top:12px;left:12px;background:var(--noir);color:var(--blanc);font-size:.8125rem;font-weight:700;padding:4px 10px;border-radius:var(--r-bouton)}
.produit-texte{display:flex;flex-direction:column;flex:1;padding:4px 18px 18px}
.produit-nom{font-size:1.25rem;letter-spacing:-.01em}
.produit-systeme{font-size:.875rem;color:var(--moka);font-weight:700;margin-top:4px}
.produit-note{font-size:var(--t-petit);color:var(--gris);margin-top:8px;flex:1}
.produit-lien{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-weight:700;color:var(--lagon);text-decoration:underline;text-decoration-thickness:2px}
.produit-lien:hover{color:var(--noir)}/* ===== FAQ ===== */
.faq-grille{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-intro .bouton{margin-top:28px}
.faq-liste details{border-bottom:1px solid var(--trait)}
.faq-liste details:first-child{border-top:1px solid var(--trait)}
.faq-liste summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:16px 0;cursor:pointer;font-weight:700;font-size:1.125rem}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary:hover{color:var(--lagon)}
.faq-signe{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;transition:transform .25s}
.faq-signe svg{width:14px;height:14px}
details[open] .faq-signe{transform:rotate(45deg)}
.faq-reponse{padding:0 48px 22px 0;color:var(--gris)}
@media (max-width:899px){.faq-grille{grid-template-columns:1fr}}

/* ===== Pied de page ===== */
.pied{background:var(--noir);color:var(--gris-sur-noir);font-size:var(--t-petit)}
.pied .spectre{height:8px}
.pied-grille{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px;padding-block:64px 40px}
.pied .marque-nom{color:var(--blanc);font-size:1.75rem}
.pied-texte{margin-top:12px;max-width:34ch}
.pied-caffitaly{display:flex;align-items:center;gap:12px;margin-top:24px}
.pied-caffitaly img{width:90px;height:30px;filter:brightness(0) invert(1)}
.pied h2{font-family:var(--f-texte);font-weight:700;font-size:1rem;letter-spacing:0;color:var(--blanc);margin-bottom:14px}
.pied ul{list-style:none;padding:0;display:grid;gap:4px}
.pied a{text-decoration:none;display:inline-block;padding:6px 0}
.pied a:hover{color:var(--blanc);text-decoration:underline}
.pied-bas{border-top:1px solid #4A4243;padding-block:24px 32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px}
.pied-bas ul{display:flex;flex-wrap:wrap;gap:4px 24px}
.pied-marques{font-size:.8125rem;color:#A9A09B;padding-bottom:32px;max-width:90ch}
@media (max-width:899px){.pied-grille{grid-template-columns:repeat(2,minmax(0,1fr))}.pied-marque-bloc{grid-column:1/-1}}
@media (max-width:480px){.pied-grille{grid-template-columns:1fr}}

/* ===== Barre d'action mobile ===== */
.barre-mobile{display:none}
/* Téléphones (portrait et paysage) et tablettes tactiles : WhatsApp et Appeler toujours en bas */
@media (max-width:767px), (pointer:coarse) and (max-width:1079px){
  html{scroll-padding-bottom:88px}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .barre-mobile{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--blanc);border-top:1px solid var(--trait);box-shadow:0 -6px 20px rgba(35,31,32,.08);transition:transform .25s}
  .barre-mobile .bouton{min-height:52px;padding:10px 12px}
  body.saisie-en-cours .barre-mobile{transform:translateY(110%)}
}
/* Téléphone en paysage : peu de hauteur, l'en-tête ne reste plus collé et la barre s'affine */
@media (pointer:coarse) and (max-height:500px){
  html{scroll-padding-top:16px;scroll-padding-bottom:64px}
  .entete{position:relative}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .barre-mobile{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .barre-mobile .bouton{min-height:44px;padding-block:6px}
}
@media print{.entete,.barre-mobile,.spectre{display:none}}
/* ===== Pages secondaires ===== */
.visuellement-cache{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fil-ariane{font-size:.875rem;color:var(--gris);padding-top:16px;padding-bottom:16px}
.fil-ariane ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.fil-ariane li+li::before{content:"/";margin-right:8px;color:#8C8480}
.fil-ariane a{color:var(--gris);display:inline-block;padding:4px 0}
.page-entete{background:var(--lait);padding-block:clamp(32px,5vw,64px)}
.page-courte{padding-block:clamp(48px,8vw,112px)}
.page-entete h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.25rem);max-width:22ch}
.page-entete .chapo{color:#3E3738}
.page-entete-grille{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,56px);align-items:center}
.page-entete-grille picture img{mix-blend-mode:multiply;width:100%;max-width:440px;margin-inline:auto}
.page-entete-visuel img{max-height:340px;width:auto!important}
.points-cles{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin-top:20px}
.points-cles li{background:var(--blanc);border-radius:999px;padding:6px 14px;font-size:.9375rem;font-weight:700}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.section-courte{padding-block:clamp(40px,6vw,72px)}
.contenu{max-width:780px}
.contenu>h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin:48px 0 14px}
.contenu>h2:first-child{margin-top:0}
.contenu h3{font-size:1.25rem;margin:28px 0 8px}
.contenu p,.contenu li{color:#3E3738}
.contenu>p+p{margin-top:12px}
.contenu>ul,.contenu>ol{padding-left:22px;display:grid;gap:8px;margin-top:12px}
.contenu a:not(.bouton):not(.produit-lien){color:var(--lagon);font-weight:700}
.contenu .illustration{mix-blend-mode:multiply;width:100%;max-width:min(100%,420px);height:auto;margin:28px auto 0}
.meta-article{font-size:.9375rem;color:var(--gris);margin-top:16px}
.tableau{width:100%;border-collapse:collapse;margin-top:16px;font-size:.9375rem}
.tableau th,.tableau td{text-align:left;padding:12px;border-bottom:1px solid var(--trait);vertical-align:top}
.tableau th{width:38%;font-weight:700;background:var(--lait)}
.tableau mark{background:#FFE08A;color:var(--noir);padding:0 4px}
.encadre{background:var(--sable-pale);border-radius:var(--r-carte);padding:20px 22px;margin-top:24px}
.cartes-produits{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:20px}
.contenu .faq-liste{margin-top:8px}
.appel{background:var(--noir);color:var(--blanc);border-radius:18px;padding:clamp(24px,4vw,40px);margin-top:56px}
.appel h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:var(--blanc)}
.appel p{color:var(--gris-sur-noir);margin-top:10px}
.appel .bouton-principal{background:var(--blanc);color:var(--noir)}
.appel .bouton-principal:hover{background:var(--sable)}
.appel .bouton-contour{color:var(--blanc)}
.appel .bouton-contour:hover{background:var(--blanc);border-color:var(--blanc);color:var(--noir)}
.succes-coche{width:56px;height:56px;border-radius:50%;background:var(--lagon);color:var(--blanc);display:grid;place-items:center;margin-bottom:20px}
.succes-coche svg{width:28px;height:28px}
.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.sommaire-legal{position:sticky;top:96px;font-size:.9375rem}
.sommaire-legal ol{list-style:none;padding:0;display:grid;gap:2px}
.sommaire-legal a{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;font-weight:700}
.sommaire-legal a:hover{background:var(--lait)}
.legal h2{scroll-margin-top:96px}
@media (max-width:899px){
  .page-entete-grille{grid-template-columns:1fr}
  .page-entete-grille picture img{max-width:300px}
  .legal{grid-template-columns:1fr}
  .sommaire-legal{position:static}
  .tableau th{width:auto}
}
@media (max-width:520px){
  .tableau th,.tableau td{display:block;width:auto;border-bottom:0;padding:8px 12px}
  .tableau tr{display:block;border-bottom:1px solid var(--trait)}
  .tableau th{background:transparent;padding-bottom:0;color:var(--gris);font-size:.875rem}
  .cartes-produits{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.contenu .tableau+p,.contenu ul+p,.contenu ol+p{margin-top:16px}