/* ============================================================
   SAMATSA · section 7 — « Choisir son engagement »   [v2]

   Ce qui change par rapport à la v1 :

   1. PLUS DE BLANC ÉBLOUISSANT. Le fond passe en warm light
      #ECE9E3, tiré de l'ivoire mais assombri et réchauffé. La
      suite devient navy → mist → warm light, au lieu de
      navy → blanc → blanc.

   2. LES BADGES NE SONT PLUS TRAVERSÉS. En v1 ils étaient posés
      en absolu SUR le bord supérieur de la carte : la bordure de
      la carte leur passait au travers et les faisait lire comme
      barrés. Ils sont maintenant DANS le flux, en première ligne
      de la carte, avec leur propre place réservée. Aucun élément
      ne peut plus les couper.

   3. UN VRAI TABLEAU. La comparaison en colonnes de paragraphes
      de la v1 devient un `<table>` : en-têtes alignés, filets
      horizontaux, première colonne forte, et des marques oui/non
      qui se lisent d'un coup d'œil.
   ============================================================ */

/* La separation d'avec la section 6 est une MARCHE, pas un fondu :
   le fond change d'un pixel a l'autre et un filet de 1 px le pose.
   Aucun degrade, aucun flou, aucun halo. La section 6 se termine
   desormais sur un seul aplat (la bande des professeurs, qui porte
   aussi la porte secondaire), ce qui evite les trois tons de mist
   empiles qui donnaient l'impression d'un fondu. */
.s7{
  position:relative;
  background:#ECE9E3;
  border-top:1px solid rgba(11,29,51,.1);
  color:var(--ink);
  padding:clamp(4rem,6.2vw,5.5rem) 0 clamp(4rem,6vw,5.6rem);
}
.wrap7{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.s7__head{margin-bottom:clamp(2.2rem,3.4vw,3rem)}
.s7__title{
  margin:0;max-width:19ch;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.05rem,1.2rem + 2.4vw,3.15rem);
  line-height:1.08;letter-spacing:-.024em;
}
.s7__lede{
  margin:clamp(.95rem,1.6vw,1.3rem) 0 0;max-width:62ch;
  font-size:clamp(.98rem,.95rem + .15vw,1.06rem);line-height:1.6;
  color:var(--ink-2);
}

/* ══════════ LES QUATRE CARTES ══════════ */
/* Compactes : nom, descripteur, prix, deux ou trois micro-points,
   CTA. Le détail vit dans le tableau juste dessous — la carte
   sert à décider vite, pas à tout dire. */
.s7__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(.8rem,1.2vw,1.15rem);align-items:stretch;
}
.off{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.15rem,1.6vw,1.5rem) clamp(1.05rem,1.4vw,1.35rem) clamp(1.15rem,1.5vw,1.4rem);
  border:1px solid var(--off-line,rgba(11,29,51,.14));
  border-radius:var(--r-card);
  background:var(--off-bg,rgba(255,255,255,.55));
  transition:border-color .4s,box-shadow .4s,transform .4s cubic-bezier(.2,.8,.2,1);
}
.off:hover{transform:translateY(-3px);box-shadow:0 18px 36px -30px rgba(11,29,51,.6)}
/* le filet d'identité, à l'intérieur du rayon de la carte */
.off::before{
  content:"";position:absolute;left:clamp(1.05rem,1.4vw,1.35rem);right:clamp(1.05rem,1.4vw,1.35rem);top:0;
  height:2px;border-radius:0 0 2px 2px;background:var(--off-accent,transparent);
}

/* La ligne de tête : numéro à gauche, badge à droite. C'est UNE
   ligne de flux, avec sa propre hauteur réservée même quand la
   carte n'a pas de badge — les quatre cartes démarrent donc leur
   nom à la même hauteur, et plus rien ne traverse le badge. */
.off__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;min-height:1.35rem;margin-bottom:.55rem;
}
.off__num{
  font-family:var(--merch);font-weight:500;font-feature-settings:"tnum";
  font-size:.7rem;letter-spacing:.16em;color:var(--off-num,var(--ink-4));
}
.off__badge{
  display:inline-flex;align-items:center;gap:.36rem;
  padding:.22rem .48rem .24rem;border-radius:4px;
  border:1px solid var(--badge-line);background:var(--badge-bg);
  font-family:var(--sans);font-weight:600;
  font-size:.555rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--badge-ink);
  white-space:nowrap;
  /* garde-fous : rien ne doit pouvoir barrer un badge */
  text-decoration:none;
}
.off__badge::before{
  content:"";width:5px;height:5px;flex:none;background:currentColor;opacity:.85;
  clip-path:polygon(0 0,50% 0,50% 50%,100% 50%,100% 100%,50% 100%,50% 50%,0 50%);
}

.off__name{
  margin:0;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.4rem,1.05rem + .8vw,1.8rem);
  line-height:1.1;letter-spacing:-.02em;color:var(--off-title,var(--ink));
}
.off__desc{margin:.45rem 0 0;font-size:.885rem;line-height:1.45;color:var(--off-desc,var(--ink-2))}

.off__price{
  margin:clamp(.9rem,1.4vw,1.15rem) 0 0;
  display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;
  font-family:var(--merch);font-weight:500;font-feature-settings:"tnum";
  font-size:clamp(1.5rem,1.2rem + .7vw,1.9rem);
  letter-spacing:-.01em;color:var(--off-title,var(--ink));
}
.off__price em{
  font-style:normal;font-family:var(--sans);font-weight:400;
  font-size:.78rem;letter-spacing:.02em;color:var(--off-num,var(--ink-3));
}

/* deux ou trois micro-points, jamais la comparaison entière */
.off__pts{margin:.9rem 0 0;display:flex;flex-direction:column;gap:.3rem}
.off__pts li{
  position:relative;padding-left:.85rem;
  font-size:.815rem;line-height:1.42;color:var(--off-micro,var(--ink-3));
}
.off__pts li::before{
  content:"";position:absolute;left:0;top:.58em;width:4px;height:4px;border-radius:1px;
  background:var(--off-accent,var(--ink-4));opacity:.8;
}

.off__cta{margin-top:auto;padding-top:clamp(1.05rem,1.6vw,1.35rem)}
/* Les libellés n'ont pas la même longueur : « Rejoindre L'Annuel »
   tient sur une ligne, « Rejoindre la prochaine Immersion » sur
   aucune largeur de carte raisonnable. Plutôt que de couper la
   copie, les quatre boutons partagent une hauteur minimale. */
.off__cta .btn{
  width:100%;min-height:3.25rem;
  padding:.72rem 1rem;font-size:.785rem;line-height:1.25;text-align:center;
}

/* — 01 · Exploration — */
.off--free{--off-accent:var(--sage);--off-bg:rgba(255,255,255,.46)}
.off--free .off__price{font-size:clamp(1.35rem,1.1rem + .6vw,1.7rem)}
/* — 02 · Immersion : la seule touche de terracotta de la page — */
.off--immersion{
  --off-accent:#C9775A;
  --badge-line:rgba(201,119,90,.38);--badge-bg:rgba(201,119,90,.08);--badge-ink:#A0553C;
}
/* — 03 · L'Annuel : mis en avant par la matière, pas par la taille — */
.off--annuel{
  --off-accent:var(--gold);
  --off-line:rgba(11,29,51,.2);
  --off-bg:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(250,249,246,.86) 100%);
  --badge-line:rgba(56,88,122,.32);--badge-bg:rgba(56,88,122,.07);--badge-ink:#2F4A69;
  box-shadow:0 14px 34px -30px rgba(11,29,51,.65);
}
/* — 04 · Transformation : le degré d'engagement le plus élevé — */
.off--transfo{
  --off-accent:#EFC27B;
  --off-bg:linear-gradient(180deg,#0E2039 0%,#0B1D33 100%);
  --off-line:rgba(217,222,230,.16);
  --off-title:var(--off);--off-desc:rgba(243,241,237,.84);
  --off-num:rgba(217,222,230,.5);--off-micro:rgba(217,222,230,.66);
}
.off--transfo .btn--ghost{background:rgba(255,255,255,.07);color:rgba(243,241,237,.94);border-color:rgba(217,222,230,.28)}
.off--transfo .btn--ghost:hover{background:rgba(255,255,255,.14);color:var(--off);border-color:rgba(217,222,230,.45)}

/* ══════════════════════════════════════════════════════════
   VARIANTE « LANCEMENT IMMERSION » — LA HIÉRARCHIE COMMERCIALE

   Les quatre cartes ne racontent plus le même statut. Ce qui les
   distingue n'est ni leur taille ni leur hauteur : c'est leur
   matière, leur badge, et le poids de leur bouton.

   UN SEUL bouton plein dans toute la section, celui d'Immersion.
   C'est la décision qui porte la hiérarchie : « Commencer
   gratuitement » repasse en bouton fantôme ici, non parce qu'il
   compte moins, mais parce qu'Immersion est ce qu'on peut
   rejoindre maintenant.
   ══════════════════════════════════════════════════════════ */

/* — Immersion : l'offre du lancement —
   Terracotta, la seule couleur d'identité de la page, et une nappe
   très basse de la même teinte. Pas de carte plus haute, pas de
   halo, pas de ruban : la présence vient du contraste, pas du
   volume. */
.off--phare{
  --off-line:rgba(201,119,90,.42);
  --off-bg:linear-gradient(180deg,rgba(201,119,90,.075) 0%,rgba(255,255,255,.62) 62%);
  box-shadow:0 16px 38px -30px rgba(201,119,90,.85);
}
.off--phare::before{height:3px}
.off--phare .btn--ink{
  background:#B0603F;
  box-shadow:0 1px 1px rgba(120,55,34,.2),0 10px 22px -14px rgba(120,55,34,.9);
}
.off--phare .btn--ink:hover{background:#9C5233}

/* la ligne de prochaine édition. Elle n'affiche une date que si les
   données en portent une — sinon elle dit simplement qu'il y en aura
   une, ce qui est vrai, plutôt que d'en inventer une. */
.off__when{
  margin:.5rem 0 0;
  font-size:.78rem;line-height:1.4;color:rgba(11,29,51,.6);
}
.off__when b{
  font-family:var(--merch);font-weight:500;font-feature-settings:"tnum";
  color:var(--ink);
}

/* — la ligne qui remplace un prix —
   Pour une offre non ouverte, l'emplacement du prix n'est pas laissé
   vide : il porte la raison. Volontairement dans une autre graisse
   et une autre taille que les prix, pour qu'aucun œil ne la lise
   comme un tarif. */
.off__price--muet{
  font-family:var(--sans);font-weight:500;
  font-size:1rem;letter-spacing:0;color:rgba(11,29,51,.62);
}

/* — L'Annuel : ouverture prochaine —
   Visible et désirable, jamais grisée. Rien n'est atténué : c'est
   le badge et l'absence de prix qui disent qu'elle n'est pas encore
   ouverte, pas une opacité. */
.off--coming-soon{
  --badge-line:rgba(56,88,122,.34);--badge-bg:rgba(56,88,122,.08);--badge-ink:#2F4A69;
}

/* — Transformation : sur candidature —
   Elle garde son navy et son champagne. Le prix disparaît, la
   sélection le remplace. */
.off--application .off__price--muet{color:rgba(243,241,237,.82)}
.off--application{
  --badge-line:rgba(239,194,123,.34);--badge-bg:rgba(239,194,123,.1);--badge-ink:#E8BE7E;
}

/* ══════════ LE TABLEAU COMPARATIF ══════════ */
.cmp{margin-top:clamp(2rem,2.95vw,2.8rem)}
.cmp__cap{
  margin:0 0 clamp(.9rem,1.4vw,1.2rem);
  font-family:var(--sans);font-weight:600;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(11,29,51,.58);
}

/* La surface du tableau est plus claire que la section : c'est ce
   qui le détache sans lui donner de couleur. Le rayon est porté
   par le conteneur, avec `overflow:hidden`, pour que les filets
   des premières et dernières lignes ne dépassent pas des coins. */
.cmp__box{
  border:1px solid rgba(11,29,51,.13);border-radius:20px;
  background:rgba(252,251,249,.82);overflow:hidden;
}
.cmp__t{width:100%;border-collapse:collapse;table-layout:fixed}
.cmp__t th,.cmp__t td{text-align:left;vertical-align:middle}

.cmp__corner{
  width:26%;
  padding:1.05rem clamp(1rem,1.5vw,1.4rem);
  font-family:var(--sans);font-weight:600;
  font-size:.685rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(11,29,51,.58);
}
.cmp__h{
  padding:1.05rem .85rem;
  border-left:1px solid rgba(11,29,51,.07);
  font-weight:500;line-height:1.25;
}
.cmp__h-n{display:block;font-size:.93rem;color:var(--ink)}
.cmp__h-p{
  display:block;margin-top:.16rem;
  font-family:var(--merch);font-feature-settings:"tnum";
  font-size:.735rem;color:var(--ink-3);
}
/* L'Annuel garde son rappel « cœur du système » : un filet en tête
   de colonne, pas un aplat sur toute la hauteur. */
.cmp__h--annuel{box-shadow:inset 0 3px 0 var(--gold)}
.cmp__t thead tr{border-bottom:1px solid rgba(11,29,51,.16)}

.cmp__k{
  padding:1.05rem clamp(1rem,1.5vw,1.4rem);
  font-weight:500;font-size:.875rem;line-height:1.35;color:var(--ink);
}
.cmp__c{
  padding:1.05rem .85rem;
  border-left:1px solid rgba(11,29,51,.07);
}
.cmp__t tbody tr{border-top:1px solid rgba(11,29,51,.075)}
/* alternance très basse : elle guide l'œil sur la ligne sans se
   voir comme un décor */
.cmp__t tbody tr:nth-child(even){background:rgba(11,29,51,.018)}
.cmp__txt{font-size:.855rem;line-height:1.38;color:var(--ink-2)}

/* — les marques oui / non —
   Fonctionnelles, pas décoratives : elles sont là pour qu'on
   comprenne l'inclusion d'un coup d'œil. Le symbole diffère
   (coche / croix) AUTANT que la couleur, et un texte accessible
   accompagne chaque marque : l'information n'est jamais portée
   par la seule couleur. */
.mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%}
.mark svg{width:13px;height:13px}
.mark i{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.mark--yes{color:#3F7355;background:rgba(63,115,85,.11)}
.mark--no{color:#A85F5F;background:rgba(168,95,95,.09)}

/* — une cellule « inclus » qui porte une precision —
   La coche reste identique aux autres : ce qui s'ajoute est une
   mention, pas un second symbole. Deux coches cote a cote diraient
   « deux choses incluses », pas « deux fois » — c'est le mot qui
   porte la quantite, sans ambiguite possible. */
.cmp__ok{display:inline-flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.cmp__note{font-size:.79rem;line-height:1.3;color:var(--ink-2);white-space:nowrap}

/* la vue mobile du tableau n'existe pas en desktop */
.cmpm{display:none}

/* ══════════ L'ACCÈS MASTERCLASS SEUL ══════════ */
/* Pas une cinquième colonne, pas une cinquième carte : un encart
   sous le tableau, dans une valeur plus basse que tout le reste. */
.s7__solo{
  margin-top:clamp(1.4rem,2.2vw,1.9rem);
  padding:clamp(1rem,1.6vw,1.35rem) clamp(1.1rem,1.6vw,1.4rem);
  border:1px solid rgba(11,29,51,.11);border-radius:14px;
  background:rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(.9rem,2.5vw,2.5rem);flex-wrap:wrap;
}
.s7__solo-txt{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;max-width:74ch}
.s7__solo-k{
  font-family:var(--sans);font-weight:600;
  font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(11,29,51,.6);
}
.s7__solo-price{
  font-family:var(--merch);font-weight:500;font-feature-settings:"tnum";
  font-size:.93rem;color:var(--ink);
}
.s7__solo-p{font-size:.85rem;line-height:1.5;color:var(--ink-3)}
.s7__solo-link{
  display:inline-flex;align-items:center;gap:.5rem;flex:none;
  font-size:.85rem;font-weight:500;color:var(--steel);
  border-bottom:1px solid rgba(56,88,122,.3);transition:color .3s,border-color .3s;
}
.s7__solo-link i{font-style:normal;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.s7__solo-link:hover{color:var(--ink);border-color:rgba(11,29,51,.45)}
.s7__solo-link:hover i{transform:translateX(4px)}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1099px){
  .s7__grid{grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,1.8vw,1.3rem)}
}
@media (max-width:1099px){
}
@media (max-width:919px){
  /* Le tableau à cinq colonnes disparaît : à cette largeur il
     faudrait zoomer pour le lire. On garde EXACTEMENT les mêmes
     données, présentées une expérience à la fois. */
  .cmp__box{display:none}
  .cmpm{display:block}

  .cmpm__tabs{
    display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
    padding-bottom:.15rem;margin-bottom:.9rem;
  }
  .cmpm__tabs::-webkit-scrollbar{display:none}
  .cmpm__tab{
    flex:none;padding:.5rem .8rem;border-radius:9px;
    border:1px solid rgba(11,29,51,.14);background:rgba(255,255,255,.5);
    font-size:.82rem;font-weight:500;color:var(--ink-2);white-space:nowrap;
    transition:background .25s,border-color .25s,color .25s;
  }
  .cmpm__tab[aria-selected="true"]{
    background:var(--navy);border-color:var(--navy);color:var(--off);
  }
  .cmpm__tab:focus-visible{outline:2px solid var(--steel);outline-offset:2px}

  .cmpm__panel{
    border:1px solid rgba(11,29,51,.13);border-radius:16px;
    background:rgba(252,251,249,.82);padding:.35rem 1rem .9rem;
  }
  .cmpm__price{
    display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
    margin:0;padding:.85rem 0;border-bottom:1px solid rgba(11,29,51,.16);
  }
  .cmpm__price b{font-weight:500;font-size:.98rem}
  .cmpm__price span{
    font-family:var(--merch);font-weight:500;font-feature-settings:"tnum";
    font-size:.9rem;color:var(--ink-2);
  }
  .cmpm__row{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:.72rem 0;border-top:1px solid rgba(11,29,51,.07);
  }
  .cmpm__row:first-of-type{border-top:0}
  .cmpm__k{font-size:.85rem;line-height:1.35;color:var(--ink-2)}
  /* Les valeurs de Transformation sont longues (« Hebdo, individuel
     ou tres petit comite + reponses garanties ») : sans min-width:0
     ni retour a la ligne, la cellule refusait de retrecir et poussait
     la page de 71 px hors de l ecran. */
  .cmpm__v{flex:1 1 auto;min-width:0;text-align:right;overflow-wrap:anywhere}
  .cmpm__k{flex:0 1 auto;min-width:0}
  .cmpm__v .cmp__txt{font-size:.85rem;color:var(--ink);font-weight:500}
}
@media (max-width:599px){
  .s7__grid{grid-template-columns:1fr}
  .s7__solo{flex-direction:column;align-items:flex-start;gap:.85rem}
}

/* Precision locale de la cellule Diagnostic / Annuel. */
.cmp__detail{display:block;margin-top:.2rem;font-family:var(--sans);font-size:.75rem;font-weight:400;line-height:1.3;color:var(--ink-2)}