/* ============================================================
   PARISI CYBER — Vitrine /digital (VIT-01, spec §19.9)
   ============================================================
   Complément de style.css, jamais un remplacement : la page
   reprend la navigation, le hero, les cartes, la méthode, les
   garanties, la FAQ et le pied de page de la vitrine cyber, avec
   leurs classes. Ce fichier ne porte que ce qui n'existait pas.

   Aucun nouveau jeton de couleur : tout passe par ceux de
   style.css, dont les contrastes sont déjà mesurés (en-tête des
   jetons). Aucune ressource externe (CSP `default-src 'self'`).
   ============================================================ */

/* ── Lien d'évitement ────────────────────────────────────
   Hors écran jusqu'au focus clavier : le premier Tab de la page
   propose de sauter la navigation.                           */
.lien-evitement {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.lien-evitement:focus-visible { top: 12px; outline-color: var(--accent-bright); }

/* ── 2. Tâches automatisables ────────────────────────────
   `min(100%, …)` : à 360 px de large, la colonne ne dépasse
   jamais le conteneur (aucun défilement horizontal).         */
.taches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 22px;
  margin-top: 56px;
}
.tache-card {
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  padding: 28px;
  border-top: 3px solid var(--accent);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow .2s;
}
.tache-card:hover { box-shadow: var(--shadow-md); }
.tache-titre {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -.012em;
}
.tache-avant,
.tache-apres {
  font-size: .94rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.tache-avant { color: var(--text-2); }
.tache-apres { color: var(--text-1); }
.tache-etiquette {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 2px;
}
.tache-apres .tache-etiquette { color: var(--accent); }

/* Relance en fin de section : une ligne, centrée. */
.digital-suite {
  margin-top: 36px;
  text-align: center;
  color: var(--text-2);
  font-size: 1rem;
}

/* ── 3. Offres ───────────────────────────────────────────
   Les cartes sont des .service-card ; seuls la liste « ce que
   vous obtenez » et le lien d'action sont propres à la page.  */
.services-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.service-desc strong { color: var(--text-0); font-weight: 600; }
.offre-obtenez {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.offre-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.offre-liste li {
  position: relative;
  padding-left: 20px;
  font-size: .92rem;
  color: var(--text-2);
  line-height: 1.55;
  text-wrap: pretty;
}
.offre-liste li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.offre-cta {
  margin-top: 14px;
  display: inline-block;
  align-self: flex-start;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.offre-cta:hover { text-decoration-thickness: 2px; }

/* ── 4. Différenciateur sécurité ─────────────────────── */
.securite-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 16px 40px;
  margin-top: 44px;
}
.securite-liste li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-1);
  line-height: 1.6;
  text-wrap: pretty;
}
.securite-liste .ico {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--green);
}

/* ── 5. Méthode en cinq étapes ───────────────────────────
   `.process-steps` est pensé pour quatre étapes. Ici c'est une
   liste ordonnée (l'ordre fait sens) : on retire la puce, et
   l'on passe à cinq colonnes sur grand écran.                */
.methode-etapes { list-style: none; }
@media (min-width: 1024px) {
  .methode-etapes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .methode-etapes .process-step { padding: 0 14px; }
}

/* ── 6. Garanties ────────────────────────────────────────
   `minmax(300px, …)` de style.css déborde sous 348 px (320 px =
   zoom 400 % d'un écran de 1280, WCAG 1.4.10). Même correctif
   que les autres grilles de la page. Les titres sont des <h3>. */
.garanties-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.garantie-title { font-size: 1rem; }

/* ── 8. Formulaire de demande (VIT-02) ───────────────────
   La carte est une .contact-form ; les champs gardent les
   classes .form-* de style.css. Ne s'ajoute ici que ce que le
   formulaire à deux parcours demande en plus.                 */
.demande-infos { display: flex; flex-direction: column; gap: 22px; }
.contact-item-val a { overflow-wrap: anywhere; }

.demande-form fieldset {
  border: 0;
  min-width: 0;
}
.demande-type { margin-bottom: 22px; }
.demande-type legend { margin-bottom: 10px; }
.demande-type-choix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px;
}
/* Toute l'étiquette est cliquable : pas de zone morte entre le
   bouton radio et son texte. */
.demande-type-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: var(--bg-card-alt);
  cursor: pointer;
  font-size: .94rem;
  font-weight: 600;
  color: var(--text-0);
  line-height: 1.4;
  transition: border-color .2s, background-color .2s;
}
.demande-type-option input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent);
}
.demande-type-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.demande-type-option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.demande-type-option input:focus-visible { outline: none; }

.demande-legende {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 8px 0 14px;
}
.champ-aide {
  font-size: .82rem;
  color: var(--text-3);
  line-height: 1.5;
}
.champ-facultatif { font-weight: 400; color: var(--text-3); }
.demande-textarea-courte { min-height: 84px; }

/* `appearance: none` (style.css) retire la flèche native : sans
   elle, « Choisir » se lit comme un champ texte. Chevron tracé
   en bordure, comme la flèche de .form-submit — aucune image.  */
.demande-select { position: relative; }
.demande-select .form-select { padding-right: 42px; }
.demande-select::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: solid var(--text-2);
  border-width: 0 2px 2px 0;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Erreur : texte ET bordure — la couleur seule ne suffit pas. */
.champ-erreur {
  font-size: .84rem;
  font-weight: 600;
  color: var(--red);
  line-height: 1.45;
}
.demande-form [aria-invalid="true"] {
  border-color: var(--red);
  border-width: 2px;
}

/* Champ piège : hors écran, jamais `display: none` — certains
   robots sautent les champs masqués ainsi. */
.champ-piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.demande-carte { position: relative; }

.demande-form .form-submit { margin-top: 6px; }
.demande-form .form-submit:disabled { cursor: progress; opacity: .7; transform: none; }
.demande-rgpd { text-align: left; }

.demande-statut:empty { display: none; }
.demande-statut {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text-0);
  border-left: 3px solid var(--accent);
  background: var(--accent-dim);
}
.demande-statut-ok { border-left-color: var(--green); }
.demande-statut-echec { border-left-color: var(--red); background: var(--bg-card-alt); }
.demande-statut:focus-visible { outline-offset: 2px; }
.demande-statut strong { white-space: nowrap; }
.demande-noscript { color: var(--text-1); line-height: 1.6; }

@media (max-width: 700px) {
  .tache-card { padding: 24px; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { width: 100%; text-align: center; }
}