/* ITCONSULT — Design tokens & composants partagés (extrait des <style> dupliqués
   entre index.php et service.php lors de l'audit design du 29/07/2026) */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/plusjakarta-800.woff2') format('woff2');
}

:root {
    --color-navy: #173A5C;
    --color-navy-dark: #0D2137;
    --color-emerald: #0D7A5F;
    --color-emerald-soft: #E7F5F0;
    --color-whatsapp: #17823F;

    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

body { font-family: var(--font-body); }
.font-display { font-family: var(--font-display); }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background: #fff;
    color: var(--color-navy);
    padding: 1rem 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.8rem;
    border-radius: 0 0 0.75rem 0;
}
.skip-link:focus {
    left: 0;
}

.glass-nav { background: rgba(255,255,255,0.98); backdrop-filter: blur(10px); }
.text-itconsult    { color: var(--color-navy); }
.bg-itconsult       { background-color: var(--color-navy); }
.border-itconsult   { border-color: var(--color-navy); }
.bg-itconsult-dark  { background-color: var(--color-navy-dark); }
.text-ch      { color: var(--color-emerald); }
.bg-ch        { background-color: var(--color-emerald); }
.border-ch    { border-color: var(--color-emerald); }
.bg-ch-soft   { background-color: var(--color-emerald-soft); }
.bg-whatsapp  { background-color: var(--color-whatsapp); }
.text-itconsult-40 { color: rgba(23,58,92,0.4); }

.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu  { display: none; z-index: 100; }

.label-form {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
    margin-bottom: 0.35rem;
}

@keyframes pulse-green {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(23,130,63,0.7); }
    70%  { transform: scale(1);    box-shadow: 0 0 0 10px rgba(23,130,63,0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(23,130,63,0); }
}
.animate-whatsapp-mobile { animation: pulse-green 2s infinite; }

#mobile-menu { transition: all 0.5s cubic-bezier(0.4,0,0.2,1); clip-path: circle(0% at 100% 0%); }
#mobile-menu.active { clip-path: circle(150% at 100% 0%); }
/* Corrige le défilement du menu mobile (02/09/2026) : deux causes cumulées.
   1) overflow-y-auto et overscroll-contain ne sont pas compiles dans le build
      Tailwind statique du site (verifie dans tailwind.css) - la classe
      utilitaire posee dans le HTML n'avait donc AUCUN effet, pas de scroll
      du tout, quel que soit le contenu.
   2) un enfant flex-grow ne se contracte pas sans min-height:0, donc meme
      avec le scroll actif le contenu pouvait deborder du conteneur fixe. */
.mobile-menu-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
html.mobile-menu-open, html.mobile-menu-open body { overflow: hidden; height: 100%; }

.lang-switch a.active { color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; }

/* Champs de formulaire : état de validation temps réel (audit UX 29/07/2026) */
.field-valid   { border-color: #4ade80 !important; }
.field-invalid { border-color: #f87171 !important; }

/* Accordéon FAQ unifié — remplace faq-php-*, ch-faq-*, faq-svc-*
   (3 implémentations dupliquées identifiées lors de l'audit design) */
.accordion-item {
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
}
.accordion-item.open { border-color: var(--color-navy); box-shadow: 0 4px 16px rgba(23,58,92,0.08); }
.accordion-btn {
    width: 100%;
    padding: 1.25rem 1.5rem;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: #f8fafc;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}
.accordion-item.open .accordion-btn { background: #f0f5fa; }
.accordion-btn:hover { background: #e8f0f8; }
.accordion-icon {
    width: 1.75rem; height: 1.75rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.3s ease;
}
.accordion-item.open .accordion-icon { background: var(--color-navy); color: #fff; transform: rotate(180deg); }
.accordion-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), padding 0.35s ease;
    padding: 0 1.5rem;
    background: #fff;
}
.accordion-item.open .accordion-answer { max-height: 600px; padding: 1.25rem 1.5rem; }

/* Schéma de process par expertise (ajouté 02/09/2026) — 4 étapes,
   ligne horizontale sur desktop, empilé avec flèche verticale sur mobile */
.process-flow {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .process-flow { flex-direction: row; align-items: stretch; gap: 0.5rem; }
}
.process-step {
    flex: 1;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 1.85rem 1.4rem;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.process-step:hover { border-color: var(--color-navy); box-shadow: 0 4px 16px rgba(23,58,92,0.08); }
.process-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-navy);
    color: #fff;
    font-weight: 800;
    font-size: 0.68rem;
    margin-bottom: 1rem;
}
.process-step i.bi {
    display: block;
    font-size: 1.6rem;
    color: var(--color-navy);
    margin-bottom: 0.85rem;
}
.process-step h4 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--color-navy);
    margin-bottom: 0.6rem;
    line-height: 1.3;
}
.process-step p {
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.45;
}
.process-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-navy);
    opacity: 0.3;
    flex: 0 0 auto;
}
.process-connector i { font-size: 1.1rem; }
.process-connector .bi-chevron-right { display: none; }
@media (min-width: 768px) {
    .process-connector { padding: 0 0.15rem; }
    .process-connector .bi-chevron-down { display: none; }
    .process-connector .bi-chevron-right { display: inline; }
}