/* ==========================================================================
   QWANTIS.GROUP — système de design « fiche programme »
   --------------------------------------------------------------------------
   Principe : le site est mis en page comme un document de formation bien
   tenu. Un filet de marge court sur toute la hauteur ; les titres viennent
   s'y adosser ; le contenu se suspend à droite. Les formations sont des
   lignes de spécification séparées par des filets, jamais des cartes.
   ========================================================================== */

:root{
  /* Encres et papiers */
  --encre:#0b1b33;          /* texte principal, bleu nuit franc */
  --encre-2:#3d4c66;        /* texte secondaire */
  --encre-3:#66738c;        /* mentions, unités */
  --papier:#ffffff;
  --craie:#f6f5f1;          /* fond de section, neutre légèrement chaud */
  --trait:#e4e2db;          /* filets */
  --trait-fort:#c9c6bd;

  /* Marque */
  --bleu:#2b59ff;
  --bleu-fonce:#1c3fc4;
  --teal:#00a6a6;

  /* Mesures */
  --marge:clamp(1.25rem, 4vw, 3.5rem);
  --cadre:1180px;
  --logo:210px;              /* largeur du logo dans l'en-tête */
  --rail:clamp(0px, 8vw, 132px);   /* décalage du filet de marge */

  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--sans);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bleu);outline-offset:3px}
.invisible{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Échelle typographique ─────────────────────────────────────────────
   14 · 17 · 20 · 26 · 34 · 46 · 62 — progression proche de 1.33         */
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.032em;line-height:1.08}
h1{font-size:clamp(2.4rem,6vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.55rem)}
h3{font-size:1.22rem;letter-spacing:-.02em;line-height:1.25}
h4{font-size:1.05rem;letter-spacing:-.015em}
p{margin:0}
a{color:var(--bleu);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--bleu-fonce)}

.plomb{color:var(--encre-2);max-width:64ch;font-size:1.12rem}
.menu-mention{color:var(--encre-3);font-size:.95rem}
.code{font-family:var(--mono);font-size:.82rem;letter-spacing:.02em;color:var(--encre-3)}

/* ── Ossature ─────────────────────────────────────────────────────── */
.cadre{width:min(var(--cadre),calc(100% - 2*var(--marge)));margin-inline:auto}

/* Le filet de marge : une seule ligne verticale, sur toute la page */
.rail{position:relative}
.rail::before{
  content:"";position:absolute;top:0;bottom:0;left:var(--rail);
  width:1px;background:var(--trait);pointer-events:none;
}
.suspendu{padding-left:calc(var(--rail) + clamp(1.1rem,2.6vw,2.4rem))}

section{padding:clamp(3.2rem,7vw,5.4rem) 0}
.fond-craie{background:var(--craie);border-block:1px solid var(--trait)}

/* ── En-tête ──────────────────────────────────────────────────────── */
.bandeau{
  position:sticky;top:0;z-index:60;
  background:var(--papier);          /* suit le mode de confort choisi */
  border-bottom:1px solid var(--trait);
}
.bandeau-ligne{display:flex;align-items:center;justify-content:space-between;gap:.9rem;min-height:86px}
.enseigne{display:block;line-height:0;flex:0 0 auto}   /* jamais compressé par le menu */
.enseigne img{width:var(--logo);max-width:none}
.menu{display:flex;align-items:center;gap:.1rem}
.menu a{
  padding:.42rem .52rem;border-radius:7px;text-decoration:none;color:var(--encre);
  font-size:.92rem;font-weight:600;white-space:nowrap;
}
.menu a:hover{background:var(--craie)}
.menu a[aria-current]{box-shadow:inset 0 -2px 0 var(--bleu)}
.plier{
  display:none;padding:.5rem .8rem;border:1px solid var(--trait-fort);border-radius:8px;
  background:var(--papier);font-size:.92rem;font-weight:650;cursor:pointer;
}

/* ── Actions ──────────────────────────────────────────────────────── */
.action{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.78rem 1.3rem;border-radius:9px;font-size:.97rem;font-weight:700;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s;
}
.action-pleine{background:var(--bleu);color:#fff}
.action-pleine:hover{background:var(--bleu-fonce);color:#fff}
.action-trait{border-color:var(--trait-fort);color:var(--encre);background:var(--papier)}
.action-trait:hover{border-color:var(--encre);background:var(--craie);color:var(--encre)}
.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}

/* ── Ouverture ────────────────────────────────────────────────────── */
.ouverture{padding:clamp(3.4rem,8vw,6rem) 0 clamp(2.4rem,5vw,3.4rem)}
.ouverture h1{max-width:19ch}
.ouverture .plomb{margin-top:1.4rem}
.situation{
  margin-top:2.6rem;padding-top:1.1rem;border-top:1px solid var(--trait);
  display:flex;flex-wrap:wrap;gap:.4rem 2.2rem;color:var(--encre-3);font-size:.93rem;
}

/* ── L'index du catalogue : la pièce maîtresse ────────────────────── */
.index-titre{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:.9rem;border-bottom:2px solid var(--encre);
}
.index-titre h2{font-size:clamp(1.2rem,2.4vw,1.5rem)}
.index-titre span{color:var(--encre-3);font-size:.93rem}

.ligne{
  display:grid;grid-template-columns:7.2rem minmax(0,1fr) 3.6rem 10.5rem;
  gap:1.4rem;align-items:baseline;
  padding:1.15rem 0;border-bottom:1px solid var(--trait);
  text-decoration:none;color:inherit;
}
.ligne:hover{background:var(--craie)}
.ligne:hover .ligne-titre{color:var(--bleu)}
.ligne-titre{display:block;font-weight:700;font-size:1.06rem;letter-spacing:-.015em}
.ligne-detail{display:block;color:var(--encre-2);font-size:.94rem;margin-top:.25rem;max-width:58ch}
.ligne-duree{font-family:var(--mono);font-size:.86rem;color:var(--encre-2);white-space:nowrap}
.ligne-mode{color:var(--encre-3);font-size:.9rem}

/* ── Deux activités ───────────────────────────────────────────────── */
.deux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem)}
.volet{border-top:2px solid var(--encre);padding-top:1.3rem}
.volet h3{margin-bottom:.6rem}
.volet p{color:var(--encre-2);font-size:1rem}
.liste{list-style:none;padding:0;margin:1.2rem 0 0}
.liste li{
  padding:.62rem 0;border-bottom:1px solid var(--trait);
  font-size:.97rem;display:flex;gap:.9rem;align-items:baseline;
}
.liste li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--teal);transform:translateY(-2px)}

/* ── Séquence de la méthode (numérotation justifiée : c'est un ordre) ── */
.sequence{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:2.2rem}
.etape{padding:1.4rem 1.3rem 1.5rem;border-top:2px solid var(--trait);border-left:1px solid var(--trait)}
.etape:first-child{border-left:0;padding-left:0}
.etape:first-child{border-top-color:var(--bleu)}
.etape .rang{font-family:var(--mono);font-size:.82rem;color:var(--bleu);font-weight:600}
.etape h3{margin:.45rem 0 .45rem;font-size:1.05rem}
.etape p{font-size:.94rem;color:var(--encre-2)}

/* ── Chiffres tenus ───────────────────────────────────────────────── */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--trait);
  border:1px solid var(--trait);margin-top:2.4rem}
.chiffre{background:var(--papier);padding:1.3rem 1.4rem}
.chiffre b{display:block;font-size:2.1rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.chiffre span{display:block;margin-top:.45rem;color:var(--encre-3);font-size:.9rem}

/* ── Citation ─────────────────────────────────────────────────────── */
.citation{border-left:3px solid var(--bleu);padding-left:1.5rem;max-width:58ch}
.citation p{font-size:1.24rem;line-height:1.5;letter-spacing:-.015em}
.citation footer{margin-top:.9rem;color:var(--encre-3);font-size:.94rem}

/* ── Appel final ──────────────────────────────────────────────────── */
.appel{background:var(--encre);color:#fff;padding:clamp(2.2rem,5vw,3.6rem);border-radius:4px}
.appel h2{color:#fff;max-width:20ch}
.appel p{color:#b9c6da;max-width:56ch;margin-top:1rem}
.appel .action-trait{border-color:rgba(255,255,255,.35);color:#fff;background:transparent}
.appel .action-trait:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}

/* ── Pied ─────────────────────────────────────────────────────────── */
.pied{border-top:1px solid var(--trait);padding:3rem 0 2.4rem;font-size:.95rem;color:var(--encre-2)}
.pied-grille{display:grid;grid-template-columns:1.4fr .8fr .8fr .9fr;gap:2rem}
.pied img{width:min(var(--logo),190px)}
.pied h2{font-size:.95rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.8rem}
.pied a{display:block;color:var(--encre-2);text-decoration:none;padding:.2rem 0}
.pied a:hover{color:var(--bleu);text-decoration:underline}
.pied-bas{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid var(--trait);
  color:var(--encre-3);font-size:.88rem}

/* ── Adaptations ──────────────────────────────────────────────────── */
@media(max-width:980px){
  .deux{grid-template-columns:1fr}
  .sequence{grid-template-columns:1fr 1fr}
  .etape:nth-child(3){border-left:0;padding-left:0}
  .pied-grille{grid-template-columns:1fr 1fr}
}
@media(max-width:1180px){
  :root{--rail:0px}
  .rail::before{display:none}
  .suspendu{padding-left:0}
  .plier{display:inline-flex}
  .enseigne img{width:min(var(--logo),178px)}
  .menu{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:.1rem;padding:.9rem var(--marge) 1.2rem;background:var(--papier);
    border-bottom:1px solid var(--trait);box-shadow:0 12px 26px rgba(11,27,51,.09);
  }
  .menu.ouvert{display:flex}
  .menu .action{justify-content:center;margin-top:.5rem}
  .ligne{grid-template-columns:1fr;gap:.35rem}
  .ligne-duree,.ligne-mode{font-size:.88rem}
  .chiffres{grid-template-columns:1fr 1fr}
  .sequence{grid-template-columns:1fr}
  .etape{border-left:0;padding-left:0}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}
@media print{
  .bandeau,.plier{display:none}
  body{font-size:11pt}
  .appel{background:#fff;color:var(--encre);border:1px solid var(--trait)}
  .appel h2,.appel p{color:var(--encre)}
}

/* ── Scènes projetées : « voilà ce qui arrive, et quand » ──────────── */
.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:2.2rem}
.scene{padding:1.5rem 1.4rem 1.6rem;border-top:2px solid var(--trait);border-left:1px solid var(--trait)}
.scene:first-child{border-left:0;padding-left:0;border-top-color:var(--teal)}
.scene .quand{font-family:var(--mono);font-size:.8rem;color:var(--teal);font-weight:600}
.scene h3{margin:.5rem 0 .55rem;font-size:1.08rem}
.scene p{font-size:.96rem;color:var(--encre-2)}

/* Deux parcours en vis-à-vis */
.parcours{border-top:2px solid var(--encre);padding-top:1.4rem}
.parcours > .quoi{font-family:var(--mono);font-size:.8rem;color:var(--bleu);font-weight:600}
.parcours h2{font-size:1.5rem;margin:.4rem 0 .7rem}

/* Exigences réciproques */
.pacte{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--trait);margin-top:2rem}
.pacte > div{padding:1.5rem}
.pacte > div + div{border-left:1px solid var(--trait)}
.pacte h3{font-size:1.05rem;margin-bottom:.8rem}

@media(max-width:860px){
  .scenes{grid-template-columns:1fr}
  .scene{border-left:0;padding-left:0}
  .pacte{grid-template-columns:1fr}
  .pacte > div + div{border-left:0;border-top:1px solid var(--trait)}
}

/* ── Page Tarifs : formules et catalogue à la carte ────────────────── */
.offres{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.2rem;align-items:start}
.offre{border:1px solid var(--trait);background:var(--papier);padding:1.6rem;position:relative}
.offre-reco{border:2px solid var(--bleu)}
.offre-signature{border:2px solid var(--encre);background:var(--craie)}
.etiquette{position:absolute;top:-11px;left:1.4rem;background:var(--bleu);color:#fff;
  font-size:.72rem;font-weight:700;padding:.22rem .7rem;border-radius:999px}
.offre-signature .etiquette{background:var(--encre)}
.rang-offre{font-family:var(--mono);font-size:.78rem;color:var(--encre-3);font-weight:600}
.offre h3{font-size:1.28rem;margin:.35rem 0 .5rem}
.sous-offre{font-size:.94rem;color:var(--encre-2);min-height:4.2em}
.prix-offre{margin:1.1rem 0;padding:1rem 0;border-block:1px solid var(--trait)}
.prix-offre b{display:block;font-size:1.85rem;font-weight:800;letter-spacing:-.04em;line-height:1.05}
.prix-offre small{display:block;margin-top:.4rem;font-size:.85rem;color:var(--encre-3);font-weight:600}
.apartir{display:block;font-size:.82rem;font-weight:600;letter-spacing:0;color:var(--encre-3);margin-bottom:.15rem}
.offre-reco .prix-offre b{color:var(--bleu)}
.offre .liste li{font-size:.92rem}

.carte-ligne{display:flex;justify-content:space-between;gap:1.6rem;align-items:baseline;
  padding:.95rem 0;border-bottom:1px solid var(--trait)}
.carte-ligne b{display:block;font-size:1rem;font-weight:700;letter-spacing:-.012em}
.carte-ligne em{font-style:normal;display:block;font-size:.9rem;color:var(--encre-2);margin-top:.15rem;max-width:62ch}
.carte-prix{font-family:var(--mono);font-size:1.02rem;font-weight:600;white-space:nowrap;color:var(--encre)}
.carte-prix small{display:block;font-size:.8rem;color:var(--encre-3);font-weight:500;margin-top:.15rem}
.carte-ligne.total{border-bottom:0;border-top:2px solid var(--encre);margin-top:.4rem;padding-top:1rem}
.carte-ligne.total .carte-prix{font-size:1.28rem;font-weight:800;color:var(--bleu)}

@media(max-width:1000px){ .offres{grid-template-columns:1fr} .sous-offre{min-height:0} }
@media(max-width:600px){ .carte-ligne{flex-direction:column;gap:.35rem} }