/* Vitrine ITGATE — écrit par etape70_vitrine_itgate.sh.
   Aucune police ni ressource distante : rien ne part chez un tiers. */
:root {
  --encre:   #0d1b2a;
  --papier:  #ffffff;
  --teinte:  #f4f8fb;
  --accent:  #0f6fb5;
  --gris:    #53657a;
  --trait:   #dde6ee;
  --large:   1100px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--encre); background: var(--papier);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.rang { max-width: var(--large); margin: 0 auto; padding: 0 24px; }
.rang.etroit { max-width: 760px; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin: 0 0 .6em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 .5em; }
h3 { font-size: 1.12rem; margin: 0 0 .4em; }
p  { margin: 0 0 1em; }
a  { color: var(--accent); }
section { padding: 76px 0; }
section.teinte { background: var(--teinte); border-block: 1px solid var(--trait); }
.intro { color: var(--gris); max-width: 62ch; font-size: 1.05rem; }
.surtitre { text-transform: uppercase; letter-spacing: .09em; font-size: .76rem;
            font-weight: 700; color: var(--accent); margin: 0 0 .5em; }
.note { color: var(--gris); font-size: .92rem; }

/* Lien d'évitement : visible seulement au clavier. */
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 12px; top: 12px; z-index: 10; background: var(--encre);
                   color: #fff; padding: 10px 16px; border-radius: 6px; }

.barre { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.94);
         backdrop-filter: blur(8px); border-bottom: 1px solid var(--trait); }
.barre .rang { display: flex; align-items: center; justify-content: space-between;
               gap: 24px; min-height: 68px; flex-wrap: wrap; }
.logo { font-weight: 700; font-size: 1.28rem; text-decoration: none;
        color: var(--encre); letter-spacing: -.02em; }
.logo span { color: var(--accent); }
.logo small { display: block; font-size: .58rem; font-weight: 600; color: var(--gris);
              letter-spacing: .18em; text-transform: uppercase; margin-top: -2px; }
.barre nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.barre nav a { text-decoration: none; color: var(--encre); font-size: .96rem;
               font-weight: 500; }
.barre nav a:hover { color: var(--accent); }

.bouton { display: inline-block; background: var(--accent); color: #fff;
          text-decoration: none; font-weight: 600; font-size: .97rem;
          padding: 11px 20px; border-radius: 7px; border: 1px solid var(--accent); }
.bouton:hover { background: #0c5c98; border-color: #0c5c98; }
.bouton.creux { background: transparent; color: var(--accent); }
.bouton.creux:hover { background: #e7f1f9; }
.barre nav a.bouton { color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }

.heros { padding: 96px 0 84px;
         background: linear-gradient(170deg, #f7fafd 0%, #eaf2f9 100%);
         border-bottom: 1px solid var(--trait); }
.heros .rang { max-width: 880px; }
.chapeau { font-size: 1.16rem; color: var(--gris); max-width: 60ch; }

.grille { display: grid; gap: 22px; margin-top: 2.4em;
          grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.carte { background: var(--papier); border: 1px solid var(--trait);
         border-radius: 10px; padding: 26px 24px; }
.carte p { margin: 0; color: var(--gris); font-size: .97rem; }

.duo { display: grid; gap: 48px; align-items: start;
       grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.points { list-style: none; margin: 0; padding: 26px 24px; background: var(--papier);
          border: 1px solid var(--trait); border-radius: 10px; }
.points li { padding: 11px 0 11px 30px; position: relative; font-size: .97rem;
             border-bottom: 1px solid var(--trait); }
.points li:last-child { border-bottom: 0; }
.points li::before { content: "✓"; position: absolute; left: 0; top: 11px;
                     color: var(--accent); font-weight: 700; }

.coords { list-style: none; margin: 1.4em 0 1.6em; padding: 0; }
.coords li { padding: 10px 0; border-bottom: 1px solid var(--trait); }

/* Formulaire de /contact — servi par la VM applicative, habillé ici : une
   seule feuille de style pour les deux pages, donc rien à resynchroniser. */
.formulaire { margin-top: 2em; }
.formulaire p { margin: 0 0 1.3em; }
.formulaire label { display: block; font-weight: 600; font-size: .95rem;
                    margin-bottom: .4em; }
.formulaire label small { font-weight: 400; color: var(--gris); }
.formulaire input, .formulaire textarea {
  width: 100%; font: inherit; color: inherit; padding: 11px 13px;
  border: 1px solid #c3d2e0; border-radius: 7px; background: #fff; }
.formulaire input:focus, .formulaire textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.formulaire textarea { resize: vertical; min-height: 150px; }
.formulaire button { cursor: pointer; font: inherit; }

/* Piège à robots : sorti de l'écran plutôt que display:none — certains robots
   ignorent ce qui n'est pas affiché. Le conteneur porte aria-hidden pour qu'un
   lecteur d'écran ne le propose jamais : un visiteur aveugle qui le
   remplirait verrait sa demande jetée en silence. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px;
         overflow: hidden; }

.drapeau { padding: 13px 16px; border-radius: 7px; font-weight: 500;
           margin-bottom: 1.4em; }
.drapeau.ok { background: #e3f5e8; border: 1px solid #a8ddb8; color: #17532a; }
.drapeau.ko { background: #fdeaea; border: 1px solid #f0b5b5; color: #8a1c1c; }

/* Marqueur de relecture : impossible à publier sans le voir. */
mark.relire { background: #ffe9a8; color: #6b4a00; font-weight: 700;
              font-size: .78em; text-transform: uppercase; letter-spacing: .06em;
              padding: 2px 7px; border-radius: 4px; }

footer { background: var(--encre); color: #9fb3c6; padding: 34px 0;
         font-size: .92rem; }
footer .rang { display: flex; justify-content: space-between; gap: 20px;
               flex-wrap: wrap; align-items: center; }
footer p { margin: 0; }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer a { color: #cfe0ee; text-decoration: none; }
footer a:hover { text-decoration: underline; }

@media (max-width: 820px) {
  .duo { grid-template-columns: 1fr; gap: 32px; }
  section { padding: 56px 0; }
  .heros { padding: 64px 0 56px; }
  .barre .rang { min-height: 60px; padding-block: 10px; }
}