/* Genere par app/site/scripts/feuille-o.ts depuis 2-CE-QU-ON-VA-CONSTRUIRE/maquettes/habillage/habillage-commande.html (sha256 716049d097d023ca032feecc26f9800a8c34a339f4035433cb374aaedfc2d533) : ne pas editer, regenerer (D-325). */

.o [hidden] { display: none !important; }
html, body { background: var(--o-cire); color: var(--o-encre); }
body { font: 16px/1.55 "Commissioner", "Segoe UI", Arial, sans-serif; }
.o :focus-visible { outline: 2px solid var(--brun); outline-offset: 3px; }
.o .repere { display: none; }













 
.cookies { position: fixed; left: 20px; bottom: 20px; z-index: 30; max-width: 400px; background: var(--o-bloc); border-top: 4px solid var(--o-jaune); padding: 16px 18px; font: 13.5px/1.5 "Commissioner", sans-serif; box-shadow: 0 10px 30px rgba(42,18,9,.12); }
.cookies p { margin: 0 0 10px; }
.cookies div { display: flex; gap: 10px; }
.cookies button { flex: 1; min-height: var(--o-taille-touche); font: 700 14px "Commissioner", sans-serif; background: var(--o-bloc); color: var(--o-brun); border: 1.5px solid var(--o-brun); cursor: pointer; }
.o .entete .marque { line-height: 0; flex: none; }
.o .entete .outils a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--o-taille-touche); text-decoration: none; color: var(--brun); }
.o .entete .outils svg { width: 20px; height: 20px; }
.o .entete details.compte { position: relative; }
.o .entete details.compte summary .mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.o .entete details.compte summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--o-taille-touche); cursor: pointer; color: var(--brun); font-weight: 600; font-size: 14px; }
.o .entete details.compte summary::-webkit-details-marker { display: none; }
.o .entete details.compte ul { position: absolute; right: 0; top: 100%; z-index: 20; list-style: none; margin: 6px 0 0; padding: 8px 0; min-width: 220px; background: var(--bloc); box-shadow: 0 12px 30px -12px rgba(42,18,9,.35); border-top: 3px solid var(--jaune); }
.o .entete details.compte ul a { display: flex; min-height: var(--o-taille-touche); align-items: center; padding: 0 18px; font-size: 14px; }
.o .entete details.compte ul a:hover { background: var(--cire); }
.o .services a { text-decoration: none; color: var(--second); }
.o .services a.pro-lien { color: var(--nuit); }
.o h2.etiq-c { font-family: var(--corps); font-variation-settings: normal; font-weight: 700; font-size: 12px; letter-spacing: .14em; line-height: 1.3; color: var(--brun); }
.o .ouverture-claire h1 { font-size: 58px; max-width: 15ch; }
.o .ouverture-claire h1 .h1-suite { display: block; margin-top: 14px; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; color: var(--encre); max-width: 26ch; }
.o .ouv-photo { position: relative; }
.o .retrait-o { position: relative; margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14.5px; color: var(--second); max-width: 46ch; }
.o .retrait-o b { color: var(--encre); }
.o .fine-saison { position: relative; margin: 22px 0 0; font-size: 14.5px; color: var(--second); max-width: 46ch; }
.o .rayons .aussi { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 22px 0 0; }
.o .rail-fleches { display: flex; gap: 8px; }
.o .rail-fleches button { width: var(--o-taille-touche); height: var(--o-taille-touche); border-radius: var(--o-rayon-rond); border: 0; background: var(--bloc); box-shadow: inset 0 0 0 1px var(--trait); color: var(--brun); font-size: 18px; cursor: pointer; }
.o .rail-fleches button:hover { background: var(--brun); color: var(--sur-brun); }
.o .btn-brun, .o .btn-nuit { border: 0; cursor: pointer; font-family: var(--corps); }
.o .pro-fait { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 14.5px; }
.o .konigin-o { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding-top: 10px; padding-bottom: 80px; }
.o .konigin-o .a-photographier { min-height: 520px; }
.o .konigin-o h2 { margin: 0 0 14px; font-size: 38px; line-height: 1.1; color: var(--brun); letter-spacing: -.018em; }
.o .konigin-o > div > p.intro-k { margin: 0 0 22px; color: var(--second); font-size: 17px; }
.o .konigin-o > div > p.intro-k b { color: var(--encre); }
.o .familles-o { margin: 0 0 26px; }
.o .familles-o .etiq-c { margin: 14px 0 6px; }
.o .deux-o { padding-top: 70px; padding-bottom: 20px; }
.o .deux-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.o .monde { background: var(--bloc); display: grid; grid-template-rows: auto 1fr; }
.o .monde > a { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; padding: 22px 26px; text-decoration: none; }
.o .monde .objet { height: 210px; }
.o .monde .objet > img { max-width: 70%; max-height: 80%; }
.o .monde h3 { margin: 0 0 8px; font-size: 28px; color: var(--brun); font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; }
.o .monde em { font-style: normal; color: var(--second); font-size: 15px; }
.o .monde .univers-liste { border-top: 1px solid var(--trait); }
.o .monde .univers-liste li { padding: 12px 26px; }
.o .monde .univers-liste li span { color: var(--second); font-size: 14px; text-align: right; }
.o .porte-pro { margin: 20px 0 0; font-size: 15px; color: var(--second); }
.o .a-photographier { position: relative; margin: 0; min-height: 300px; display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1.5px #CDBB92; }
.o .ap-centre { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 26px 26px 120px; --fond-picto: var(--o-creux); }
.o .a-photographier:not(:has(.ap-avantage)) .ap-centre { padding-bottom: 26px; }
.o .ap-tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--nuit); background: var(--jaune); padding: 3px 9px; }
.o .ap-sujet { font-size: 15px; color: var(--second); max-width: 30ch; }
.o .ap-avantage { position: absolute; left: 18px; right: 18px; bottom: 18px; background: var(--bloc); border-top: 4px solid var(--jaune); padding: 16px 18px; display: grid; gap: 4px; text-align: left; }
.o .ap-avantage small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--brun); }
.o .ap-avantage b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 24px; line-height: 1.15; color: var(--brun); }
.o .ap-avantage > span { font-size: 14px; color: var(--second); }
.o .galerie-o { position: relative; background: var(--bloc); }
.o .galerie-piste { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.o .galerie-piste::-webkit-scrollbar { display: none; }
.o .galerie-piste > * { scroll-snap-align: start; height: 540px; }
.o .galerie-piste .objet-grand { height: 540px; }
.o .galerie-piste .a-photographier { min-height: 0; box-shadow: none; }
.o .galerie-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--trait); }
.o .vignettes { display: flex; gap: 8px; flex-wrap: wrap; }
.o .vignettes button { font: 600 13px var(--corps); color: var(--second); background: var(--cire); border: 0; box-shadow: inset 0 0 0 1px var(--trait); padding: 8px 12px; min-height: 40px; cursor: pointer; }
.o .vignettes button[aria-current="true"] { background: var(--brun); color: var(--sur-brun); box-shadow: none; }
.o .dc-pro { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; font-size: 14.5px; color: var(--second); }
.o .dc-pro b { color: var(--encre); } .o .dc-pro a { color: var(--brun); font-weight: 600; }
.o .qte-ligne { display: flex; gap: 14px; align-items: end; margin: 0; }
.o .qte-ligne .btn-brun { flex: 1; text-align: center; padding: 16px 22px; font-size: 15px; }
.o .epuise-o { background: var(--creux); padding: 18px 20px; display: grid; gap: 8px; margin: 0 0 18px; font-size: 15px; }
.o .epuise-o form { display: grid; gap: 10px; }
.o .epuise-o label { display: grid; gap: 6px; font-size: 13px; color: var(--second); }
.o .epuise-o input { font: inherit; padding: 12px; border: 1.5px solid var(--second); background: var(--bloc); }
.o .bloc-faq details.faq-q { display: block; padding: 0; }
.o .bloc-faq details.faq-q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 18px 24px; }
.o .bloc-faq details.faq-q summary::-webkit-details-marker { display: none; }
.o .bloc-faq details.faq-q p { margin: 0; padding: 0 24px 18px; font-size: 15px; }
.o .avis-titre { margin: 0 0 14px; font-size: 26px; color: var(--brun); grid-column: 1 / -1; }
.o .barre-geste { position: sticky; bottom: 0; z-index: 8; display: none; background: var(--bloc); border-top: 4px solid var(--jaune); padding: 10px 20px; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.o .article-o { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; padding-top: 26px; padding-bottom: 60px; align-items: start; }
.o .article-o h1 { margin: 0 0 18px; font-size: 56px; line-height: 1.03; color: var(--brun); letter-spacing: -.02em; }
.o .deux-phrases { margin: 0 0 16px; font-size: 20px; line-height: 1.5; color: var(--encre); max-width: 60ch; }
.o .modeles { margin: 0 0 30px; font-size: 15px; color: var(--second); }
.o .modeles a { color: var(--brun); font-weight: 700; }
.o .photo-article { min-height: 340px; }
.o .schema-o { background: var(--bloc); padding: 26px 28px 22px; margin: 34px 0 40px; border-top: 4px solid var(--jaune); }
.o .schema-o h2 { margin: 0 0 12px; font-size: 30px; color: var(--brun); }
.o .schema-o > p { margin: 0 0 18px; color: var(--second); }
.o .schema-o figure { margin: 0; }
.o .schema-o figcaption { margin-top: 14px; font-size: 14px; color: var(--second); }
.o .schema-o figcaption b { color: var(--encre); }
.o .schema-o figcaption .source { display: block; margin-top: 8px; font-size: 12.5px; }
.o .corps-o { max-width: 70ch; font-size: 17px; line-height: 1.7; }
.o .corps-o h2 { margin: 44px 0 14px; font-size: 32px; line-height: 1.12; color: var(--brun); }
.o .corps-o p { margin: 0 0 18px; }
.o .corps-o p.chapo { font-size: 19px; color: var(--encre); }
.o .corps-o a { color: var(--brun); font-weight: 600; }
.o .corps-o > a { display: block; margin: 20px 0 4px; }
.o .corps-o ul.list { list-style: none; margin: 0 0 22px; padding: 18px 22px; background: var(--bloc); display: grid; gap: 10px; }
.o .corps-o ul.list li { position: relative; padding-left: 26px; }
.o .corps-o ul.list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 13px; background: var(--jaune); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.o .corps-o ol { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: av; display: grid; gap: 12px; }
.o .corps-o ol li { counter-increment: av; display: grid; grid-template-columns: 34px 1fr; gap: 16px; background: var(--bloc); padding: 18px 20px; }
.o .corps-o ol li::before { content: counter(av); width: 34px; height: 34px; border-radius: var(--o-rayon-rond); background: var(--jaune); color: var(--nuit); font: 700 15px/34px var(--corps); text-align: center; }
.o .corps-o ol li p { margin: 0; }
.o .citation-o { margin: 8px 0 30px; }
.o .citation-o blockquote { margin: 0; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 26px; line-height: 1.25; color: var(--sur-brun); }
.o .cote-o { position: sticky; top: 20px; display: grid; gap: 18px; }
.o .cote-o .horaires h2 { margin: 0 0 4px; font-size: 22px; color: var(--brun); }
.o .cote-o h2.etiq-c { margin: 0 0 10px; }
.o .pied-article-o { padding-bottom: 70px; }
.o .pied-article-o h2 { margin: 0 0 18px; font-size: 34px; color: var(--brun); }
.o .pied-article-o ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.o .pied-article-o a { background: var(--bloc); padding: 20px 22px; text-decoration: none; display: flex; gap: 14px; align-items: center; border-left: 4px solid var(--jaune); height: 100%; --fond-picto: var(--o-bloc); }
.o .pied-article-o b { display: block; font-size: 17px; color: var(--encre); }
.o .pied-article-o em { font-style: normal; font-size: 14px; color: var(--second); }
.o .legal { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--brun); }
.o .legal a { display: inline; color: var(--second-brun); font-size: 13px; }
@media (max-width: 960px) {
  .o .w, .maquette .mw { padding-left: 20px; padding-right: 20px; }
  .o .ouverture-claire { overflow-x: clip; }
  .o .ouv-grille, .o .rayons-grille, .o .pro-grille, .o .jan-grille, .o .fiche-grille, .o .cartes-avantages, .o .fiche-bas2, .o .bloc-conseils,
  .o .fiche-avec, .o .bloc-avis-partage, .o .konigin-o, .o .deux-grille, .o .article-o, .o .pied-article-o ul, .o .magasin-carte { grid-template-columns: 1fr; gap: 22px; }
  .o .marques-rang, .o .reassurance, .o .chiffres-rang, .o .ft-3, .o .pied-grille { grid-template-columns: 1fr 1fr; }
  .o .chiffres-rang div:nth-child(3) { background: none; padding-left: 0; } .o .chiffres-rang b { font-size: 44px; }
  .o .ouv-texte { padding: 30px 0; } .o .ouv-photo { margin: 0 -20px; order: -1; } .o .ouv-photo > img { width: 100%; height: 340px; object-fit: cover; }
  .o .ouverture-claire h1, .o .article-o h1 { font-size: 40px; } .o .ouverture-claire h1 .h1-suite { font-size: 21px; }
  .o .rayon-grand { grid-row: auto; } .o .rail-piste { grid-auto-columns: 72%; } .o .rail-campagne { grid-column: span 1; grid-template-columns: 1fr; grid-template-rows: 200px auto; }
  .o .rail-fleches { display: none; } .o .monde > a { grid-template-columns: 1fr; } .o .monde .objet { height: 180px; } .o .konigin-o .a-photographier { min-height: 300px; }
  .o .galerie-piste > *, .o .galerie-piste .objet-grand { height: 380px; }
  .o .decision-o h1 { font-size: 34px; } .o .cote-o { position: static; } .o .barre-geste { display: grid; }
  body:has(.o .barre-geste) .cookies { bottom: 96px; }   /* 18/09 — relecture UX : le bandeau ne recouvre plus la barre d’achat */
  .o .pied-grille > img { display: none; }
  .o .bloc-logistique { grid-template-columns: 1fr; } .o .objet-grand { height: 360px; } .o .dc-prix { gap: 6px; } .o .prix-grand { font-size: 42px; }
  .o .fiche-grille, .o .fiche-bas2, .o .fiche-avec { overflow-wrap: anywhere; } .o .qte input { width: 72px; }
}

/* l'image à venir : un fond uni, ce qu'elle montre, ce qu'elle dit */
.o .image-a-venir { position: relative; margin: 0; display: grid; place-items: center; overflow: hidden;
  background-color: #EFE4CA; background-image: linear-gradient(135deg, #F4EBD6 0%, #E7D7B3 100%); }
.o .image-a-venir::after { content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(85,37,19,.28); pointer-events: none; }
.o .iav-cadre { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; padding: 18px 22px; text-align: center; max-width: 46ch; }
.o .iav-tag { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--nuit); background: var(--jaune); padding: 3px 9px; }
.o .iav-sujet { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--brun); }
.o .iav-dit { font-size: 13px; color: var(--second); }
.o .image-a-venir.mini .iav-sujet { font-size: 13px; } .o .image-a-venir.mini .iav-dit { display: none; } .o .image-a-venir.mini .iav-cadre { padding: 10px; }
.o .objet > img { mix-blend-mode: multiply; }
/* le diaporama plein pied de l'accueil */
.o .diaporama { position: relative; background-color: var(--nuit); color: var(--sur-brun); }
.o .diapo { position: relative; height: min(76vh, 700px); min-height: 520px; background-color: var(--nuit); overflow: hidden; }
.o .diapo:not([hidden]) { animation: diapo-entre .7s ease both; }
@keyframes diapo-entre { from { opacity: 0; } to { opacity: 1; } }
.o .diapo > .image-a-venir, .o .diapo > img, .o .diapo > picture, .o .diapo > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.o .diapo > .image-a-venir { place-items: start end; }
.o .diapo > .image-a-venir .iav-cadre { margin: 22px 26px 0 0; background: rgba(255,255,255,.72); justify-items: end; text-align: right; }
/* ✏️ 23/09, Ruben : « le dégradé marron trop contrasté, ça met moins l'image en valeur » -> option B : sur ordinateur, le voile
   ne couvre que le côté du texte et s'efface avant le sujet de la photo ; sur téléphone (≤ 960 px), le voile de bas en haut reste.
   ✏️ 23/09 (« un bug de dimension ») : sur ordinateur le voile prend TOUTE la hauteur de la photo (top: 0), le texte reste en bas. */
.o .diapo-voile { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 150px 0 92px; background: linear-gradient(90deg, rgba(42,18,9,.66) 0%, rgba(42,18,9,.38) 38%, rgba(42,18,9,0) 62%); }
.o .diapo-texte { display: grid; gap: 14px; justify-items: start; }
.o .diapo-voile > .diapo-texte { width: 100%; }   /* 23/09 : dans le voile en colonne, les marges auto du .w le centraient */
.o .diapo .etiq-c { color: var(--jaune); margin: 0; }
.o .diapo h1, .o .diapo .diapo-titre { margin: 0; font-family: var(--titres); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-weight: 700;
  font-size: 58px; line-height: 1.03; letter-spacing: -.02em; color: var(--sur-brun); max-width: 16ch; }
.o .diapo h1 .h1-suite { display: block; margin-top: 10px; font-size: 22px; line-height: 1.25; color: var(--second-brun); max-width: 34ch; letter-spacing: 0; }
.o .diapo .diapo-fine { margin: 0; font-size: 17px; color: var(--second-brun); }
.o .diapo .gestes { margin: 8px 0 0; }
.o .diapo .btn-brun { background: var(--jaune); color: var(--nuit); }
.o .diapo-commandes { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3; display: flex; align-items: center; gap: 10px; }
.o .diapo-commandes button { height: 40px; min-width: 40px; border-radius: 20px; border: 0; background: rgba(252,249,241,.16); color: var(--sur-brun); font: 600 13px var(--corps); cursor: pointer; padding: 0 12px; }
.o .diapo-commandes button:hover, .o .diapo-commandes button[aria-current="true"] { background: var(--sur-brun); color: var(--nuit); }
.o .diapo-points { display: flex; gap: 6px; margin-left: 8px; }
/* l'accueil : l'univers en images */
.o .univers-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.o .univers-images a { display: grid; gap: 12px; text-decoration: none; }
.o .univers-images .image-a-venir { aspect-ratio: 4 / 3; }
.o .univers-images b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 23px; color: var(--brun); line-height: 1.15; }
.o .univers-images span.sous { font-size: 14px; color: var(--second); margin-top: -8px; }
.o .reassurance-3 { grid-template-columns: repeat(3, 1fr); padding-top: 26px; }
/* la fiche : l'ordre de l'acheteur */
.o .fiche-vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.o .fiche-vignettes .image-a-venir { aspect-ratio: 1; }
.o .compat { margin: 0 0 20px; padding: 12px 16px; background: var(--bloc); border-left: 4px solid var(--jaune); font-size: 15px; display: grid; gap: 2px; }
.o .compat b { color: var(--encre); } .o .compat a { color: var(--brun); font-weight: 600; }
.o .sommaire-fiche { position: sticky; top: 0; z-index: 7; background: var(--cire); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); margin: 0 0 44px; }
.o .sommaire-fiche .w { display: flex; gap: 6px 26px; flex-wrap: wrap; align-items: center; min-height: 54px; font-size: 14.5px; font-weight: 600; }
.o .sommaire-fiche a { text-decoration: none; color: var(--encre); padding: 6px 0; }
.o .sommaire-fiche a:hover { box-shadow: inset 0 -3px var(--jaune); }
.o .sommaire-fiche .sf-prix { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.o .sommaire-fiche .sf-prix b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 22px; }
.o .sommaire-fiche .btn-brun { padding: 10px 18px; font-size: 13px; }
.o .cartes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.o .caracs-seules { grid-template-columns: 1fr; }
.o .ft-4 { grid-template-columns: repeat(4, 1fr); }
.o .completer { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding-bottom: 56px; }
.o .completer h2 { margin: 0 0 16px; font-size: 30px; color: var(--brun); grid-column: 1 / -1; }
.o .completer h3 { margin: 0 0 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brun); font-family: var(--corps); font-variation-settings: normal; }
.o .avis-ligne { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; padding-bottom: 56px; }
/* l'article */
.o .article-tete { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; padding-top: 22px; padding-bottom: 40px; }
.o .article-tete h1 { margin: 0 0 18px; font-size: 56px; line-height: 1.03; color: var(--brun); letter-spacing: -.02em; }
.o .article-tete .image-a-venir { min-height: 380px; }
.o .sommaire-article { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 34px; padding: 14px 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); font-size: 14.5px; font-weight: 600; }
.o .sommaire-article a { text-decoration: none; color: var(--brun); }
.o .article-corps { padding-bottom: 50px; }
.o .article-corps .schema-o { margin-top: 0; }
.o .article-corps .corps-o { max-width: 76ch; }
.o .corps-o .cartes-texte { list-style: none; margin: 8px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: none; }
.o .corps-o .cartes-texte li { background: var(--bloc); display: grid; grid-template-rows: auto 1fr; font-size: 15.5px; line-height: 1.55; }
.o .corps-o .cartes-texte li { padding-left: 0; border: 0; } .o .corps-o .cartes-texte li::before { display: none; }
.o .corps-o .cartes-texte li > span.txt { padding: 16px 18px 18px; border-top: 4px solid var(--jaune); }
.o .corps-o .cartes-texte .image-a-venir { aspect-ratio: 16 / 9; }
.o .corps-o ol.cartes-num { grid-template-columns: repeat(3, minmax(0, 1fr)); display: grid; }
.o .corps-o ol.cartes-num li { grid-template-columns: 34px 1fr; }
.o .article-magasin { padding-bottom: 60px; }
.o .pied-article-img ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.o .pied-article-img a { display: grid; gap: 10px; text-decoration: none; }
.o .pied-article-img .image-a-venir { aspect-ratio: 16 / 9; }
.o .pied-article-img b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 21px; color: var(--brun); }
.o .pied-article-img em { font-style: normal; font-size: 14px; color: var(--second); margin-top: -6px; }
.o .pied-article-img h2 { margin: 0 0 18px; font-size: 34px; color: var(--brun); }
@media (max-width: 960px) {
  .o .diapo-voile { top: auto; display: block; background: linear-gradient(180deg, rgba(42,18,9,0) 0%, rgba(42,18,9,.78) 62%); }
  .o .diapo { height: 560px; min-height: 0; } .o .diapo h1, .o .diapo .diapo-titre { font-size: 36px; } .o .diapo h1 .h1-suite { font-size: 17px; }
  .o .diapo > .image-a-venir .iav-cadre { margin: 12px; } .o .diapo > .image-a-venir .iav-dit { display: none; }
  .o .univers-images, .o .reassurance-3, .o .cartes-4, .o .ft-4, .o .completer, .o .avis-ligne, .o .article-tete, .o .corps-o .cartes-texte,
  .o .corps-o ol.cartes-num, .o .pied-article-img ul { grid-template-columns: 1fr; }
  .o .univers-images { grid-template-columns: 1fr 1fr; } .o .ft-4 { grid-template-columns: 1fr 1fr; }
  .o .sommaire-fiche .w { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; } .o .sommaire-fiche .sf-prix { display: none; }
  .o .article-tete h1 { font-size: 40px; } .o .article-tete .image-a-venir { min-height: 240px; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .o .diapo:not([hidden]) { animation: none; } }

/* v5 : les repères de la charte (1 à 15) se montrent avec le bouton « notes » */

.o .sr-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* la charte telle quelle : les réglages des versions précédentes qui la contredisaient sont annulés */
.o .ouverture-claire h1 { font-size: 64px; max-width: 16ch; }
.o form.qte { margin: 0; }
/* l'accueil : les photos défilent dans le cadre photo de la charte */
.o .ouv-photo > .image-a-venir, .o .ouv-photo > img, .o .ouv-photo > picture, .o .ouv-photo > picture > img { position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; }
.o .photo-commandes { position: absolute; left: 18px; bottom: 18px; z-index: 3; display: flex; gap: 8px; }
.o .photo-commandes button { width: var(--o-taille-touche); height: var(--o-taille-touche); border-radius: var(--o-rayon-rond); border: 0; background: var(--bloc); box-shadow: inset 0 0 0 1px var(--trait); color: var(--brun); font: 700 15px var(--corps); cursor: pointer; }
.o .photo-commandes button:hover { background: var(--brun); color: var(--sur-brun); }
/* l'article, avec les pièces de la charte */
.o .article-ouv .ouv-grille { min-height: 520px; }
.o .article-ouv h1 { max-width: 14ch; }
.o .article-bloc { padding-top: 56px; }
.o .article-bloc .corps-o { max-width: 820px; }
.o .corps-o ul.cartes-avantages { margin: 8px 0 30px; padding: 0; background: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.o .corps-o ul.cartes-avantages li { padding: 24px 24px 26px; }
.o .corps-o ul.cartes-avantages li::before { content: none; }
.o .corps-o .cartes-avantages span b { font-family: var(--corps); font-variation-settings: normal; font-size: inherit; color: var(--encre); }
.o .corps-o ol.etapes { margin: 8px 0 30px; }
.o .corps-o ol.etapes li { display: grid; background: var(--bloc); }
.o .corps-o ol.etapes li::before { content: none; }
.o .rayons-6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.o .article-bas { padding-top: 40px; padding-bottom: 70px; }
@media (max-width: 960px) {
  .o .rayons-6, .o .corps-o .cartes-avantages { grid-template-columns: 1fr; }
  .o .ouverture-claire h1 { font-size: 40px; } .o .ouv-photo { min-height: 340px; }
}

/* ═══ L'HABILLAGE DES PAGES PRIVÉES DE PRESTASHOP — Ruben, 24/09 (REPONSES §46). Sous body[data-habillage] seulement ═══ */
/* 0. le cadre O : ses deux enveloppes (CategorieO.astro) */
.o-cadre-haut, .o-cadre-bas { background: transparent; }
.o-cadre-bas { margin-top: auto; }
/* 1. les blocs masqués : une liste blanche, et rien d'autre ne se masque */
body[data-habillage] #header { display: none !important; }   /* l'en-tête du thème (bandeau, menu, recherche, compte, .blockcart) : l'en-tête O le remplace */
body[data-habillage] #footer:has(#cookie_notice) > :not(:has(#cookie_notice)):not(#cookie_notice):not(#modal):not(.js-checkout-modal) { display: none !important; }   /* le pied du thème, premier niveau (lettre, liens, logos de paiement, « Follow Our Social », haut de page), sauf la branche du bandeau cookies et la fenêtre des CGV (28/09) */
body[data-habillage] #footer :has(#cookie_notice) > :not(:has(#cookie_notice)):not(#cookie_notice):not(#modal):not(.js-checkout-modal) { display: none !important; }   /* le pied du thème, niveaux suivants : tout sauf le bandeau cookies, ses ancêtres et la fenêtre des CGV (28/09) */
body[data-habillage] #footer:not(:has(#cookie_notice)) > :not(#modal):not(.js-checkout-modal) { display: none !important; }   /* le pied du thème, s'il n'a pas de bandeau cookies (le pied de commande 1.7.8.7), sauf la fenêtre des CGV (28/09) */
body[data-habillage] .block-social { display: none !important; }   /* « Follow Our Social » (un H1) */
body[data-habillage] section.featured-products { display: none !important; }   /* « Produits populaires » (un H1, quatre formulaires) */
body[data-habillage] nav.breadcrumb { display: none !important; }   /* « Domicile » */
body[data-habillage] #left-column { display: none !important; }   /* l'arbre de 104 catégories des pages de compte (absent du panier) */
body[data-habillage] .blockreassurance_product { display: none !important; }   /* « (à modifier dans le module "Réassurance") », trois fois */
/* 2. le fond : ce que la feuille du thème pose sur <body> (Roboto 14 px, gris, blanc, lettres espacées de 0,5 px) et qui fuirait
      dans l'en-tête et le pied O ; le corps des pages O (build_pages_o.AJOUTS) le reprend, lettres comprises */
body[data-habillage] { background: var(--o-cire); color: var(--o-encre); font: 16px/1.55 "Commissioner", "Segoe UI", Arial, sans-serif; letter-spacing: normal; }
body[data-habillage] #page, body[data-habillage] #wrapper { background: transparent; box-shadow: none; }
/* 2 bis. la feuille du thème fuit dans le cadre O (mesuré le 24/09 : styles calculés des 249 éléments du cadre, planche contre
      connexion.html). Bootstrap et Codezeel posent des règles sur les éléments nus (button, b, a, label, p, form, address) : le cadre O
      les retrouve telles que le navigateur les rend sur les pages V2 — « revert », sous :where() (spécificité d'un élément nu), pour
      que toute règle de la charte passe devant */
:where(body[data-habillage] .o) :is(button, input, select, textarea) { font-family: revert; font-size: revert; line-height: revert; }
:where(body[data-habillage] .o) :is(b, strong) { color: revert; font-weight: revert; }
:where(body[data-habillage] .o) a { text-decoration: revert; }
:where(body[data-habillage] .o) label { text-align: revert; font-weight: revert; color: revert; margin: revert; }
:where(body[data-habillage] .o) :is(p, form, address) { margin: revert; }
/* le pied du thème ne garde que le bandeau cookies, en position fixe : ses enveloppes ne prennent plus de place (ni fond, ni marge) */
body[data-habillage] #footer, body[data-habillage] #footer .footer-container, body[data-habillage] #footer .footer-container > .container,
body[data-habillage] #footer .row.footer { background: none; margin: 0; padding: 0; border: 0; min-height: 0; }
/* 3. la grille des pages O (.o .w : 1 240 px, 40 px de marge ; 20 px sous 960 px) et l'écran de travail du tunnel (.o .tn) */
body[data-habillage] #wrapper { padding: 30px 0 84px; }
body[data-habillage] #wrapper > .container, body[data-habillage] #notifications > .container { width: auto; max-width: 1240px; margin: 0 auto; padding: 0 40px; }
body[data-habillage] #columns_inner, body[data-habillage] #content-wrapper { width: auto; max-width: none; float: none; margin: 0; padding: 0; }
/* la grille du panier : le travail à gauche, la commande à droite (.tn-grille) ; les pseudo-éléments du « clearfix » de Bootstrap n'y
   prennent pas de case */
body[data-habillage] .cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; margin: 0; }
body[data-habillage] .cart-grid::before, body[data-habillage] .cart-grid::after { content: none; }
body[data-habillage] .cart-grid > [class*="col-"] { width: auto; max-width: none; float: none; padding: 0; min-width: 0; }
/* 4. la carte blanche (.tn-carte) : PrestaShop l'appelle .card */
body[data-habillage] :is(#main, #content) .card { margin: 0; padding: 28px 30px; background: var(--o-bloc); border: 0; border-radius: var(--o-rayon-plaque); box-shadow: inset 0 0 0 1px var(--o-trait); min-width: 0; }
body[data-habillage] :is(#main, #content) .card-block:not(.card) { padding: 0; border: 0; }   /* .page-content est à la fois .card et .card-block : elle garde la marge de la carte */
body[data-habillage] :is(#main, #content) .card hr.separator { margin: 18px 0; border: 0; border-top: 1px solid var(--o-trait); }
/* le titre : Fraunces en brun (.o .tn h1) */
body[data-habillage] :is(#main, #content) h1, body[data-habillage] :is(#main, #content) .h1 { margin: 0 0 18px; font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 40px; line-height: 1.08; letter-spacing: -.015em; text-transform: none; color: var(--o-brun); }
body[data-habillage] :is(#main, #content) .card-block > h1, body[data-habillage] :is(#main, #content) .card-block > .h1 { margin: 0; }
/* le panier vide : la phrase d'introduction du tunnel (.tn-intro) */
body[data-habillage] .cart-grid-body .cart-overview { padding: 0; }
body[data-habillage] .cart-overview .no-items { display: block; padding: 0; font-size: 17px; line-height: 1.55; color: var(--o-encre); }
/* « Continuer mes achats » : le geste bordé du tunnel (.tn-bord), en pilule */
body[data-habillage] .cart-grid-body > a.label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 20px 0 0; min-height: var(--o-taille-geste); padding: 0 26px;
  border-radius: var(--o-rayon-pilule); background: var(--o-bloc); color: var(--o-brun); box-shadow: inset 0 0 0 2px var(--o-brun); font: 700 15.5px/1.2 "Commissioner", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0; text-align: center; text-decoration: none; }
body[data-habillage] .cart-grid-body > a.label:hover { background: var(--o-cire); color: var(--o-brun); }
body[data-habillage] .cart-grid-body > a.label .material-icons { font-size: 20px; }
/* 4 bis. les lignes du panier PLEIN (relevé du 25/09, panier anonyme de 10 cadres, vu habillé en ligne : le nom en noir, le prix en gris,
      la quantité tronquée « 1C » -- 43 px dont 28 de marge --, les flèches et la corbeille du thème) : les lignes du récapitulatif du
      tunnel (.tn-ligne) -- la photo à gauche, le nom et le prix unitaire, puis la quantité, le total de la ligne et le retrait */
body[data-habillage] .cart-items { margin: 0; padding: 0; list-style: none; }
body[data-habillage] .cart-item { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--o-trait); }
body[data-habillage] .cart-item:last-child { border-bottom: 0; padding-bottom: 0; }
body[data-habillage] .product-line-grid { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 18px; align-items: center; }
body[data-habillage] .product-line-grid > .clearfix, body[data-habillage] .product-line-grid::before, body[data-habillage] .product-line-grid::after { content: none; display: contents; }
body[data-habillage] .product-line-grid > [class*="col-"], body[data-habillage] .product-line-actions [class*="col-"] { width: auto; max-width: none; float: none; padding: 0; min-width: 0; }
body[data-habillage] .product-line-grid-left img { display: block; width: 88px; height: auto; border: 1px solid var(--o-trait); border-radius: var(--o-rayon-champ); background: var(--o-bloc); }
body[data-habillage] .product-line-info { margin: 0; }
body[data-habillage] .product-line-info a.label { color: var(--o-encre); font-size: 16px; font-weight: 600; line-height: 1.35; text-decoration: none; }
body[data-habillage] .product-line-info a.label:hover { text-decoration: underline; }
body[data-habillage] .product-line-info.product-price, body[data-habillage] .product-line-info .price { margin: 4px 0 0; font-size: 14px; font-weight: 400; color: var(--o-second); }
body[data-habillage] .product-line-grid-body > br { display: contents; }
body[data-habillage] .product-line-actions .row { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin: 0; }
body[data-habillage] .product-line-actions .row::before, body[data-habillage] .product-line-actions .row::after { content: none; }
body[data-habillage] .product-line-actions .qty .bootstrap-touchspin { display: inline-flex; align-items: stretch; width: auto; }
body[data-habillage] :is(#main, #content) .product-line-actions .js-cart-line-product-quantity { width: 64px; min-height: 50px; padding: 10px 6px; text-align: center; border-radius: 6px 0 0 6px; }
body[data-habillage] .bootstrap-touchspin .input-group-btn-vertical { display: flex; flex-direction: column; }
body[data-habillage] .bootstrap-touchspin .btn-touchspin { flex: 1; min-width: 28px; padding: 0; border: 1.5px solid var(--o-second); border-left: 0; background: var(--o-bloc); color: var(--o-brun); }
body[data-habillage] .bootstrap-touchspin .bootstrap-touchspin-up { border-radius: 0 6px 0 0; border-bottom-width: .75px; }
body[data-habillage] .bootstrap-touchspin .bootstrap-touchspin-down { border-radius: 0 0 6px 0; border-top-width: .75px; }
body[data-habillage] .product-line-actions .product-price, body[data-habillage] .product-line-actions .product-price strong { font-size: 16px; font-weight: 700; white-space: nowrap; color: var(--o-encre); }
body[data-habillage] .remove-from-cart { display: inline-flex; color: var(--o-brun); }
body[data-habillage] .remove-from-cart:hover { color: var(--o-etat-non); }
body[data-habillage] .remove-from-cart .material-icons { float: none; font-size: 22px; }
/* le code de réduction : le lien de la charte (brun, souligné) et le champ du formulaire (.tn-form) */
body[data-habillage] .block-promo { margin: 14px 0 0; }
body[data-habillage] .block-promo .promo-code-button { margin: 0; padding: 0; }
body[data-habillage] .block-promo .collapse-button { padding: 0; font-size: 14px; color: var(--o-brun); text-decoration: underline; }
body[data-habillage] .block-promo .promo-code { margin: 10px 0 0; padding: 0; background: none; }
body[data-habillage] .block-promo .promo-code form { display: flex; gap: 8px; }
body[data-habillage] .block-promo .promo-input { flex: 1; min-width: 0; min-height: 50px; padding: 10px 14px; border: 1.5px solid var(--o-second); border-radius: var(--o-rayon-champ); background: var(--o-bloc);
  font: inherit; font-size: 16px; color: var(--o-encre); }
body[data-habillage] :is(#main, #content) .block-promo .btn-primary { width: auto; }
/* 5. le récapitulatif : la carte sous le liseré jaune (.tn-recap), ses lignes (.tn-dl), le total en Fraunces brun (.tn-total) */
body[data-habillage] :is(#main, #content) .card.cart-summary { border-top: 5px solid var(--o-jaune); }
body[data-habillage] .cart-summary-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 14px; margin: 0; padding: 9px 0;
  border-bottom: 1px solid var(--o-trait); font-size: 15px; }
body[data-habillage] .cart-summary-line::after { content: none; }
/* la ligne « Livraison » porte un troisième bloc (<div><small class="value">, vide sans message) : il passe sous la ligne, sans hauteur
   quand il est vide (vu en ligne le 25/09 : sinon le montant se plaçait au milieu) */
body[data-habillage] .cart-summary-line > div { flex-basis: 100%; align-self: flex-start; }
body[data-habillage] .cart-summary-line > div:has(> small:empty) { line-height: 0; }
body[data-habillage] .cart-summary-line .label { min-width: 0; float: none; padding: 0; font-size: 15px; font-weight: 400; text-align: left; color: var(--o-second); }
body[data-habillage] .cart-summary-line .value { float: none; margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--o-encre); }
body[data-habillage] .cart-summary-line.cart-total { padding: 14px 0 4px; border-bottom: 0; background: none; }
body[data-habillage] .cart-summary-line.cart-total .label { font-size: 16px; font-weight: 700; color: var(--o-encre); }
body[data-habillage] .cart-summary-line.cart-total .value { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
  font-weight: 700; font-size: 32px; line-height: 1.1; color: var(--o-brun); }
body[data-habillage] .cart-summary .checkout { margin: 20px 0 0; padding: 0; }
/* 6. le geste : le bouton de la charte (D-256 — la pilule brune, une phrase en bas de casse), à la hauteur du geste (--o-taille-geste) */
body[data-habillage] :is(#main, #content) .btn-primary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--o-taille-geste); padding: 0 26px; border: 0;
  border-radius: var(--o-rayon-pilule); background: var(--o-brun); color: var(--o-cire); box-shadow: none; font: 700 15.5px/1.2 "Commissioner", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0; text-transform: none; text-align: center; text-decoration: none; transition: transform .15s; }
body[data-habillage] :is(#main, #content) .btn-primary:hover, body[data-habillage] :is(#main, #content) .btn-primary:focus { background: var(--o-brun); color: var(--o-cire); }
body[data-habillage] :is(#main, #content) .btn-primary:not(:disabled):not(.disabled):hover { transform: translateY(-2px); }
/* 7. les formulaires (.tn-form) : le libellé au-dessus du champ, le champ bordé de brun-gris, l'aide en petit */
body[data-habillage] :is(#main, #content) .page-header { margin: 0 0 18px; }
body[data-habillage] :is(#main, #content) .page-content.card { max-width: 760px; }
body[data-habillage] :is(#main, #content) .form-group { display: grid; gap: 6px; margin: 0 0 14px; }
body[data-habillage] :is(#main, #content) .form-group::before, body[data-habillage] :is(#main, #content) .form-group::after { content: none; }
body[data-habillage] :is(#main, #content) .form-group > [class*="col-"] { width: auto; max-width: none; float: none; padding: 0; min-width: 0; }
body[data-habillage] :is(#main, #content) .form-control-label { padding: 0; font-size: 14px; font-weight: 600; text-align: left; color: var(--o-second); }
body[data-habillage] :is(#main, #content) .form-control { font: inherit; font-size: 16px; font-weight: 400; min-height: 50px; padding: 10px 14px; border: 1.5px solid var(--o-second);
  border-radius: var(--o-rayon-champ); background: var(--o-bloc); color: var(--o-encre); width: 100%; min-width: 0; box-shadow: none; }
body[data-habillage] :is(#main, #content) .form-control:focus { border-color: var(--o-brun); outline: 2px solid var(--o-brun); outline-offset: 2px; }
body[data-habillage] :is(#main, #content) .form-control-comment, body[data-habillage] :is(#main, #content) .help-block { font-size: 14px; line-height: 1.55; color: var(--o-second); }
body[data-habillage] :is(#main, #content) .form-footer { margin: 8px 0 0; padding: 0; text-align: left; }
/* 8. les messages de PrestaShop : la couleur des états de la charte (K-060) — jamais masqués */
body[data-habillage] .alert { border: 0; border-radius: var(--o-rayon-carte); padding: 14px 18px; font-size: 15px; line-height: 1.55; }
body[data-habillage] .alert-danger { background: var(--o-etat-non-fond); color: var(--o-etat-non); }
body[data-habillage] .alert-success { background: var(--o-etat-ok-fond); color: var(--o-etat-ok); }
body[data-habillage] .alert-warning, body[data-habillage] .alert-info { background: var(--o-etat-attente-fond); color: var(--o-etat-attente); }
@media (max-width: 960px) {
  body[data-habillage] #wrapper { padding: 14px 0 56px; }
  body[data-habillage] #wrapper > .container, body[data-habillage] #notifications > .container { padding: 0 20px; }
  body[data-habillage] .cart-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  body[data-habillage] :is(#main, #content) .card { padding: 22px 20px; }
  body[data-habillage] :is(#main, #content) h1, body[data-habillage] :is(#main, #content) .h1 { font-size: 29px; }
  body[data-habillage] .product-line-grid { grid-template-columns: 64px minmax(0, 1fr); gap: 12px 14px; }
  body[data-habillage] .product-line-grid-left img { width: 64px; }
  body[data-habillage] .product-line-grid > .product-line-grid-right { grid-column: 1 / -1; }
}

/* 9. LA BARRE DES ÉTAPES (25/09, Ruben : « le look des maquettes pour tout le tunnel ») : build_tunnel.etapes(), insérée par la façade
      sous l'en-tête O ; ses règles sont celles de tunnel.html (CSS_TUNNEL), préfixées. L'écran de travail garde l'air de .o .tn */
body[data-habillage] .o .tn-etapes-hab { padding: 30px 0 0; }
body[data-habillage]:has(.tn-etapes-hab) #wrapper { padding-top: 0; }
@media (max-width: 960px) { body[data-habillage] .o .tn-etapes-hab { padding: 14px 0 0; } }
body[data-habillage] .o .tn .etapes { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
body[data-habillage] .o .tn .etapes li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; font-weight: 600; color: var(--second); }
body[data-habillage] .o .tn .etapes li::after { content: ""; flex: 1 1 auto; min-width: 10px; height: 2px; margin: 0 14px 0 4px; background: var(--trait); }
body[data-habillage] .o .tn .etapes li:last-child::after { display: none; }
body[data-habillage] .o .tn-hex { flex: none; display: grid; place-items: center; width: 34px; height: 38px; background: var(--creux); color: var(--second); font-size: 14px; font-weight: 700; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
body[data-habillage] .o .tn-mot { white-space: nowrap; }
body[data-habillage] .o .tn .etapes li.fait { color: var(--brun); }
body[data-habillage] .o .tn .etapes li.fait .tn-hex { background: var(--brun); color: var(--sur-brun); }
body[data-habillage] .o .tn .etapes li.fait::after { background: var(--brun); }
body[data-habillage] .o .tn .etapes li[aria-current] { color: var(--brun); font-weight: 700; }
body[data-habillage] .o .tn .etapes li[aria-current] .tn-hex { background: var(--jaune); color: var(--nuit); }
@media (max-width: 960px) {
  body[data-habillage] .o .tn .etapes { display: flex; margin-bottom: 16px; }
  body[data-habillage] .o .tn .etapes li { flex: 1 1 0; gap: 6px; font-size: 13px; }
  body[data-habillage] .o .tn .etapes li[aria-current] { flex: 3 1 0; }
  body[data-habillage] .o .tn .etapes li::after { margin: 0 6px 0 2px; }
  body[data-habillage] .o .tn .etapes li:not([aria-current]) .tn-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body[data-habillage] .o .tn .etapes li[aria-current] .tn-mot { white-space: normal; line-height: 1.2; }
}

/* 11. LA COMMANDE (/order) AU PLUS PRÈS DE tunnel-suite.html (25/09). PrestaShop y pose le contenu dans #content (et non #main) */
/* la grille : le travail à gauche, la commande à droite (.tn-grille) ; le récapitulatif reste en vue (.tn-cote) */
body[data-habillage] #content > .row { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; margin: 0; }
body[data-habillage] #content > .row::before, body[data-habillage] #content > .row::after { content: none; }
body[data-habillage] #content > .row > [class*="col-"] { width: auto; max-width: none; float: none; padding: 0; min-width: 0; }
body[data-habillage] #content > .row > .col-md-4 { position: sticky; top: 20px; }
/* chaque étape de PrestaShop, une carte (.tn-carte) ; les cartes se suivent à 20 px (.tn-col) */
body[data-habillage] #content .checkout-step { margin: 0 0 20px; padding: 28px 30px; background: var(--o-bloc); border: 0; border-radius: var(--o-rayon-plaque); box-shadow: inset 0 0 0 1px var(--o-trait); }
/* le titre d'étape : Fraunces en brun (.o .tn h2), le numéro dans l'alvéole de la barre des étapes (ici = jaune, fait = brun, à venir = creux) */
body[data-habillage] #content .checkout-step .step-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 25px; line-height: 1.15; letter-spacing: -.01em; text-transform: none; color: var(--o-brun); }
body[data-habillage] #content .checkout-step .step-number { flex: none; width: 34px; height: 38px; padding: 0; background: var(--o-creux); color: var(--o-second); text-align: center;
  font: 700 14px/38px "Commissioner", "Segoe UI", Arial, sans-serif; letter-spacing: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
body[data-habillage] #content .checkout-step.-current .step-number { background: var(--o-jaune); color: var(--o-nuit); }
body[data-habillage] #content .checkout-step .done { flex: none; width: 34px; height: 38px; margin: 0; padding: 0; background: var(--o-brun); color: var(--o-sur-sombre); text-align: center;
  font-size: 20px; line-height: 38px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
body[data-habillage] #content .checkout-step.-unreachable .step-title { color: var(--o-second); }
body[data-habillage] #content .checkout-step .step-edit { margin: 0 0 0 auto; font: 600 14px/1.2 "Commissioner", "Segoe UI", Arial, sans-serif; text-decoration: underline;
  text-underline-offset: 4px; color: var(--o-brun) !important; }
body[data-habillage] #content .checkout-step .content { padding: 18px 0 0; }
/* les onglets du compte : « Connectez-vous », le lien de la charte (brun, souligné) */
body[data-habillage] #content .nav-inline { margin: 0; padding: 0; }
body[data-habillage] #content .nav-inline .nav-item + .nav-item { margin-left: 0; }
body[data-habillage] #content .nav-inline .nav-link { padding: 0; font-size: 15px; font-weight: 600; color: var(--o-brun); text-decoration: underline; text-underline-offset: 4px; text-transform: none; }
/* les formulaires (.tn-form) : les règles 7 valent aussi sous #content ; ce que la commande ajoute */
body[data-habillage] #content #customer-form, body[data-habillage] #content #login-form { margin: 18px 0 0; }
body[data-habillage] #content .form-informations { margin: 6px 0 14px; font-size: 14px; line-height: 1.55; color: var(--o-second); }
body[data-habillage] #content .form-informations-title { font-size: 15px; color: var(--o-encre); }
body[data-habillage] #content .radio-inline { display: inline-flex; align-items: center; gap: 8px; margin: 0 18px 0 0; padding: 0; font-size: 15px; font-weight: 400; color: var(--o-encre); }
body[data-habillage] #content .custom-radio { border: 1.5px solid var(--o-second); }
body[data-habillage] #content .custom-radio input[type="radio"]:checked + span { background-color: var(--o-brun); }
body[data-habillage] #content .custom-checkbox { gap: 10px; align-items: flex-start; }
body[data-habillage] #content .custom-checkbox input[type="checkbox"] + span { position: relative; flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; border: 1.5px solid var(--o-second); border-radius: var(--o-rayon-doux); background: var(--o-bloc); }
/* 27/09 (commande test de Ruben : « la case restait vide ») : la vraie case, invisible, couvre exactement la case dessinée
   (elle restait à 13 px dans le coin : 55 % de la case ne réagissait pas), et la coche est DESSINÉE ici, sans la police
   d'icônes de PrestaShop (si elle ne charge pas, une case cochée paraissait vide). */
body[data-habillage] #content .custom-checkbox input[type="checkbox"] { position: absolute; top: 2px; left: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; z-index: 1; }
body[data-habillage] #content .custom-checkbox input[type="checkbox"] + span .checkbox-checked { color: transparent; font-size: 0; }
body[data-habillage] #content .custom-checkbox input[type="checkbox"]:checked + span { border-color: var(--o-brun); background: var(--o-brun); }
body[data-habillage] #content .custom-checkbox input[type="checkbox"]:checked + span::after { content: ""; position: absolute; left: 5.5px; top: 1.5px; width: 6px; height: 11px; border: solid var(--o-bloc); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
body[data-habillage] #content .custom-checkbox input[type="checkbox"]:focus-visible + span { outline: 2px solid var(--o-brun); outline-offset: 2px; }
body[data-habillage] #content .custom-checkbox { position: relative; }
body[data-habillage] #content .custom-checkbox label { margin: 0; font-size: 14.5px; font-weight: 400; line-height: 1.55; text-align: left; color: var(--o-encre); }
body[data-habillage] #content .custom-checkbox label em { font-size: 13.5px; color: var(--o-second); }
body[data-habillage] #content .custom-checkbox label a { color: var(--o-brun); font-weight: 600; }
body[data-habillage] #content .input-group { display: flex; width: 100%; }
body[data-habillage] #content .input-group .form-control { flex: 1; border-radius: 6px 0 0 6px; }
body[data-habillage] #content .input-group-btn { display: flex; width: auto; }
body[data-habillage] #content .input-group-btn .btn { min-height: 50px; padding: 0 16px; border: 1.5px solid var(--o-second); border-left: 0; border-radius: 0 6px 6px 0; background: var(--o-bloc); color: var(--o-brun);
  font: 600 14px/1.2 "Commissioner", "Segoe UI", Arial, sans-serif; letter-spacing: 0; text-transform: none; box-shadow: none; }
body[data-habillage] #content .forgot-password { margin: 0 0 14px; }
body[data-habillage] #content .forgot-password a { font-size: 14px; color: var(--o-brun); text-decoration: underline; text-underline-offset: 4px; }
body[data-habillage] #content .form-footer .btn-primary { min-height: 56px; }
/* le récapitulatif : la carte sous le liseré jaune (.tn-recap), ses lignes (.tn-dl), le total en Fraunces brun */
body[data-habillage] #content #js-checkout-summary { border-top: 5px solid var(--o-jaune); }
body[data-habillage] #content .cart-summary-products p { margin: 0 0 6px; font-size: 15px; color: var(--o-second); }
body[data-habillage] #content .cart-summary-products .js-show-details { font-size: 14px; font-weight: 600; color: var(--o-brun); text-decoration: underline; text-underline-offset: 4px; text-transform: none; }
body[data-habillage] #content .cart-summary-products .media-list { margin: 8px 0 0; padding: 0; list-style: none; }
body[data-habillage] #content .cart-summary-products .media { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; margin: 0; padding: 10px 0; border-top: 1px solid var(--o-trait); }
body[data-habillage] #content .cart-summary-products .media-object { width: 56px; height: auto; border-radius: var(--o-rayon-champ); background: var(--o-creux); mix-blend-mode: multiply; }
body[data-habillage] #content .cart-summary-products .product-name a { font-size: 14.5px; font-weight: 600; color: var(--o-encre); }
body[data-habillage] #content .cart-summary-products .product-quantity, body[data-habillage] #content .cart-summary-products .product-price { font-size: 14px; color: var(--o-second); }
body[data-habillage] #content .cart-summary-subtotals-container { margin: 10px 0 0; }
/* 12. LES ÉTAPES 2 À 4 (26/09, Ruben « code-moi ces pages ») — stylées sur les gabarits PUBLICS du thème classique 1.7.8.7, vues sur
       des pages SYNTHÉTISÉES (synthese_commande_prive.py), jamais relevées : à vérifier sur la commande test. Toutes sous « .checkout-step » :
       le thème écrit body#checkout section.checkout-step … (spécificité 1,2,2), les nôtres (1,3,1 et plus) passent devant sans !important.
       JAMAIS masquées, jamais inertes : ni display: none, ni opacité, ni pointer-events sur ces blocs */
/* le geste « Continuer » de chaque étape : le bouton de la charte à 56 px (.btn-brun du tunnel), sous le contenu */
body[data-habillage] #content .checkout-step:not(#checkout-personal-information-step) .continue { min-height: 56px; margin: 20px 0 0; }   /* l'étape 1 (relevée, validée le 25/09) garde le sien */
/* les phrases de l'étape « Adresses » (.tn-sous) et ses liens (le lien de la charte, brun souligné) */
body[data-habillage] #content .checkout-step .js-address-form > form > p:not([class]) { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--o-second); }
body[data-habillage] #content .checkout-step .add-address { margin: 14px 0 0; }
body[data-habillage] #content .checkout-step .add-address a, body[data-habillage] #content .checkout-step a[data-link-action="different-invoice-address"], body[data-habillage] #content .checkout-step .cancel-address { display: inline-flex; align-items: center; gap: 4px; font-size: 14px;
  font-weight: 600; color: var(--o-brun); text-decoration: underline; text-underline-offset: 4px; }
body[data-habillage] #content .checkout-step .add-address a .material-icons { font-size: 18px; }
/* le formulaire d'adresse (.tn-form) : prénom et nom, code postal et ville côte à côte (.tn-rang) — les champs de PrestaShop, par leur id */
body[data-habillage] #content .checkout-step #delivery-address, body[data-habillage] #content .checkout-step #invoice-address { margin: 4px 0 0; }
body[data-habillage] #content .checkout-step :is(#delivery-address, #invoice-address) .form-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
body[data-habillage] #content .checkout-step :is(#delivery-address, #invoice-address) .form-fields > * { grid-column: 1 / -1; min-width: 0; }
body[data-habillage] #content .checkout-step :is(#delivery-address, #invoice-address) .form-fields > .form-group:has(:is(#field-firstname, #field-lastname, #field-postcode, #field-city)) { grid-column: auto; }
body[data-habillage] #content .checkout-step :is(#delivery-address, #invoice-address) .form-control-label { font-weight: 600; }
body[data-habillage] #content .checkout-step select.form-control { appearance: auto; padding-right: 10px; cursor: pointer; }
body[data-habillage] #content .checkout-step .form-fields .col-md-offset-3 { display: flex; align-items: center; gap: 10px; margin: 0; }
body[data-habillage] #content .checkout-step #use_same_address { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--o-brun); }
body[data-habillage] #content .checkout-step #use_same_address + label { margin: 0; font-size: 14.5px; font-weight: 400; color: var(--o-encre); }
/* le choix d'adresse : des cartes sélectionnables (.tn-option) ; la carte choisie sur la cire, le filet brun */
body[data-habillage] #content .checkout-step .address-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 4px 0 0; }
body[data-habillage] #content .checkout-step .address-selector > p { grid-column: 1 / -1; margin: 0; }
body[data-habillage] #content .checkout-step .address-item { margin: 0; padding: 0; border: 0; border-radius: var(--o-rayon-carte); background: var(--o-bloc); box-shadow: inset 0 0 0 1.5px var(--o-trait); min-width: 0; }
body[data-habillage] #content .checkout-step .address-item.selected { background: var(--o-cire); box-shadow: inset 0 0 0 2px var(--o-brun); }
body[data-habillage] #content .checkout-step .address-item > header { margin: 0; }
body[data-habillage] #content .checkout-step .address-item .radio-block { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 12px; align-items: center; margin: 0; padding: 16px 18px 12px;
  cursor: pointer; font-size: 15px; font-weight: 400; text-align: left; }
body[data-habillage] #content .checkout-step .address-item .custom-radio { margin: 0; }
body[data-habillage] #content .checkout-step .address-item .address-alias { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--o-encre); }
body[data-habillage] #content .checkout-step .address-item .address { grid-column: 2; margin: 0; font-size: 15px; line-height: 1.55; color: var(--o-second); }
body[data-habillage] #content .checkout-step .address-item hr { margin: 0 18px; border: 0; border-top: 1px solid var(--o-trait); }
body[data-habillage] #content .checkout-step .address-footer { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 18px 14px; }
body[data-habillage] #content .checkout-step .address-footer a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; color: var(--o-brun) !important; }
body[data-habillage] #content .checkout-step .address-footer a .material-icons { font-size: 18px; }
/* les transporteurs : les choix de tunnel-suite.html (.tn-option) — le nom en gras, le délai dessous, le prix à droite. L'ORDRE et la
   présélection restent ceux de PrestaShop (le retrait en tête et coché est un réglage du back-office, D-359) */
body[data-habillage] #content .checkout-step .delivery-options { display: grid; gap: 10px; }
body[data-habillage] #content .checkout-step .delivery-options > .clearfix { display: contents; }
body[data-habillage] #content .checkout-step .delivery-option { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0; padding: 15px 18px; border: 0; border-radius: var(--o-rayon-carte);
  background: var(--o-bloc); box-shadow: inset 0 0 0 1.5px var(--o-trait); }
body[data-habillage] #content .checkout-step .delivery-option:has(input:checked) { background: var(--o-cire); box-shadow: inset 0 0 0 2px var(--o-brun); }
body[data-habillage] #content .checkout-step .delivery-option::before, body[data-habillage] #content .checkout-step .delivery-option::after, body[data-habillage] #content .checkout-step .delivery-option .row::before, body[data-habillage] #content .checkout-step .delivery-option .row::after { content: none; }
body[data-habillage] #content .checkout-step .delivery-option > [class*="col-"], body[data-habillage] #content .checkout-step .delivery-option .row > [class*="col-"] { width: auto; max-width: none; float: none; padding: 0; min-width: 0; }
body[data-habillage] #content .checkout-step .delivery-option .row { margin: 0; }
body[data-habillage] #content .checkout-step .delivery-option .custom-radio { float: none; margin: 0; }
body[data-habillage] #content .checkout-step .delivery-option-2 { display: block; margin: 0; cursor: pointer; font-weight: 400; text-align: left; }
body[data-habillage] #content .checkout-step .delivery-option-2 > .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; align-items: baseline; }
body[data-habillage] #content .checkout-step .delivery-option-2 > .row > :nth-child(1) { grid-column: 1; grid-row: 1; }
body[data-habillage] #content .checkout-step .delivery-option-2 > .row > :nth-child(2) { grid-column: 1; grid-row: 2; }
body[data-habillage] #content .checkout-step .delivery-option-2 > .row > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
body[data-habillage] #content .checkout-step .carrier-name { display: block; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; text-transform: none; color: var(--o-encre); }
body[data-habillage] #content .checkout-step .carrier-delay { display: block; font-size: 14px; line-height: 1.5; color: var(--o-second); }
body[data-habillage] #content .checkout-step .carrier-price { font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--o-encre); }
body[data-habillage] #content .checkout-step .carrier-extra-content { margin: 0; padding: 12px 18px; border-radius: var(--o-rayon-carte); background: var(--o-creux); font-size: 14.5px; line-height: 1.55; color: var(--o-second); }
body[data-habillage] #content .checkout-step .carrier-extra-content::before, body[data-habillage] #content .checkout-step .carrier-extra-content::after { content: none; }
body[data-habillage] #content .checkout-step .carrier-extra-content > [class*="col-"] { width: auto; float: none; padding: 0; }
/* le commentaire de commande : le champ du formulaire (.tn-form) */
body[data-habillage] #content .checkout-step .order-options { margin: 20px 0 0; }
body[data-habillage] #content .checkout-step #delivery label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; line-height: 1.45; text-align: left; color: var(--o-second); }
body[data-habillage] #content .checkout-step #delivery textarea { display: block; width: 100%; min-width: 0; min-height: 96px; padding: 10px 14px; border: 1.5px solid var(--o-second); border-radius: var(--o-rayon-champ); background: var(--o-bloc);
  font: inherit; font-size: 16px; color: var(--o-encre); resize: vertical; }
body[data-habillage] #content .checkout-step #delivery textarea:focus { outline: 2px solid var(--o-brun); outline-offset: 2px; }
/* le paiement : les options en choix (.tn-option), leurs informations sur le creux, la case des conditions (.tn-coche), le geste à 56 px.
   « Commander » grisé tant que rien n'est choisi : l'état de PrestaShop (classe disabled, opacité de Bootstrap), comme au panier (24/09) */
body[data-habillage] #content .checkout-step .payment-options { display: grid; gap: 10px; }
body[data-habillage] #content .checkout-step .payment-option { display: flex; align-items: center; gap: 14px; margin: 0; padding: 15px 18px; border-radius: var(--o-rayon-carte); background: var(--o-bloc); box-shadow: inset 0 0 0 1.5px var(--o-trait); }
body[data-habillage] #content .checkout-step .payment-option::before, body[data-habillage] #content .checkout-step .payment-option::after { content: none; }
body[data-habillage] #content .checkout-step .payment-option:has(input:checked) { background: var(--o-cire); box-shadow: inset 0 0 0 2px var(--o-brun); }
body[data-habillage] #content .checkout-step .payment-option .custom-radio { float: none; flex: none; margin: 0; }
body[data-habillage] #content .checkout-step .payment-option label { display: block; margin: 0; cursor: pointer; font-size: 16px; font-weight: 600; line-height: 1.35; text-align: left; color: var(--o-encre); }
body[data-habillage] #content .checkout-step .payment-option label img { width: auto; max-height: 28px; margin: 0 0 0 10px; vertical-align: middle; }
body[data-habillage] #content .checkout-step .js-additional-information { margin: 0; padding: 12px 18px; border-radius: var(--o-rayon-carte); background: var(--o-creux); font-size: 14.5px; line-height: 1.55; color: var(--o-second); }
body[data-habillage] #content .checkout-step .js-payment-option-form { margin: 0; }
body[data-habillage] #content .checkout-step #conditions-to-approve { margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--o-trait); }
body[data-habillage] #content .checkout-step #conditions-to-approve ul { margin: 0; padding: 0; list-style: none; }
body[data-habillage] #content .checkout-step #conditions-to-approve li { display: flex; gap: 10px; align-items: flex-start; }
body[data-habillage] #content .checkout-step #conditions-to-approve li > .float-xs-left { float: none; flex: none; }
body[data-habillage] #content .checkout-step .condition-label { margin: 0; }
body[data-habillage] #content .checkout-step .condition-label label { margin: 0; font-size: 14.5px; font-weight: 400; line-height: 1.55; text-align: left; color: var(--o-encre); }
body[data-habillage] #content .checkout-step .condition-label a { color: var(--o-brun); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body[data-habillage] #content .checkout-step #payment-confirmation { margin: 20px 0 0; }
body[data-habillage] #content .checkout-step #payment-confirmation .btn-primary { min-height: 56px; font-size: 15.5px; white-space: normal; }
@media (max-width: 960px) {
  body[data-habillage] #content > .row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  body[data-habillage] #content > .row > .col-md-4 { position: static; }
  body[data-habillage] #content .checkout-step { padding: 22px 20px; }
  body[data-habillage] #content .checkout-step .step-title { font-size: 22px; }
  body[data-habillage] #content .checkout-step :is(#delivery-address, #invoice-address) .form-fields { grid-template-columns: minmax(0, 1fr); }
  body[data-habillage] #content .checkout-step .address-selector { grid-template-columns: minmax(0, 1fr); }
  body[data-habillage] #content .checkout-step .delivery-option, body[data-habillage] #content .checkout-step .payment-option { gap: 12px; padding: 14px; }
  body[data-habillage] #content .checkout-step .delivery-option-2 > .row { grid-template-columns: minmax(0, 1fr); }
  body[data-habillage] #content .checkout-step .delivery-option-2 > .row > :nth-child(3) { grid-column: 1; grid-row: 3; }
}
/* la barre suit l'étape ouverte par PrestaShop (:has sur .checkout-step.-current) : fait = brun, ici = jaune */
body[data-habillage]:has(#checkout-addresses-step.-current) .o .tn .etapes li:nth-child(-n+2), body[data-habillage]:has(#checkout-delivery-step.-current) .o .tn .etapes li:nth-child(-n+3), body[data-habillage]:has(#checkout-payment-step.-current) .o .tn .etapes li:nth-child(-n+4) { color: var(--brun); font-weight: 600; }
body[data-habillage]:has(#checkout-addresses-step.-current) .o .tn .etapes li:nth-child(-n+2) .tn-hex, body[data-habillage]:has(#checkout-delivery-step.-current) .o .tn .etapes li:nth-child(-n+3) .tn-hex, body[data-habillage]:has(#checkout-payment-step.-current) .o .tn .etapes li:nth-child(-n+4) .tn-hex { background: var(--brun); color: var(--sur-brun); }
body[data-habillage]:has(#checkout-addresses-step.-current) .o .tn .etapes li:nth-child(-n+2)::after, body[data-habillage]:has(#checkout-delivery-step.-current) .o .tn .etapes li:nth-child(-n+3)::after, body[data-habillage]:has(#checkout-payment-step.-current) .o .tn .etapes li:nth-child(-n+4)::after { background: var(--brun); }
body[data-habillage]:has(#checkout-addresses-step.-current) .o .tn .etapes li:nth-child(3), body[data-habillage]:has(#checkout-delivery-step.-current) .o .tn .etapes li:nth-child(4), body[data-habillage]:has(#checkout-payment-step.-current) .o .tn .etapes li:nth-child(5) { color: var(--brun); font-weight: 700; }
body[data-habillage]:has(#checkout-addresses-step.-current) .o .tn .etapes li:nth-child(3) .tn-hex, body[data-habillage]:has(#checkout-delivery-step.-current) .o .tn .etapes li:nth-child(4) .tn-hex, body[data-habillage]:has(#checkout-payment-step.-current) .o .tn .etapes li:nth-child(5) .tn-hex { background: var(--jaune); color: var(--nuit); }
@media (max-width: 960px) {
  body[data-habillage]:has(#checkout-addresses-step.-current) .o .tn .etapes li:nth-child(-n+2)[aria-current], body[data-habillage]:has(#checkout-delivery-step.-current) .o .tn .etapes li:nth-child(-n+3)[aria-current], body[data-habillage]:has(#checkout-payment-step.-current) .o .tn .etapes li:nth-child(-n+4)[aria-current] { flex: 1 1 0; }
  body[data-habillage]:has(#checkout-addresses-step.-current) .o .tn .etapes li:nth-child(3), body[data-habillage]:has(#checkout-delivery-step.-current) .o .tn .etapes li:nth-child(4), body[data-habillage]:has(#checkout-payment-step.-current) .o .tn .etapes li:nth-child(5) { flex: 3 1 0; }
  body[data-habillage]:has(#checkout-addresses-step.-current) .o .tn .etapes li:nth-child(-n+2)[aria-current] .tn-mot, body[data-habillage]:has(#checkout-delivery-step.-current) .o .tn .etapes li:nth-child(-n+3)[aria-current] .tn-mot, body[data-habillage]:has(#checkout-payment-step.-current) .o .tn .etapes li:nth-child(-n+4)[aria-current] .tn-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body[data-habillage]:has(#checkout-addresses-step.-current) .o .tn .etapes li:nth-child(3) .tn-mot, body[data-habillage]:has(#checkout-delivery-step.-current) .o .tn .etapes li:nth-child(4) .tn-mot, body[data-habillage]:has(#checkout-payment-step.-current) .o .tn .etapes li:nth-child(5) .tn-mot { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; line-height: 1.2; }
}