/* Digital Bloom : feuille de style de la charte du 21 octobre 2026.
   Les valeurs (couleurs, polices, rayons, tailles de texte, cible tactile) viennent de tokens.css, à charger avant cette feuille ; les noms courts ci-dessous ne font que renvoyer à un jeton.
   Pas d'ombres sur la page de commande (à décider), pas de dégradés, filets de 1,5 px. Polices hébergées (SIL OFL 1.1, voir assets/fonts/LICENCES.md). */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/dm-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/dm-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --display:var(--font-brand-display); --sans:var(--font-brand-sans);
  --r-card:var(--radius-card); --r-block:var(--radius-block); --r-hero:var(--radius-hero); --r-visual:var(--radius-visual); --r-champ:var(--radius-thumb);
  --gutter:var(--gutter-mobile); --touch:var(--touch-min);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--b-body-weight) var(--b-body-size-mobile)/var(--b-body-line) var(--sans)}
h1,h2,h3,p,ul{margin:0}
a{color:var(--pink-dark)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.saut{position:absolute;left:-9999px}
.saut:focus{left:var(--gutter);top:var(--gutter);z-index:10;background:var(--white);padding:8px 14px;border-radius:var(--radius-pill)}
.page{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}

.entete{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0}
.entete__logo{display:block;line-height:0}
.entete__logo img{display:block;height:34px;width:auto}
.entete__retour{font:var(--b-nav-weight) var(--b-nav-size)/var(--b-nav-line) var(--sans);color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--touch)}
.entete__retour:hover{text-decoration:underline}

.etiquette{font:var(--b-label-weight) var(--b-label-size)/var(--b-label-line) var(--sans);letter-spacing:var(--b-label-spacing);text-transform:uppercase;color:var(--green-dark)}
.titre{font:var(--b-h2-weight) var(--b-h2-size-mobile)/var(--b-h2-line) var(--display);letter-spacing:var(--b-h2-spacing);text-wrap:balance}
.titre-bloc{font:var(--b-card-title-weight) var(--b-card-title-size-mobile)/var(--b-card-title-line) var(--display);letter-spacing:var(--b-card-title-spacing)}
.petit{font-size:var(--b-small-size);line-height:var(--b-small-line);color:var(--muted)}

.grille{display:grid;gap:20px;padding-bottom:8px}
.carte{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-card);padding:24px}
.carte > .etiquette{display:block;margin-bottom:10px}

.resume .titre{margin:0 0 12px}
.resume__texte{color:var(--muted)}
.resume__prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:20px}
.resume__prix strong{font:var(--b-price-weight) var(--b-price-size)/var(--b-price-line) var(--display)}
.puces{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none;margin-top:20px}
.puces li{font:var(--b-nav-weight) var(--b-nav-size)/var(--b-nav-line) var(--sans);padding:9px 14px;border-radius:var(--radius-pill);background:var(--mint);color:var(--green-dark)}

.champ-groupe{margin-top:18px}
.champ-groupe:first-of-type{margin-top:16px}
.champ-groupe label{display:block;font:var(--b-button-weight) var(--b-body-size-mobile)/1.3 var(--sans);margin-bottom:8px}
.champ-groupe .petit{display:block;margin-top:6px}
.champ{width:100%;min-height:52px;padding:12px 16px;border:1.5px solid var(--border);border-radius:var(--r-champ);background:var(--lilac);color:var(--ink);font:400 16px/1.3 var(--sans)} /* 16 px minimum dans un champ : en dessous, Safari sur iPhone zoome la page à la saisie */
.champ[aria-invalid="true"]{border-color:var(--pink-dark)}
.champ:disabled{background:var(--bg);color:var(--muted)}
.erreur-champ{display:none;margin-top:8px;color:var(--pink-dark);font:600 var(--b-small-size)/1.4 var(--sans)}
.erreur-champ.visible{display:flex;gap:8px;align-items:flex-start}
.erreur-champ::before{content:"!";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--pink-dark);color:var(--white);font:var(--b-label-weight) var(--b-label-size)/18px var(--sans);text-align:center}

.accord{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;padding:14px 0 0;font-size:var(--b-body-size-mobile);line-height:1.5}
.accord input{width:24px;height:24px;margin:0;accent-color:var(--green)}
.accord label{cursor:pointer}

.message{margin-top:18px;padding:16px 20px;border-radius:var(--r-visual);font:500 var(--b-body-size-mobile)/1.5 var(--sans)}
.message[hidden]{display:none}
.message--erreur{background:var(--pink-dark);color:var(--white)}
.message--erreur a{color:var(--white);font-weight:700}

.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);padding:0 28px;border:1.5px solid transparent;border-radius:var(--radius-pill);background:var(--pink);color:var(--white);font:var(--b-button-weight) var(--b-button-size)/var(--b-button-line) var(--sans);text-decoration:none;cursor:pointer}
.bouton:hover{background:var(--pink-dark)}
.bouton:active{transform:translateY(1px)}
.bouton--secondaire{background:transparent;color:var(--ink);border-color:var(--ink)}
.bouton--secondaire:hover{background:var(--lilac)}

.paiement__etat{margin-top:16px;padding:16px 20px;border-radius:var(--r-visual);background:var(--mint);color:var(--green-dark);font:500 var(--b-body-size-mobile)/1.5 var(--sans)}
.paiement__etat[hidden]{display:none}
.paiement__etat.charge::before{content:"";display:inline-block;width:16px;height:16px;margin-right:10px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-3px;animation:tourne .8s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
#paiement-integre{margin-top:16px}
#paiement-integre:empty{display:none}
.paiement__repli{margin-top:16px}
.paiement__repli[hidden]{display:none}
.paiement__repli p{margin-bottom:14px}
.paiement__actions{margin-top:16px}
.paiement__actions[hidden]{display:none}
.paiement__note{margin-top:16px}

.pied{margin:40px 0 24px;padding:28px var(--gutter);border-radius:var(--r-hero);background:var(--ink);color:var(--white)}
.pied img{display:block;height:34px;width:auto;margin-bottom:14px}
.pied p{font-size:var(--b-body-size-mobile);line-height:1.7}
.pied a{color:var(--white)}
.pied hr{border:0;border-top:1.5px solid var(--ink-line);margin:18px 0}
.pied .etiquette{color:var(--gold)}

@media (min-width:900px){
  :root{--gutter:64px}
  body{font-size:var(--b-body-size)}
  .entete{padding:28px 0}
  .entete__logo img{height:40px}
  .titre{font-size:var(--b-h2-size)}
  .titre-bloc{font-size:var(--b-card-title-size)}
  .grille{grid-template-columns:5fr 7fr;gap:32px;align-items:start}
  .carte{padding:32px}
  .resume{position:sticky;top:24px}
  .pied{padding:36px 48px;margin-top:56px}
}
@media (prefers-reduced-motion:reduce){.bouton:active{transform:none}.paiement__etat.charge::before{animation:none;border-right-color:currentColor}}