/* Le modele ZYRCLO : schema "boucle des services / boucle matiere".
 *
 * Fichier dedie (ne touche pas zyrclo.webflow.css) pour la section-demarche
 * de la page /atelier. Texte reel en HTML/CSS (selectionnable, lisible par
 * un lecteur d'ecran, editable via data-cms) : le SVG fourni par la cliente
 * n'a servi que de reference de contenu et de disposition, jamais de source.
 *
 * Palette et echelle typographique reutilisees telles que declarees dans
 * zyrclo.webflow.css (:root) : --white, --dark-blue, --blue, --gold,
 * --light-gold, --titre-*, --paragraphe-*, --margin-*, --border-radius-*.
 * Le fichier source du modele utilisait un vert/marine qui n'existe dans
 * aucun des deux : on distingue les deux boucles avec --gold (boucle des
 * services) et --blue (boucle matiere), les deux seules couleurs d'accent
 * deja en place dans la charte.
 *
 * Mobile-first : la disposition circulaire est une AMELIORATION posee par
 * @media (min-width: 1300px). En dessous, tout est un flux lineaire normal
 * (aucun position:absolute) : c'est la meme serie de noeuds, jamais dupliquee,
 * juste reordonnee par CSS. Voir le commentaire au-dessus de .modele-boucle.
 *
 * LA LECTURE LINEAIRE N'EST PAS QUE LA VERSION TELEPHONE. De 900 a 1299 px (un
 * portable courant, ou un 1920 affiche a 150 %), c'est elle qui s'affiche, dans
 * une carte large de 900 a 1140 px. Tant que ce flux occupait toute cette
 * largeur, du texte de 14 px courait sur 140 signes colle au bord gauche, sous
 * un titre centre a 640 px : deux axes dans le meme bloc. D'ou les paliers
 * ci-dessous, qui ne changent JAMAIS l'ordre du DOM, seulement le nombre de
 * colonnes des grilles :
 *   - toute largeur : la colonne de lecture est bornee a 800 px et centree,
 *                     l'axe du schema lui-meme a 560 ;
 *   - >= 520 px     : 2 ressources cote a cote, la troisieme sous les deux ;
 *   - >= 700 px     : les 3 ressources cote a cote, 2 des 3 encarts cote a cote ;
 *   - >= 980 px     : les 3 encarts cote a cote.
 */

/* --- Bloc d'intro (reste sur le fond bleu fonce de section-demarche,
   reutilise les classes .tag/.resultat-demarche-title/.resultat-demarche-p
   deja en place pour la colonne 1 : meme traitement typographique). --- */

.modele-intro {
  margin-top: var(--margin-64);
}

.modele-intro-title {
  max-width: 560px;
}

.modele-intro-p {
  max-width: 640px;
}

/* Colonne 1 (« De la matiere a l'usage ») reste seule dans son wrapper flex
   une fois la colonne 2 sortie : elle occupe alors toute la largeur plutot
   que de laisser 50 % de vide a droite. */
.resultat-demarche-wrapper > .resultat-demarche-column:only-child {
  width: 100%;
}

.resultat-demarche-wrapper > .resultat-demarche-column:only-child .resultat-demarche-title,
.resultat-demarche-wrapper > .resultat-demarche-column:only-child .resultat-demarche-p {
  max-width: 640px;
}

/* --- Carte claire du modele : le contenu est dense, il lui faut un fond
   clair pour rester lisible (le fond de la section est --blue). --- */

/* Les trois mesures ci-dessous sont partagees par le noeud et par le fil qui
   relie deux noeuds : le fil doit tomber pile au centre de la pastille
   numerotee. Les declarer une fois et les lire des deux cotes evite le pixel
   magique qui se desaligne des qu'on retouche un retrait. */
.modele-card {
  --noeud-retrait: 16px;
  --pastille: 22px;
  --noeud-ecart: var(--margin-16);
  /* Taille de tuile du motif, FIXE et non 100vw comme ailleurs sur le site.
     100vw convient a un aplat de section, qui fait toute la largeur : la tuile
     y suit l'ecran et le motif garde sa proportion. Sur une carte, la meme
     regle donne des formes de 90 px sur un portable et de 40 px sur un
     telephone : le grain change avec la fenetre, et a 1440 px il ne texture
     plus, il tache. Une tuile fixe garde le meme grain a toutes les largeurs. */
  --motif-tuile: 420px;

  margin-top: var(--margin-48);
  padding: var(--margin-48) var(--margin-32);
  border-radius: var(--border-radius-48);
  /* Le motif ZYRCLO de la charte, le meme fichier que .label-wrapper plus bas
     dans la page : il est donc deja telecharge, la carte ne coute aucune
     requete de plus. Il est pose SOUS un voile de la couleur de la carte, et
     c'est ce voile qui regle sa force : a nu sur ce creme, le motif devient un
     quadrillage qui concurrence le texte. */
  background-color: var(--white);
  background-image:
    linear-gradient(rgba(247, 243, 237, 0.86), rgba(247, 243, 237, 0.86)),
    url("/images/3d1571bdce2a17dc5b0bc7f78582682e_BG-PATTERN-DARK-BLUE-BORDER.webp");
  background-position: 50%, 50%;
  background-size: auto, var(--motif-tuile);
}

.modele-header {
  margin-bottom: var(--margin-48);
  text-align: center;
}

.modele-eyebrow {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: var(--paragraphe-14);
  line-height: var(--line-height-125);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.modele-headline {
  max-width: 640px;
  margin: 0 auto;
  color: var(--dark-blue);
  font-size: var(--titre-30);
  line-height: var(--line-height-100);
  font-weight: 700;
}

/* Colonne de lecture bornee et centree : c'est elle qui remet le corps du
   schema sur l'axe de l'en-tete (640 px, centre) et de la signature du bas
   (480 px, centre). Sans effet en dessous de ~880 px de large, ou la carte est
   deja plus etroite que 800. Le grand ecran la desserre (max-width: none). */
.modele-grid {
  display: flex;
  flex-direction: column;
  gap: var(--margin-48);
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================= RESSOURCES ============================= */

.modele-panel-titre {
  margin: 0 0 var(--margin-16);
  text-align: center;
  color: var(--dark-blue);
  font-size: var(--paragraphe-14);
  line-height: var(--line-height-125);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.modele-ressources-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--margin-16);
  margin: 0 0 var(--margin-24);
  padding: 0;
  list-style: none;
}

/* Les ressources entrantes sont la matiere AVANT tout traitement : contour et
   fond vide, la ou les etapes des deux boucles sont des aplats pleins. La
   difference de statut se lit sans legende. */
.modele-ressource {
  padding: var(--margin-16);
  border: 1px solid var(--light-gold);
  border-radius: 20px;
}

.modele-ressource-titre {
  margin: 0 0 4px;
  color: var(--dark-blue);
  font-size: var(--paragraphe-16);
  line-height: var(--line-height-125);
  font-weight: 700;
}

.modele-ressource-texte {
  margin: 0;
  color: var(--dark-blue);
  font-size: var(--paragraphe-14);
  line-height: var(--line-height-125);
  opacity: 0.75;
}

.modele-ressources-note {
  margin: 0;
  padding-top: var(--margin-16);
  border-top: 1px solid var(--light-gold);
  text-align: center;
  color: var(--dark-blue);
  font-size: var(--paragraphe-14);
  line-height: var(--line-height-125);
  opacity: 0.75;
}

/* ================================ USAGE ================================ */

/* Le coeur du schema. Sur grand ecran c'est le disque marine au centre du
   cercle ; en lecture lineaire il garde la meme matiere (marine + motif) sous
   une forme qui accepte du texte a 14 px. Un disque tiendrait sur un telephone,
   mais il faudrait y descendre le texte a 10 px pour l'y faire entrer. */
.modele-usage {
  max-width: 440px;
  margin: var(--margin-16) auto var(--margin-24);
  padding: var(--margin-24) var(--margin-32);
  border-radius: var(--border-radius-32);
  background-color: var(--dark-blue);
  background-image: url("/images/3d1571bdce2a17dc5b0bc7f78582682e_BG-PATTERN-DARK-BLUE-BORDER.webp");
  background-position: 50%;
  background-size: var(--motif-tuile);
  text-align: center;
}

.modele-usage-titre {
  margin: 0 0 8px;
  color: var(--white);
  font-size: var(--titre-20);
  line-height: var(--line-height-100);
  font-weight: 700;
  text-transform: uppercase;
}

.modele-usage-texte {
  margin: 0;
  color: var(--light-gold);
  font-size: var(--paragraphe-14);
  line-height: var(--line-height-125);
}

/* ========================== BOUCLES + NOEUDS ========================== */

.modele-boucle-label {
  margin: 0;
  text-align: center;
}

.modele-boucle-label-h {
  display: block;
  color: var(--white);
  font-size: var(--paragraphe-12);
  line-height: var(--line-height-125);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.modele-boucle-label-sub {
  display: block;
  margin-top: 2px;
  color: var(--white);
  font-size: 11px;
  line-height: var(--line-height-125);
  opacity: 0.85;
}

/* Meme forme que les etiquettes .tag de la charte : rayon 150 px, pas 12. */
.modele-boucle-label--services,
.modele-boucle-label--matiere {
  width: fit-content;
  margin: var(--margin-16) auto 8px;
  padding: 8px 20px;
  border-radius: 150px;
}

.modele-boucle-label--services {
  background-color: var(--gold);
}

.modele-boucle-label--matiere {
  background-color: var(--blue);
}

.modele-noeud {
  position: relative;
  padding: 12px 16px 12px var(--noeud-retrait);
  border-left: 4px solid var(--gold);
  background-color: var(--light-gold);
  border-radius: 20px;
}

.modele-noeud--matiere {
  border-left-color: var(--blue);
  background-color: rgba(0, 48, 173, 0.08);
}

/* Le fil qui relie deux etapes CONSECUTIVES DE LA MEME boucle. Le selecteur
   A + A ne le pose que si l'etape precedente appartient a la meme boucle : la
   premiere de chaque boucle n'a donc rien au-dessus d'elle, et il n'y a rien a
   compter ni a nommer dans le HTML pour l'obtenir. Il tombe au centre de la
   pastille parce qu'il relit les mesures declarees sur .modele-card ; `left`
   part du bord interieur du liseret, comme le retrait. */
.modele-noeud--services + .modele-noeud--services::before,
.modele-noeud--matiere + .modele-noeud--matiere::before {
  content: "";
  position: absolute;
  left: calc(var(--noeud-retrait) + var(--pastille) / 2);
  top: calc(-1 * var(--noeud-ecart));
  width: 2px;
  height: var(--noeud-ecart);
  transform: translateX(-50%);
  background-color: var(--gold);
}

.modele-noeud--matiere + .modele-noeud--matiere::before {
  background-color: var(--blue);
}

.modele-noeud-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pastille);
  height: var(--pastille);
  margin-right: 10px;
  border-radius: 50%;
  background-color: var(--gold);
  color: var(--white);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

.modele-noeud--matiere .modele-noeud-num {
  background-color: var(--blue);
}

.modele-noeud-titre {
  display: inline;
  color: var(--dark-blue);
  font-size: var(--paragraphe-16);
  line-height: var(--line-height-125);
  font-weight: 700;
  text-transform: uppercase;
}

.modele-noeud-texte {
  margin: 4px 0 0;
  color: var(--dark-blue);
  font-size: var(--paragraphe-14);
  line-height: var(--line-height-125);
  opacity: 0.75;
}

.modele-transition {
  max-width: 520px;
  margin: 8px auto;
  padding: var(--margin-16) var(--margin-24);
  border-radius: 24px;
  background-color: var(--white);
  border: 1px dashed var(--gold);
  color: var(--dark-blue);
  font-size: var(--paragraphe-14);
  line-height: var(--line-height-125);
  font-style: italic;
  text-align: center;
}

/* En lecture lineaire, la boucle est un flux, pas un tableau : ce qui garde
   les deux boucles lisibles est le fil vertical pose plus haut, pas un fond.
   L'axe du schema est plus etroit que les panneaux qui l'encadrent (800 px).
   Sans cette borne, DEMONTER ou TRANSFORMER, qui n'ont pas de phrase sous leur
   titre, deviennent des barres de 800 px pour deux mots. La colonne etroite
   leur rend leur densite et donne au bloc une vraie colonne vertebrale, les
   ressources et les encarts s'ouvrant plus large au-dessus et en dessous. */
.modele-boucle {
  display: flex;
  flex-direction: column;
  gap: var(--noeud-ecart);
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================== ENCARTS ================================ */

.modele-encarts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--margin-16);
}

.modele-encart {
  padding: var(--margin-24);
  border-radius: var(--border-radius-32);
  background-color: var(--light-gold);
}

.modele-encart-titre {
  margin: 0 0 8px;
  color: var(--dark-blue);
  font-size: var(--paragraphe-12);
  line-height: var(--line-height-125);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.modele-encart-texte {
  margin: 0;
  color: var(--dark-blue);
  font-size: var(--paragraphe-14);
  line-height: var(--line-height-125);
}

.modele-encart--principe {
  background-color: var(--dark-blue);
  background-image: url("/images/3d1571bdce2a17dc5b0bc7f78582682e_BG-PATTERN-DARK-BLUE-BORDER.webp");
  background-position: 50%;
  background-size: var(--motif-tuile);
}

.modele-encart--principe .modele-encart-titre {
  color: var(--gold);
}

.modele-encart-quote {
  margin: 0 0 8px;
  color: var(--white);
  font-size: var(--titre-18);
  line-height: var(--line-height-125);
  font-weight: 700;
}

.modele-encart-note {
  margin: 0;
  color: var(--white);
  font-size: var(--paragraphe-12);
  line-height: var(--line-height-125);
  opacity: 0.75;
}

/* ============================== TAGLINE ================================= */

.modele-tagline {
  max-width: 480px;
  margin: var(--margin-48) auto 0;
  color: var(--dark-blue);
  font-size: var(--titre-20);
  line-height: var(--line-height-125);
  font-weight: 700;
  text-align: center;
}

.modele-ring {
  display: none;
}

/* ====================== PALIERS INTERMEDIAIRES ==========================
 * Toujours la lecture lineaire, mais la carte est assez large pour poser cote
 * a cote ce qui se lit en parallele. Aucune reorganisation du DOM : seules des
 * grilles a une colonne en gagnent une deuxieme ou une troisieme.
 * ======================================================================== */
@media (min-width: 520px) {
  /* Deux ressources cote a cote et la troisieme sous les deux : a cette
     largeur, trois colonnes casseraient « Autres matieres secondaires » sur
     trois lignes, et une seule laisserait une phrase de 50 signes tenir toute
     une ligne de 600 px. La troisieme est celle qui s'etale le mieux : c'est le
     fourre-tout de la liste. */
  .modele-ressources-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .modele-ressource:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 700px) {
  .modele-ressources-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .modele-ressource:last-child {
    grid-column: auto;
  }

  /* Les deux notes cote a cote, la citation en dessous sur toute la largeur :
     elle conclut les deux autres, elle ne se lit pas en parallele avec elles. */
  .modele-encarts {
    grid-template-columns: repeat(2, 1fr);
  }

  .modele-encart--principe {
    grid-column: 1 / -1;
  }
}

@media (min-width: 980px) {
  .modele-encarts {
    grid-template-columns: repeat(3, 1fr);
  }

  .modele-encart--principe {
    grid-column: auto;
  }
}

/* ========================================================================
 * GRAND ECRAN (>= 1300px) : disposition circulaire.
 *
 * Aucun element n'est duplique : ce sont EXACTEMENT les memes 10 noeuds, la
 * meme carte "L'usage", la meme legende de transition et les memes deux
 * etiquettes de boucle que la lecture lineaire ci-dessus. On les fait
 * seulement sortir du flux normal (position: absolute) pour les repartir
 * sur un cercle a 10 points, 36 degres d'ecart, calcules autour du centre de
 * .modele-boucle (top/left en %, translate(-50%,-50%) pour centrer chaque
 * noeud sur son point). En dessous de 1300px, ce bloc entier est ignore :
 * .modele-boucle reste un simple flex-column, donc sans JavaScript un
 * schema a 10 noeuds ne redevient jamais un mur de texte illisible ni un
 * cercle ecrase : il redevient la liste qu'il a toujours ete dans le DOM.
 *
 * 1300px et pas 900/992 (breakpoints habituels du site) : mesure sur les
 * boites reelles (voir historique), en deux temps. A 900-1180px, les 3
 * colonnes (ressources, cercle a 10 noeuds, encarts) n'ont plus la place
 * minimale de tenir cote a cote. A 1180-1300px, les 3 colonnes tiennent
 * mais le cercle qui en resulte (~430-490px) est trop petit : la legende de
 * transition (cf. plus bas) s'y retrouve sur 3 lignes au lieu de 2 et
 * chevauche alors ENTRETENIR/DEMONTER. 1300px est le premier palier ou le
 * cercle (~520px+) laisse assez de marge verticale entre les deux noeuds
 * qui l'encadrent pour cette legende, quel que soit son nombre de lignes.
 * ======================================================================== */
@media (min-width: 1300px) {
  /* Les trois colonnes reprennent toute la largeur de la carte : la borne de
     800 px ne vaut que pour la colonne de LECTURE. */
  .modele-grid {
    display: grid;
    grid-template-columns: minmax(200px, 230px) minmax(420px, 1fr) minmax(220px, 260px);
    gap: 56px;
    align-items: start;
    max-width: none;
  }

  /* Colonne de gauche : le titre et la note retrouvent l'axe du texte, et les
     ressources redeviennent une liste posee. Trois contours empiles y feraient
     une deuxieme colonne de cartes face aux encarts de droite, alors que leur
     role est de rester en retrait. */
  .modele-panel-titre,
  .modele-ressources-note {
    text-align: left;
  }

  .modele-ressources-list {
    grid-template-columns: 1fr;
    gap: var(--margin-24);
  }

  .modele-ressource {
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  .modele-encarts {
    display: flex;
    flex-direction: column;
  }

  /* Ces quatre boites sortent du flux juste en dessous. Les marges de la
     lecture lineaire les decaleraient de quelques pixels par rapport a leur
     point du cercle : sur une boite positionnee, une marge s'AJOUTE au `top`
     calcule. Le fil vertical, lui, n'a plus de sens entre deux noeuds qui ne
     sont plus voisins a l'ecran. */
  .modele-usage,
  .modele-boucle-label--services,
  .modele-boucle-label--matiere,
  .modele-transition {
    margin: 0;
  }

  .modele-noeud::before {
    display: none;
  }

  .modele-ressources,
  .modele-encarts {
    padding-top: var(--margin-64);
  }

  /* La pill "Boucle des services" deborde au-dessus du cercle (top: -6%) :
     l'en-tete a besoin d'une marge basse plus genereuse qu'en lecture
     lineaire pour ne pas la toucher. */
  .modele-header {
    margin-bottom: 96px;
  }

  /* La marge basse reserve la place de la pilule « Boucle matiere », qui est
     posee SOUS le cercle (top: 106 %) et qui, etant hors flux, ne compte pour
     rien dans la hauteur de la colonne. Son debord vaut 6 % de la hauteur du
     cercle plus la moitie de sa propre hauteur, soit 70 px au cercle plein.
     Sans cette reserve, a partir d'environ 1550 px (le cercle atteint alors
     son plafond de 720 px et devient la colonne la plus haute), le bas de la
     pilule passait 3 a 5 px SOUS le haut de la signature « Moins de
     renouvellement ». Mesure le 2026-09-12 a 1600, 1920 et 2560 px. En dessous
     de 1500 px la colonne des encarts reste la plus haute et la marge ne
     change rien. */
  .modele-boucle {
    position: relative;
    display: block;
    width: 100%;
    max-width: 720px;
    margin: 0 auto 72px;
    aspect-ratio: 1 / 1;
  }

  .modele-ring {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 270deg, var(--gold) 0deg 180deg, var(--blue) 180deg 360deg);
    -webkit-mask-image: radial-gradient(closest-side, transparent 62%, #000 63%, #000 69%, transparent 70%);
    mask-image: radial-gradient(closest-side, transparent 62%, #000 63%, #000 69%, transparent 70%);
    opacity: 0.5;
  }

  .modele-usage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34%;
    padding: var(--margin-16);
    border-radius: 50%;
    background-color: var(--dark-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
  }

  .modele-usage-titre {
    color: var(--white);
    font-size: var(--titre-18);
  }

  .modele-usage-texte {
    color: var(--light-gold);
    font-size: 11.5px;
  }

  .modele-boucle-label--services,
  .modele-boucle-label--matiere {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }

  .modele-boucle-label--services {
    top: -6%;
  }

  .modele-boucle-label--matiere {
    top: 106%;
  }

  .modele-noeud {
    position: absolute;
    top: var(--ny);
    left: var(--nx);
    transform: translate(-50%, -50%);
    width: 152px;
    padding: 8px 12px 8px 14px;
    box-shadow: 0 6px 16px rgba(0, 27, 100, 0.12);
  }

  .modele-noeud-titre {
    font-size: 12.5px;
  }

  .modele-noeud-texte {
    font-size: 11px;
  }

  /* Coordonnees des 10 noeuds : cercle a 44 % de rayon, 36 degres d'ecart,
     0 degre = haut, sens horaire (Entretenir -> Reparer -> Adapter ->
     Demonter -> Recuperer -> Requalifier -> Transformer -> Concevoir et
     fabriquer -> Reconditionner -> Reemployer -> retour a Entretenir). */
  .modele-noeud--pos0 { --nx: 50%; --ny: 6%; }
  .modele-noeud--pos1 { --nx: 75.9%; --ny: 14.4%; }
  .modele-noeud--pos2 { --nx: 91.8%; --ny: 36.4%; }
  .modele-noeud--pos3 { --nx: 91.8%; --ny: 63.6%; }
  .modele-noeud--pos4 { --nx: 75.9%; --ny: 85.6%; }
  .modele-noeud--pos5 { --nx: 50%; --ny: 94%; }
  .modele-noeud--pos6 { --nx: 24.1%; --ny: 85.6%; }
  .modele-noeud--pos7 { --nx: 8.2%; --ny: 63.6%; }
  .modele-noeud--pos8 { --nx: 8.2%; --ny: 36.4%; }
  .modele-noeud--pos9 { --nx: 24.1%; --ny: 14.4%; }

  /* Positionnee dans le couloir vide entre ADAPTER et DEMONTER (memes
     coordonnees que la legende du schema source, cote droit de l'anneau) :
     ancree verticalement au milieu de ce couloir, sans centrage horizontal
     pour pouvoir s'etendre vers la droite sans jamais toucher le cercle
     "L'usage" (elle part de son bord) ni les deux noeuds voisins (le
     couloir est libre en Y, l'axe qui compte pour eux). Verifie par mesure
     des boites reelles, pas a l'oeil : voir mesures dans l'historique. */
  .modele-transition {
    position: absolute;
    top: 51%;
    left: 69%;
    transform: translateY(-50%);
    /* Largeur relative au cercle (pas un px fixe) : elle retrecit avec lui
       plutot que de deborder a la premiere taille d'ecran venue. */
    width: 32%;
    max-width: 220px;
    padding: 10px 14px;
    font-size: 10.5px;
    text-align: left;
  }

  .modele-tagline {
    margin-top: var(--margin-64);
  }

  .modele-card {
    padding: var(--margin-64);
  }
}