/* methodologie.css - page Méthodologie (methodologie.html)
 *
 * Ne porte que ce qui n'existe nulle part ailleurs. L'identité,
 * l'engagement et la FAQ consomment les composants de main.css et la
 * palette de noir-argent.css. Ce fichier recompose le bloc portrait
 * de la section À propos et porte en entier le calendrier du projet
 * (#methodologie, en fin de fichier).
 *
 * Chargé après noir-argent.css, blanc-kaki.css et kaki-commun.css, il
 * gagne sur les déclarations qu'il redéclare (rayon et anneau de
 * .engagement-avatar, correctifs de la direction kaki en fin de
 * fichier).
 */

/* ── Titre et portrait : un seul bloc ──────────────────────────
   Le portrait n'est plus posé à côté du titre mais juste sous lui,
   sur son propre axe. La photo reste ronde, seul le studio passe en
   angles vifs ailleurs. */
.engagement-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.85rem, 1.8vw, 1.25rem);
}
.engagement-id h2 { margin: 0; }

.engagement-avatar {
  flex: 0 0 auto;
  width: clamp(76px, 9vw, 112px);
  height: clamp(76px, 9vw, 112px);
  border-radius: 50%;
  border: 0;
  margin-top: 0;
  box-shadow: 0 0 0 1px var(--border-med);
}
.theme-noir .engagement-avatar {
  border: 0;
  box-shadow: 0 0 0 1px var(--filet-fort);
  /* En couleur, demande de Tom (2026-09-24) : noir-argent.css la
     passe en niveaux de gris. */
  filter: none;
}

/* En dessous de 480px la photo réduit légèrement. */
@media (max-width: 479px) {
  .engagement-id { gap: 0.75rem; }
  .engagement-avatar { width: 64px; height: 64px; }
}

/* Le « Un » de « Un seul interlocuteur » reprend le kaki du studio,
   comme sur les pages restées en V5 : demandé pour cette page en
   particulier, en dérogation à l'argent unique de la direction.
   Même sélecteur qu'en noir-argent.css, chargé après : la cascade
   suffit à gagner sans avoir à forcer la spécificité. */
.theme-noir #identite .identite-big span { color: var(--kaki-clair); }

/* ══ Direction kaki : agencement de la V5 d'août 2026 ═══════════
   Demande de Tom (2026-09-24) : retrouver la Méthodologie kaki telle
   qu'elle vivait sur l'accueil avant la refonte noir/argent (commit
   9a3514f). Même plan qu'aujourd'hui, rythme de couleur de la V5 :
     ouverture   noir kaki (kaki-commun.css)          (sombre)
     identité    kaki foncé, bandeau de pied voilé    (sombre)
     calendrier  blanc, barres kaki (voir plus bas)
     à propos    kaki foncé, cercles concentriques    (sombre)
     FAQ         kaki foncé, questions en cartes      (sombre)
   Les scopes sombres sont déclarés dans blanc-kaki.css (#identite,
   #engagement, .faq--kaki) : les blancs et les
   kaki clairs que main.css écrit en dur pour la V5 y retrouvent leur
   fond d'origine. --blanc sur --kaki-fonce 9.9:1, --kaki-clair 5.7:1,
   --brume 5.8:1. */
.theme-kaki #identite,
.theme-kaki #engagement,
.theme-kaki #faq.faq--kaki { background: var(--kaki-fonce); }
.theme-kaki #methodologie { background: var(--papier); }
/* En V5, le devis séparait l'À propos de la FAQ. Ici les deux aplats
   se suivent : un filet marque la frontière. */
.theme-kaki #faq.faq--kaki { border-top: 1px solid var(--filet); }

/* Sur-titres de l'identité : noir-argent.css les met en
   --argent-lo, soit --kaki-lo en scope sombre, 3.5:1 sur le kaki
   foncé. Kaki clair, comme la V5 : 5.7:1. */
.theme-kaki #identite .identite-eyebrow,
.theme-kaki #engagement .section-eyebrow { color: var(--kaki-clair); }

/* Titres en casse normale et graisse pleine, comme la V5 :
   noir-argent.css les passe en capitales espacées. */
.theme-kaki .section-header h2 {
  text-transform: none;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.theme-kaki .identite-big {
  text-transform: none;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
}
/* noir-argent.css réduit ce titre sous 768px pour qu'il tienne en
   capitales. En casse normale il peut remonter : à 10vw,
   « interlocuteur. » occupe environ 80 % d'un écran de 375px. */
@media (max-width: 768px) {
  .theme-kaki .identite-big { font-size: clamp(2.25rem, 10vw, 3rem); }
}

/* Identité : les numéros 01 à 03 sont retirés (demande de Tom,
   2026-09-24). La colonne qui les portait disparaît avec eux. */
.ic-row { grid-template-columns: 1fr; }

/* ══ Calendrier du projet (#methodologie) ═══════════════════════
   Remplace la liste des six étapes (demande de Tom, 2026-09-24) :
   une ligne par étape, texte à gauche, barre posée dans la colonne
   du calendrier où l'étape se passe. Axe en sept colonnes qui suit
   les délais annoncés : Jour 1, Jours 2 à 3, Semaine 1, Semaine 2,
   48h, Jour J, Ensuite. Chaque ligne donne sa position par --de et
   --a (première et dernière colonne, 1 à 7).

   Téléphone (moins de 744px) : pas de calendrier. La liste verticale
   d'origine, étapes 01 à 06 (.ms-list, styles de main.css et
   noir-argent.css), la remplace (demande de Tom, 2026-09-25).
   Tablette (744 à 1179px) : en-tête des colonnes, texte en tête de
   ligne, bande de calendrier dessous. À partir de 1180px, la grille
   complète : texte à gauche, barres à droite.

   Contrastes (scope clair) : --papier sur --kaki-fonce 10.7:1, sur
   --kaki-plein 7.0:1 ; --kaki-hi sur --kaki-plein 5.5:1 ; --brume
   sur --noir-kaki 10.2:1 ; --kaki-plein sur --papier 7.0:1. */
#methodologie .tl {
  --tl-label: clamp(16rem, 20vw, 21rem);
  --tl-pad: clamp(1.75rem, 3vw, 2.25rem);
  --arrondi-barre: 0.625rem;
  --tl-barre: linear-gradient(100deg, var(--kaki-fonce), var(--kaki-plein));
  text-align: left;
}

/* Titre sur deux lignes équilibrées, sans « ligne. » orphelin. */
#methodologie .section-header h2 { text-wrap: balance; }

/* Un seul des deux déroulés à la fois : la liste 01 à 06 sur
   téléphone, le calendrier au-delà. */
@media (max-width: 743px) {
  #methodologie .tl { display: none; }
}
@media (min-width: 744px) {
  #methodologie .ms-list { display: none; }
}

.tl-head { display: none; }

.tl-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--filet);
}

.tl-row {
  display: grid;
  gap: 1.25rem;
  padding: var(--tl-pad) 0;
  border-bottom: 1px solid var(--filet);
}

.tl-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
.tl-desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.tl-bar {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0.875rem 1rem;
  border-radius: var(--arrondi-barre);
  background: var(--tl-barre);
  color: var(--papier);
  box-shadow: 0 8px 24px -14px rgba(15, 18, 14, 0.55);
}
.tl-bar strong {
  hyphens: auto;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}
.tl-bar span {
  hyphens: auto;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--kaki-hi);
}

/* Développement : la barre couvre deux colonnes, un pointillé sépare
   la construction des ajustements, comme les révisions du modèle. */
.tl-bar--split {
  flex-direction: row;
  gap: 0;
  padding: 0;
}
.tl-part {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 0;
  min-width: 0;
  padding: 0.875rem 1rem;
}
.tl-part:first-child { flex-grow: 1.35; }
.tl-part--suite {
  justify-content: center;
  border-left: 1px dashed rgba(245, 246, 247, 0.55);
}
.tl-bar .tl-part--suite strong { font-size: 0.78rem; }

/* Jour J : aplat noir kaki, le repère fort du calendrier. */
.tl-bar--jour-j { background: var(--noir-kaki); }
.tl-bar--jour-j span { color: var(--brume); }

/* Le suivi n'a pas de fin : la barre reste ouverte à droite. */
.tl-bar--continu { border-radius: var(--arrondi-barre) 0 0 var(--arrondi-barre); }

/* Apparition : la ligne monte (scroll-reveal de main.js), la barre se
   tire depuis la gauche juste après. Sous prefers-reduced-motion,
   animations.css ramène les transitions à zéro. */
.tl-row.reveal .tl-bar {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s var(--ease-noir) 0.18s;
}
.tl-row.visible .tl-bar { clip-path: inset(0 -24px -24px 0); }
.tl-row:nth-child(2) { transition-delay: 0.04s; }
.tl-row:nth-child(3) { transition-delay: 0.08s; }
.tl-row:nth-child(4) { transition-delay: 0.12s; }
.tl-row:nth-child(5) { transition-delay: 0.16s; }
.tl-row:nth-child(6) { transition-delay: 0.20s; }

/* Tablette (744 à 1179px, 744 = iPad mini en portrait) : le tableau reste, demande de Tom
   (2026-09-25). Sept colonnes et une colonne de texte ne tiennent pas
   côte à côte : chaque étape pose son titre et son texte en tête de
   ligne, puis sa bande de calendrier sur toute la largeur, sous
   l'en-tête des colonnes. Colonnes de 90px (iPad mini portrait) à
   155px. */
@media (min-width: 744px) and (max-width: 1179px) {
  #methodologie .tl { --arrondi-barre: 0.5rem; }

  .tl-head {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--filet);
  }
  .tl-head span {
    padding: 0 0.375rem 0.875rem 0.5rem;
    border-left: 1px solid var(--filet);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--gris-encre);
  }

  .tl-rows { border-top: 0; }
  .tl-row { gap: 1.25rem; }
  .tl-text { max-width: 40rem; }

  .tl-lane {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: start;
    background-image: linear-gradient(90deg, var(--filet) 1px, transparent 1px);
    background-size: calc(100% / 7) 100%;
  }
  .tl-lane::before { display: none; }

  .tl-bar {
    grid-column: var(--de) / calc(var(--a) + 1);
    min-height: 5.5rem;
    margin-right: 0.375rem;
    padding: 0.625rem 0.55rem 0.7rem;
  }
  .tl-bar--split { padding: 0; }
  .tl-part { padding: 0.625rem 0.55rem 0.7rem; }
  .tl-bar strong { font-size: 0.74rem; }
  .tl-bar span,
  .tl-bar .tl-part--suite strong { font-size: 0.66rem; }
  .tl-bar--continu { margin-right: 0; }
}

/* iPad portrait (moins de 900px) : la barre Développement ne peut
   pas couper ses deux semaines en deux libellés côte à côte. Les
   ajustements passent dessous, derrière le même pointillé. */
@media (min-width: 744px) and (max-width: 899px) {
  .tl-bar--split { flex-direction: column; }
  .tl-part--suite {
    border-left: 0;
    border-top: 1px dashed rgba(245, 246, 247, 0.55);
  }
}

/* Tablette paysage : colonnes de 120 à 155px, libellés à la taille
   du desktop. */
@media (min-width: 900px) and (max-width: 1179px) {
  .tl-head span { font-size: 0.66rem; letter-spacing: 0.1em; }
  .tl-bar {
    min-height: 6.125rem;
    margin-right: 0.5rem;
    padding: 0.8rem 0.7rem 0.9rem;
  }
  .tl-bar--split { padding: 0; }
  .tl-part { padding: 0.8rem 0.7rem 0.9rem; }
  .tl-bar strong { font-size: 0.8rem; }
  .tl-bar span,
  .tl-bar .tl-part--suite strong { font-size: 0.7rem; }
  .tl-bar--continu { margin-right: 0; }
}

@media (min-width: 1180px) {
  .tl-head {
    display: grid;
    grid-template-columns: var(--tl-label) repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--filet);
  }
  .tl-head span {
    padding: 0 0.5rem 1rem 0.75rem;
    border-left: 1px solid var(--filet);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--gris-encre);
  }
  .tl-head span:first-child { grid-column: 2; }

  .tl-rows { border-top: 0; }

  /* Le calendrier sort du conteneur de 1160px et prend la largeur
     de l'écran moins les marges (86rem au plus) : colonnes et barres
     plus larges (demande de Tom, 2026-09-24). 16px réservés à la
     barre de défilement, que 100vw inclut. */
  #methodologie .tl {
    --tl-w: min(86rem, calc(100vw - 2 * var(--px) - 16px));
    width: var(--tl-w);
    margin-left: calc((100% - var(--tl-w)) / 2);
  }

  .tl-row {
    grid-template-columns: var(--tl-label) minmax(0, 1fr);
    gap: 0;
    padding: 0;
  }
  .tl-text { padding: var(--tl-pad) clamp(1.5rem, 3vw, 2.5rem) var(--tl-pad) 0; }

  /* Même grille de sept colonnes sur chaque ligne : les filets
     verticaux se prolongent d'une ligne à l'autre sans rupture. La
     barre s'aligne sur le haut du titre de l'étape. */
  .tl-lane {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: start;
    padding: var(--tl-pad) 0;
    background-image: linear-gradient(90deg, var(--filet) 1px, transparent 1px);
    background-size: calc(100% / 7) 100%;
  }
  .tl-lane::before { display: none; }

  /* Colonnes de 118 à 140px entre 1180 et 1359px : libellés
     resserrés. */
  .tl-bar {
    grid-column: var(--de) / calc(var(--a) + 1);
    min-height: 6.5rem;
    margin-right: 0.625rem;
    padding: 0.95rem 0.8rem 1.05rem;
  }
  .tl-bar--split { padding: 0; }
  .tl-part { padding: 0.95rem 0.8rem 1.05rem; }
  .tl-bar strong { font-size: 0.82rem; }
  .tl-bar span,
  .tl-bar .tl-part--suite strong { font-size: 0.72rem; }
  .tl-bar--continu { margin-right: 0; }
}

/* À partir de 1360px, colonnes de 140 à 155px : barres plus
   longues et plus hautes, libellés à pleine taille. */
@media (min-width: 1360px) {
  #methodologie .tl { --arrondi-barre: 0.75rem; }
  .tl-bar {
    min-height: 7.25rem;
    margin-right: 0.75rem;
    padding: 1.1rem 1rem 1.2rem;
  }
  .tl-bar--split { padding: 0; }
  .tl-part { padding: 1.1rem 1rem 1.2rem; }
  .tl-bar strong { font-size: 0.95rem; }
  .tl-bar span,
  .tl-bar .tl-part--suite strong { font-size: 0.8rem; }
  .tl-bar--continu { margin-right: 0; }
}

/* ══ Liste 01 à 06 (téléphone seulement) ════════════════════════ */

/* Numéros d'étape : halo kaki plein de la V5 (même filtre que
   main.css, à l'identique) au lieu du halo argent de noir-argent.css,
   invisible sur blanc. L'étape 06 garde le halo clair de
   noir-argent.css (sélecteur plus lourd). Chiffres décoratifs : le
   libellé de chaque étape porte l'information. */
.theme-kaki .ms-num {
  filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeMorphology%20in%3D%22SourceAlpha%22%20operator%3D%22dilate%22%20radius%3D%221.5%22%20result%3D%22d%22%2F%3E%3CfeComposite%20in%3D%22d%22%20in2%3D%22SourceAlpha%22%20operator%3D%22out%22%20result%3D%22ring%22%2F%3E%3CfeFlood%20flood-color%3D%22%233D5C35%22%20flood-opacity%3D%220.2%22%20result%3D%22fc%22%2F%3E%3CfeComposite%20in%3D%22fc%22%20in2%3D%22SourceAlpha%22%20operator%3D%22in%22%20result%3D%22fillLayer%22%2F%3E%3CfeFlood%20flood-color%3D%22%233D5C35%22%20flood-opacity%3D%220.4%22%20result%3D%22rc%22%2F%3E%3CfeComposite%20in%3D%22rc%22%20in2%3D%22ring%22%20operator%3D%22in%22%20result%3D%22ringLayer%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22fillLayer%22%2F%3E%3CfeMergeNode%20in%3D%22ringLayer%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fsvg%3E#f");
}

/* Étape 06 « Le suivi » : aplat kaki foncé comme en V5, sans le filet
   argent de noir-argent.css. */
.theme-kaki .ms-item--finale { border-color: transparent; }