/* ==========================================================================
   Section 6 : ce que couvre l'accompagnement
   Toutes les classes sont prefixees .couverture pour ne collisionner avec
   aucune autre feuille de section.

   Squelette relevee sur le modele de reference (la verite terrain home-1440.json,
   bloc de couverture du modele, noeuds 748 a 780) :
   - section a 80px de padding vertical, 80px entre l'en-tete et la liste ;
   - sous-blocs empiles avec 40px d'ecart ;
   - dans chaque sous-bloc, une colonne de texte de 549px et un visuel de
     603px, separes par 68px, et les deux colonnes s'inversent une fois sur
     deux ;
   - titre de sous-bloc a 40px / 48px en graisse 500, phrase a 20px / 24px.
   L'habillage, lui, est Numbers : creme, encre, accent vert, Inter.
   ========================================================================== */

.couverture {
  background-color: var(--white);
}

/* --------------------------------------------------------------------------
   Tokens locaux
   Trois valeurs manquent dans base.css et ne servent qu'ici.
   -------------------------------------------------------------------------- */
.couverture {
  /* Corps de la phrase d'accroche d'un sous-bloc. base.css s'arrete a
     --t-corps (17px) ; le modele pose 20px sous un titre de 40px, et ce
     palier intermediaire est ce qui tient la hierarchie. */
  --couverture-lead: 20px;
  --couverture-lead-lh: 28px;
  /* Ecart entre la colonne de texte et le visuel : 1220 - 549 - 603. */
  --couverture-gouttiere: 68px;
}

/* En-tete : l'espacement vient de .section__entete, on ne le redefinit pas.
   Seule la largeur du chapo est bornee pour eviter une ligne trop longue. */
.couverture__entete .t-chapo {
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Empilement des quatre sous-blocs
   -------------------------------------------------------------------------- */

.couverture__liste {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7); /* 40px, la valeur du modele */
}

/* Colonnes 549 / 603 exprimees en fractions : la gouttiere est retiree avant
   le partage, le rapport tombe donc exactement sur les mesures relevees. */
.couverture__bloc {
  display: grid;
  grid-template-columns: minmax(0, 549fr) minmax(0, 603fr);
  column-gap: var(--couverture-gouttiere);
  align-items: center;
}

/* Alternance : un sous-bloc sur deux presente le visuel en premier. Les deux
   colonnes changent alors de largeur, pas seulement d'ordre. */
.couverture__bloc:nth-child(even) {
  grid-template-columns: minmax(0, 603fr) minmax(0, 549fr);
}

.couverture__bloc:nth-child(even) .couverture__media {
  order: -1;
}

/* --------------------------------------------------------------------------
   Colonne de texte
   -------------------------------------------------------------------------- */

.couverture__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Numero de volet. Il n'apporte pas d'information nouvelle, il donne le
   rythme de lecture des quatre sous-blocs. */
.couverture__index {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: var(--t-micro-lh);
  letter-spacing: 1.4px;
  color: var(--vert-texte);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--trait);
  min-width: 44px;
}

.couverture__phrase {
  margin-top: var(--sp-4);
  font-size: var(--couverture-lead);
  line-height: var(--couverture-lead-lh);
  letter-spacing: -0.5px;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* Liste des missions. La coche est dessinee en CSS plutot qu'importee :
   une image par puce ferait six requetes pour six pixels. */
.couverture__missions {
  margin-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.couverture__mission {
  position: relative;
  padding-left: 28px;
  font-size: var(--t-petit);
  line-height: var(--t-petit-lh);
  color: var(--ink-soft);
}

.couverture__mission::before {
  content: "";
  position: absolute;
  left: 0;
  /* Centre la coche sur la premiere ligne de texte, pas sur le bloc entier. */
  top: calc((var(--t-petit-lh) - 8px) / 2 - 1px);
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--vert-texte);
  border-bottom: 1.5px solid var(--vert-texte);
  transform: rotate(-45deg);
}

/* Intertitre de la deuxieme liste du volet 2. */
.couverture__sous-titre {
  margin-top: var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: var(--t-micro-lh);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--grey-texte);
}

.couverture__sous-titre + .couverture__missions {
  margin-top: var(--sp-3);
}

/* --------------------------------------------------------------------------
   Visuel : la carte commune aux quatre schemas
   -------------------------------------------------------------------------- */

.couverture__carte {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background-color: var(--cream);
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  /* Hauteur relevee sur le modele pour ces visuels (410px). Elle n'est pas
     imposee : les schemas les plus courts s'y calent, les plus longs la
     depassent sans se faire rogner. */
  min-height: 410px;
  justify-content: center;
}

.couverture__carte-titre {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: var(--t-micro-lh);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--grey-texte);
  margin-bottom: var(--sp-5);
}

/* Mention rappelant qu'aucun chiffre affiche n'est une donnee client. */
.couverture__note {
  margin-top: var(--sp-5);
  font-size: var(--t-micro);
  line-height: var(--t-micro-lh);
  color: var(--grey-texte);
}

/* --------------------------------------------------------------------------
   Schema 1 : le mois type
   Quatre jalons relies par un rail vertical.
   -------------------------------------------------------------------------- */

.couverture__frise {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-left: var(--sp-6);
}

/* Le rail s'arrete au centre du premier et du dernier point plutot que de
   courir sur toute la hauteur : sinon il depasse en haut et en bas. */
.couverture__frise::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background-color: var(--trait-fort);
}

.couverture__jalon {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.couverture__jalon::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-6) + 1px);
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--vert);
  /* Anneau creme : le point se detache du rail sans le couper visuellement. */
  box-shadow: 0 0 0 4px var(--cream);
}

/* Le reforecast est conditionnel : point evide plutot que plein. */
.couverture__jalon--option::before {
  background-color: var(--cream);
  border: 1.5px solid var(--trait-fort);
}

.couverture__jalon-nom {
  font-family: var(--font-sans);
  font-size: var(--t-corps);
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.3px;
  color: var(--ink-strong);
}

.couverture__jalon-detail {
  font-size: var(--t-petit);
  line-height: var(--t-petit-lh);
  color: var(--grey-texte);
}

/* --------------------------------------------------------------------------
   Schema 2 : matrice de repeat par cohorte
   Rappel direct de tab-dashboard.png, ou les cohortes sont rendues en carres
   bleus d'intensite decroissante.
   -------------------------------------------------------------------------- */

/* La largeur est plafonnee, et non laissee libre : les cases sont des carres
   en 1fr, donc chaque pixel de largeur gagne devient un pixel de hauteur. Sans
   ce plafond la matrice atteint 120px de cote une fois le sous-bloc empile
   sous 992px, alors que la capture d'origine tourne autour de 55px. */
.couverture__matrice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Centree sous son intitule plutot que collee a gauche : le plafond lui
     laisse une marge dans la carte, autant qu'elle soit symetrique.
     C'est bien align-self et non une marge automatique : la carte est un
     conteneur flex, et une marge auto y forcerait la matrice a se reduire a
     la largeur de son contenu, or les cases sont des boites vides. */
  width: 100%;
  max-width: 440px;
  align-self: center;
}

.couverture__mat-ligne {
  display: grid;
  /* Le libelle est a largeur fixe pour que les colonnes de cases s'alignent
     d'une ligne a l'autre ; les cases se partagent le reste. */
  grid-template-columns: 56px repeat(6, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
}

.couverture__mat-nom {
  font-size: var(--t-micro);
  line-height: var(--t-micro-lh);
  color: var(--grey-texte);
  white-space: nowrap;
}

/* Echelle de la matrice de cohortes.
   Le repeat par cohorte n'est ni une bonne ni une mauvaise nouvelle : c'est
   une donnee tierce, et la voix tierce de la palette est le bleu du degrade.
   Il remplace ici le mauve sombre, qui n'appartenait pas au degrade.
   Une echelle sequentielle ne se fabrique pas avec cinq couleurs mais avec
   une seule a cinq densites : les cases portent --vif-bleu et ne different
   que par leur opacite sur le creme de la carte. Le niveau plein est le bleu
   du degrade tel quel.
   La contrepartie est assumee : le bleu etant clair, la rampe s'etale sur une
   plage de luminosite plus courte que le mauve sombre, 1,37 a 1,02 pour 1
   contre 5,4 a 1,05. Les paliers sont donc plus ecartes qu'avant pour rester
   distinguables, et ils le sont par la teinte autant que par la clarte : la
   composante rouge descend de 239 a 168 en cinq marches.
   Aucun texte n'est pose dessus, et la matrice ne porte aucun chiffre : elle
   dit une decroissance, elle ne se lit pas valeur par valeur. */
.couverture__mat-case {
  /* Carres : la hauteur suit la largeur de la colonne. */
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background-color: var(--vif-bleu);
  /* Cas par defaut : une case sans niveau est une case vide. */
  opacity: 0.06;
}

.couverture__mat-case--n4 { opacity: 1; }
.couverture__mat-case--n3 { opacity: 0.68; }
.couverture__mat-case--n2 { opacity: 0.4; }
.couverture__mat-case--n1 { opacity: 0.18; }
.couverture__mat-case--vide { opacity: 0.06; }

/* --------------------------------------------------------------------------
   Schema 3 : un SKU, trois sources
   -------------------------------------------------------------------------- */

.couverture__recon {
  display: flex;
  flex-direction: column;
}

.couverture__recon-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--trait);
}

.couverture__recon-source {
  font-size: var(--t-petit);
  line-height: var(--t-petit-lh);
  color: var(--ink-soft);
}

.couverture__recon-valeur {
  font-family: var(--font-sans);
  font-size: var(--t-corps);
  font-weight: 500;
  line-height: 24px;
  color: var(--ink-strong);
}

/* La ligne de total se distingue par un trait plus marque en haut, comme dans
   un tableau comptable. */
.couverture__recon-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--trait-fort);
}

.couverture__recon-total .couverture__recon-source {
  font-weight: 500;
  color: var(--ink-strong);
}

/* --------------------------------------------------------------------------
   Schema 4 : les abonnements remplaces
   Les noms sont rendus en texte, barres, puis converges vers une seule
   destination. Aucun logo n'est reconstitue.
   -------------------------------------------------------------------------- */

/* La largeur est bridee sous celle de la carte : laissees libres, les six
   pilules se rangent sur une seule ligne et abandonnent la derniere toute
   seule au-dessous. Bornees a 340px elles se repartissent en deux rangees. */
.couverture__outils {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  max-width: 340px;
  margin: 0 auto;
}

.couverture__outil {
  padding: 6px 14px;
  border: 1px dashed var(--trait-fort);
  border-radius: var(--r-pill);
  background-color: var(--white);
  font-size: var(--t-petit);
  line-height: var(--t-petit-lh);
  color: var(--grey-texte);
  text-decoration: line-through;
  text-decoration-color: var(--trait-fort);
}

/* Fleche de convergence, dessinee en CSS : un trait vertical surmontant un
   chevron. */
.couverture__vers {
  position: relative;
  height: 44px;
  margin: var(--sp-4) 0;
}

.couverture__vers::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 32px;
  background-color: var(--trait-fort);
}

.couverture__vers::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 26px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--trait-fort);
  border-bottom: 1.5px solid var(--trait-fort);
  transform: translateX(-50%) rotate(45deg);
}

.couverture__cible {
  align-self: center;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  background-color: var(--ink);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--t-corps);
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.3px;
  text-align: center;
}

/* ==========================================================================
   RUPTURES
   ========================================================================== */

/* Sous 992px, les deux colonnes ne tiennent plus cote a cote : le sous-bloc
   passe en une colonne, texte puis visuel, et l'alternance disparait. */
@media screen and (max-width: 991px) {
  .couverture__bloc,
  .couverture__bloc:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-6);
  }

  .couverture__bloc:nth-child(even) .couverture__media {
    order: 0;
  }

  .couverture__liste {
    gap: var(--sp-8);
  }

  /* Une fois empilee, la carte prend toute la largeur de la colonne, comme le
     texte qui la precede. Elle etait auparavant bornee a la largeur qu'elle
     avait en deux colonnes (603px), ce qui laissait pres de 250px de vide a sa
     droite a 900px. Les schemas qui ne doivent pas s'etirer indefiniment
     portent leur propre plafond, centre dans la carte. */
  .couverture__carte {
    min-height: 0;
  }

  /* La matrice suit l'elargissement de la carte plutot que de rester une
     vignette perdue au centre. Le plafond monte de 440 a 520px, ce qui porte
     le cote des cases de 58 a 71px : elles occupent la carte sans devenir des
     pastilles surdimensionnees. */
  .couverture__matrice {
    max-width: 520px;
  }

  /* Meme logique pour les pilules d'outils : elles se repartissent sur une
     largeur plus genereuse au lieu de rester serrees sur 340px, tout en
     restant sur deux rangees. */
  .couverture__outils {
    max-width: 400px;
  }

  .couverture__phrase {
    max-width: 48ch;
  }
}

@media screen and (max-width: 767px) {
  .couverture {
    --couverture-lead: 18px;
    --couverture-lead-lh: 26px;
  }

  .couverture__carte {
    padding: var(--sp-5);
  }

  .couverture__mat-ligne {
    grid-template-columns: 46px repeat(6, minmax(0, 1fr));
  }
}

@media screen and (max-width: 479px) {
  .couverture {
    --couverture-lead: 17px;
    --couverture-lead-lh: 25px;
  }

  .couverture__carte {
    padding: var(--sp-4);
    border-radius: var(--r-md);
  }

  /* Les carres de la matrice descendent sous 30px de cote a cette largeur :
     l'ecart entre eux est reduit pour qu'ils restent lisibles. */
  .couverture__matrice {
    gap: 4px;
  }

  .couverture__mat-ligne {
    grid-template-columns: 38px repeat(6, minmax(0, 1fr));
    gap: 4px;
  }

  .couverture__mat-case {
    border-radius: 4px;
  }

  /* Les pilules d'outils sont alignees a gauche : centrees, leur derniere
     ligne flotte au milieu et le bloc parait bancal sur un ecran etroit. */
  .couverture__outils {
    justify-content: flex-start;
    max-width: none;
  }

  .couverture__recon-ligne {
    /* Le libelle "Facturation fournisseur" tient rarement sur une ligne a
       cette largeur : la valeur passe dessous plutot que de comprimer le
       libelle. */
    flex-wrap: wrap;
    gap: 2px var(--sp-4);
  }

  .couverture__cible {
    padding: 10px 18px;
  }
}