/* 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:"Sniglet";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/sniglet-400.woff2) format("woff2")}
@font-face{font-family:"Sniglet";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/sniglet-800.woff2) format("woff2")}
@font-face{font-family:"Karla";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/karla-400.woff2) format("woff2")}
@font-face{font-family:"Karla";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/karla-700.woff2) format("woff2")}

/* ==========================================================================
   Air de Jeu. Du ciel au sol : ciel, herbe, sable, un seul accent soleil.
   Le texte sur l'accent est en encre de nuit : le blanc n'atteint pas l'AA.
   ========================================================================== */
:root {
  --m-nuages: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 96'%3E%3Cpath d='M0 96V59.5a39.2 39.2 0 0 1 70 -10a61.6 61.6 0 0 1 110 6a33.6 33.6 0 0 1 60 -14a72.8 72.8 0 0 1 130 18a50.4 50.4 0 0 1 90 -8a67.2 67.2 0 0 1 120 -6a39.2 39.2 0 0 1 70 10a39.2 39.2 0 0 1 70 4V96Z'/%3E%3C/svg%3E");
  --m-nuages-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 96'%3E%3Cpath d='M0 96V59.5a72.8 72.8 0 0 1 130 8a44.8 44.8 0 0 1 80 -16a84.0 84.0 0 0 1 150 10a56.0 56.0 0 0 1 100 -6a95.2 95.2 0 0 1 170 12a67.2 67.2 0 0 1 120 -12a84.0 84.0 0 0 1 150 4V96Z'/%3E%3C/svg%3E");
  --m-herbe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 46'%3E%3Cpath d='M0 46V38Q1.2 24.0 2.5 6Q5.7 26.0 9 38Q11.0 26.8 14.0 11Q16.0 28.5 19 38Q22.1 26.2 27.5 10Q27.6 28.0 30 38Q32.9 27.3 37.5 12Q39.4 29.0 43 38Q45.7 33.9 49.5 24Q53.2 35.0 58 38Q59.6 27.3 61.0 12Q66.6 29.0 72 38Q76.0 30.6 83.0 18Q83.0 32.0 86 38Q89.0 35.5 93.5 27Q96.5 36.5 101 38Q104.3 27.3 109.5 12Q111.8 29.0 116 38Q119.8 24.0 126.5 6Q126.3 26.0 129 38Q132.3 32.3 138.0 21Q138.3 33.5 141 38Q142.6 35.0 144.5 26Q148.1 36.0 152 38Q155.6 32.8 162.0 22Q161.6 34.0 164 38Q167.8 26.8 174.5 11Q174.3 28.5 177 38Q179.1 33.4 182.5 23Q183.6 34.5 186 38Q187.7 31.1 189.5 19Q194.2 32.5 199 38Q201.7 36.6 205.5 29Q209.2 37.5 214 38Q217.4 27.8 223.5 13Q222.9 29.5 225 38Q227.3 35.0 230.5 26Q233.8 36.0 238 38Q239.9 32.3 242.5 21Q245.4 33.5 249 38Q251.5 29.5 255.5 16Q257.0 31.0 260 38Q262.2 24.0 265.5 6Q267.7 26.0 271 38Q274.3 27.8 279.5 13Q281.8 29.5 286 38Q289.2 30.0 294.5 17Q295.7 31.5 299 38Q302.8 31.7 309.0 20Q310.8 33.0 315 38Q316.9 28.9 319.5 15Q322.4 30.5 326 38Q329.1 31.7 334.5 20Q334.6 33.0 337 38Q340.9 35.5 347.5 27Q348.4 36.5 352 38Q353.1 31.1 354.0 19Q358.1 32.5 362 38Q363.1 22.9 364.0 4Q368.1 25.0 372 38Q374.6 35.0 378.5 26Q381.1 36.0 385 38Q388.8 35.0 395.5 26Q395.3 36.0 398 38Q402.2 24.5 409.5 7Q409.7 26.5 413 38Q415.4 26.2 418.5 10Q422.9 28.0 420 38V46Z'/%3E%3C/svg%3E");
  --m-vagues: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 24'%3E%3Cpath d='M0 24V13Q22.500 1 45 13T90 13T135 13T180 13V24Z'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='%23a9752a' fill-opacity='.2'%3E%3Ccircle cx='0' cy='72' r='1.0'/%3E%3Ccircle cx='7' cy='138' r='1.1'/%3E%3Ccircle cx='83' cy='75' r='1.2'/%3E%3Ccircle cx='45' cy='35' r='1.4'/%3E%3Ccircle cx='22' cy='61' r='1.3'/%3E%3Ccircle cx='132' cy='61' r='0.8'/%3E%3Ccircle cx='35' cy='118' r='1.3'/%3E%3Ccircle cx='89' cy='77' r='0.9'/%3E%3Ccircle cx='49' cy='127' r='0.7'/%3E%3Ccircle cx='31' cy='92' r='1.4'/%3E%3Ccircle cx='2' cy='61' r='1.6'/%3E%3Ccircle cx='84' cy='16' r='1.3'/%3E%3Ccircle cx='153' cy='51' r='1.6'/%3E%3Ccircle cx='3' cy='115' r='1.5'/%3E%3Ccircle cx='152' cy='46' r='0.9'/%3E%3Ccircle cx='128' cy='152' r='1.4'/%3E%3Ccircle cx='160' cy='128' r='1.1'/%3E%3Ccircle cx='41' cy='98' r='0.7'/%3E%3Ccircle cx='152' cy='133' r='1.1'/%3E%3Ccircle cx='140' cy='0' r='1.4'/%3E%3Ccircle cx='152' cy='88' r='1.4'/%3E%3Ccircle cx='81' cy='136' r='1.1'/%3E%3Ccircle cx='148' cy='160' r='1.1'/%3E%3Ccircle cx='130' cy='81' r='0.9'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3Ccircle cx='17' cy='56' r='1.3'/%3E%3Ccircle cx='60' cy='76' r='0.8'/%3E%3Ccircle cx='61' cy='28' r='1.3'/%3E%3Ccircle cx='88' cy='148' r='0.8'/%3E%3Ccircle cx='157' cy='159' r='1.5'/%3E%3Ccircle cx='90' cy='59' r='1.6'/%3E%3Ccircle cx='103' cy='80' r='1.0'/%3E%3Ccircle cx='85' cy='41' r='1.7'/%3E%3Ccircle cx='91' cy='146' r='0.8'/%3E%3Ccircle cx='25' cy='154' r='1.4'/%3E%3Ccircle cx='46' cy='132' r='1.1'/%3E%3Ccircle cx='141' cy='77' r='1.2'/%3E%3Ccircle cx='37' cy='16' r='1.5'/%3E%3Ccircle cx='140' cy='42' r='1.5'/%3E%3Ccircle cx='54' cy='138' r='1.1'/%3E%3Ccircle cx='0' cy='3' r='0.7'/%3E%3Ccircle cx='89' cy='47' r='1.5'/%3E%3Ccircle cx='51' cy='102' r='1.7'/%3E%3Ccircle cx='79' cy='121' r='0.9'/%3E%3Ccircle cx='105' cy='79' r='0.9'/%3E%3Ccircle cx='42' cy='80' r='1.3'/%3E%3C/svg%3E");
  --brins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%236ea245' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 4q-1 -5 0 -9M93 43q-3 -5 -2 -9M14 104q1 -5 2 -9M85 139q3 -5 4 -9M19 135q-2 -5 -1 -9M31 74q-2 -5 -1 -9M139 91q1 -5 2 -9M135 93q-1 -5 0 -9M79 20q-2 -5 -1 -9M7 97q-2 -5 -1 -9M159 90q-3 -5 -2 -9M16 158q0 -5 1 -9M94 68q2 -5 3 -9M68 116q1 -5 2 -9M106 56q3 -5 4 -9M114 90q-1 -5 0 -9M46 6q1 -5 2 -9M168 80q-1 -5 0 -9M45 141q-2 -5 -1 -9M110 155q-1 -5 0 -9M137 103q2 -5 3 -9M57 118q-1 -5 0 -9M21 15q2 -5 3 -9M118 88q2 -5 3 -9M63 3q-2 -5 -1 -9M116 109q-2 -5 -1 -9M88 121q-3 -5 -2 -9M150 62q2 -5 3 -9M165 82q3 -5 4 -9M116 168q0 -5 1 -9M62 8q-3 -5 -2 -9M137 101q0 -5 1 -9M81 60q-2 -5 -1 -9M94 61q2 -5 3 -9'/%3E%3C/svg%3E");
  --pieds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40' fill='%23c99c4e'%3E%3Cg transform='rotate(84 18 12)'%3E%3Cellipse cx='18' cy='16' rx='6.200' ry='10'/%3E%3Ccircle cx='12.500' cy='3.500' r='2.200'/%3E%3Ccircle cx='17' cy='2' r='1.800'/%3E%3Ccircle cx='21' cy='2.500' r='1.600'/%3E%3Ccircle cx='24.500' cy='4.500' r='1.400'/%3E%3C/g%3E%3Cg transform='rotate(96 46 28)'%3E%3Cellipse cx='46' cy='32' rx='6.200' ry='10'/%3E%3Ccircle cx='51.500' cy='19.500' r='2.200'/%3E%3Ccircle cx='47' cy='18' r='1.800'/%3E%3Ccircle cx='43' cy='18.500' r='1.600'/%3E%3Ccircle cx='39.500' cy='20.500' r='1.400'/%3E%3C/g%3E%3C/svg%3E");
  --seau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M14 22C14 4 50 4 50 22' fill='none' stroke='%2316324a' stroke-width='3.500'/%3E%3Cpath d='M12 26h40l-5 30a3 3 0 0 1-3 2.500H20a3 3 0 0 1-3-2.500Z' fill='%23d9700f'/%3E%3Crect x='8' y='20' width='48' height='8' rx='3' fill='%2316324a'/%3E%3C/svg%3E");
}
:root {
  --ciel: #dff2fb; --ciel-clair: #f2fbff; --ciel-fort: #c3e7f7;
  --herbe: #cbe8ae; --herbe-clair: #eef8e2; --herbe-fort: #b3dc8c;
  --sable: #f7e3b5; --sable-clair: #fdf4dc; --sable-fort: #f1d596; --sable-brun: #6b4a12;
  --soleil: #d9700f; --soleil-fonce: #a04e00; --soleil-ombre: #a85408;
  --encre: #16324a; --encre-nuit: #0c1c2a;
  --fond: #ffffff; --fond-2: var(--ciel-clair); --texte: var(--encre); --texte-doux: #3c5a70;
  --accent: var(--soleil); --accent-texte: var(--encre-nuit); --bord: #bcd8e6; --rayon: 18px;
  --police-titre: "Sniglet", "Trebuchet MS", sans-serif; --police-texte: "Karla", "Helvetica Neue", Arial, sans-serif;
  --gouttiere: 16px;
}

body { position: relative; background: var(--ciel); font-size: 17px; line-height: 1.5; }
h1, h2 { font-weight: 800; letter-spacing: -.01em; color: var(--encre); }
h3, h4 { font-weight: 400; color: var(--encre); }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--soleil-fonce); outline-offset: 2px; border-radius: 6px; }
.a-completer { background: #fff0b8; color: #4f3b00; }

/* ------------------------------------------------------------- les boutons */
.bouton, .achat-bouton, .tiroir-commander, .formulaire button[type="submit"], .formulaire [data-confirmer], [data-payer], .barre-achat button {
  font-family: var(--police-titre); font-weight: 400; font-size: 1.16rem; letter-spacing: .01em;
  border-radius: 999px; padding: 14px 26px; min-height: 52px; background: var(--soleil); color: var(--encre-nuit);
  box-shadow: 0 5px 0 var(--soleil-ombre); transition: transform .12s ease, box-shadow .12s ease; line-height: 1.2;
}
.bouton:hover, .achat-bouton:hover, .tiroir-commander:hover, .formulaire button[type="submit"]:hover, .barre-achat button:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--soleil-ombre); }
.bouton:active, .achat-bouton:active, .tiroir-commander:active, .barre-achat button:active { transform: translateY(5px); box-shadow: none; }
[data-payer]:disabled { box-shadow: none; }
.bouton-secondaire { box-shadow: none !important; border: 2px solid var(--encre) !important; border-radius: 999px; font-family: var(--police-titre); padding: 12px 22px; min-height: 48px; }

/* ----------------------------------------------------------------- l'entête */
.entete { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 14px; transition: background-color .25s ease; }
.entete--colle { background: var(--ciel); }
.entete--colle[data-etage="air"] { background: var(--ciel-clair); }
.entete--colle[data-etage="herbe"] { background: var(--herbe); }
.entete--colle[data-etage="sable"] { background: var(--sable); }
.logo { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; min-height: 44px; }
.logo-cerf { width: 27px; height: 38px; flex: none; }
.logo-nom { font-family: var(--police-titre); font-weight: 800; font-size: 1.42rem; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.entete-nav { display: none; }
.entete-outils { margin-left: auto; display: flex; align-items: center; }
.outil { position: relative; width: 44px; height: 44px; padding: 9px; background: none; border: 0; color: var(--encre); display: grid; place-items: center; }
.outil svg { width: 100%; height: 100%; }
.outil--seau { padding: 6px; }
.seau-compte { position: absolute; left: 0; right: 0; top: 19px; text-align: center; font: 400 .84rem/1 var(--police-titre); color: var(--encre-nuit); }
.entete--leger { position: static; justify-content: space-between; padding: 8px 16px; }
.entete-retour { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }

@media (min-width: 900px) {
  .entete { padding: 10px max(20px, calc((100vw - 1240px) / 2)); gap: 18px; }
  .logo-cerf { width: 32px; height: 45px; }
  .logo-nom { font-size: 1.7rem; }
  .entete-nav { display: flex; align-items: center; gap: 4px; margin-left: 18px; }
  .entete-nav a { font-family: var(--police-titre); font-size: 1.1rem; text-decoration: none; padding: 9px 15px; border-radius: 999px; transition: background-color .15s ease; }
  .entete-etage--air:hover { background: var(--ciel-clair); }
  .entete-etage--herbe:hover { background: var(--herbe); }
  .entete-etage--sable:hover { background: var(--sable); }
  .entete-securite:hover { background: #fff; }
  .entete-nav a[aria-current] { background: #fff; box-shadow: inset 0 0 0 2px var(--encre); }
  .outil--menu { display: none; }
}

/* ------------------------------------------------- le menu, trois bandes */
.menu { position: fixed; inset: 0; z-index: 65; display: grid; grid-template-rows: auto 1fr 1fr 1fr auto; background: var(--ciel); overflow-y: auto; transform: translateY(-100%); transition: transform .28s ease; }
.menu.ouvert { transform: none; }
.menu-haut { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 14px; }
.menu-fermer { width: 44px; height: 44px; background: none; border: 0; font-size: 2rem; line-height: 1; color: var(--encre); }
.menu-etage { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 14px 20px; text-decoration: none; min-height: 112px; }
.menu-etage b { font-family: var(--police-titre); font-weight: 800; font-size: 2.3rem; line-height: 1.05; }
.menu-etage span { font-size: 1rem; color: var(--encre); }
.menu-etage--air { background: var(--ciel-clair); }
.menu-etage--herbe { background: var(--herbe) var(--brins); }
.menu-etage--sable { background: var(--sable) var(--grain); }
.menu-etage--herbe::before, .menu-etage--sable::before { content: ""; position: absolute; left: 0; right: 0; }
.menu-etage--herbe::before { top: -30px; height: 31px; background: var(--herbe); -webkit-mask: var(--m-herbe) left bottom / 290px 31px repeat-x; mask: var(--m-herbe) left bottom / 290px 31px repeat-x; }
.menu-etage--sable::before { top: -13px; height: 14px; background: var(--sable); -webkit-mask: var(--m-vagues) left bottom / 105px 14px repeat-x; mask: var(--m-vagues) left bottom / 105px 14px repeat-x; }
.menu-bas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 10px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--sable) var(--grain); }
.menu-bas a { min-height: 44px; display: flex; align-items: center; font-weight: 700; }
@media (min-width: 900px) { .menu { display: none; } }

/* ---------------------------------------------------------- le fil, les bords */
.fil { display: none; position: absolute; top: 0; left: 0; width: 100%; z-index: 1; pointer-events: none; overflow: hidden; }
.fil.fil--pret { display: block; }
.fil-trait { fill: none; stroke: var(--encre); stroke-width: 1.6; stroke-linecap: round; opacity: .8; }

.bord { position: absolute; left: 0; right: 0; display: block; background: currentColor; }
.bord--herbe { top: -45px; height: 46px; color: var(--herbe); -webkit-mask: var(--m-herbe) left bottom / 420px 46px repeat-x; mask: var(--m-herbe) left bottom / 420px 46px repeat-x; }
.bord--vagues { top: -23px; height: 24px; color: var(--sable); -webkit-mask: var(--m-vagues) left bottom / 180px 24px repeat-x; mask: var(--m-vagues) left bottom / 180px 24px repeat-x; }

.ciel-bas { position: absolute; left: 0; right: 0; bottom: -1px; height: 96px; overflow: hidden; pointer-events: none; }
.nuages { position: absolute; left: 0; bottom: 0; height: 96px; width: 3600px; background: var(--ciel-clair); will-change: transform; }
.nuages--pres { -webkit-mask: var(--m-nuages) left bottom / 720px 96px repeat-x; mask: var(--m-nuages) left bottom / 720px 96px repeat-x; animation: derive-pres 200s linear infinite; }
.nuages--loin { opacity: .55; height: 118px; -webkit-mask: var(--m-nuages-2) left bottom / 900px 118px repeat-x; mask: var(--m-nuages-2) left bottom / 900px 118px repeat-x; animation: derive-loin 300s linear infinite; }
@keyframes derive-pres { to { transform: translateX(-720px); } }
@keyframes derive-loin { to { transform: translateX(-900px); } }
@media (prefers-reduced-motion: reduce) { .nuages { animation: none !important; } .cerf-dessin { animation: none !important; } }

/* ---------------------------------------------------------------- le ciel */
.ciel { position: relative; overflow: hidden; margin-top: -56px; padding: 56px 0 86px; }
.ciel-cadre { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 var(--gouttiere); display: flex; flex-direction: column; }
.ciel-photo { position: relative; display: block; align-self: flex-end; width: 80%; max-width: 430px; margin: -6px -8px -18px 0; text-decoration: none; }
.ciel-photo img { width: 100%; mix-blend-mode: multiply; }
.ciel-etiquette { position: absolute; left: -14%; bottom: 18%; display: inline-flex; flex-direction: column; background: #fff; padding: 7px 13px 8px; border-radius: 14px; transform: rotate(-4deg); line-height: 1.15; font-size: .86rem; box-shadow: 3px 3px 0 var(--encre); }
.ciel-etiquette strong { font-family: var(--police-titre); font-weight: 400; font-size: 1.08rem; }
.ciel-cerf { position: absolute; z-index: 2; left: 14px; top: 8px; width: 74px; }
.cerf-dessin { width: 100%; height: auto; overflow: visible; transform-origin: 47% 70%; transform: rotate(calc(-14deg + var(--penche, 0deg))); transition: transform .3s ease-out; animation: flotte 7s ease-in-out infinite; }
@keyframes flotte { 50% { translate: 0 -7px; } }
.ciel-texte { position: relative; z-index: 2; }
.ciel h1 { font-size: clamp(3.5rem, 17.5vw, 7.6rem); line-height: .95; margin: 0 0 .22em; }
.ciel-chapo { font-size: 1.14rem; max-width: 30em; margin-bottom: 14px; }
.ciel-bouton { width: 100%; font-size: 1.3rem; }
.ciel-promesses { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 16px; font-weight: 700; font-size: .98rem; }
.ciel-promesses li { display: inline-flex; align-items: center; gap: 7px; }
.ciel-promesses li::before { content: ""; width: 9px; height: 9px; background: var(--soleil); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
@media (min-width: 760px) {
  .ciel { margin-top: -66px; padding: 90px 0 150px; }
  .ciel-cadre { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); align-items: center; gap: 24px; padding: 0 20px; }
  .ciel h1 { font-size: clamp(4.2rem, 7.4vw, 6rem); }
  .ciel-photo { order: 2; grid-column: 2; grid-row: 1; width: 100%; max-width: 540px; margin: 0; justify-self: end; }
  .ciel-texte { grid-column: 1; grid-row: 1; padding-top: 40px; }
  .ciel-bouton { width: auto; min-width: 280px; }
  .ciel-cerf { left: 52.5%; top: -14px; width: 104px; }
  .ciel-chapo { font-size: 1.3rem; }
  .ciel-etiquette { font-size: .95rem; bottom: 12%; left: -14%; padding: 9px 16px 10px; }
  .ciel-etiquette strong { font-size: 1.24rem; }
}

/* ---------------------------------------------------------- les étages */
.etage { position: relative; padding: 34px 0 70px; }
.etage-contenu { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 0 var(--gouttiere); }
.etage--air { background: var(--ciel-clair); padding-bottom: 96px; }
.etage--herbe { background: var(--herbe) var(--brins); padding-bottom: 84px; }
.etage--sable { background: var(--sable) var(--grain); padding-bottom: 24px; }
.etage-tete { display: grid; gap: 2px; margin-bottom: 20px; }
.etage-altitude { font: 400 1rem/1.2 var(--police-titre); margin: 0; color: var(--encre); }
.etage-tete h2, .etage-page-tete h1 { font-size: clamp(3rem, 14vw, 6rem); line-height: 1; margin: 0; }
.etage-accroche { margin: 4px 0 0; font-size: 1.1rem; }
.etage-lien { justify-self: start; margin-top: 4px; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; text-decoration-thickness: 2px; text-decoration-color: var(--soleil); }
@media (min-width: 760px) {
  .etage { padding: 56px 0 104px; }
  .etage-tete { grid-template-columns: 1fr auto; column-gap: 32px; align-items: end; margin-bottom: 34px; }
  .etage-altitude { grid-column: 1 / -1; font-size: 1.1rem; }
  .etage-tete h2 { grid-column: 1; }
  .etage-accroche { grid-column: 1; font-size: 1.2rem; }
  .etage-lien { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
}

/* ---------------------------------------------------------------- la carte */
.carte { --carte-fond: var(--ciel); position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--carte-fond); border-radius: 26px; padding: 7px 7px 9px; }
.carte--herbe { --carte-fond: var(--herbe-fort); }
.carte--sable { --carte-fond: var(--sable-fort); }
.carte--air { --carte-fond: var(--ciel-fort); }
.carte-lien { display: block; text-decoration: none; flex: 1; }
.carte-photo { position: relative; display: block; overflow: hidden; background: #fff; }
.carte-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .35s ease; }
.carte:hover .carte-photo img { transform: scale(1.04); }
/* trois étages, trois silhouettes : le dôme, le galet, le seau */
.carte--air .carte-photo { border-radius: 50% 50% 19px 19px / 26% 26% 19px 19px; }
.carte--herbe .carte-photo { border-radius: 42% 42% 42% 42% / 30% 30% 30% 30%; }
.carte--sable .carte-photo { border-radius: 19px 19px 50% 50% / 19px 19px 24% 24%; }
.carte-age { position: absolute; left: 8px; bottom: 8px; background: #fff; color: var(--encre); font: 400 .92rem/1 var(--police-titre); padding: 6px 10px; border-radius: 999px; }
.carte--herbe .carte-age { left: 50%; translate: -50% 0; bottom: 6px; white-space: nowrap; }
.carte--sable .carte-age { left: 50%; translate: -50% 0; bottom: 4px; white-space: nowrap; }
.carte-nom { font-size: 1.12rem; line-height: 1.14; margin: 9px 4px 2px; overflow-wrap: break-word; }
.carte-bas { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 2px 0 4px; }
.carte-prix { font-family: var(--police-titre); font-weight: 400; font-size: 1.06rem; white-space: nowrap; }
.carte-ajout { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--soleil); color: var(--encre-nuit); padding: 11px; box-shadow: 0 3px 0 var(--soleil-ombre); transition: transform .12s ease, box-shadow .12s ease; }
.carte-ajout:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--soleil-ombre); }
.carte-ajout:active { transform: translateY(3px); box-shadow: none; }
.carte-ajout svg { width: 100%; height: 100%; }

.rang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rang-scene { grid-column: 1 / -1; margin: 0; overflow: hidden; border-radius: 26px; }
.rang-scene img { width: 100%; height: 100%; object-fit: cover; }
.rang--air .carte--vedette { grid-column: 1 / -1; }
.rang--air .carte--vedette .carte-nom { font-size: 1.7rem; font-weight: 800; }
.rang--air .carte--vedette .carte-prix { font-size: 1.3rem; }
/* en l'air, les cartes montent et descendent comme des cerfs-volants */
.rang--air .carte:nth-child(even):not(.carte--vedette) { translate: 0 14px; }
.rang--air .carte:nth-child(3), .rang--air .carte:nth-child(5) { translate: 0 -2px; }
.rang--herbe .carte:nth-of-type(odd) { rotate: -.9deg; }
.rang--herbe .carte:nth-of-type(even) { rotate: .8deg; }
.rang--sable .carte:nth-of-type(3n + 1) { rotate: -1.4deg; }
.rang--sable .carte:nth-of-type(3n) { rotate: 1.2deg; }
@media (min-width: 760px) {
  .rang { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .rang-scene { grid-column: span 2; }
  .rang--air { align-items: start; }
  .rang--air .carte--vedette { grid-column: span 2; grid-row: span 2; }
  .rang--air .carte--vedette .carte-nom { font-size: 2.1rem; }
  .rang--air .carte:nth-child(2) { translate: 0 -26px; }
  .rang--air .carte:nth-child(3) { translate: 0 12px; }
  .rang--air .carte:nth-child(4) { translate: 0 -10px; }
  .rang--air .carte:nth-child(5) { translate: 0 28px; }
  .carte-nom { font-size: 1.22rem; }
  .carte-age { font-size: .98rem; }
}

/* ---------------------------------------------- Il fait quel temps ? et traces */
.sol { position: relative; background: var(--sable) var(--grain); padding: 20px 0 8px; }
.meteo { --meteo-fond: linear-gradient(180deg, #d6eefa, #eef9fe 70%); margin-bottom: 44px; }
.meteo[data-temps="soleil"] { --meteo-fond: linear-gradient(180deg, #fff3cf, #fdf7e6 70%); }
.meteo[data-temps="soir"] { --meteo-fond: linear-gradient(180deg, #fbdcc0, #fdeedd 70%); }
.meteo-fond { background: var(--meteo-fond); border-radius: 32px; padding: 24px 16px 18px; display: grid; gap: 18px; }
.meteo h2 { font-size: clamp(2.3rem, 10.5vw, 4rem); line-height: 1; margin: 0 0 14px; }
.meteo-choix { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.meteo-choix legend { padding: 0; margin-bottom: 7px; font-weight: 700; }
.meteo-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.meteo-choix--temps .meteo-options { grid-template-columns: repeat(3, 1fr); }
.temps input, .enfants input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.temps span { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; padding: 10px 4px 9px; border-radius: 20px; background: #fff; border: 2px solid transparent; cursor: pointer; text-align: center; }
.temps svg { width: 38px; height: 38px; color: var(--encre); }
.temps b { font: 400 1rem/1.1 var(--police-titre); }
.enfants span { display: grid; place-items: center; min-height: 48px; padding: 6px 4px; border-radius: 16px; background: #fff; border: 2px solid transparent; cursor: pointer; text-align: center; font: 400 1.06rem/1.05 var(--police-titre); }
.temps input:checked + span, .enfants input:checked + span { border-color: var(--encre); box-shadow: 0 4px 0 var(--encre); }
.temps input:focus-visible + span, .enfants input:focus-visible + span { outline: 3px solid var(--soleil-fonce); outline-offset: 2px; }
.meteo-phrase { font: 400 1.22rem/1.25 var(--police-titre); margin: 0 0 12px; }
.meteo-jeux { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.jeu { display: grid; grid-template-columns: 76px 1fr auto; column-gap: 12px; align-items: center; background: #fff; border-radius: 22px; padding: 8px 10px 8px 8px; }
.jeu-lien { display: contents; text-decoration: none; color: inherit; }
.jeu-lien img { grid-column: 1; grid-row: 1 / span 2; width: 76px; height: 76px; object-fit: cover; border-radius: 16px; }
.jeu-nom { grid-column: 2; grid-row: 1; font: 400 1.08rem/1.15 var(--police-titre); align-self: end; }
.jeu-raison { grid-column: 2; grid-row: 2; margin: 2px 0 0; font-size: .92rem; line-height: 1.25; align-self: start; }
.jeu-bas { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jeu-bas strong { font: 400 .92rem/1 var(--police-titre); white-space: nowrap; }
@media (min-width: 760px) {
  .meteo-fond { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; padding: 40px 36px 36px; }
  .meteo-jeux { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jeu { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 8px 10px; }
  .jeu-lien { display: block; }
  .jeu-lien img { width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 8px; }
  .jeu-nom { display: block; padding: 0 4px; }
  .jeu-raison { flex: 1; padding: 0 4px; }
  .jeu-bas { flex-direction: row; justify-content: space-between; padding: 0 2px 0 4px; }
  .meteo-phrase { font-size: 1.5rem; }
}

.traces { display: grid; gap: 4px; padding: 0 0 26px; color: var(--sable-brun); }
.traces li { position: relative; padding: 4px 0 4px 74px; min-height: 48px; display: flex; align-items: center; font: 400 1.22rem/1.15 var(--police-titre); text-shadow: 0 1px 0 rgba(255, 255, 255, .75); }
.traces li::before { content: ""; position: absolute; left: 0; top: 50%; width: 62px; height: 38px; margin-top: -19px; background: var(--pieds) center / contain no-repeat; }
.traces li:nth-child(even) { padding-left: 110px; }
.traces li:nth-child(even)::before { left: 34px; transform: rotate(14deg); }
.traces li:nth-child(odd)::before { transform: rotate(-12deg); }
@media (min-width: 900px) {
  .traces { grid-template-columns: repeat(5, 1fr); gap: 16px; padding-bottom: 44px; }
  .traces li, .traces li:nth-child(even) { display: block; padding: 50px 0 0; }
  .traces li:nth-child(even) { margin-top: 26px; }
  .traces li::before, .traces li:nth-child(even)::before { left: 0; top: 0; margin: 0; }
}

/* ---------------------------------------------------------- pied de page */
.pied { position: relative; }
.pied-herbe { position: relative; height: 34px; margin-top: 44px; background: var(--herbe) var(--brins); }
.pied-sable { position: relative; background: var(--sable) var(--grain); }
.pied--herbe .pied-sable { margin-top: 24px; }
.pied-interieur { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 24px var(--gouttiere) 24px; }
.pied--sable .pied-interieur { padding-top: 4px; }
.pied-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-bottom: 28px; }
.pied-seau { grid-column: 1 / -1; }
.pied-seau-cadre { width: min(62vw, 270px); margin: 0 auto; }
.pied-seau-dessin { width: 100%; height: auto; }
.pied-mot { font: 800 1.8rem/1.08 var(--police-titre); text-align: center; margin: 12px 0 14px; }
.pied-colonne h2 { font-size: 1.28rem; font-weight: 400; margin: 0 0 4px; }
.pied-colonne a { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.2; text-decoration: none; font-size: 1rem; }
.pied-colonne a:hover { text-decoration: underline; }
.pied-colonne:last-child { grid-column: 1 / -1; }
.newsletter { display: flex; flex-wrap: wrap; gap: 8px; }
.newsletter input[type="email"] { flex: 1 1 170px; min-width: 0; min-height: 50px; padding: 11px 16px; font-size: 16px; background: #fff; border: 2px solid var(--encre); border-radius: 999px; }
.newsletter button { min-height: 50px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--encre); color: #fff; font: 400 1.06rem var(--police-titre); }
.newsletter .form-message { flex-basis: 100%; margin: 0; min-height: 0; }
.newsletter-note { flex-basis: 100%; margin: 0; color: var(--encre); font-size: .84rem; }
.pied-legal { border-top: 2px dashed var(--sable-brun); padding-top: 16px; font-size: .9rem; color: var(--encre); }
.pied-legal a { color: inherit; }
.pied-legal-coord { overflow-wrap: anywhere; }
.pied-legal-liens a { display: inline-flex; align-items: center; min-height: 44px; }
.logos-paiement { gap: 8px; }
.logos-paiement svg { width: 46px; height: 29px; }
.pied-mini { display: flex; flex-wrap: wrap; gap: 0 18px; margin-bottom: 12px; }
.pied-mini a { display: inline-flex; align-items: center; min-height: 44px; font-size: .95rem; }
.pied--leger { margin-top: 56px; }
@media (min-width: 900px) {
  .pied-grille { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; align-items: start; }
  .pied-seau { grid-column: auto; }
  .pied-colonne:last-child { grid-column: auto; }
  .pied-seau-cadre { margin: 0; }
  .pied-mot { text-align: left; }
  .pied-colonne { padding-top: 14px; }
}
@media (max-width: 899px) { .page-produit { padding-bottom: 0; } .page-produit .pied-sable { padding-bottom: 84px; } }

/* ----------------------------------------------------- boutique et collections */
.vitrine, .etage-page-corps { position: relative; max-width: 1240px; margin: 0 auto; padding: 6px var(--gouttiere) 34px; }
.vitrine-tete h1 { font-size: clamp(2.7rem, 12.4vw, 5.4rem); line-height: 1; margin: 0 0 8px; }
.vitrine-tete p { font-size: 1.12rem; margin-bottom: 16px; }
.etage-page { position: relative; margin-top: 26px; }
.etage-page--air { background: var(--ciel-clair); }
.etage-page--herbe { background: var(--herbe) var(--brins); }
.etage-page--sable { background: var(--sable) var(--grain); margin-top: 16px; }
.etage-page-bord { position: absolute; left: 0; right: 0; top: 0; height: 0; }
.etage-page-bord .ciel-bas { bottom: auto; top: -79px; height: 80px; }
.etage-page--air { margin-top: 44px; }
.etage-page-corps { padding-top: 22px; z-index: 2; }
.etage-page-tete { margin-bottom: 18px; }
.filtres { display: grid; gap: 8px; margin-bottom: 12px; }
.filtres-groupe { display: flex; flex-wrap: wrap; gap: 7px; }
.filtre { min-height: 44px; padding: 8px 16px; border: 2px solid var(--encre); border-radius: 999px; background: #fff; font: 400 1.06rem/1.1 var(--police-titre); color: var(--encre); }
.filtre--air { background: var(--ciel-clair); }
.filtre--herbe { background: var(--herbe); }
.filtre--sable { background: var(--sable); }
.filtre.actif { background: var(--encre); color: #fff; }
.tri { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tri-compte { margin: 0; font-weight: 700; }
.tri-choix { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.tri-choix select { min-height: 44px; max-width: 178px; padding: 8px 12px; font-size: 16px; border: 2px solid var(--encre); border-radius: 14px; background: #fff; color: var(--encre); }
.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grille-vide { padding: 26px 20px; background: #fff; border-radius: 26px; text-align: center; }
.ascenseurs { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }
.ascenseur { flex: 1; display: flex; flex-direction: column; padding: 12px 18px; background: #fff; border-radius: 22px; text-decoration: none; }
.ascenseur small { font-size: .92rem; }
.ascenseur span { font: 400 1.4rem/1.1 var(--police-titre); }
.ascenseur--bas { text-align: right; margin-left: auto; }
.ascenseur--haut::before { content: "↑"; font: 400 1.3rem/1 var(--police-titre); }
.ascenseur--bas::before { content: "↓"; font: 400 1.3rem/1 var(--police-titre); }
@media (min-width: 700px) { .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1000px) {
  .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .filtres { display: flex; flex-wrap: wrap; gap: 8px 22px; }
  .ascenseurs { max-width: 620px; margin-left: auto; margin-right: auto; }
}

/* ----------------------------------------------------------- fiche produit */
.fiche { --cadre: var(--ciel-fort); --cadre-clair: var(--ciel-clair); max-width: 1240px; margin: 0 auto; padding: 0 var(--gouttiere) 20px; }
.fiche--herbe { --cadre: var(--herbe-fort); --cadre-clair: var(--herbe-clair); }
.fiche--sable { --cadre: var(--sable-fort); --cadre-clair: var(--sable-clair); }
.ariane { display: flex; gap: 7px; font-size: .94rem; margin: -4px 0 2px; }
.ariane a { display: inline-flex; align-items: center; min-height: 44px; }
.ariane span { align-self: center; }
.fiche-grille { display: grid; gap: 18px; }
.fiche-photos { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gouttiere) * -1); padding: 0 var(--gouttiere); scrollbar-width: none; }
.fiche-photos::-webkit-scrollbar { display: none; }
.fiche-photo { flex: 0 0 86%; scroll-snap-align: center; background: var(--cadre); padding: 8px; border-radius: 30px; }
.fiche-photo img { width: 100%; border-radius: 22px; }
.fiche--air .fiche-photo img { border-radius: 50% 50% 22px 22px / 22% 22% 22px 22px; }
.fiche--sable .fiche-photo img { border-radius: 22px 22px 50% 50% / 22px 22px 18% 18%; }
.fiche-puces { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 8px; }
.puce { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 16px; border-radius: 999px; font: 400 1.06rem/1 var(--police-titre); text-decoration: none; background: #fff; }
.puce--air { background: var(--ciel-fort); }
.puce--herbe { background: var(--herbe); }
.puce--sable { background: var(--sable); }
.puce--age { background: var(--encre); color: #fff; }
.fiche h1 { font-size: clamp(2.2rem, 9.6vw, 3.5rem); line-height: 1.02; margin: 0 0 8px; }
.fiche-prix { font: 400 2rem/1 var(--police-titre); margin: 0 0 10px; }
.fiche-prix small { font: 400 .95rem var(--police-texte); }
.fiche-resume { font-size: 1.12rem; margin-bottom: 12px; }
.avertissements { background: #fff; border: 2.5px solid var(--soleil); color: var(--encre); padding: 12px 14px 12px 50px; border-radius: 20px; font-size: .96rem; line-height: 1.35; margin: 0 0 14px; position: relative; }
.avertissements::before { content: "!"; position: absolute; left: 13px; top: 12px; width: 26px; height: 26px; background: var(--soleil); color: var(--encre-nuit); font: 400 1.06rem/28px var(--police-titre); text-align: center; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.avertissements p { font-weight: 400; }
.avertissements p:first-child { font-weight: 700; }
.fiche-duo { display: grid; gap: 8px; margin-bottom: 16px; }
.fiche-ou, .fiche-contenu { background: var(--cadre-clair); border-radius: 20px; padding: 12px 14px; }
.fiche-duo h2 { font-size: 1.24rem; font-weight: 400; margin: 0 0 2px; }
.fiche-duo p { margin: 0; line-height: 1.35; }
.fiche-dimensions { color: var(--texte-doux); margin-top: 3px !important; }
.achat { margin-bottom: 14px; }
.achat-bouton { font-size: 1.16rem; }
.fiche-promesses { display: grid; gap: 2px; margin-bottom: 18px; font-weight: 700; font-size: .98rem; }
.fiche-promesses li { display: flex; align-items: center; gap: 8px; }
.fiche-promesses li::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--soleil); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.fiche-texte ul { list-style: none; margin-bottom: 14px; }
.fiche-texte li { padding-left: 18px; position: relative; line-height: 1.35; margin-bottom: 4px; }
.fiche-texte li::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; background: var(--encre); border-radius: 50%; }
.fiche-pli { background: #fff; border-radius: 20px; padding: 2px 14px; margin-bottom: 8px; }
.fiche-pli summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font: 400 1.2rem/1.15 var(--police-titre); list-style: none; }
.fiche-pli summary::-webkit-details-marker { display: none; }
.fiche-pli summary::after { content: "+"; font-size: 1.5rem; line-height: 1; }
.fiche-pli[open] summary::after { content: "−"; }
.fiche-infos > div { border-bottom: 2px dotted var(--bord); padding: 7px 0; }
.fiche-infos > div:last-child { border-bottom: 0; }
.fiche-infos dt { color: var(--texte-doux); flex: none; }
.bloc-conformite { padding-bottom: 6px; color: var(--encre); font-size: .92rem; }
.fiche-pli-lien { margin: 0 0 10px; }
.fiche-pli-lien a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.emporter { margin-top: 38px; }
.emporter h2 { font-size: clamp(2.1rem, 9vw, 3.4rem); line-height: 1; }
.grille--emporter .carte:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; gap: 10px; align-items: center; }
.grille--emporter .carte:last-child:nth-child(odd) .carte-lien { display: flex; align-items: center; gap: 12px; }
.grille--emporter .carte:last-child:nth-child(odd) .carte-photo { flex: 0 0 110px; }
.grille--emporter .carte:last-child:nth-child(odd) .carte-age { display: none; }
.grille--emporter .carte:last-child:nth-child(odd) .carte-bas { flex-direction: column; flex: none; }
.barre-achat { background: var(--sable); border-top: 0; box-shadow: 0 -3px 0 var(--encre); }
.barre-achat-texte strong { font: 400 1.14rem/1.1 var(--police-titre); }
.barre-achat-texte small { font: 700 .86rem/1 var(--police-texte); margin-left: 6px; white-space: nowrap; }
.barre-achat button { font-size: 1.04rem; padding: 10px 24px; min-height: 46px; }
@media (min-width: 700px) {
  .grille--emporter .carte:last-child:nth-child(odd) { grid-column: auto; flex-direction: column; align-items: stretch; gap: 0; }
  .grille--emporter .carte:last-child:nth-child(odd) .carte-lien { display: block; }
  .grille--emporter .carte:last-child:nth-child(odd) .carte-age { display: block; }
  .grille--emporter .carte:last-child:nth-child(odd) .carte-bas { flex-direction: row; }
  .fiche-duo { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .fiche-grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 44px; align-items: start; }
  .fiche-photos { display: grid; gap: 14px; overflow: visible; margin: 0; padding: 0; }
  .fiche-photo { padding: 10px; }
  .fiche-droite { position: sticky; top: 76px; }
  .grille--emporter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .emporter { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px; align-items: start; }
  .emporter h2 { font-size: 3.4rem; margin-top: 12px; }
}

/* ---------------------------------------------------------- notre histoire */
.histoire { position: relative; }
.histoire-tete { position: relative; max-width: 1240px; margin: 0 auto; padding: 96px var(--gouttiere) 30px; z-index: 2; }
.histoire-tete h1 { font-size: clamp(3rem, 14.5vw, 6.4rem); line-height: 1; margin-bottom: 12px; }
.histoire-tete p { font-size: 1.24rem; max-width: 30em; margin: 0; }
.ciel-cerf--histoire { left: 18px; top: -4px; width: 66px; }
.histoire-etage { position: relative; display: grid; gap: 18px; padding: 30px var(--gouttiere) 74px; }
.histoire-etage > * { position: relative; z-index: 2; }
.histoire-etage img { width: 100%; border-radius: 30px; }
.histoire-etage h2 { font-size: clamp(2.2rem, 10vw, 3.6rem); line-height: 1.02; }
.histoire-etage p { font-size: 1.14rem; margin: 0; }
.histoire-etage--air { background: var(--ciel-clair); }
.histoire-etage--herbe { background: var(--herbe) var(--brins); }
.histoire-etage--sable { background: var(--sable) var(--grain); }
.histoire-fin { position: relative; z-index: 2; background: var(--sable) var(--grain); text-align: center; padding: 6px var(--gouttiere) 34px; }
.histoire-fin p { font: 800 1.9rem/1.1 var(--police-titre); }
@media (min-width: 760px) {
  .histoire-etage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; padding: 64px max(20px, calc((100vw - 1140px) / 2)) 84px; }
  .histoire-etage--herbe > div { order: -1; }
  .histoire-tete { padding-top: 110px; padding-bottom: 54px; }
  .ciel-cerf--histoire { left: auto; right: 12%; top: 40px; width: 110px; }
}

/* ---------------------------------------------------------- pages de texte */
.feuille { position: relative; max-width: 860px; margin: 10px auto 12px; background: #fff; border-radius: 32px; }
@media (max-width: 899px) { .feuille { margin: 8px 10px 12px; } }
.feuille::before { content: ""; position: absolute; left: 14px; top: 62px; bottom: 34px; border-left: 2px dashed var(--ciel-fort); }
.feuille-cerf { display: none; }
@media (min-width: 1100px) {
  .feuille-cerf { display: block; position: absolute; left: calc(100% + 34px); top: 12px; width: 92px; }
  .feuille-cerf .cerf-dessin { transform: rotate(10deg); }
  .feuille-cerf::after { content: ""; position: absolute; left: 47%; top: 130px; height: 520px; border-left: 2px dashed var(--encre); opacity: .5; }
}
.feuille-tete { position: relative; padding: 24px 22px 6px 34px; }
.feuille-tete::before { content: ""; position: absolute; left: 6px; top: 26px; width: 18px; height: 22px; background: var(--soleil); clip-path: polygon(50% 0, 100% 42%, 50% 100%, 0 42%); }
.feuille h1 { font-size: clamp(1.9rem, 7.9vw, 3.3rem); line-height: 1.06; margin: 0 0 6px; }
.feuille-intro { font-size: 1.1rem; margin: 0; }
.legal { max-width: none; padding: 8px 20px 30px 34px; }
.legal-intro { color: var(--encre); font-size: 1.12rem; }
.legal h2 { font-size: 1.5rem; font-weight: 400; line-height: 1.15; margin-top: 1.5em; }
.legal h3 { font-size: 1.2rem; }
.legal table { font-size: .96rem; }
.legal th { background: var(--ciel-clair); }
.legal th, .legal td { border-bottom: 2px dotted var(--bord); }
.legal-mise-a-jour { color: var(--texte-doux); }
.encadre { background: var(--sable-clair); border: 0; border-radius: 20px; }
.faq details { border-bottom: 2px dotted var(--bord); padding: 0; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 0; font: 400 1.2rem/1.2 var(--police-titre); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--soleil-fonce); }
.faq details[open] summary::after { content: "−"; }
.faq details div { padding: 0 0 12px; }
.contact-infos h2, .formulaire h2 { margin-top: 0; }
.formulaire label, .ck-form label { font-weight: 700; font-size: .98rem; }
.formulaire input:not([type="checkbox"]):not(.piege), .formulaire textarea, .formulaire select,
.ck-form input:not([type="checkbox"]), .ck-form select { border: 2px solid var(--encre); border-radius: 16px; padding: 12px 14px; min-height: 50px; background: #fff; }
.form-message.ok { color: #1f5c2e; }
.form-message.erreur { color: #96201f; }
.achat-erreur { color: #96201f; }

/* ---------------------------------------- tiroir : ciel, herbe, sable */
.voile { background: rgba(22, 50, 74, .45); }
.tiroir { background: var(--herbe-clair); border-radius: 26px 0 0 26px; overflow: hidden; }
.tiroir-entete { position: relative; background: var(--ciel); border-bottom: 0; padding: 12px 10px 34px 20px; }
.tiroir-entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 30px; background: var(--herbe-clair); -webkit-mask: var(--m-herbe) left bottom / 276px 30px repeat-x; mask: var(--m-herbe) left bottom / 276px 30px repeat-x; }
.tiroir-entete h2 { display: flex; align-items: center; gap: 9px; font-size: 1.8rem; }
.tiroir-entete h2::before { content: ""; width: 32px; height: 32px; background: var(--seau) center / contain no-repeat; }
.tiroir-fermer { width: 44px; height: 44px; padding: 0; font-size: 2rem; color: var(--encre); }
.tiroir-liste { padding: 2px 18px 18px; }
.ligne-panier { background: #fff; border: 0; border-radius: 22px; padding: 8px; margin-bottom: 9px; gap: 11px; }
.ligne-panier img { width: 76px; height: 96px; border-radius: 16px; }
.ligne-nom { font: 400 1.12rem/1.15 var(--police-titre); }
.ligne-garde { margin: 3px 0 5px; font-size: .84rem; line-height: 1.25; color: var(--encre); }
.ligne-bas strong { font: 400 1.1rem var(--police-titre); white-space: nowrap; }
.quantite { border: 2px solid var(--encre); border-radius: 999px; }
.quantite button { width: 44px; height: 44px; font-size: 1.2rem; color: var(--encre); }
.ligne-retirer { min-height: 44px; padding: 6px 12px 0 0; font-size: .92rem; color: var(--encre); }
.panier-vide { padding: 22px 10px; }
.panier-vide::before { content: ""; display: block; width: 76px; height: 76px; margin: 0 auto 10px; background: var(--seau) center / contain no-repeat; }
.panier-vide a { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 6px; padding: 12px 26px; border-radius: 999px; background: var(--soleil); color: var(--encre-nuit); box-shadow: 0 5px 0 var(--soleil-ombre); font: 400 1.16rem/1.2 var(--police-titre); text-decoration: none; }
.tiroir-pied { position: relative; background: var(--sable) var(--grain); border-top: 0; padding-top: 12px; }
.tiroir-pied::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 16px; background: var(--sable); -webkit-mask: var(--m-vagues) left bottom / 120px 16px repeat-x; mask: var(--m-vagues) left bottom / 120px 16px repeat-x; }
.tiroir-ligne strong { font: 400 1.46rem var(--police-titre); }
.tiroir-note { color: var(--encre); font-size: .92rem; }
.tiroir-voir { font-weight: 700; min-height: 44px; display: flex; align-items: center; justify-content: center; margin-top: 8px; padding: 6px; }
div.page-panier { padding-top: 12px; padding-bottom: 20px; }
.page-panier h1 { font-size: clamp(2.6rem, 12vw, 4.4rem); line-height: 1; }
.panier-lignes .ligne-panier { box-shadow: inset 0 0 0 2px var(--ciel-fort); }
.panier-total { background: var(--sable) var(--grain); padding: 18px; border-radius: 26px; }
@media (min-width: 900px) {
  [data-panier-page]:has(.panier-lignes) { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
  [data-panier-page] .panier-total { margin: 0; }
}

/* --------------------------------------- commande : on descend les trois étages */
.ck { padding-top: 10px; padding-bottom: 8px; }
.ck h1 { font-size: clamp(2.2rem, 9.6vw, 3.4rem); line-height: 1.02; }
.ck h2 { font-size: 1.5rem; font-weight: 400; }
.ck-form { position: relative; counter-reset: etage; }
.ck-form::before { content: ""; position: absolute; left: 12px; top: 28px; bottom: 60px; border-left: 2px dashed var(--encre); }
.ck-form section { position: relative; margin: 0 0 14px 28px; padding: 16px 14px 14px; border-radius: 26px; background: var(--ciel-clair); counter-increment: etage; }
.ck-form section:nth-of-type(2) { background: var(--herbe) var(--brins); }
.ck-form section:nth-of-type(3) { background: var(--sable) var(--grain); }
.ck-form section::before { content: counter(etage); position: absolute; left: -41px; top: 11px; width: 30px; height: 34px; background: var(--soleil); color: var(--encre-nuit); font: 400 1.06rem/34px var(--police-titre); text-align: center; clip-path: polygon(50% 0, 100% 45%, 50% 100%, 0 45%); }
.ck-form section.ck-valider { background: #fff; counter-increment: none; }
.ck-form section.ck-valider::before { display: none; }
.ck-resume { background: var(--sable) var(--grain); padding: 16px; border-radius: 26px 26px 42px 42px; }
.ck-ligne img { border-radius: 14px; }
.ck-ligne small { color: var(--encre); }
.ck-totaux { border-top: 2px dashed var(--sable-brun); }
.ck-securite, .ck-note { color: var(--encre); }
.ck-indisponible { background: #fff; border-radius: 18px; }
.ck-cgv input { accent-color: var(--soleil-fonce); }
[data-payer] { font-size: 1.04rem; }
[data-payer]:disabled { opacity: 1; background: #e9d9b5; color: var(--encre); }

/* --------------------------------------------------------------- merci, 404 */
.merci { position: relative; }
.merci h1 { font-size: clamp(2.5rem, 11vw, 4.2rem); line-height: 1.02; }
.perdu { padding-top: 150px; }
.ciel-cerf--perdu { left: 50%; margin-left: -46px; top: 8px; width: 92px; }
.ciel-cerf--perdu .cerf-dessin { transform: rotate(34deg); animation: none; }

/* --------------------------------------------------------------- recherche */
.recherche { background: var(--ciel); }
.recherche-barre input { border: 2px solid var(--encre); border-radius: 999px; padding: 12px 18px; font-size: 16px; min-height: 50px; }
.recherche-barre button { width: 44px; height: 44px; padding: 0; color: var(--encre); }
.recherche-resultat { background: #fff; border: 0; border-radius: 20px; padding: 7px 14px 7px 7px; margin-bottom: 8px; }
.recherche-resultat img { width: 60px; height: 72px; border-radius: 14px; }
.recherche-resultat span { font: 400 1.12rem/1.15 var(--police-titre); }
.recherche-resultat strong { font: 400 1rem var(--police-titre); white-space: nowrap; }
.consent { border: 2px solid var(--encre); border-radius: 22px; box-shadow: 4px 4px 0 var(--encre); }
.consent button { border-radius: 999px; min-height: 44px; }