/* ─────────────────────────────────────────────────────────────
   PERIFY — pilotez.css, la page « Ce que vous pilotez » (refonte A, 30/10/2026)
   Chargée après site.css (jetons, chapeau de page, plaque des visuels, liste cochée,
   pastille, bloc « Essai », « Suite », pied). Ici : les quatre modules (texte d'un côté,
   capture de l'autre, en alternance, séparés par un filet), les deux e-mails, l'icône GPS
   et l'encadré « En option ». Tout sur le fond de la page : pas de bande teintée ici,
   les captures sont sur leur plaque.
   ───────────────────────────────────────────────────────────── */

/* ── 1. un module ────────────────────────────────────────── */
.pilotage .section{padding-block:var(--section-gap-s)}
.pilotage .module:first-child{padding-top:var(--space-lg)}
/* l'encadré « En option » a son propre cadre : pas de filet au-dessus */
.pilotage .module-option{border-top:0;padding-block:0}
.module-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--space-3xl)}
.module-inverse .module-texte{order:2}
.module-texte{min-width:0;max-width:34rem}
.module-texte .pastille{margin-bottom:var(--space-md)}
.module-texte h2{font-size:clamp(1.625rem,1.2vw + 1.15rem,2.25rem);line-height:1.15}
.module-texte h2 + p{margin-top:var(--space-lg)}
.module-texte p + p{margin-top:var(--space-sm)}
.module-texte > p:not(.pastille){font-size:var(--text-lead);color:var(--color-ink-2)}
.module-texte strong{color:var(--color-ink)}
.module-visu{min-width:0}
.module-visu .cadre-visuel{padding:var(--space-xl)}
.module-visu .tel{width:min(50%,260px)}
.module-visu .legende{text-align:center}

/* ── 2. les deux e-mails, l'un devant l'autre ────────────── */
.mails{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg);place-items:center;padding:var(--space-xl) !important;align-items:center}
.mails img{width:100%;max-width:240px;border-radius:14px;box-shadow:0 20px 40px -24px var(--color-ombre);filter:none}
.mails img:first-child{justify-self:end;transform:translateY(-14px)}
.mails img:last-child{justify-self:start;transform:translateY(14px)}

/* ── 3. la carte qui se montre près de la boutique : une icône, pas une maquette ── */
.visu-gps{place-items:center !important;padding:var(--space-xl) !important;aspect-ratio:5 / 4;overflow:hidden}
.gps-disque{display:grid;place-items:center;width:min(46%,240px);aspect-ratio:1;border-radius:50%;background:var(--color-paper-3);
  box-shadow:0 24px 40px -24px var(--color-ombre);color:var(--color-ink)}
.gps-disque svg{width:46%;height:auto}

/* ── 4. en option : les invendus ─────────────────────────── */
.option{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:var(--space-xl) var(--space-3xl);
  padding:var(--space-2xl);border:1px solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper-3)}
.option .pastille{margin-bottom:var(--space-md)}
.option h2{font-size:clamp(1.5rem,1vw + 1.1rem,2rem);line-height:1.15}
.option h2 + p{margin-top:var(--space-md);font-size:var(--text-lead);color:var(--color-ink-2)}
.option .liste{margin-top:0}

/* ── 5. tailles d'écran ──────────────────────────────────── */
@media (max-width:60rem){
  .module-grille{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
  .module-inverse .module-texte{order:0}
  .module-texte{max-width:40rem}
  .option{grid-template-columns:minmax(0,1fr);padding:var(--space-xl)}
  /* une seule colonne : la plaque de l'icône prend la hauteur de l'icône (pas un grand bloc vide) */
  .visu-gps{aspect-ratio:auto}
  .gps-disque{width:min(40vw,200px)}
}
@media (max-width:40rem){
  .module-visu .cadre-visuel{padding:var(--space-lg)}
  .module-visu .tel{width:min(66%,240px)}
  .mails{gap:var(--space-sm);padding:var(--space-lg) !important}
  .option{padding:var(--space-lg)}
}