/* ==========================================================================
   L'offre en deux phases, 21 septembre 2026, sur demande

   L'en-tête reprend la maquette fournie (« Desktop - 3 ») : deux filets
   verticaux qui s'éteignent vers le haut, un filet horizontal qui court sur
   toute la largeur et s'efface aux deux bouts, le label en haut à gauche, à
   droite une ligne d'aide au-dessus de deux flèches rondes dans une pilule.
   Le H2 reste le nôtre. Valeurs de la maquette : filets à 12 % d'encre,
   retrait de 25 px dans le cadre, pilule #F5F5F5 à 4 px de ses boutons,
   boutons de 50 px à liseré de 12 %, ombre en six couches, flèche éteinte
   à 35 %.

   Dessous : la frise en Gantt (site.js, bloc « 1 octies »). Fichier à part
   pour ne pas croiser les retouches d'audit.css, chargé juste après lui.
   ========================================================================== */
.plan { display: grid; gap: calc(var(--spacing) * 12); }

.plan-tete {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--spacing) * 40);
  padding: 0 calc(var(--spacing) * 25) calc(var(--spacing) * 20);
  border-inline: 1px solid transparent;
  border-image: linear-gradient(to bottom, rgb(var(--encre) / 0), rgb(var(--encre) / .12)) 1;
  margin-block-end: calc(var(--spacing) * 12);
}
.plan-tete::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline: calc(50% - 50vw + var(--barre-defilement, 0px) / 2);
  block-size: 1px;
  background: linear-gradient(90deg,
    rgb(var(--encre) / 0),
    rgb(var(--encre) / .12) 5%,
    rgb(var(--encre) / .12) 95%,
    rgb(var(--encre) / 0));
  pointer-events: none;
}
.plan-tete-titre { display: grid; gap: calc(var(--spacing) * 16); justify-items: start; min-inline-size: 0; }
/* Pour que la section tienne dans un écran, sur demande : le H2 suit la
   hauteur de la fenêtre et tient sur deux lignes au bureau. */
@media (min-width: 1024px) {
  .plan-tete h2 { font-size: clamp(2.25rem, 5.4svh, var(--h2)); max-inline-size: none; }
}
.plan-tete-nav {
  display: grid;
  /* Les flèches se posent au ras du filet gris du bas, sur demande. */
  align-content: end;
  justify-items: start;
  gap: calc(var(--spacing) * 16);
  padding-inline-end: calc(var(--spacing) * 8);
}
.plan-tete-nav[hidden] { display: none; }
.plan-fleches {
  display: inline-flex;
  gap: calc(var(--spacing) * 8);
  padding: calc(var(--spacing) * 4);
  border-radius: var(--r-full);
  background: #F5F5F5;
}
.plan-fleche {
  display: grid;
  place-items: center;
  inline-size: 50px;
  block-size: 50px;
  padding: 0;
  border: 1px solid rgb(var(--encre) / .12);
  border-radius: 50%;
  background: var(--blanc);
  color: var(--noir);
  cursor: pointer;
  box-shadow:
    0 0 0 0 rgb(9 23 78 / .04),
    0 1px 1px rgb(9 23 78 / .04),
    0 3px 3px rgb(9 23 78 / .04),
    0 6px 6px rgb(9 23 78 / .04),
    0 12px 12px rgb(9 23 78 / .04),
    0 24px 24px rgb(9 23 78 / .04);
  transition: opacity var(--t-micro) var(--ease-out), background-color var(--t-micro) var(--ease-out);
}
.plan-fleche svg { inline-size: 20px; block-size: 20px; }
.plan-fleche:not(:disabled):hover { background: #FAFAFA; }
.plan-fleche:not(:disabled):active { background: #F0F0F0; }
.plan-fleche:disabled { opacity: .35; cursor: default; }

/* La frise d'avant, en Gantt, d'après une capture fournie : une barre par
   levier, avec sa durée ; sous la barre tenue, ses sous-tâches, chacune avec
   sa durée, en boîte pointillée et libellé à côté. Quatre colonnes de quatre
   unités, positions en unités (--de, --a) sur --unites. La colonne des mois
   4 à 12 est comprimée, et son intitulé le dit. */
.gantt { --u: calc(100% / var(--unites, 16)); display: grid; }

.gantt-phases,
.gantt-entete { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gantt-phase {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 4) calc(var(--spacing) * 10);
  padding: 0 calc(var(--spacing) * 12) calc(var(--spacing) * 12);
  max-inline-size: none;
}
.gantt-phase-1 { grid-column: 1 / 3; }
.gantt-phase-2 { grid-column: 3 / 5; }
/* Le trait au dégradé sous la phase tenue est retiré, sur demande : un
   simple filet sépare les phases des mois, et la phase du levier tenu se
   dit par son encre, la phase éteinte passant au gris. */
.gantt-phase::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: rgb(var(--encre) / .08);
}
.gantt-phase .gantt-phase-nom { transition: color var(--t-base) var(--ease-out); }
.gantt[data-phase="2"] .gantt-phase-1 .gantt-phase-nom,
.gantt:not([data-phase="2"]) .gantt-phase-2 .gantt-phase-nom { color: var(--ink-2); }
.gantt-phase-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.gantt-phase-nom { font-size: var(--text-m); font-weight: 600; color: var(--noir); }
.gantt-phase-detail { font-size: var(--text-s); color: var(--gris-lisible); }

.gantt-mois {
  display: grid;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 10) calc(var(--spacing) * 12) calc(var(--spacing) * 6);
  border-inline-start: 1px solid rgb(var(--encre) / .08);
  max-inline-size: none;
}
.gantt-date { font-size: var(--text-l); font-weight: 600; line-height: 1.2; color: var(--noir); }
.gantt-rang {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Le corps : les traits des mois, et plus pâles, ceux des semaines. */
.gantt-corps {
  display: grid;
  gap: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 8) calc(var(--spacing) * 12);
  background-image:
    repeating-linear-gradient(90deg, rgb(var(--encre) / .08) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(90deg, rgb(var(--encre) / .035) 0 1px, transparent 1px 6.25%);
  border-block-end: 1px solid rgb(var(--encre) / .08);
}

/* Les barres des leviers reprennent la pilule de la frise d'avant : un gris
   à 4 % sous un liseré à 8 %, et le bleu des leviers, lueur blanche
   comprise, sur la barre tenue. */
.gantt-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 10);
  margin-inline-start: calc(var(--de) * var(--u));
  inline-size: calc((var(--a) - var(--de)) * var(--u));
  min-inline-size: max-content;
  block-size: 36px;
  padding: 0 calc(var(--spacing) * 12) 0 calc(var(--spacing) * 18);
  border: 1px solid rgb(28 28 28 / .08);
  border-radius: var(--r-full);
  background: rgb(28 28 28 / .04);
  color: var(--noir);
  font: inherit;
  font-size: var(--corps-sm);
  letter-spacing: -.011em;
  text-align: start;
  cursor: pointer;
  transition:
    background-color var(--motion-instant) var(--ease-out),
    border-color var(--motion-instant) var(--ease-out),
    color var(--motion-instant) var(--ease-out);
}
.gantt-barre:hover { background-color: rgb(28 28 28 / .08); }
.gantt-levier[data-actif] .gantt-barre,
.gantt-levier[data-actif] .gantt-barre:hover {
  background-color: var(--bleu);
  border-color: transparent;
  color: var(--blanc);
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / .45),
    inset 0 0 calc(var(--spacing) * 12) 0 rgb(255 255 255 / .28);
}
.gantt-levier[data-actif] :is(.gantt-barre-num, .gantt-barre .gantt-duree) { color: var(--blanc); }
.gantt-levier[data-actif] .gantt-compte { border-color: rgb(255 255 255 / .7); }
.gantt-levier[data-actif] .gantt-barre .gantt-duree::before { background: rgb(255 255 255 / .8); }
.gantt-barre-nom { font-weight: 500; white-space: nowrap; }
.gantt-barre-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-2);
  margin-inline-end: calc(var(--spacing) * 4);
}
.gantt-barre-meta { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 8); }
.gantt-compte {
  display: inline-grid;
  place-items: center;
  min-inline-size: 22px;
  block-size: 20px;
  padding-inline: calc(var(--spacing) * 6);
  border: 1px solid rgb(var(--encre) / .5);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
}
.gantt-duree {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 6);
  font-size: var(--text-xs);
  color: var(--ink-2);
  white-space: nowrap;
}
.gantt-duree::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: rgb(var(--encre) / .4);
}

/* Les sous-tâches du levier tenu. */
.gantt[data-arme] .gantt-levier:not([data-actif]) .gantt-detail { display: none; }
.gantt-detail { display: grid; padding-block: calc(var(--spacing) * 6) calc(var(--spacing) * 4); }
.gantt-taches { display: grid; gap: calc(var(--spacing) * 4); list-style: none; padding: 0; }
/* Une sous-tâche est un encadré à sa place et à sa durée, texte dedans,
   sur demande. Un encadré plus court que son texte s'allonge jusqu'à le
   contenir : vers la droite, ou vers la gauche pour ceux qui finissent au
   bout de la frise (data-avant), ancrés alors sur leur fin. */
.gantt-tache { position: relative; block-size: 28px; }
.gantt-tache-barre { display: none; }
.gantt-tache-texte {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--de) * var(--u));
  inline-size: calc((var(--a) - var(--de)) * var(--u));
  min-inline-size: max-content;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 12);
  padding-inline: calc(var(--spacing) * 14) calc(var(--spacing) * 12);
  border: 1px dashed rgb(28 28 28 / .16);
  border-radius: var(--r-full);
  background: rgb(28 28 28 / .025);
  font-size: var(--text-s);
  color: var(--noir);
  white-space: nowrap;
  transform-origin: left center;
}
.gantt-tache[data-avant] .gantt-tache-texte {
  inset-inline-start: auto;
  inset-inline-end: calc(100% - var(--a) * var(--u));
  transform-origin: right center;
}
.gantt-tache-quand {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.gantt-validation {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 8);
  padding-block-start: calc(var(--spacing) * 4);
  font-size: var(--text-s);
  color: var(--gris-lisible);
  max-inline-size: none;
}
.gantt-validation strong { color: var(--noir); font-weight: 600; }
.gantt-coche { flex: none; inline-size: 14px; block-size: 14px; color: var(--bleu); }

/* L'entrée, rejouée à chaque levier : la boîte s'étire, le libellé monte. */
@keyframes gantt-etire { from { transform: scaleX(0); } }
@keyframes gantt-entre { from { opacity: 0; translate: 0 calc(var(--spacing) * 8); } }
.gantt-levier[data-entre] .gantt-tache-barre {
  animation: gantt-etire var(--t-base) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
.gantt-levier[data-entre] .gantt-tache-texte,
.gantt-levier[data-entre] .gantt-validation {
  animation: gantt-entre var(--t-base) var(--ease-out) both;
  animation-delay: calc(100ms + var(--i, 0) * 50ms);
}
.gantt-levier[data-entre] .gantt-validation { animation-delay: 350ms; }
@media (prefers-reduced-motion: reduce) {
  .gantt-levier[data-entre] .gantt-tache-barre,
  .gantt-levier[data-entre] .gantt-tache-texte,
  .gantt-levier[data-entre] .gantt-validation { animation: none !important; }
}

@media (max-width: 1023px) {
  .plan-tete { grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 24); padding-inline: calc(var(--spacing) * 16); }
  .gantt-phase-detail { display: none; }
}

/* Sur téléphone, une colonne : plus de calendrier, les barres prennent la
   largeur, et chaque sous-tâche dit quand et combien de temps. */
@media (max-width: 767px) {
  .gantt-entete { display: none; }
  .gantt-corps { background: none; }
  .gantt-barre { margin-inline-start: 0; inline-size: 100%; min-inline-size: 0; }
  .gantt-tache { block-size: auto; }
  .gantt-tache-texte,
  .gantt-tache[data-avant] .gantt-tache-texte {
    position: static;
    inline-size: auto;
    min-inline-size: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: calc(var(--spacing) * 2) calc(var(--spacing) * 8);
    padding: calc(var(--spacing) * 8) calc(var(--spacing) * 14);
    border-radius: var(--r-lg);
    white-space: normal;
  }
  .gantt-tache-nom { flex-basis: 100%; color: var(--noir); }
  .gantt-tache-quand {
    position: static;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip-path: none;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .gantt-validation { align-items: flex-start; }
  .gantt-coche { margin-block-start: 4px; }
}

/* Le filet de gauche du Gantt est retiré, sur demande du 21 septembre 2026 :
   ni bordure sur le premier mois, ni premier trait du corps. Le fond est
   décalé d'un pixel sans se répéter, le trait à 0 sort donc de la boîte. */
.gantt-mois:first-child { border-inline-start: 0; }
.gantt-corps { background-repeat: no-repeat; background-position: -1px 0; }

/* Le compte des étapes devient un « + », sur demande du 22 septembre 2026 :
   la barre se déplie, la pastille le dit. Elle passe à « − » quand la barre
   est dépliée. Le chiffre reste dans le balisage, lu à la voix (5 étapes),
   seul son rendu est retiré. */
.gantt-compte {
  position: relative;
  inline-size: 20px;
  min-inline-size: 20px;
  padding: 0;
  font-size: 0;
}
.gantt-compte::before,
.gantt-compte::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: 8px;
  block-size: 1.5px;
  border-radius: 1px;
  background: currentColor;
  translate: -50% -50%;
  transition: rotate var(--t-base) var(--ease-inout);
}
.gantt-compte::after { rotate: 90deg; }
.gantt-barre[aria-expanded="true"] .gantt-compte::after { rotate: 0deg; }

/* Les deux verdicts, sur demande : « Ce n'est pas fait pour vous si » sans
   remplissage, seulement son liseré ; « Ce qu'on attend de votre côté » en
   blanc plein, avec le même liseré. */
#offre .verdicts .verdict.verdict { border: 1px solid rgb(102 71 240 / .18); }
#offre .verdicts .verdict-dehors.verdict-dehors { background: none; box-shadow: none; }
#offre .verdicts .verdict-attendu.verdict-attendu { background: var(--blanc); }