/* ==========================================================================
   Système visuel Ovavtech — 13/10/2026
   Refonte demandée par Kévin : « j'adore le webdesign de monday.com,
   rapproche-toi de ce résultat ».

   ⚠ FEUILLE PARTAGÉE PAR TOUTES LES PAGES. Jusqu'ici chaque page portait son
   propre <style> recopié : une règle ajoutée quelque part manquait ailleurs
   (le 11/10, `.barre` n'existait que dans index.html et le prix barré du Club
   ne l'était pas). Toute règle commune vient ICI, et nulle part ailleurs.

   Ce qui vient de monday : la police géométrique unique, les titres ÉNORMES
   en graisse LÉGÈRE à interlettre négatif, les boutons en pilule, le rayon
   de 16 px, le texte de 20 px en gris-bleu, et beaucoup d'air.
   ⚠ Ce qui n'en vient PAS, volontairement : le violet.
   ⚠ LE JAUNE EST SORTI DE LA MARQUE le 15/10/2026, sur décision de Kévin.
   L'accent est désormais un bleu vif, et il vient en DEUX valeurs : `--accent`
   pour les aplats et les bordures sur fond clair (texte blanc dessus), et
   `--accent-clair` pour l'accent EN TEXTE ou en bordure sur fond navy — un
   bleu foncé sur du navy ne se lit pas. Confondre les deux est l'erreur à
   éviter. Le Club est aligné depuis le 15/10/2026 (mêmes jetons, mêmes valeurs).
   ========================================================================== */

/* Poppins est hébergée ICI depuis le 16/10/2026 : plus aucun appel à Google Fonts.
   Avant, chaque page la chargeait depuis les serveurs de Google, qui recevaient
   l'adresse IP de chaque visiteur — et la politique de confidentialité n'en disait rien.
   Fichiers et plages Unicode repris tels que Google les servait (latin et latin-ext ;
   le dévanagari ne sert pas ici) : le rendu est identique, au pixel près.
   ⚠ Ne pas remettre de <link> vers fonts.googleapis.com dans une page.
   ⚠ Une graisse en plus (700…) ? Rapatrier ses deux fichiers de la même façon, sinon
   le navigateur la SIMULE en épaississant la 600. Licence : /fonts/OFL.txt. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/poppins-300-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/poppins-300-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/poppins-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/poppins-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/poppins-500-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/poppins-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/poppins-600-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/poppins-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --police:"Poppins",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --encre:#181B34;        /* texte principal */
  --gris:#676879;         /* texte secondaire — la valeur exacte de monday */
  --blanc:#FFFFFF;
  --doux:#F6F7FB;         /* sections claires alternées */
  --ligne:#E4E6ED;

  --navy:#16235C;         /* identité Ovavtech : sections sombres + boutons */
  --navy-clair:#24336F;
  --accent:#2A4BD0;       /* aplats, bordures et focus sur fond clair */
  --accent-encre:#FFFFFF; /* le texte posé SUR un aplat d'accent */
  --accent-clair:#93A9FF; /* l'accent en texte ou bordure sur fond navy */

  --rayon:16px;           /* le rayon dominant chez monday */
  --rayon-lg:24px;
  --pilule:999px;
  --ombre:0 18px 50px -24px rgba(24,27,52,.22);
  --ombre-forte:0 34px 80px -34px rgba(24,27,52,.42);

  --large:1200px;
  --gouttiere:clamp(18px,4vw,40px);
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --encre:#EDEFF7; --gris:#A3A9C4; --blanc:#121735; --doux:#0C1128; --ligne:#272F57;
  --navy:#1E2C6E; --navy-clair:#2B3C88;
  --ombre:0 18px 50px -24px rgba(0,0,0,.6); --ombre-forte:0 34px 80px -34px rgba(0,0,0,.75);
}}
:root[data-theme="dark"]{
  --encre:#EDEFF7; --gris:#A3A9C4; --blanc:#121735; --doux:#0C1128; --ligne:#272F57;
  --navy:#1E2C6E; --navy-clair:#2B3C88;
  --ombre:0 18px 50px -24px rgba(0,0,0,.6); --ombre-forte:0 34px 80px -34px rgba(0,0,0,.75);
}

/* --- base ---------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--blanc);color:var(--encre);
  font:400 1rem/1.6 var(--police);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
/* ⚠ Sur fond navy, l'accent foncé disparaît : le liseré de focus passe au bleu clair. */
.sombre :focus-visible,:root[data-theme="dark"] :focus-visible{outline-color:var(--accent-clair)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :focus-visible{outline-color:var(--accent-clair)}}
.wrap{max-width:var(--large);margin:0 auto;padding-inline:var(--gouttiere)}
[hidden]{display:none!important}

/* --- titres : la signature de monday -------------------------------------
   ⚠ Graisse LÉGÈRE (400/500) et interlettre NÉGATIF. Monter la graisse ou
   remettre des majuscules ramène l'ancien site : c'est précisément ce que
   Kévin ne voulait plus. ---------------------------------------------------- */
h1,h2,h3,h4{margin:0;font-family:var(--police);text-wrap:balance}
h1{font-size:clamp(2.5rem,5.6vw,4.75rem);font-weight:400;letter-spacing:-.038em;line-height:1.07}
h2{font-size:clamp(2rem,4.2vw,3.35rem);font-weight:500;letter-spacing:-.032em;line-height:1.1}
h3{font-size:clamp(1.2rem,2vw,1.45rem);font-weight:500;letter-spacing:-.015em;line-height:1.3}
/* `.h4` : l'allure d'un H4 sur un titre d'un autre niveau. Le niveau suit le plan de la page
   (un lecteur d'écran s'en sert pour naviguer), l'allure suit la maquette : des cartes posées
   juste sous un H2 sont des H3, même quand elles doivent rester petites. */
h4,.h4{font-size:1.02rem;font-weight:600;letter-spacing:-.01em;line-height:1.4}

mark{background:linear-gradient(transparent 56%,var(--accent-clair) 56%,var(--accent-clair) 92%,transparent 92%);
     color:inherit;padding:0 .04em}

.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;color:var(--gris);margin:0}
/* mention discrète en ligne — remplace les anciens labels en mono à interlettre
   positif, qui appartenaient à l'identité « chantier » abandonnée le 13/10/2026. */
.mini{font-size:.85rem;font-weight:450;color:var(--gris)}
.sombre .mini{color:rgba(255,255,255,.62)}

/* ⚠ PRIX BARRÉ — dans la feuille PARTAGÉE, délibérément. Le 11/10/2026 cette
   règle n'existait que dans index.html : le « 39 € » du Club s'affichait barré
   sur une page et pas sur l'autre. C'est exactement le genre de divergence que
   la feuille commune existe pour empêcher. */
/* ⚠ `.barre` = un PRIX BARRÉ. Ne pas réutiliser ce nom pour autre chose : l'en-tête
   collant l'avait pris le 13/10 et tout le menu s'affichait rayé. */
.barre,s.barre{text-decoration:line-through;color:var(--gris);font-weight:450}
.sombre .barre{color:rgba(255,255,255,.55)}
.chapo{font-size:1.05rem;line-height:1.65;color:var(--gris);margin:0}

/* étiquette de section — remplace les labels en mono à interlettre positif */
.oeil{display:inline-flex;align-items:center;gap:.5em;font-size:.85rem;font-weight:500;
      color:var(--navy);background:color-mix(in srgb,var(--navy) 9%,transparent);
      padding:.5em .95em;border-radius:var(--pilule);margin:0 0 20px}
.oeil::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sombre .oeil{color:#fff;background:rgba(255,255,255,.14)}
.sombre .oeil::before{background:var(--accent-clair)}
/* ⚠ CONTRASTE EN MODE SOMBRE. Ces pastilles sont du navy sur un fond de navy
   dilué à 9 % : en thème clair c'est lisible, en thème sombre `--navy` devient
   #1E2C6E et la pastille disparaît presque dans le fond. Constaté le 13/10/2026.
   Toute nouvelle pastille bâtie sur ce modèle doit reprendre ces deux règles. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .oeil{color:#fff;background:rgba(255,255,255,.13)}}
:root[data-theme="dark"] .oeil{color:#fff;background:rgba(255,255,255,.13)}

/* --- boutons en pilule ---------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.55em;border-radius:var(--pilule);
     font:500 1rem/1 var(--police);padding:1.05em 1.7em;text-decoration:none;
     border:1.5px solid transparent;cursor:pointer;
     transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.btn::after{content:"→";font-size:1.05em;transition:transform .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{transform:translateX(3px)}
.btn-sans::after{content:none}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 10px 24px -12px rgba(22,35,92,.75)}
.btn-navy:hover{background:var(--navy-clair)}
.btn-accent{background:var(--accent);color:var(--accent-encre)}
.btn-fil{border-color:var(--ligne);color:var(--encre);background:transparent}
.btn-fil:hover{border-color:var(--encre)}
.sombre .btn-fil{border-color:rgba(255,255,255,.32);color:#fff}
.sombre .btn-fil:hover{border-color:#fff}
/* Le bloc d'appel est navy sans porter la classe .sombre : sans cette règle, « Poser une
   question » s'affichait en encre foncée sur fond foncé — donc invisible. */
.appel .btn-fil{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.appel .btn-fil:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-sm{padding:.75em 1.3em;font-size:.93rem}
@media (prefers-reduced-motion:reduce){.btn,.btn::after{transition:none}.btn:hover{transform:none}}

/* --- barre de navigation -------------------------------------------------- */
/* ⚠ L'en-tête vit dans sa PROPRE barre, hors du conteneur du hero : à l'intérieur, « sticky »
   ne tenait que le temps du hero et le menu disparaissait dès qu'on descendait — on ne savait
   plus où on était (retour de Kévin, 13/10/2026). */
.entete-collante{position:sticky;top:0;z-index:60;background:var(--blanc);border-bottom:1px solid var(--ligne)}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:14px}
.marque{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
        font-size:1.3rem;font-weight:600;letter-spacing:-.03em}
.marque svg{width:28px;height:28px;flex:0 0 auto}
.top nav{display:flex;align-items:center;gap:6px}
.top nav a:not(.btn){text-decoration:none;color:var(--gris);font-weight:450;font-size:.97rem;
                     padding:.55em .85em;border-radius:var(--pilule);transition:background-color .15s ease,color .15s ease}
.top nav a:not(.btn):hover{color:var(--encre);background:var(--doux)}
.top nav a[aria-current="page"]{color:var(--navy);font-weight:600;background:var(--doux);
                                box-shadow:inset 0 0 0 1px var(--ligne)}
/* ⚠ L'entrée du Club reste visible au repli mobile : c'est une solution à part
   entière, pas une rubrique de page (décision du 09/10/2026). */
.top nav a.lien-club{color:var(--encre);font-weight:500;display:inline-flex;align-items:center;gap:.45em}
.top nav a.lien-club::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
@media (max-width:860px){
  /* ⚠ Le menu CACHAIT tout sauf « Le Club » : on ne pouvait plus atteindre le CRM, les tarifs,
     l'espace client ni le contact depuis un téléphone. Les liens passent sur une seconde ligne —
     et la barre reste assez basse pour ne pas manger l'écran. */
  .top{flex-wrap:wrap;row-gap:7px;padding-block:9px}
  .top nav{width:100%;margin-left:0;justify-content:center;flex-wrap:wrap;gap:3px}
  .top nav a:not(.btn){font-size:.83rem;padding:.34em .5em}
  .top nav .btn{font-size:.82rem;padding:.55em .95em}
  .top nav a.lien-club{white-space:nowrap}
}
@media (max-width:520px){
  .marque{font-size:1.12rem}.marque svg{width:25px;height:25px}
  .top nav .btn{padding:.7em 1.1em;font-size:.88rem;white-space:nowrap}
}

/* --- sections ------------------------------------------------------------- */
section{padding-block:clamp(60px,8vw,118px)}
.doux{background:var(--doux)}
.sombre{background:var(--navy);color:#fff}
.sombre .lead,.sombre .chapo,.sombre p{color:rgba(255,255,255,.76)}
.sombre h1,.sombre h2,.sombre h3,.sombre h4{color:#fff}

/* intro de section, centrée comme chez monday */
.intro{max-width:760px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.intro.gauche{margin-inline:0;text-align:left}
.intro .lead{margin-top:18px}

/* --- hero centré ---------------------------------------------------------- */
.hero{text-align:center;padding-block:clamp(44px,6vw,86px) clamp(40px,5vw,72px)}
/* ⚠ 27ch, et pas 16 : le slogan tient sur DEUX lignes, avec un <br> après « écosystème ».
   Sa seconde ligne — « du monde de la fermeture » — fait 24 caractères ; en dessous de cette
   largeur elle se casse en deux et le slogan retombe sur trois lignes, dont une de deux mots.
   Les autres héros portent eux aussi un <br> explicite et ne bougent pas. */
.hero h1{max-width:27ch;margin-inline:auto}
.hero .lead{max-width:60ch;margin:26px auto 0}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.hero .sous{margin-top:18px;font-size:.92rem;color:var(--gris)}

/* puces de métiers */
.puces{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:36px}
.puces span{font-size:.9rem;font-weight:450;color:var(--gris);
            padding:.58em 1.05em;border:1px solid var(--ligne);border-radius:var(--pilule);background:var(--blanc)}

/* --- cartes --------------------------------------------------------------- */
.carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:clamp(22px,2.6vw,30px)}
.carte.flotte{box-shadow:var(--ombre);border-color:transparent}
.sombre .carte{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14)}

.grille{display:grid;gap:18px}
.grille-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grille-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grille-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.grille-3,.grille-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.grille-2,.grille-3,.grille-4{grid-template-columns:1fr}}

/* numéro d'étape */
.num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
     border-radius:var(--pilule);background:var(--accent);color:var(--accent-encre);
     font-size:.88rem;font-weight:600;margin-bottom:16px}

/* liste à coches */
.coches{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.coches li{position:relative;padding-left:30px;color:var(--gris);font-size:.98rem}
.coches li::before{content:"";position:absolute;left:4px;top:.46em;width:11px;height:6px;
                   border-left:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(-45deg)}
.sombre .coches li::before,:root[data-theme="dark"] .coches li::before{border-color:var(--accent-clair)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .coches li::before{border-color:var(--accent-clair)}}

/* --- bandeau d'appel final ------------------------------------------------ */
.appel{background:var(--navy);color:#fff;border-radius:var(--rayon-lg);
       padding:clamp(36px,5.5vw,72px);text-align:center}
.appel h2{max-width:18ch;margin:0 auto}
.appel p{color:rgba(255,255,255,.76);max-width:56ch;margin:18px auto 0}
.appel .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}

/* --- pied ----------------------------------------------------------------- */
footer{padding-block:40px;border-top:1px solid var(--ligne);margin-top:clamp(60px,8vw,110px)}
footer .rangs{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
              font-size:.9rem;color:var(--gris)}
/* ⚠ LE SLOGAN D'OVAVTECH, et il ne se réécrit pas d'une page à l'autre : une seule phrase,
   au mot près, partout où la marque parle. Une variante — « des métiers », « 1er éco-système » —
   et ce n'est plus un slogan, c'est une formule qu'on reconnaît mal. */
footer .slogan{font-size:1.02rem;font-weight:500;color:var(--encre);letter-spacing:-.012em;
               margin:0 0 18px;line-height:1.3}
footer a{color:var(--gris);text-decoration:none}
footer a:hover{color:var(--encre);text-decoration:underline}