/* Socle commun : remise à zéro + composants fonctionnels (tiroir, recherche,
   commande, textes légaux, formulaires). Aucune direction artistique ici : tout
   passe par les variables ci-dessous, que chaque boutique redéfinit dans styles.css. */
:root {
  --fond: #ffffff; --fond-2: #f5f5f3; --texte: #1a1a1a; --texte-doux: #666666;
  --accent: #222222; --accent-texte: #ffffff; --bord: #e4e4e0; --rayon: 4px;
  --police-titre: Georgia, serif; --police-texte: system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.sans-defilement { overflow: hidden; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police-texte); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--police-titre); line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.evitement { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--fond); padding: 10px 14px; }
.evitement:focus { left: 8px; top: 8px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.a-completer { background: #fff3a3; color: #5c4a00; padding: 0 4px; font-style: normal; border-radius: 2px; }
.anim [data-apparait] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.anim [data-apparait].vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; } }

/* Tiroir panier */
.voile { position: fixed; inset: 0; background: rgba(20, 20, 20, .4); opacity: 0; transition: opacity .25s; z-index: 60; }
.voile.ouvert { opacity: 1; }
.tiroir { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--fond); z-index: 70; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s ease; }
.tiroir.ouvert { transform: none; }
.tiroir-entete { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--bord); }
.tiroir-entete h2 { margin: 0; font-size: 1.15rem; }
.tiroir-fermer { background: none; border: 0; font-size: 1.8rem; line-height: 1; padding: 4px 8px; }
.tiroir-liste { flex: 1; overflow-y: auto; padding: 8px 20px; }
.tiroir-pied { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bord); }
.tiroir-ligne { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; margin-bottom: 6px; }
.tiroir-note { font-size: .85rem; color: var(--texte-doux); margin-bottom: 12px; }
.tiroir-commander, .bouton, .achat-bouton, .formulaire button[type="submit"], .formulaire [data-confirmer], [data-payer], .barre-achat button {
  display: block; width: 100%; text-align: center; text-decoration: none; background: var(--accent); color: var(--accent-texte);
  border: 0; border-radius: var(--rayon); padding: 15px 18px; font-weight: 600; min-height: 48px;
}
.bouton { display: inline-block; width: auto; }
.tiroir-voir { display: block; text-align: center; padding: 10px; font-size: .9rem; }
.ligne-panier { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bord); }
.ligne-panier img { width: 72px; height: 96px; object-fit: cover; border-radius: var(--rayon); }
.ligne-corps { flex: 1; min-width: 0; }
.ligne-nom { display: block; text-decoration: none; font-weight: 600; }
.ligne-option { display: block; font-size: .85rem; color: var(--texte-doux); }
.ligne-bas { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.quantite { display: inline-flex; align-items: center; border: 1px solid var(--bord); border-radius: var(--rayon); }
.quantite button { background: none; border: 0; width: 36px; height: 36px; font-size: 1.1rem; }
.quantite span { min-width: 24px; text-align: center; }
.ligne-retirer { background: none; border: 0; padding: 6px 0 0; font-size: .8rem; color: var(--texte-doux); text-decoration: underline; }
.panier-vide { text-align: center; padding: 40px 10px; }
div.page-panier, .ck, .merci { max-width: 1080px; margin: 0 auto; padding: 32px 16px 64px; }
.panier-total { max-width: 420px; margin: 20px 0 0 auto; }
.merci { max-width: 640px; text-align: center; padding-top: 64px; }

/* Barre d'achat collée */
.barre-achat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--fond); border-top: 1px solid var(--bord); transform: translateY(110%); transition: transform .2s; }
.barre-achat.visible { transform: none; }
.barre-achat-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .85rem; }
.barre-achat-texte span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-achat button { width: auto; padding: 12px 22px; min-height: 44px; }
@media (max-width: 899px) { .barre-achat { display: flex; } .page-produit { padding-bottom: 84px; } }

/* Bloc d'achat */
.achat-option { border: 0; padding: 0; margin: 0 0 14px; }
.achat-option legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.achat-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.achat-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.achat-choix span { display: block; min-width: 48px; min-height: 44px; padding: 10px 12px; text-align: center; border: 1px solid var(--bord); border-radius: var(--rayon); cursor: pointer; }
.achat-choix input:checked + span { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.achat-choix input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.achat-erreur { color: #a4262c; font-size: .9rem; margin: 0 0 10px; }
.fiche-infos { margin: 0; }
.fiche-infos > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.fiche-infos dt { color: var(--texte-doux); }
.fiche-infos dd { margin: 0; text-align: right; }
.bloc-conformite { font-size: .85rem; color: var(--texte-doux); }
.bloc-conformite p { margin-bottom: .5em; }
.avertissements { border: 1px solid #c98a00; background: #fff8e6; color: #5a4300; padding: 10px 12px; border-radius: var(--rayon); font-size: .9rem; margin: 12px 0; }
.avertissements p { margin: 0; font-weight: 600; }
.avertissements p + p { margin-top: 6px; }

/* Bas de pied de page */
.pied-legal { font-size: .82rem; }
.pied-legal p { margin: 0 0 8px; }
.grille-vide { padding: 28px 0; }
.logos-paiement { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.logos-paiement svg { width: 42px; height: 26px; }
.lien-retractation { font-weight: 600; text-decoration: underline; }

/* Recherche */
.recherche { position: fixed; inset: 0; z-index: 80; background: var(--fond); padding: 16px; overflow-y: auto; }
.recherche-barre { display: flex; gap: 8px; max-width: 720px; margin: 0 auto 16px; align-items: center; }
.recherche-barre input { flex: 1; min-width: 0; padding: 12px 14px; font-size: 1.05rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); }
.recherche-barre button { background: none; border: 0; font-size: 1.8rem; line-height: 1; padding: 4px 8px; }
.recherche-resultats { max-width: 720px; margin: 0 auto; }
.recherche-resultat { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bord); text-decoration: none; }
.recherche-resultat img { width: 60px; height: 80px; object-fit: cover; border-radius: var(--rayon); }
.recherche-resultat span { flex: 1; min-width: 0; }

/* Textes légaux */
.legal { max-width: 780px; margin: 0 auto; padding: 40px 16px 72px; }
.legal h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.legal h2 { font-size: 1.25rem; margin-top: 2em; }
.legal h3 { font-size: 1.05rem; margin-top: 1.4em; }
.legal ul { list-style: disc; padding-left: 1.2em; margin-bottom: 1em; }
.legal li { margin-bottom: .35em; }
.legal a { text-decoration: underline; }
.legal-intro { font-size: 1.1rem; color: var(--texte-doux); }
.legal table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .95rem; }
.legal th, .legal td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--bord); }
.legal .tableau { overflow-x: auto; }
.legal-mise-a-jour { font-size: .85rem; color: var(--texte-doux); margin-top: 2.5em; }
.encadre { border: 1px solid var(--bord); background: var(--fond-2); padding: 16px 18px; border-radius: var(--rayon); margin: 1em 0; font-size: .95rem; }
.faq details { border-bottom: 1px solid var(--bord); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details div { padding-top: 10px; }

/* Formulaires */
.formulaire label, .ck-form label { display: block; margin-bottom: 14px; font-size: .92rem; font-weight: 600; }
.formulaire input:not([type="checkbox"]):not(.piege), .formulaire textarea, .formulaire select,
.ck-form input:not([type="checkbox"]), .ck-form select {
  display: block; width: 100%; margin-top: 6px; padding: 12px; font-weight: 400; font-size: 16px; background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon);
}
.bouton-secondaire { width: auto !important; margin-top: 8px; background: none !important; color: var(--texte) !important; border: 1px solid var(--bord) !important; }
.form-message { font-size: .92rem; margin: 10px 0 0; min-height: 1.2em; }
.form-message.ok { color: #1c6b3c; }
.form-message.erreur { color: #a4262c; }
.contact-grille { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .contact-grille { grid-template-columns: 1fr 1.3fr; } }
.newsletter-note { font-size: .78rem; margin: 8px 0 0; color: var(--texte-doux); }

/* Commande */
.ck h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.ck h2 { font-size: 1.1rem; }
.ck-grille { display: grid; gap: 28px; grid-template-columns: 1fr; }
.ck-resume { order: -1; background: var(--fond-2); padding: 16px; border-radius: var(--rayon); align-self: start; }
@media (min-width: 900px) { .ck-grille { grid-template-columns: 1.3fr 1fr; } .ck-resume { order: 0; position: sticky; top: 20px; } }
.ck-form section { margin-bottom: 26px; }
.ck-duo { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.ck-ligne { display: flex; gap: 10px; align-items: center; padding: 8px 0; }
.ck-ligne img { width: 56px; height: 74px; object-fit: cover; border-radius: var(--rayon); }
.ck-ligne div { flex: 1; min-width: 0; }
.ck-ligne span, .ck-ligne small { display: block; }
.ck-ligne small { color: var(--texte-doux); }
.ck-totaux { border-top: 1px solid var(--bord); margin-top: 8px; padding-top: 10px; }
.ck-totaux > div { display: flex; justify-content: space-between; padding: 3px 0; }
.ck-total { font-size: 1.15rem; font-weight: 600; margin-top: 6px; }
.ck-securite, .ck-note { font-size: .85rem; color: var(--texte-doux); margin: 10px 0; }
.ck-indisponible { padding: 14px; background: var(--fond-2); border-radius: var(--rayon); }
.ck-form .ck-cgv { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.ck-cgv input { margin-top: 4px; width: 20px; height: 20px; flex: none; }
[data-payer]:disabled { opacity: .72; cursor: not-allowed; }

/* Consentement */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; max-width: 480px; margin: 0 auto; background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, .15); font-size: .9rem; }
.consent p { margin-bottom: 10px; }
.consent div { display: flex; gap: 8px; }
.consent button { flex: 1; padding: 10px; border: 1px solid var(--texte); background: var(--fond); border-radius: var(--rayon); }

@font-face{font-family:"Sora";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/sora-400.woff2) format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/sora-600.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/newsreader-400.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/newsreader-400i.woff2) format("woff2")}

/* ==========================================================================
   Lundi Mardi : l'agenda.
   Gris papier, feuilles blanches, encre, un seul jaune : celui du post-it.
   Tout est tenu par trois gestes : l'onglet, le post-it, la feuille réglée.
   ========================================================================== */
:root {
  --fond: #f1f1ee; --fond-2: #ffffff; --texte: #191919; --texte-doux: #5b5b56;
  --accent: #f5d33c; --accent-texte: #191919; --bord: #c8c8c1; --rayon: 0px;
  --police-titre: "Sora", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --police-texte: "Sora", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --police-note: "Newsreader", Georgia, "Times New Roman", serif;
  --encre: #191919; --filet: #dcdcd6; --trait: 1.5px solid #191919;
  --ligne: 32px; --marge: 16px; --papier: #ffffff; --jaune-pale: #fbf3c9;
  --coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12.5c2 1.8 4 4.4 5.2 6.8C11 12.4 15.4 6.8 22 2.4' fill='none' stroke='%23191919' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrache: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 72' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1000V5L1000 5.0L997 5.5L982 8.4L961 13.1L940 14.7L931 13.8L912 13.9L893 18.2L875 15.4L860 13.9L847 18.7L831 17.3L818 17.7L807 23.8L785 21.1L770 21.5L748 26.6L725 26.1L710 23.9L688 27.4L675 26.4L654 27.2L644 28.6L628 28.5L609 32.2L595 35.9L572 36.1L552 33.3L533 37.2L510 41.0L494 40.1L476 41.9L462 43.9L445 44.2L426 40.3L409 41.9L389 44.8L378 49.2L365 48.2L343 48.0L325 47.0L306 51.7L292 50.0L275 50.0L259 53.2L247 49.6L237 53.4L223 54.7L205 52.4L184 54.2L173 53.5L159 59.0L150 60.2L135 58.1L112 59.4L99 56.4L78 59.2L67 57.2L52 57.5L35 58.2L21 61.8L11 62.8L0 60.8Z'/%3E%3C/svg%3E");
  --dechirure: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v5l-9 4-11-3-8 6-13-4-7 3-12-5-10 6-9-2-12 4-8-5-13 3-6-3-12 6-9-4-11 3-7-4-12 5-10-3-8 4-13-5-8 3-11-4-9 5-12-3z'/%3E%3C/svg%3E");
}

html { background: var(--fond); }
body { font-size: 15px; letter-spacing: -.003em; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--encre); }
ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.028em; }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* -------------------------------------------------------------- le post-it */
.postit {
  --r: -1.6deg;
  position: relative; display: block; margin: 0; padding: 12px 14px 14px;
  background: linear-gradient(160deg, #f7da53 0%, var(--accent) 45%, #f2cd2c 100%);
  color: var(--encre); font-family: var(--police-note); font-style: italic; font-size: 1.06rem; line-height: 1.22;
  transform: rotate(var(--r)); transform-origin: 50% 0;
  box-shadow: 0 2px 2px -1px rgba(25, 25, 25, .28);
  transition: transform .16s ease, box-shadow .16s ease;
}
@media (hover: hover) {
  .postit:hover { transform: rotate(calc(var(--r) * .4)) translateY(-5px) perspective(420px) rotateX(5deg); box-shadow: 0 12px 12px -8px rgba(25, 25, 25, .34); }
}

/* -------------------------------------------------- la liste de tâches cochées */
.cases { display: grid; gap: 2px; }
.cases li { position: relative; padding: 3px 0 3px 30px; }
.cases li::before { content: ""; position: absolute; left: 0; top: 4px; width: 19px; height: 19px; background: var(--papier); border: var(--trait); }
.cases li::after { content: ""; position: absolute; left: 2px; top: -1px; width: 23px; height: 23px; background: var(--coche) center / contain no-repeat; }

/* -------------------------------------------------- la semaine miniature */
.mini { display: inline-flex; gap: 2px; vertical-align: middle; }
.mini-j { display: block; width: 17px; height: 17px; border: 1px solid #bdbdb6; background: var(--papier); color: #65655f; font: 600 10px/15px var(--police-titre); font-style: normal; text-align: center; letter-spacing: 0; text-decoration: none; }
.mini-j.plein { background: var(--accent); border-color: var(--encre); color: var(--encre); }
.mini-j.rechange { background: repeating-linear-gradient(135deg, var(--accent) 0 2px, var(--papier) 2px 5px); border-color: var(--encre); color: var(--encre); }

/* --------------------------------------------------------------------- entête */
.entete { position: sticky; top: 0; z-index: 30; background: var(--fond); border-bottom: var(--trait); }
.entete-barre { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 2px var(--marge) 0; }
.logo { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; }
.logo-case { width: 56px; height: auto; flex: none; }
.logo-nom { font: 600 1.06rem/1 var(--police-titre); letter-spacing: -.03em; white-space: nowrap; }
.entete-outils { grid-column: 2; grid-row: 1; display: flex; align-items: center; margin-right: -10px; }
.outil { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; }
.compteur { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 4px; background: var(--accent); border: 1px solid var(--encre); font: 600 .69rem/17px var(--police-titre); text-align: center; }
.entete-liens { display: none; }
.onglets { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: -1.5px; }
.onglet { position: relative; isolation: isolate; display: grid; place-items: end center; height: 44px; padding-bottom: 7px; color: var(--encre); font: 600 .95rem/1 var(--police-titre); text-decoration: none; }
.onglet::before { content: ""; position: absolute; z-index: -1; inset: 9px 0 0 -1.5px; background: var(--papier); border: var(--trait); border-bottom: 0; border-radius: 5px 5px 0 0; transition: top .14s ease; }
.onglet:first-child::before { left: 0; }
.onglet.aujourdhui::before { background: var(--accent); }
.onglet.choisi::before { top: 3px; border-bottom: 1.5px solid var(--papier); }
.onglet.aujourdhui.choisi::before { border-bottom-color: var(--accent); }
@media (hover: hover) { .onglet:hover::before { top: 3px; } }

/* entête allégé de la commande */
.entete-court .entete-barre { grid-template-columns: minmax(0, 1fr) auto; align-items: center; height: auto; padding-block: 4px; }
.entete-retour { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: .88rem; text-decoration: underline; }

/* ------------------------------------------------------------------- le menu */
.menu { position: fixed; inset: 0 auto 0 0; z-index: 70; display: flex; flex-direction: column; width: min(344px, 90vw); background: var(--papier); border-right: var(--trait); overflow-y: auto; transform: translateX(-103%); transition: transform .26s ease; }
.menu.ouvert { transform: none; }
.menu-tete { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 20px; border-bottom: var(--trait); }
.menu-titre { font: italic 400 1.2rem var(--police-note); }
.menu-fermer { width: 44px; height: 44px; background: none; border: 0; font-size: 1.8rem; line-height: 1; }
.menu-liens a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--filet); font: 600 1.28rem/1.15 var(--police-titre); letter-spacing: -.025em; text-decoration: none; }
.menu-liens small { font: 400 .8rem var(--police-titre); color: var(--texte-doux); letter-spacing: 0; }
.menu-second { padding: 14px 20px 4px; }
.menu-second a { display: flex; align-items: center; min-height: 44px; font-size: .95rem; text-decoration: none; }
.menu-note { --r: -1.4deg; margin: auto 20px 18px; }

/* -------------------------------------------------- 1. la tenue d'aujourd'hui */
.jour { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "tete tete" "photo pieces" "achat achat" "cases cases"; column-gap: 12px; padding: 14px var(--marge) 18px; background: var(--papier); border-bottom: var(--trait); }
.tenue { display: contents; }
.jour-tete { grid-area: tete; }
.jour-date { margin: 0 0 6px; font-size: .8rem; color: var(--texte-doux); }
.jour-date::first-letter { text-transform: uppercase; }
.jour-titre { margin: 0 0 8px; font-size: 2.7rem; line-height: .98; letter-spacing: -.045em; }
.jour-titre em { display: block; font: italic 400 1.06em/1 var(--police-note); letter-spacing: -.03em; }
.jour-chapeau { margin: 0 0 12px; font: 400 1.1rem/1.28 var(--police-note); }
.tenue-photo { grid-area: photo; position: relative; margin: 0; }
.tenue-img { width: 100%; height: 100%; min-height: 336px; object-fit: cover; object-position: 50% 30%; background: var(--fond); }
.tenue[data-tenue="mardi"] .tenue-img { object-position: 78% 40%; }
.tenue[data-tenue="samedi"] .tenue-img { object-position: 66% 40%; }
.tenue[data-tenue="mercredi"] .tenue-img { object-position: 30% 50%; }
.tenue[data-tenue="dimanche"] .tenue-img { object-position: 40% 60%; }
.tenue-note { --r: 2.2deg; position: absolute; left: calc(100% - 14px); bottom: -6px; width: calc((100vw - 2 * var(--marge) - 12px) / 2.2 + 16px); max-width: 240px; font-size: 1.02rem; z-index: 2; }
.tenue-pieces { grid-area: pieces; align-self: start; border-top: var(--trait); }
.tenue-pieces li:not(.tenue-planb) > a { display: block; padding: 5px 0 6px; border-bottom: 1px solid var(--filet); text-decoration: none; }
.tenue-role { display: block; font-size: .75rem; line-height: 1.3; color: var(--texte-doux); }
.tenue-nom { display: block; font: 600 .88rem/1.18 var(--police-titre); letter-spacing: -.025em; }
.tenue-prix { display: block; margin-top: 1px; font-size: .86rem; }
.tenue-planb { display: none; }
.jour-achat { grid-area: achat; margin-top: 14px; }
.jour-tailles { margin: 0; padding: 0; border: 0; }
.jour-tailles legend { padding: 0; margin-bottom: 6px; font-size: .84rem; font-weight: 600; }
.jour-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 12px 0 10px; }
.jour-total span { font-size: .9rem; }
.jour-total strong { font: 600 1.3rem var(--police-titre); letter-spacing: -.02em; }
.jour-cases { grid-area: cases; display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 12px; font-size: .85rem; }

/* tailles : des cases d'agenda collées */
.achat-choix { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.achat-choix label { min-width: 0; margin-left: -1.5px; }
.achat-choix label:first-child { margin-left: 0; }
.achat-choix span { min-width: 0; min-height: 46px; padding: 11px 2px; background: var(--papier); border: var(--trait); font-weight: 600; font-size: .95rem; line-height: 1.5; transition: background-color .12s ease; }
.achat-choix input:focus-visible + span { outline-color: var(--encre); outline-offset: -5px; }
@media (hover: hover) { .achat-choix span:hover { background: var(--jaune-pale); } }
.achat-erreur { margin: 8px 0 0; color: #8f1d22; font-size: .9rem; font-weight: 600; }

/* boutons */
.achat-bouton, .tiroir-commander, .bouton, .formulaire button[type="submit"], .formulaire [data-confirmer], [data-payer], .barre-achat button {
  border: var(--trait); font-family: var(--police-titre); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; transition: transform .12s ease, background-color .12s ease;
}
.achat-bouton { min-height: 54px; font-size: 1.06rem; }
@media (hover: hover) {
  .achat-bouton:hover, .tiroir-commander:hover, .bouton:hover, .formulaire button[type="submit"]:hover, [data-payer]:not(:disabled):hover, .barre-achat button:hover { background: #f8df6c; transform: translateY(-2px); }
}
.bouton-secondaire { background: var(--papier) !important; border: var(--trait) !important; }

/* -------------------------------------------------------- les titres de section */
.section-tete { padding: 0 var(--marge); margin-bottom: 16px; }
.section-tete h2 { margin: 0 0 4px; font-size: 1.9rem; letter-spacing: -.04em; }
.section-tete p { margin: 0; font: 400 1.14rem/1.3 var(--police-note); color: var(--texte-doux); }

/* -------------------------------------------------- 2. la semaine, sept colonnes */
.semaine { padding: 32px 0 12px; }
.rail { display: flex; gap: 12px; padding: 6px var(--marge) 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); scrollbar-width: thin; scrollbar-color: var(--encre) transparent; }
.col { position: relative; display: flex; flex-direction: column; flex: 0 0 76vw; max-width: 310px; background: var(--papier); border: var(--trait); scroll-snap-align: start; }
.col-tete { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 6px 10px; border-bottom: var(--trait); font-weight: 600; text-decoration: none; }
.col-lettre { display: grid; place-items: center; width: 27px; height: 27px; border: var(--trait); background: var(--papier); font-size: .88rem; }
.col-nom { font-size: .98rem; letter-spacing: -.02em; }
.col.aujourdhui .col-tete { background: var(--accent); }
.col-photo { display: block; overflow: hidden; }
.col-photo img { width: 100%; aspect-ratio: 3 / 3.9; object-fit: cover; object-position: 50% 30%; transition: transform .25s ease; }
.col[data-col="mardi"] .col-photo img { object-position: 78% 40%; }
.col[data-col="samedi"] .col-photo img { object-position: 68% 40%; }
@media (hover: hover) { .col-photo:hover img { transform: scale(1.02); } }
.col-note { --r: -1.8deg; align-self: flex-end; width: 84%; margin: -46px 8px 8px 0; z-index: 2; font-size: 1rem; }
.col:nth-child(even) .col-note { --r: 1.6deg; align-self: flex-start; margin-left: 8px; }
.col-pieces { border-top: 1px solid var(--filet); }
.col-pieces a { display: flex; align-items: center; min-height: 44px; padding: 6px 12px; border-bottom: 1px solid var(--filet); font-size: .88rem; line-height: 1.22; font-weight: 600; letter-spacing: -.015em; text-decoration: none; }
@media (hover: hover) { .col-pieces a:hover { background: var(--jaune-pale); } }
.col-planb { margin: 0; padding: 9px 12px 12px; font: 400 1rem/1.24 var(--police-note); color: var(--texte-doux); }
.col-planb strong { display: block; font: 600 .74rem var(--police-titre); color: var(--encre); letter-spacing: 0; }
.col-planb a { color: var(--encre); }
.col-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: auto 0 0; padding: 4px 12px; border-top: var(--trait); }
.col-total { font-weight: 600; }
.col-prendre { display: inline-flex; align-items: center; min-height: 44px; font-size: .84rem; font-weight: 600; text-decoration: underline var(--accent) .5em; text-underline-offset: -.14em; text-decoration-skip-ink: none; }

/* ------------------------------------- 3. les pièces qui reviennent, en emploi du temps */
.reviennent { padding: 26px 0 8px; }
.emploi { margin: 0 var(--marge); background: var(--papier); border: var(--trait); }
.emploi-tete { display: none; }
.emploi-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "piece prix" "mini mini"; gap: 10px 12px; padding: 12px; border-bottom: 1px solid var(--filet); text-decoration: none; transition: background-color .12s ease; }
.emploi-ligne:last-child { border-bottom: 0; }
.emploi-piece { grid-area: piece; display: flex; align-items: center; gap: 12px; min-width: 0; }
.emploi-photo { flex: none; width: 64px; }
.emploi-photo img { width: 64px; height: 80px; object-fit: cover; object-position: 50% 30%; }
.emploi-nom { font: 600 1.02rem/1.18 var(--police-titre); letter-spacing: -.02em; }
.emploi-nom small { display: block; margin-top: 3px; font-weight: 400; font-size: .8rem; color: var(--texte-doux); letter-spacing: 0; }
.emploi-prix { grid-area: prix; align-self: center; font-weight: 600; white-space: nowrap; }
.emploi-ligne .mini { grid-area: mini; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
.emploi-ligne .mini-j { width: auto; height: 32px; margin-left: -1px; border-color: var(--encre); font-size: .8rem; line-height: 30px; }
.emploi-ligne .mini-j:first-child { margin-left: 0; }
@media (hover: hover) { .emploi-ligne:hover { background: var(--jaune-pale); } }

/* ---------------------------------------------- 4. reste à faire : une liste cochée */
.reste { position: relative; margin: 32px var(--marge) 0; }
.reste-feuille { padding: var(--ligne) 10px calc(var(--ligne) * 2 + 8px) 22px; background: var(--papier) repeating-linear-gradient(transparent 0 calc(var(--ligne) - 1px), var(--filet) calc(var(--ligne) - 1px) var(--ligne)); background-position: 0 -3px; -webkit-mask: var(--dechirure) bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 11px) no-repeat; mask: var(--dechirure) bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 11px) no-repeat; }
.reste-feuille h2 { margin: 0 0 var(--ligne); font-size: 1.7rem; line-height: var(--ligne); letter-spacing: -.04em; }
.reste-feuille h2 em { font: italic 400 1.1em var(--police-note); }
.reste-feuille .cases { gap: 0; }
.reste-feuille .cases li { min-height: var(--ligne); padding: 0 0 0 32px; font-size: .92rem; line-height: var(--ligne); }
.reste-feuille .cases li::before { top: 6px; }
.reste-feuille .cases li::after { top: 1px; }
.reste-note { --r: 2.4deg; position: absolute; right: 8px; bottom: -14px; width: 158px; font-size: 1.04rem; }

/* --------------------------------------- pied : la feuille de calendrier arrachée */
.pied { margin-top: 64px; padding: 0 var(--marge) 24px; }
.calendrier { position: relative; max-width: 1180px; margin: 0 auto; filter: drop-shadow(0 0 .5px rgba(25, 25, 25, .9)); }
.calendrier-tete { position: relative; z-index: 2; display: flex; justify-content: space-around; align-items: flex-start; height: 30px; background: var(--accent); border: var(--trait); }
.calendrier-tete::after { content: ""; position: absolute; left: -1.5px; right: -1.5px; top: 100%; height: 11px; background: #e6e6e1; -webkit-mask: var(--dechirure) bottom / 180px 11px repeat-x; mask: var(--dechirure) bottom / 180px 11px repeat-x; }
.calendrier-tete i { width: 13px; height: 13px; margin-top: 7px; background: var(--fond); border: var(--trait); border-radius: 50%; }
.feuillet { position: relative; z-index: 1; padding: 22px 16px 70px; background: var(--papier); -webkit-mask: var(--arrache) bottom / 100% 72px no-repeat, linear-gradient(#000 0 0) top / 100% calc(100% - 71px) no-repeat; mask: var(--arrache) bottom / 100% 72px no-repeat, linear-gradient(#000 0 0) top / 100% calc(100% - 71px) no-repeat; }
.feuillet-haut { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px; align-items: center; padding-bottom: 16px; }
.feuillet-date { border: var(--trait); text-align: center; }
.feuillet-date p { margin: 0; }
.feuillet-mois { padding: 3px 2px; border-bottom: var(--trait); background: var(--accent); font-size: .76rem; font-weight: 600; }
.feuillet-num { font: 600 2.2rem/1.5 var(--police-titre); letter-spacing: -.05em; }
.feuillet-num.date-reelle { font-size: 3rem; line-height: 1.15; }
.feuillet-jour { padding-bottom: 5px; font: italic 400 .98rem/1.1 var(--police-note); }
.feuillet-slogan { margin: 6px 0 2px; font: italic 400 1.12rem/1.2 var(--police-note); }
.feuillet-mail { margin: 0; font-size: .84rem; word-break: break-word; }
.feuillet-mail a { display: inline-flex; align-items: center; min-height: 44px; }
.feuillet-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; padding: 16px 0; border-top: 1.5px dashed var(--encre); }
.feuillet-colonnes h2 { margin: 0 0 6px; font-size: .9rem; letter-spacing: -.01em; }
.feuillet-colonnes a { display: inline-flex; align-items: center; min-height: 44px; font-size: .86rem; line-height: 1.2; text-decoration: none; }
.feuillet-colonnes li a:hover { text-decoration: underline; }
.feuillet-lettre { grid-column: 1 / -1; }
.feuillet-lettre > p { margin: 0 0 8px; font: italic 400 1.04rem var(--police-note); }
.newsletter { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.newsletter input[type="email"] { min-width: 0; min-height: 46px; padding: 10px 12px; background: var(--papier); border: var(--trait); border-right: 0; border-radius: 0; font-size: 16px; }
.newsletter button { min-height: 46px; padding: 0 18px; background: var(--accent); color: var(--encre); border: var(--trait); font-weight: 600; }
.newsletter .form-message, .newsletter-note { grid-column: 1 / -1; }
.newsletter .form-message { min-height: 0; margin-top: 6px; }
.newsletter-note a { min-height: 0; display: inline; font-size: inherit; text-decoration: underline; }
.pied-legal { padding-top: 14px; border-top: 1.5px dashed var(--encre); }
.pied-legal-coord { font-size: .84rem; line-height: 1.5; }
.pied-legal-coord a { word-break: break-word; }
/* liens dans le texte : la zone tactile dépasse la ligne sans déplacer le texte */
.pied-legal-coord a, .col-planb a, .tenue-planb a, .reste-aussi a { padding-block: 14px; }
.pied-legal-prix { color: var(--texte-doux); }
.pied-legal-copy { margin-bottom: 0 !important; color: var(--texte-doux); }
.lien-retractation { display: inline-flex; align-items: center; min-height: 44px; }
.logos-paiement { gap: 5px; }
.logos-paiement svg { width: 44px; height: 28px; }
.calendrier-suite { position: relative; margin: -72px 0 0 0; padding: 62px 16px 12px; background: #e6e6e1; font: italic 400 1.1rem var(--police-note); text-align: right; }

/* pied allégé de la commande */
.pied-court { margin-top: 24px; }
.pied-court-feuille { max-width: 1080px; margin: 0 auto; padding: 16px; background: var(--papier); border: var(--trait); }
.pied-court-liens { display: flex; flex-wrap: wrap; gap: 0 18px; margin-bottom: 8px; }
.pied-court-liens a { display: inline-flex; align-items: center; min-height: 44px; font-size: .84rem; }

/* ------------------------------------------------------ boutique et collections */
.liste { max-width: 1320px; margin: 0 auto; padding: 18px var(--marge) 0; }
.fil { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; min-height: 44px; font-size: .82rem; color: var(--texte-doux); }
.fil a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte-doux); }
.liste-tete { margin-bottom: 14px; }
.liste-tete h1 { margin: 0 0 4px; font-size: clamp(2.3rem, 9.4vw, 4.6rem); line-height: 1; letter-spacing: -.05em; }
.liste-accroche { margin: 0; font: italic 400 1.22rem/1.25 var(--police-note); }
.filtres { margin-bottom: 14px; }
.filtres-titre { margin: 0 0 6px; font-size: .84rem; font-weight: 600; }
.filtres-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.filtre-jour { position: relative; min-height: 46px; margin-left: -1.5px; padding: 0; background: var(--papier); border: var(--trait); font: 600 .96rem var(--police-titre); transition: background-color .12s ease; }
.filtre-jour:first-child { margin-left: 0; }
.filtre-jour.actif { background: var(--accent); }
.filtre-mot { display: none; }
.filtres-types { display: flex; gap: 6px; margin: 10px calc(-1 * var(--marge)) 0; padding: 0 var(--marge); overflow-x: auto; scrollbar-width: none; }
.filtres-types::-webkit-scrollbar { display: none; }
.filtre-type { flex: none; min-height: 44px; padding: 0 12px; background: none; border: 1px solid var(--encre); font-size: .88rem; transition: background-color .12s ease; }
.filtre-type.actif { background: var(--accent); font-weight: 600; }
@media (hover: hover) { .filtre-jour:hover, .filtre-type:hover { background: var(--jaune-pale); } .filtre-jour.actif:hover, .filtre-type.actif:hover { background: var(--accent); } }
.filtres-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.filtres-compte { margin: 0; font-size: .86rem; color: var(--texte-doux); }
.filtres-tri { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; }
.filtres-tri select { min-height: 44px; max-width: 186px; padding: 0 4px; background: transparent; border: 0; border-bottom: var(--trait); border-radius: 0; font-size: 16px; }

.grille { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--papier); border: var(--trait); }
.carte { min-width: 0; border-bottom: 1px solid var(--filet); }
.carte:last-child { border-bottom: 0; }
.carte-lien { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: start; height: 100%; padding: 10px 12px 10px 10px; text-decoration: none; transition: background-color .12s ease; }
.carte-photo { display: block; }
.carte-img { width: 92px; height: 118px; object-fit: cover; object-position: 50% 30%; }
.carte-corps { padding-top: 1px; }
.carte-nom { margin: 0 0 2px; font-size: 1rem; line-height: 1.18; letter-spacing: -.022em; }
.carte-couleur { margin: 0 0 8px; font-size: .82rem; line-height: 1.25; color: var(--texte-doux); }
.carte-jours { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0; font-size: .76rem; }
.carte-prix { margin: 2px 0 0; font-size: .92rem; font-weight: 600; white-space: nowrap; }
@media (hover: hover) { .carte-lien:hover { background: var(--jaune-pale); } }
.grille-vide { padding: 28px 16px 36px; background: var(--papier); border: var(--trait); }
.postit-vide { --r: -1.2deg; display: inline-block; margin-bottom: 18px; }
.grille-vide .bouton { display: block; width: max-content; }

/* -------------------------------------------------------------- fiche produit */
.fiche { max-width: 1320px; margin: 0 auto; padding: 4px var(--marge) 0; }
.fiche-images { display: flex; gap: 8px; margin: 0 calc(-1 * var(--marge)); padding: 0 var(--marge); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); scrollbar-width: none; }
.fiche-images::-webkit-scrollbar { display: none; }
.fiche-images figure { flex: 0 0 74%; margin: 0; scroll-snap-align: start; }
.fiche-images img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: var(--trait); }
.fiche-col { padding-top: 16px; }
.fiche-col h1 { margin: 0 0 4px; font-size: clamp(1.95rem, 7.6vw, 2.9rem); line-height: 1.05; letter-spacing: -.045em; }
.fiche-prix { margin: 0 0 14px; font-size: 1.24rem; font-weight: 600; letter-spacing: -.02em; }
.fiche-prix small { font-size: .78rem; font-weight: 400; color: var(--texte-doux); letter-spacing: 0; }
.fiche-semaine { margin-bottom: 12px; }
.mini-grand { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
.mini-grand .mini-j { display: grid; place-items: center; width: auto; height: 46px; margin-left: -1.5px; border: var(--trait); font-size: .96rem; line-height: 1; }
.mini-grand .mini-j:first-child { margin-left: 0; }
.fiche-semaine-texte { margin: 8px 0 0; font: 400 1.08rem/1.28 var(--police-note); }
.fiche-semaine-texte strong { font-weight: 400; background: linear-gradient(transparent 60%, var(--accent) 60%, var(--accent) 94%, transparent 94%); }
.fiche-resume { margin: 0 0 10px; font: italic 400 1.2rem/1.28 var(--police-note); }
.achat { position: relative; }
.achat-option { margin-bottom: 10px; }
.achat-option legend { min-height: 30px; margin-bottom: 0; font-size: .84rem; line-height: 24px; }
.achat-guide { position: absolute; top: -10px; right: 0; margin: 0; font-size: .84rem; }
.achat-guide a { display: inline-flex; align-items: center; min-height: 44px; }
.fiche-cases { margin: 14px 0 18px; font-size: .9rem; }
.fiche-texte { font: 400 1.14rem/1.42 var(--police-note); }
.pli { border-top: var(--trait); }
.pli:last-of-type { border-bottom: var(--trait); }
.pli summary { position: relative; display: flex; align-items: center; min-height: 50px; padding-right: 30px; font-weight: 600; font-size: .95rem; list-style: none; cursor: pointer; }
.pli summary::-webkit-details-marker { display: none; }
.pli summary::after { content: "+"; position: absolute; right: 2px; font-size: 1.3rem; font-weight: 400; }
.pli[open] summary::after { content: "−"; }
.fiche-details { padding-bottom: 8px; font: 400 1.08rem/1.5 var(--police-note); }
.fiche-details li::before { content: "– "; }
.fiche-infos { padding-bottom: 12px; font-size: .9rem; }
.fiche-infos > div { border-bottom-color: var(--filet); }
.fiche-infos > div:last-child { border-bottom: 0; }
.bloc-conformite { padding-bottom: 8px; line-height: 1.5; }

.reste-tenue { margin-top: 34px; }
.reste-tenue > h2 { margin: 0 0 18px; font-size: 1.9rem; letter-spacing: -.04em; }
.reste-grille { display: grid; gap: 28px; }
.reste-jour { position: relative; padding: 0 12px 4px; background: var(--papier); border: var(--trait); }
.reste-jour-note { --r: -1.2deg; width: fit-content; max-width: 88%; margin: -14px 0 8px; font-size: 1.04rem; }
.reste-jour-photo { display: none; }
.reste-jour-note strong { display: block; font: 600 .78rem var(--police-titre); letter-spacing: 0; }
.reste-jour:nth-child(even) .reste-jour-note { --r: 1.2deg; }
.reste-ligne { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--filet); text-decoration: none; }
.reste-photo img { width: 62px; height: 78px; object-fit: cover; object-position: 50% 30%; }
.reste-nom { font: 600 .98rem/1.18 var(--police-titre); letter-spacing: -.02em; }
.reste-nom small { display: block; margin-top: 2px; font-weight: 400; font-size: .78rem; color: var(--texte-doux); letter-spacing: 0; }
.reste-prix { font-size: .92rem; font-weight: 600; white-space: nowrap; }
.reste-voir { display: inline-flex; align-items: center; min-height: 44px; font-size: .86rem; font-weight: 600; }
.reste-aussi { margin: 12px 0 0; font: 400 1.1rem var(--police-note); }

/* barre d'achat */
.barre-achat { background: var(--papier); border-top: var(--trait); }
.barre-achat-texte span { font-weight: 600; font-size: .88rem; letter-spacing: -.015em; }
.barre-achat-texte strong { font-weight: 400; }
.barre-achat.bouton-cache { transform: none; }
@media (max-width: 899px) { .page-produit { padding-bottom: 76px; } }

/* -------------------------------------------------------------- tiroir panier */
.voile { background: rgba(25, 25, 25, .34); }
.tiroir { background: var(--papier); border-left: var(--trait); }
.tiroir::before { content: ""; flex: none; height: 24px; background: var(--fond) radial-gradient(circle at 50% 12px, var(--papier) 5px, var(--encre) 5.6px 6.6px, transparent 7px) 0 0 / 34px 24px repeat-x; border-bottom: var(--trait); }
.tiroir-entete { padding: 8px 8px 8px 18px; border-bottom: var(--trait); }
.tiroir-entete h2 { font-size: 1.28rem; letter-spacing: -.035em; }
.tiroir-fermer { width: 44px; height: 44px; padding: 0; }
.tiroir-liste { padding: 0 18px; background: repeating-linear-gradient(transparent 0 calc(var(--ligne) - 1px), var(--filet) calc(var(--ligne) - 1px) var(--ligne)) local; }
.ligne-panier { position: relative; gap: 14px; padding: 12px 18px; margin: 0 -18px; background: var(--papier); border-bottom-color: var(--filet); }
.panier-lignes .ligne-panier { margin: 0; padding-inline: 0; }
.ligne-panier img { width: 68px; height: 88px; object-position: 50% 30%; }
.ligne-nom { margin: -8px 0; padding: 8px 0; font-size: .96rem; line-height: 1.2; letter-spacing: -.02em; }
.ligne-option { margin-top: 2px; font-size: .82rem; }
.ligne-bas { margin-top: 6px; }
.quantite { border: var(--trait); }
.quantite button { width: 44px; height: 44px; }
.quantite span { min-width: 28px; font-weight: 600; }
.ligne-retirer { min-height: 44px; padding: 0; }
.tiroir-pied { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: var(--fond); border-top: var(--trait); }
.tiroir-ligne { font-size: 1rem; }
.tiroir-ligne strong { font: 600 1.25rem var(--police-titre); letter-spacing: -.02em; }
.tiroir-note { --r: -.8deg; width: fit-content; margin: 6px 0 14px; padding: 7px 10px 8px; background: var(--accent); color: var(--encre); font: italic 400 1rem/1.2 var(--police-note); transform: rotate(var(--r)); box-shadow: 0 2px 2px -1px rgba(25, 25, 25, .28); }
.tiroir-commander { padding-block: 16px; font-size: 1.04rem; }
.tiroir-voir { font-size: .86rem; padding: 12px 10px 2px; }
.panier-vide { padding: 44px 8px; background: var(--papier); margin: 0 -18px; }
.page-panier .panier-vide, .ck .panier-vide { margin: 0; }
.panier-vide p { --r: -1.4deg; display: inline-block; padding: 14px 18px 16px; background: var(--accent); font: italic 400 1.18rem/1.2 var(--police-note); transform: rotate(var(--r)); box-shadow: 0 2px 2px -1px rgba(25, 25, 25, .28); }
.panier-vide a { display: flex; align-items: center; width: max-content; min-height: 44px; margin: 0 auto; font-weight: 600; font-size: .92rem; }

/* page panier */
div.page-panier { max-width: 900px; margin-top: 18px; padding: 22px 16px 24px; background: var(--papier); border: var(--trait); }
div.page-panier h1 { margin-bottom: 8px; font-size: clamp(2rem, 8vw, 3rem); letter-spacing: -.05em; }
.panier-total { max-width: 400px; }

/* ------------------------------------------------------------------- recherche */
.recherche { background: var(--fond); padding: 12px var(--marge); }
.recherche-barre input { min-height: 50px; background: var(--papier); border: var(--trait); border-radius: 0; font-size: 16px; }
.recherche-barre button { width: 44px; height: 44px; padding: 0; }
.recherche-barre input::-webkit-search-cancel-button { display: none; }
.recherche-resultats { background: var(--papier); }
.recherche-resultat { padding: 8px 12px; border-bottom-color: var(--filet); font-size: .95rem; }
.recherche-resultat img { object-position: 50% 30%; }
.recherche-resultat span { font-weight: 600; letter-spacing: -.02em; }
.recherche-vide { padding: 16px 12px; font: italic 400 1.14rem var(--police-note); }

/* ------------------------------------------------- pages de texte : la feuille de cahier */
.cahier { padding: 18px 8px 8px; filter: drop-shadow(0 0 .5px rgba(25, 25, 25, .9)); }
.cahier .legal { --marge-cahier: 46px; max-width: 860px; margin: 0 auto; padding: 0; background: var(--papier); -webkit-mask: var(--dechirure) bottom / 300px 14px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 13px) no-repeat; mask: var(--dechirure) bottom / 300px 14px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 13px) no-repeat; }
.legal-entete { padding: 22px 16px 18px var(--marge-cahier); border-bottom: var(--trait); }
.cahier .legal h1 { margin: 0; font-size: clamp(1.75rem, 7.4vw, 2.7rem); line-height: 1.08; letter-spacing: -.045em; overflow-wrap: break-word; }
.cahier .legal-entete .legal-intro { margin: 8px 0 0; line-height: 1.3; }
.legal-corps { position: relative; padding: var(--ligne) 14px calc(var(--ligne) * 2) var(--marge-cahier); font: 400 1.09rem/var(--ligne) var(--police-note); background:
  linear-gradient(90deg, transparent calc(var(--marge-cahier) - 12px), var(--accent) calc(var(--marge-cahier) - 12px), var(--accent) calc(var(--marge-cahier) - 10px), transparent calc(var(--marge-cahier) - 10px)),
  repeating-linear-gradient(transparent 0 calc(var(--ligne) - 1px), var(--filet) calc(var(--ligne) - 1px) var(--ligne)); background-position: 0 0, 0 -7px; }
.legal-corps::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 16px; background: radial-gradient(circle at 8px 50%, var(--fond) 6px, var(--filet) 6.6px 7.2px, transparent 7.6px) 0 40px / 16px 192px repeat-y; }
.legal-corps p, .legal-corps ul, .legal-corps ol, .legal-corps .tableau { margin: 0 0 var(--ligne); }
.legal-corps ul { padding-left: 1.1em; }
.legal-corps li { margin: 0; }
.legal-corps > *:last-child { margin-bottom: 0; }
.cahier .legal h2 { margin: 0; font: 600 1.06rem/var(--ligne) var(--police-titre); letter-spacing: -.02em; }
.cahier .legal h3 { margin: 0; font: 600 .95rem/var(--ligne) var(--police-titre); letter-spacing: -.01em; }
.legal-corps .legal-intro { color: var(--texte); font-size: inherit; font-style: italic; }
.legal-corps .legal-mise-a-jour { margin: 0; font-size: .95rem; }
.legal-corps table { margin: 0; font-size: .98rem; }
.legal-corps th, .legal-corps td { padding: 0 10px 0 0; border: 0; line-height: var(--ligne); }
.legal-corps th { font-family: var(--police-titre); font-weight: 600; font-size: .78rem; letter-spacing: -.01em; }
/* un post-it ne tient pas deux pages de CGV : la garantie légale reste une note en marge, sur fond pâle */
.legal-corps .encadre { margin: 0 0 var(--ligne); padding: 0 14px; background: var(--jaune-pale); border: 0; border-left: 4px solid var(--accent); font-size: 1rem; }
.legal-corps .encadre p { margin: 0; }
.legal-corps .encadre p + p { margin-top: 12px; }
.encadre .a-completer { background: var(--papier); }
.faq details { padding: 0; border: 0; }
.faq summary { position: relative; display: block; padding: calc(var(--ligne) / 2) 28px calc(var(--ligne) / 2) 0; font: 600 .98rem/var(--ligne) var(--police-titre); letter-spacing: -.02em; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 2px; top: calc(var(--ligne) / 2); font-weight: 400; font-size: 1.2rem; }
.faq details[open] summary::after { content: "−"; }
.faq details div { padding: 0 0 var(--ligne); }
.faq details div p { margin: 0; }

/* formulaires : une fiche cartonnée posée sur la feuille */
.formulaire { padding: 16px 14px; background: var(--fond); border: var(--trait); font-family: var(--police-titre); line-height: 1.4; }
.legal-corps .formulaire { margin-bottom: 0; }
.formulaire h2 { line-height: 1.3 !important; margin-bottom: 8px !important; }
.formulaire label, .ck-form label { font-size: .86rem; line-height: 1.3; }
.formulaire input:not([type="checkbox"]):not(.piege), .formulaire textarea, .formulaire select,
.ck-form input:not([type="checkbox"]), .ck-form select { min-height: 48px; background: var(--papier); border: var(--trait); border-radius: 0; }
.formulaire input:focus, .formulaire textarea:focus, .ck-form input:focus, .ck-form select:focus { outline: 2px solid var(--encre); outline-offset: 0; background: #fffdf2; }
.formulaire [data-etape] p, .formulaire .form-message { line-height: 1.4; margin-bottom: 0; }
.contact-infos p { margin-bottom: var(--ligne); }
.bouton-secondaire { color: var(--encre) !important; }

/* ------------------------------------------------ commande : la liste qui se coche */
.ck { padding: 20px 16px 16px; }
.ck h1 { margin-bottom: 14px; font-size: clamp(2rem, 8vw, 3rem); line-height: 1.04; letter-spacing: -.05em; }
.ck-grille { gap: 22px; }
.ck-form section { position: relative; margin: 0; padding: 18px 0 20px 38px; border-top: var(--trait); }
.ck-form section:first-child { border-top: 0; padding-top: 4px; }
.ck-form section::before { content: ""; position: absolute; left: 0; top: 19px; width: 24px; height: 24px; background: var(--papier); border: var(--trait); }
.ck-form section:first-child::before { top: 5px; }
.ck-form section:has(input[required]):not(:has(input[required]:invalid))::after { content: ""; position: absolute; left: 3px; top: 12px; width: 29px; height: 29px; background: var(--coche) center / contain no-repeat; }
.ck-form section:first-child:has(input[required]):not(:has(input[required]:invalid))::after { top: -2px; }
.ck h2 { margin: 0 0 12px; font-size: 1.14rem; line-height: 1.5; letter-spacing: -.025em; }
.ck-resume { padding: 0 14px 16px; background: var(--papier); border: var(--trait); }
.ck-resume::before { content: ""; display: block; height: 22px; margin: 0 -14px 12px; background: var(--fond) radial-gradient(circle at 50% 11px, var(--papier) 4.5px, var(--encre) 5px 6px, transparent 6.5px) 0 0 / 30px 22px repeat-x; border-bottom: var(--trait); }
.ck-ligne { padding: 8px 0; border-bottom: 1px solid var(--filet); font-size: .9rem; }
.ck-ligne img { object-position: 50% 30%; }
.ck-ligne span { font-weight: 600; letter-spacing: -.015em; line-height: 1.22; }
.ck-ligne small { font-size: .78rem; }
.ck-totaux { margin-top: 0; border-top: 0; font-size: .92rem; }
.ck-total { margin-top: 8px; padding-top: 8px; border-top: var(--trait); font-size: 1.02rem; }
.ck-total strong { padding: 0 4px; font: 600 1.22rem var(--police-titre); letter-spacing: -.02em; background: linear-gradient(transparent 12%, var(--accent) 12%, var(--accent) 92%, transparent 92%); }
.ck-indisponible { padding: 12px 14px; background: var(--fond); border: 1px dashed var(--encre); font: italic 400 1.08rem/1.3 var(--police-note); }
.ck-securite, .ck-note { font-size: .84rem; line-height: 1.45; }
.ck-form .ck-cgv { min-height: 44px; font-size: .88rem; font-weight: 400; line-height: 1.4; }
.ck-cgv input { width: 26px; height: 26px; margin-top: 2px; accent-color: var(--encre); }
[data-payer] { min-height: 54px; }
.ck-valider::before { display: none; }
.ck-form section.ck-valider { padding-left: 0; }
.ck-form section.ck-valider::after { display: none; }
.ck .panier-vide { padding: 22px 0 8px; }
.ck-form .logos-paiement { margin-top: 10px; }

/* merci, 404 */
.merci { max-width: 720px; margin-top: 22px; padding: 34px 20px 40px; background: var(--papier); border: var(--trait); text-align: left; }
.merci h1 { margin-bottom: 12px; font-size: clamp(2rem, 8.4vw, 3.3rem); line-height: 1.04; letter-spacing: -.05em; }
.merci p { font: 400 1.16rem/1.36 var(--police-note); }
.merci-note { color: var(--texte-doux); }
.merci .bouton { font-family: var(--police-titre); font-size: 1rem; }
.bouton { width: auto; padding-inline: 22px; }
.perdu-note { --r: -2deg; width: fit-content; margin-bottom: 18px; }

/* notre histoire */
.histoire { max-width: 1320px; margin: 0 auto; padding: 22px var(--marge) 0; }
.histoire-tete h1 { margin: 0 0 4px; font-size: clamp(2.4rem, 10vw, 5rem); line-height: 1; letter-spacing: -.05em; }
.histoire-chapeau { margin: 0 0 18px; font: italic 400 1.34rem var(--police-note); }
.histoire-grille { display: grid; gap: 24px; }
.journal { background: var(--papier); border: var(--trait); }
.journal li { display: grid; grid-template-columns: 94px minmax(0, 1fr); border-bottom: 1px solid var(--filet); }
.journal li:last-child { border-bottom: 0; background: var(--accent); }
.journal h2 { margin: 0; padding: 14px 8px 14px 12px; font-size: .9rem; line-height: 1.4; letter-spacing: -.02em; border-right: var(--trait); }
.journal p { margin: 0; padding: 12px 14px 14px; font: 400 1.16rem/1.34 var(--police-note); }
.histoire-photo { position: relative; margin: 0; }
.histoire-photo img { width: 100%; border: var(--trait); }
.histoire-photo .postit { --r: -2deg; position: absolute; left: 10px; bottom: 14px; max-width: 230px; }
.histoire-fin { margin: 24px 0 0; }

/* ============================================================== à partir de 700 px */
@media (min-width: 700px) and (max-width: 899px) {
  .fiche-images figure { flex-basis: 54%; }
}
@media (min-width: 700px) {
  .feuillet-colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cahier { padding-inline: 16px; }
  .cahier .legal { --marge-cahier: 84px; }
  .legal-entete { padding: 34px 32px 26px var(--marge-cahier); }
  .legal-corps { padding-right: 36px; font-size: 1.14rem; }
  .legal-corps::before { left: 22px; width: 28px; background: radial-gradient(circle at 14px 50%, var(--fond) 9px, var(--filet) 9.6px 10.4px, transparent 10.8px) 0 40px / 28px 224px repeat-y; }
  .reste-jour { display: grid; grid-template-columns: 138px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "note note" "photo lignes" "photo voir"; column-gap: 14px; padding-bottom: 12px; }
  .reste-jour-note { grid-area: note; }
  .reste-jour-photo { grid-area: photo; display: block; overflow: hidden; }
  .reste-jour-photo img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; }
  .reste-lignes { grid-area: lignes; }
  .reste-voir { grid-area: voir; }
}

/* ============================================================== à partir de 900 px */
@media (min-width: 900px) {
  :root { --marge: 32px; }
  body { font-size: 15.5px; }

  .entete-barre { grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 30px; align-items: end; max-width: 1320px; height: 66px; margin: 0 auto; padding-top: 0; }
  .logo { align-self: center; }
  .logo-case { width: 62px; }
  .logo-nom { font-size: 1.16rem; }
  .onglets { grid-column: auto; grid-row: auto; grid-template-columns: repeat(7, 46px); align-self: end; }
  .onglet { height: 52px; padding-bottom: 12px; font-size: 1rem; }
  .onglet::before { top: 14px; }
  .onglet.choisi::before { top: 6px; }
  @media (hover: hover) { .onglet:hover::before { top: 6px; } }
  .entete-outils { grid-column: 4; grid-row: auto; align-self: center; }

  /* la double page */
  .jour { max-width: 1320px; margin: 0 auto; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "tete photo" "pieces photo" "achat photo" "cases photo"; column-gap: 0; min-height: min(700px, calc(100vh - 80px)); padding: 0; border-bottom: 0; box-shadow: 0 1.5px 0 0 var(--encre), 0 6px 0 -1.5px var(--papier), 0 6px 0 0 var(--encre), 0 11px 0 -1.5px var(--papier), 0 11px 0 0 var(--encre); }
  .jour::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(100% * 7 / 12 - 9px); width: 18px; border-right: 0; background: radial-gradient(circle, var(--fond) 4.6px, var(--encre) 5.1px 6.1px, transparent 6.6px) center 22px / 18px 58px repeat-y; pointer-events: none; }
  .jour-tete { padding: 24px 64px 0 44px; }
  .jour-date { font-size: .84rem; margin-bottom: 10px; }
  .jour-titre { margin-bottom: 12px; font-size: clamp(3.4rem, 6vw, 5rem); }
  .jour-chapeau { margin-bottom: 18px; font-size: 1.28rem; }
  .tenue-pieces { margin: 0 64px 0 44px; align-self: start; }
  .tenue-pieces li:not(.tenue-planb) > a { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 0 14px; min-height: 48px; padding: 8px 0; }
  .tenue-role { font-size: .8rem; }
  .tenue-nom { font-size: 1.04rem; }
  .tenue-prix { margin: 0; font-size: .96rem; }
  .tenue-planb { display: block; padding: 10px 0 0 98px; font: 400 1.08rem/1.25 var(--police-note); color: var(--texte-doux); }
  .tenue-planb strong { position: absolute; margin-left: -98px; font: 400 .8rem/1.6 var(--police-titre); }
  .tenue-planb a { color: var(--encre); }
  @media (hover: hover) { .tenue-pieces li > a:hover .tenue-nom { background: linear-gradient(transparent 62%, var(--accent) 62%, var(--accent) 94%, transparent 94%); } }
  .jour-achat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "tailles total" "erreur erreur" "bouton bouton"; gap: 0 28px; align-items: end; margin: 14px 64px 0 44px; }
  .jour-tailles { grid-area: tailles; }
  .jour-achat .achat-erreur { grid-area: erreur; }
  .jour-total { grid-area: total; flex-direction: column; align-items: flex-end; gap: 0; margin: 0 0 2px; }
  .jour-total strong { font-size: 1.7rem; line-height: 1.2; }
  .jour-achat .achat-bouton { grid-area: bouton; margin-top: 12px; }
  .jour-cases { margin: 12px 64px 20px 44px; gap: 2px 26px; font-size: .88rem; }
  .tenue-photo { min-height: 100%; }
  .tenue-img { position: absolute; inset: 0; min-height: 0; object-position: 50% 42%; }
  .tenue[data-tenue="mardi"] .tenue-img { object-position: 60% 40%; }
  .tenue[data-tenue="samedi"] .tenue-img { object-position: 60% 40%; }
  .tenue[data-tenue="mercredi"] .tenue-img { object-position: 50% 50%; }
  .tenue-note { --r: -2.6deg; left: -46px; bottom: 34px; width: 214px; padding: 14px 16px 18px; font-size: 1.24rem; }

  .section-tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 28px; max-width: 1256px; margin: 0 auto 20px; padding: 0; }
  .section-tete h2 { margin: 0; font-size: 3rem; line-height: 1; }
  .section-tete p { font-size: 1.24rem; }
  .semaine { padding: 72px var(--marge) 8px; }

  /* sept colonnes d'un même tableau */
  .rail { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; max-width: 1256px; margin: 0 auto; padding: 0; overflow: visible; }
  .col { flex: none; max-width: none; margin-left: -1.5px; }
  .col:first-child { margin-left: 0; }
  .col-tete { min-height: 44px; padding: 6px 8px; }
  .col-lettre { width: 24px; height: 24px; font-size: .8rem; }
  .col-nom { font-size: .9rem; }
  .col-note { width: calc(100% - 12px); margin: -38px 6px 8px; font-size: .98rem; padding: 9px 10px 11px; }
  .col:nth-child(even) .col-note { margin-left: 6px; }
  .col-pieces a { min-height: 42px; padding: 5px 9px; font-size: .8rem; }
  .col-planb { padding: 8px 9px 10px; font-size: .94rem; }
  .col-bas { display: block; padding: 8px 9px 6px; }
  .col-total { display: block; }
  .col-prendre { min-height: 30px; font-size: .78rem; }
  .col.choisie { outline: 2px solid var(--encre); outline-offset: -2px; z-index: 1; }

  .reviennent { padding: 64px var(--marge) 8px; }
  .emploi { max-width: 1256px; margin: 0 auto; }
  .emploi-tete, .emploi-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 448px 130px; gap: 0; align-items: center; grid-template-areas: none; }
  .emploi-tete { padding: 0 20px; border-bottom: var(--trait); }
  .emploi-jours { display: grid; grid-template-columns: repeat(7, 64px); }
  .emploi-jours i { padding: 7px 0; font: 600 .82rem var(--police-titre); text-align: center; }
  .emploi-ligne { padding: 12px 20px; }
  .emploi-piece, .emploi-prix { grid-area: auto; }
  .emploi-photo { width: 80px; }
  .emploi-photo img { width: 80px; height: 100px; }
  .emploi-nom { font-size: 1.2rem; }
  .emploi-ligne .mini { grid-area: auto; grid-template-columns: repeat(7, 64px); }
  .emploi-ligne .mini-j { height: 46px; line-height: 44px; font-size: .9rem; }
  .emploi-prix { text-align: right; font-size: 1.04rem; }

  .reste { max-width: 760px; margin: 72px auto 0; }
  .reste-feuille { padding: var(--ligne) 40px calc(var(--ligne) + 8px) 80px; }
  .reste-feuille h2 { font-size: 2.1rem; margin-bottom: var(--ligne); }
  .reste-feuille .cases li { font-size: 1.04rem; }
  .reste-note { right: -64px; bottom: 40px; width: 200px; font-size: 1.22rem; }

  .pied { margin-top: 88px; }
  .feuillet { padding: 30px 34px 78px; }
  .feuillet-haut { grid-template-columns: 148px minmax(0, 1fr); gap: 28px; padding-bottom: 22px; }
  .feuillet-num { font-size: 3rem; line-height: 1.55; }
  .feuillet-num.date-reelle { font-size: 4.2rem; line-height: 1.12; }
  .feuillet-slogan { font-size: 1.5rem; }
  .feuillet-colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 28px; padding: 22px 0; }
  .feuillet-colonnes a { min-height: 34px; }
  .feuillet-lettre { grid-column: auto; }
  .pied-legal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 28px; align-items: center; }
  .pied-legal-coord { grid-column: 1 / -1; }
  .pied-legal-prix { grid-column: 1; margin: 0 !important; }
  .logos-paiement { grid-column: 2; grid-row: 2 / span 2; margin: 0; }
  .pied-legal-liens { grid-column: 1; margin: 0 !important; }
  .pied-legal-copy { grid-column: 1 / -1; }
  .calendrier-suite { padding: 56px 34px 14px; font-size: 1.32rem; }

  .liste { padding-top: 30px; }
  .liste-tete { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; margin-bottom: 20px; }
  .filtres { display: grid; grid-template-columns: minmax(0, 7fr) auto; gap: 8px 28px; align-items: end; margin-bottom: 18px; }
  .filtre-jour { min-height: 46px; font-size: .88rem; }
  .filtre-lettre { display: none; }
  .filtre-mot { display: inline; }
  .filtres-types { grid-column: 2; grid-row: 1; margin: 0; padding: 0; overflow: visible; }
  .filtres-seuls { grid-template-columns: minmax(0, 1fr); }
  .filtres-bas { grid-column: 1 / -1; margin-top: 4px; }
  .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
  .carte { border-right: 1px solid var(--filet); margin-right: -1px; }
  .carte:last-child { border-bottom: 1px solid var(--filet); }
  .carte-lien { grid-template-columns: 120px minmax(0, 1fr) auto; gap: 16px; padding: 12px 16px 12px 12px; }
  .carte-img { width: 120px; height: 152px; }
  .carte-nom { font-size: 1.1rem; }
  .carte-couleur { font-size: .86rem; margin-bottom: 12px; }
  .carte-prix { font-size: 1rem; }

  .fiche { padding-top: 12px; }
  .fiche-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 52px; align-items: start; }
  .fiche-images { display: grid; gap: 10px; margin: 0; padding: 0; overflow: visible; }
  .fiche-col { position: sticky; top: 88px; padding-top: 0; }
  .reste-tenue { margin-top: 56px; }
  .reste-tenue > h2 { font-size: 2.6rem; }

  .tiroir-entete h2 { font-size: 1.4rem; }
  div.page-panier { margin-top: 28px; padding: 32px 36px 32px; }
  .ck { padding: 30px 32px 16px; }
  .ck-grille { gap: 48px; }
  .ck-resume { top: 24px; }
  .merci { padding: 48px 48px 52px; margin-top: 36px; }
  .histoire { padding-top: 34px; }
  .histoire-grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
  .histoire-photo { position: sticky; top: 92px; }
  .journal li { grid-template-columns: 124px minmax(0, 1fr); }
  .journal h2 { padding: 16px 12px 16px 16px; font-size: 1rem; }
  .journal p { padding: 14px 20px 16px; font-size: 1.28rem; }
  .histoire-photo .postit { left: -24px; bottom: 34px; }
}

/* ============================================================== à partir de 1120 px */
@media (min-width: 1384px) {
  .jour { border-inline: var(--trait); }
}
@media (min-width: 1120px) {
  .reste-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reste-jour:only-child { grid-column: 1 / -1; grid-template-columns: 170px minmax(0, 1fr); }
  .reste-jour:only-child .reste-lignes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; align-content: start; }
  .entete-liens { display: flex; align-items: center; justify-content: flex-end; gap: 18px; align-self: center; font-size: .88rem; }
  .entete-liens a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
  .entete-liens a:hover { background: linear-gradient(transparent 62%, var(--accent) 62%, var(--accent) 88%, transparent 88%); }
  .outil-menu { display: none; }
}