/* Armor Web · socle commun (menu, pied de page, composants)
   Tokens en 3 couches : primitives → sémantiques → composants.
   Valeurs primitives reprises du site autoplate.org en ligne (oct. 2026). */
@layer reset, tokens, base, layout, composants, utilitaires;

@font-face{font-family:'Plus Jakarta Sans';src:url(/assets/fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url(/assets/fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url(/assets/fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Inter';src:url(/assets/fonts/inter-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url(/assets/fonts/inter-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url(/assets/fonts/inter-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  body,h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
  ul[role=list],ol[role=list]{list-style:none;padding:0}
  img,svg{display:block;max-width:100%}
  button,input,select,textarea{font:inherit;color:inherit}
  a{color:inherit}
}

@layer tokens{
  :root{
    /* 1. Primitives */
    --indigo-50:#EEF0FF; --indigo-100:#E0E3FF; --indigo-600:#4F46E5; --indigo-700:#4338CA; --indigo-800:#3730A3;
    --violet-50:#F3EEFF; --violet-600:#7C3AED; --violet-700:#6D28D9;
    --bleu-600:#2563EB;
    --teal-50:#E8F7F4; --teal-600:#0F766E; --teal-700:#115E59;
    --braise-50:#FFF1EA; --braise-600:#C2410C; --braise-700:#9A3412;
    --encre-950:#0E1020; --encre-900:#171A2E; --encre-800:#22263D;
    --gris-600:#4B4F63; --gris-500:#5E6278; --gris-300:#C3C6D6; --gris-200:#E9EAF4; --gris-100:#F4F5FB; --gris-50:#FBFBFE;
    --blanc:#FFFFFF; --vert-600:#047857; --rouge-700:#B42318;

    /* 2. Sémantiques */
    --fond:var(--gris-50); --surface:var(--blanc); --surface-2:var(--gris-100);
    --texte:var(--encre-950); --texte-2:var(--gris-600); --texte-3:var(--gris-500);
    --filet:var(--gris-200);
    --marque:var(--indigo-600); --marque-fort:var(--indigo-700); --marque-pale:var(--indigo-50);
    --accent-haccp:var(--teal-600); --accent-haccp-pale:var(--teal-50);
    --accent-fidelite:var(--violet-600); --accent-fidelite-pale:var(--violet-50);
    --accent-formation:var(--braise-600); --accent-formation-pale:var(--braise-50);
    --succes:var(--vert-600); --erreur:var(--rouge-700);
    --sombre:var(--encre-950); --sombre-2:var(--encre-900); --sombre-texte:#C9CCE0;
    --f-titre:'Plus Jakarta Sans',"Segoe UI",system-ui,sans-serif;
    --f-texte:'Inter',"Segoe UI",system-ui,sans-serif;
    --f-mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
    --r-1:10px; --r-2:16px; --r-3:22px; --r-4:28px;
    --ombre-1:0 1px 2px rgba(16,16,40,.04),0 6px 18px -10px rgba(16,16,40,.12);
    --ombre-2:0 10px 30px -12px rgba(16,16,40,.18);
    --ombre-marque:0 24px 60px -28px rgba(79,70,229,.45);
    --largeur:1180px; --barre-h:68px;
    --pas-section:clamp(64px,8vw,112px);
    --gout-g:max(16px,env(safe-area-inset-left,0px)); --gout-d:max(16px,env(safe-area-inset-right,0px));
    --ressort:cubic-bezier(.2,.8,.2,1);

    /* 3. Composants */
    --btn-fond:var(--marque); --btn-fond-survol:var(--marque-fort); --btn-texte:var(--blanc); --btn-h:52px;
    --carte-fond:var(--surface); --carte-filet:var(--filet); --carte-r:var(--r-3);
    --barre-fond:rgba(251,251,254,.82); --barre-filet:rgba(14,16,32,.07);
    --pied-fond:var(--sombre); --pied-texte:var(--sombre-texte);
  }
}

@layer base{
  html{scroll-behavior:smooth;scroll-padding-top:calc(var(--barre-h) + 12px);-webkit-text-size-adjust:100%}
  body{background:var(--fond);color:var(--texte);font-family:var(--f-texte);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
  h1,h2,h3,h4{font-family:var(--f-titre);color:var(--texte);text-wrap:balance}
  p{text-wrap:pretty}
  a{color:var(--marque)}
  :focus-visible{outline:3px solid var(--marque);outline-offset:3px;border-radius:6px}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lien-evitement{position:absolute;left:12px;top:-60px;z-index:100;background:var(--sombre);color:var(--blanc);padding:10px 16px;border-radius:8px;text-decoration:none}
  .lien-evitement:focus{top:12px}
}

@layer layout{
  .wrap{max-width:var(--largeur);margin-inline:auto;padding-inline:var(--gout-g) var(--gout-d)}
  .section{padding-block:var(--pas-section)}
  .section.alt{background:var(--surface-2)}
  .tete-section{max-width:720px;margin-bottom:clamp(32px,4vw,52px)}
  .tete-section.centre{margin-inline:auto;text-align:center}
  .sur{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--marque);margin-bottom:14px}
  .h2{font-size:clamp(1.9rem,1.2rem + 2.6vw,3rem);line-height:1.08;letter-spacing:-.025em;font-weight:800;margin-bottom:16px}
  .chapo{font-size:clamp(1.0625rem,1rem + .3vw,1.2rem);color:var(--texte-2);max-width:62ch}
  .tete-section.centre .chapo{margin-inline:auto}
}

@layer composants{
  /* ---------- Bouton ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--btn-h);padding:0 26px;border:0;border-radius:12px;background:var(--btn-fond);color:var(--btn-texte);font-family:var(--f-texte);font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;box-shadow:0 8px 20px -10px rgba(79,70,229,.7);transition:transform .12s ease-out,background-color .15s,box-shadow .2s}
  .btn:hover{background:var(--btn-fond-survol)}
  .btn:active{transform:scale(.97)}
  .btn svg{width:18px;height:18px;transition:transform .2s var(--ressort)}
  .btn:hover svg{transform:translateX(3px)}
  .btn.petit{min-height:42px;padding:0 18px;font-size:.94rem;border-radius:10px}
  .btn.large{width:100%}
  .lien-fleche{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;min-height:44px}
  .lien-fleche:hover{text-decoration:underline;text-underline-offset:3px}

  /* ---------- Barre de navigation : matière translucide ---------- */
  .barre{position:sticky;top:0;z-index:50;background:var(--barre-fond);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border-bottom:1px solid var(--barre-filet)}
  .barre .wrap{display:flex;align-items:center;gap:20px;min-height:var(--barre-h)}
  .logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--texte);font-family:var(--f-titre);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;margin-right:auto;min-height:44px}
  .logo svg{width:34px;height:34px}
  .menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
  .menu a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:9px;color:var(--texte-2);font-size:.94rem;font-weight:500;text-decoration:none;transition:background-color .15s,color .15s}
  .menu a:hover{background:var(--surface-2);color:var(--texte)}
  .menu a[aria-current=page]{color:var(--texte);background:var(--surface-2)}
  .menu .neuf{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-formation);background:var(--accent-formation-pale);padding:2px 6px;border-radius:999px}
  .tel-barre{font-weight:600;font-size:.94rem;color:var(--texte);text-decoration:none;white-space:nowrap}
  .burger{display:none;width:44px;height:44px;border:1px solid var(--filet);border-radius:10px;background:var(--surface);cursor:pointer;align-items:center;justify-content:center}
  .burger span{display:block;width:18px;height:2px;background:var(--texte);border-radius:2px;position:relative;transition:transform .25s var(--ressort),background-color .2s}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--texte);border-radius:2px;transition:transform .25s var(--ressort)}
  .burger span::before{top:-6px}.burger span::after{top:6px}
  .burger[aria-expanded=true] span{background:transparent}
  .burger[aria-expanded=true] span::before{transform:translateY(6px) rotate(45deg)}
  .burger[aria-expanded=true] span::after{transform:translateY(-6px) rotate(-45deg)}
  @media (max-width:1060px){.tel-barre{display:none}}
  @media (max-width:920px){
    .burger{display:inline-flex}
    .barre .btn.petit{display:none}
    .nav-principale{position:fixed;left:0;right:0;top:var(--barre-h);background:var(--surface);border-bottom:1px solid var(--filet);box-shadow:var(--ombre-2);padding:12px var(--gout-d) 20px var(--gout-g);transform-origin:top right;transform:translateY(-8px) scale(.98);opacity:0;visibility:hidden;transition:opacity .2s var(--ressort),transform .25s var(--ressort),visibility 0s .25s}
    .nav-principale.ouvert{opacity:1;transform:none;visibility:visible;transition:opacity .2s var(--ressort),transform .25s var(--ressort)}
    .menu{flex-direction:column;align-items:stretch;gap:2px}
    .menu a{min-height:48px;font-size:1.05rem;padding:0 14px}
    .nav-principale .btn{display:flex;width:100%;margin-top:10px}
  }
  @media (min-width:921px){.nav-principale .btn{display:none}}

  /* ---------- Cartes ---------- */
  .carte{background:var(--carte-fond);border:1px solid var(--carte-filet);border-radius:var(--carte-r);box-shadow:var(--ombre-1)}

  /* ---------- FAQ ---------- */
  .faq{display:grid;gap:12px;max-width:820px}
  .faq.centre{margin-inline:auto}
  .faq details{background:var(--surface);border:1px solid var(--filet);border-radius:14px}
  .faq summary{list-style:none;cursor:pointer;padding:18px 54px 18px 20px;font-weight:600;position:relative;min-height:44px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;border-right:2px solid var(--marque);border-bottom:2px solid var(--marque);transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ressort)}
  .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
  .faq details p{padding:0 20px 20px;color:var(--texte-2)}

  /* ---------- Formulaire ---------- */
  .formulaire{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
  .formulaire .plein{grid-column:1/-1}
  @media (max-width:640px){.formulaire{grid-template-columns:1fr}}
  .formulaire label{display:block;font-weight:600;font-size:.94rem;margin-bottom:6px}
  .formulaire input,.formulaire select,.formulaire textarea{width:100%;font-size:1rem;padding:12px 14px;min-height:48px;border:1px solid var(--gris-300);border-radius:10px;background:var(--surface);color:var(--texte);transition:border-color .15s,box-shadow .15s}
  .formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{border-color:var(--marque);box-shadow:0 0 0 4px var(--marque-pale);outline:none}
  .formulaire textarea{min-height:120px;resize:vertical}
  .formulaire .case{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.9rem;color:var(--texte-2)}
  .formulaire .case input{width:20px;height:20px;min-height:0;margin-top:2px;flex:0 0 20px}
  .aide{font-size:.86rem;color:var(--texte-3);margin-top:4px}
  .erreur{color:var(--erreur);font-size:.86rem;margin-top:4px;min-height:1.2em}
  [aria-invalid=true]{border-color:var(--erreur)!important}
  .piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .retour{padding:14px 18px;border-radius:12px;margin-bottom:18px;font-weight:600}
  .retour:empty{display:none}
  .retour.ok{background:#E7F6EF;color:#05603A}
  .retour.ko{background:#FDECEA;color:#912018}

  /* ---------- Pied de page ---------- */
  .pied{background:var(--pied-fond);color:var(--pied-texte);padding-block:64px calc(40px + env(safe-area-inset-bottom,0px));font-size:.93rem}
  .pied a{color:var(--pied-texte);text-decoration:none}
  .pied a:hover{color:var(--blanc);text-decoration:underline;text-underline-offset:3px}
  .pied-grille{display:grid;gap:36px;grid-template-columns:1.3fr repeat(3,1fr)}
  @media (max-width:900px){.pied-grille{grid-template-columns:1fr 1fr}}
  @media (max-width:560px){.pied-grille{grid-template-columns:1fr}}
  .pied .logo{color:var(--blanc);margin-bottom:12px}
  .pied h3{font-family:var(--f-texte);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blanc);margin-bottom:14px}
  .pied ul{list-style:none;padding:0;display:grid;gap:4px}
  .pied ul a{display:inline-block;padding:5px 0}
  .pied p+p{margin-top:6px}
  .pied-bas{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:.84rem}

  /* ---------- Bandeau cookies ---------- */
  #cookies{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--sombre);color:var(--blanc);padding:16px var(--gout-d) calc(16px + env(safe-area-inset-bottom,0px)) var(--gout-g);box-shadow:0 -8px 30px rgba(0,0,0,.25)}
  #cookies .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:0}
  #cookies p{font-size:.92rem;max-width:70ch}
  #cookies .boutons{display:flex;gap:10px}
  #cookies button{font-size:.92rem;min-height:44px;padding:0 18px;border-radius:10px;cursor:pointer;border:1px solid var(--gris-300);background:transparent;color:var(--blanc)}
  #cookies button.accepter{background:var(--blanc);color:var(--sombre);border-color:var(--blanc)}

  /* ---------- CTA collant mobile ---------- */
  .collant{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px var(--gout-d) calc(10px + env(safe-area-inset-bottom,0px)) var(--gout-g);background:rgba(251,251,254,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--barre-filet);transform:translateY(110%);transition:transform .3s var(--ressort)}
  .collant.vu{transform:none}
  .collant .btn{width:100%}
  @media (min-width:921px){.collant{display:none}}

  /* ---------- Préférences système ---------- */
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  }
  @media (prefers-reduced-transparency:reduce){
    .barre,.collant{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
  }
}

/* ---------- Menu déroulant « Logiciels » : surface qui se matérialise depuis son bouton ---------- */
@layer composants{
  .menu-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--texte-2);font-size:.94rem;font-weight:500;cursor:pointer;transition:background-color .15s,color .15s}
  .menu-btn:hover,.deroulant.ouvert .menu-btn,.deroulant[data-actif] .menu-btn{background:var(--surface-2);color:var(--texte)}
  .menu-btn .chevron{width:15px;height:15px;transition:transform .3s var(--ressort)}
  .deroulant.ouvert .chevron{transform:rotate(180deg)}
  .sous-item{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--texte);border-radius:12px;padding:10px 12px;transition:background-color .15s,transform .12s ease-out}
  .sous-item:hover{background:var(--surface-2)}
  .sous-item:active{transform:scale(.98)}
  .sous-item b{display:block;font-weight:600;font-size:.95rem}
  .sous-item small{display:block;color:var(--texte-3);font-size:.82rem;line-height:1.35}
  .sous-item[aria-current=page]{background:var(--marque-pale)}
  .pico{flex:0 0 38px;height:38px;border-radius:11px;display:grid;place-items:center}
  .pico svg{width:20px;height:20px}
  .sous-item.haccp .pico{background:var(--accent-haccp-pale);color:var(--accent-haccp)}
  .sous-item.fidelite .pico{background:var(--accent-fidelite-pale);color:var(--accent-fidelite)}
  .sous-item.formation .pico{background:var(--accent-formation-pale);color:var(--accent-formation)}
  @media (min-width:921px){
    .deroulant{position:relative}
    .deroulant::after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:14px}
    .sous{position:absolute;top:calc(100% + 10px);left:50%;width:340px;margin:0;padding:8px;list-style:none;display:grid;gap:2px;
      background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
      border:1px solid var(--filet);border-radius:18px;box-shadow:0 24px 50px -20px rgba(16,16,40,.35);
      transform-origin:top center;transform:translate(-50%,-6px) scale(.96);opacity:0;filter:blur(6px);visibility:hidden;
      transition:opacity .18s var(--ressort),transform .28s var(--ressort),filter .22s var(--ressort),visibility 0s .28s}
    .deroulant.ouvert .sous{opacity:1;transform:translate(-50%,0) scale(1);filter:none;visibility:visible;transition:opacity .18s var(--ressort),transform .32s var(--ressort),filter .22s var(--ressort)}
    .sous li{opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .3s var(--ressort)}
    .deroulant.ouvert .sous li{opacity:1;transform:none}
    .deroulant.ouvert .sous li:nth-child(2){transition-delay:.03s}
    .deroulant.ouvert .sous li:nth-child(3){transition-delay:.06s}
  }
  @media (max-width:920px){
    .menu-btn{width:100%;min-height:48px;font-size:1.05rem;padding:0 14px;pointer-events:none}
    .menu-btn .chevron{display:none}
    .sous{list-style:none;margin:0 0 6px;padding:0 0 0 8px;display:grid;gap:2px}
  }
  @media (prefers-reduced-transparency:reduce){.sous{background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
}

/* ---------- Logo Armor Web + méga-menu Services ---------- */
@layer composants{
  .logo svg{width:36px;height:36px;flex:0 0 36px;border-radius:10px;box-shadow:0 6px 16px -8px rgba(79,70,229,.7)}
  .logo-texte{font-family:var(--f-titre);font-weight:800;font-size:1.22rem;letter-spacing:-.025em;color:var(--texte)}
  .logo-mot > span{color:var(--marque)}
  .pied .logo-texte{color:var(--blanc)}
  .pied .logo-mot > span{color:#A5B4FC}
  @media (min-width:921px){
    .deroulant.large .sous{width:600px;grid-template-columns:1fr 1fr;left:-8px;transform-origin:top left;transform:translateY(-6px) scale(.96)}
    .deroulant.large.ouvert .sous{transform:none}
    .sous{background:rgba(255,255,255,.97)!important}
  }
  @media (max-width:920px){
    .nav-principale{max-height:calc(100dvh - var(--barre-h));overflow-y:auto;overscroll-behavior:contain}
    .sous-item{padding:8px 10px}
    .pico{flex-basis:34px;height:34px}
  }
}
@layer composants{.sous-item .pico{background:var(--marque-pale);color:var(--marque)}}

/* ---------- Logo animé : le A se trace, la vague arrive, le nom monte (1re page de la visite) ;
   au survol la vague ondule. Coupé si l'utilisateur réduit les animations. ---------- */
@layer composants{
  .logo .symbole{overflow:visible}
  .logo .symbole .tuile{transform-box:fill-box;transform-origin:center}
  .logo .symbole .vague{transition:transform .6s var(--ressort)}
  .logo:hover .symbole .vague,.logo:focus-visible .symbole .vague{animation:aw-flot 1.4s linear infinite}
  .logo:hover .symbole .tuile{transform:scale(1.04);transition:transform .35s var(--ressort)}
  .logo-texte{display:inline-block;overflow:hidden;padding-block:2px;vertical-align:middle}
  .logo-mot{display:inline-block}
  @keyframes aw-flot{to{transform:translateX(-15.2px)}}
  @keyframes aw-tuile{from{transform:scale(.6) rotate(-8deg);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
  @keyframes aw-trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes aw-vague{from{transform:translateX(-15.2px);opacity:0}to{transform:none;opacity:1}}
  @keyframes aw-monte{from{transform:translateY(105%)}to{transform:none}}
  html:not(.logo-vu) .barre .logo .tuile{animation:aw-tuile .7s cubic-bezier(.2,.9,.25,1.15) both}
  html:not(.logo-vu) .barre .logo .jambes{stroke-dasharray:1;animation:aw-trace .75s cubic-bezier(.65,0,.35,1) .25s both}
  html:not(.logo-vu) .barre .logo .vague{animation:aw-vague .9s var(--ressort) .75s both}
  html:not(.logo-vu) .barre .logo-mot{animation:aw-monte .65s var(--ressort) .45s both}
  @media (prefers-reduced-motion:reduce){.logo .symbole *,.logo-mot{animation:none!important;transition:none!important}}
}