/* ═══════════════════════════════════════════════════════════════════════════
   LES POLICES, SERVIES PAR NOUS (21/09/2026)
   ═══════════════════════════════════════════════════════════════════════════

   ⚠ POURQUOI ELLES SONT DANS LE DÉPÔT, alors que la règle du projet dit de ne
     jamais y mettre de police. Cette règle vise la REDISTRIBUTION : pousser une
     police sur un dépôt distant en est une, et toutes les licences ne
     l'autorisent pas — c'est ce qui a coûté The Seasons.
     Cormorant Garamond et Montserrat sont sous SIL OPEN FONT LICENSE 1.1, qui
     autorise explicitement la redistribution. Leur texte est à côté
     (LICENCE-*.txt), et il doit le rester : l'OFL l'exige.

   ⚠ SERVIES PAR NOUS, ET PAS PAR GOOGLE. Les charger depuis fonts.gstatic.com
     enverrait l'adresse IP de CHAQUE invité à Google, à chaque ouverture de
     galerie. Pour un projet qui a supprimé M30 plutôt que de garder des
     adresses de tiers, ce serait incohérent — et c'est une pratique déjà
     sanctionnée en Europe.

   ⚠ SANS ELLES, RIEN NE CASSE, mais la charte n'existe plus : le navigateur
     prend Georgia et Helvetica, et chaque invité voit une page différente.

   Les `unicode-range` viennent de Google : le navigateur ne télécharge le
   fichier `latin-ext` que si la page porte un caractère qui l'exige. Une page
   française ordinaire ne prend donc que `latin`, soit ~57 Ko pour les deux
   familles.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:600;
  font-display:swap;
  src:url('polices/cormorant-garamond-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:600;
  font-display:swap;
  src:url('polices/cormorant-garamond-600-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:'Montserrat'; font-style:normal; font-weight:400;
  font-display:swap;
  src:url('polices/montserrat-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family:'Montserrat'; font-style:normal; font-weight:400;
  font-display:swap;
  src:url('polices/montserrat-400-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:'Montserrat'; font-style:normal; font-weight:600;
  font-display:swap;
  src:url('polices/montserrat-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family:'Montserrat'; font-style:normal; font-weight:600;
  font-display:swap;
  src:url('polices/montserrat-600-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;
}

/* ═══════════════════════════════════════════════════════════════════════════
   foliebooth.css, LA DIRECTION ARTISTIQUE DES PAGES CLIENTS ET INVITÉS
   ═══════════════════════════════════════════════════════════════════════════

   Portée le 21/09/2026 depuis `domaine/static/domaine.css`, qui l'a posée pour
   la plateforme du domaine puis pour l'admin. Les pages clients et invités
   gardaient une feuille écrite à part, avec la bonne palette mais une
   typographie système : ce sont pourtant LES SEULES que voient les mariés et
   leurs invités.

   ⚠ POURQUOI UNE COPIE ET NON UN LIEN VERS `domaine.css`. L'hôte public ne
     connaît pas `domaine/` — c'est la séparation stricte du dépôt, et elle
     tient aussi pour un fichier statique : servir la feuille de la plateforme
     de Louise depuis foliebooth.… ferait dépendre les pages des invités d'un
     dossier qui n'a rien à y voir. Les JETONS (couleurs, familles) sont donc
     recopiés, et `tests/test_charte_graphique.py` refuse qu'ils divergent.

   ⚠ CE QUI N'EST PAS REPRIS, ET C'EST VOLONTAIRE : le menu latéral foncé. Un
     client n'administre rien, un invité encore moins. Ces pages gardent leur
     en-tête centré et leur colonne unique.

   ⚠ LES CLASSES NE CHANGENT PAS DE NOM (.card, .btn, .voile, .grille…). Seize
     gabarits les emploient ; les renommer pour ressembler au domaine aurait
     transformé un travail d'habillage en réécriture, avec ce que ça emporte de
     régressions sur des écrans qui marchent.

   ⚠ LES POLICES NE SONT PAS SERVIES PAR CE FICHIER. Cormorant Garamond et
     Montserrat sont nommées, avec un repli qui tient la mise en page — comme
     `domaine.css`. Les héberger pour les navigateurs des invités est une
     décision à part, cf. docs/features/polices-libres-de-droits.md.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light only;
  /* ⚠ IDENTIQUES À `domaine/static/domaine.css`, et un test le vérifie. */
  --fond:#FAF8F5; --carte:#FFFFFF; --ligne:#E7E1D8; --ligne-douce:#F1ECE5;
  --encre:#2F2A25; --doux:#78695C; --accent:#C4B9A8; --accent-clair:#E6DFD4;
  --taupe-fonce:#78695C;
  --ok:#2F5A3A; --ok-fond:#E3EDE5;
  --attente:#7A5A1E; --attente-fond:#F3EBDA;
  --erreur:#9A3426; --erreur-fond:#F6E1DC;
  --neutre:#5E554C; --neutre-fond:#EFEBE5;
  /* Le menu latéral de l'espace client, depuis le 24/09/2026 : mêmes valeurs
     que celui de l'admin. */
  --menu:#2F2A25; --menu-actif:#3E3731; --menu-texte:#CFC6BA; --menu-eteint:#6F665D;
}

* { box-sizing:border-box; }

body { margin:0; background:var(--fond); color:var(--encre); font-size:14px;
       line-height:1.55;
       font-family:Montserrat,"Helvetica Neue",Arial,sans-serif; }

h1, h2, h3, .serif { font-family:"Cormorant Garamond",Georgia,serif;
                     font-weight:600; margin:0; }
h1 { font-size:30px; line-height:1.1; }
h2 { font-size:21px; }
h3 { font-size:17px; }

a { color:var(--encre); }
a:hover { color:var(--doux); }

.num { font-variant-numeric:tabular-nums; }
.muted, .doux { color:var(--doux); font-size:13px; }
.lbl { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
       color:#8A7F74; font-weight:600; }

/* ── L'en-tête ─────────────────────────────────────────────────────────────
   Deux allures pour deux publics. L'espace CLIENT a un bandeau posé sur fond
   blanc, il ressemble à un outil qu'on revient consulter. La galerie INVITÉ a
   un titre centré et respirant : on y arrive par un QR, une fois, et la
   première chose qu'on doit voir est la soirée, pas l'interface. */
header { padding:22px 26px; border-bottom:1px solid var(--ligne);
         background:var(--carte); }
header h1 { font-size:22px; }
header p { margin:3px 0 0; font-size:12px; color:var(--doux); }

body.invite header { background:transparent; border:none; text-align:center;
                     padding:38px 20px 22px; }
body.invite header h1 { font-size:34px; font-weight:600; }
body.invite header p { margin-top:8px; font-size:11px; letter-spacing:.14em;
                       text-transform:uppercase; color:var(--doux); }

main { max-width:760px; margin:0 auto; padding:26px 18px 64px; }
main.large { max-width:1240px; }
body.invite main { max-width:1100px; padding-top:0; }

footer { text-align:center; padding:32px 16px 48px; color:#A49A8E;
         font-size:11.5px; letter-spacing:.04em; }

/* ── Cartes ─────────────────────────────────────────────────────────────── */
.card { background:var(--carte); border:1px solid var(--ligne); border-radius:10px;
        padding:20px 22px; margin-bottom:18px; }
.card h2, .card h3 { margin-top:0; }
.card h2 + p, .card h3 + p { margin:8px 0 0; }
.card > p:first-of-type { margin-top:8px; }

.colonnes { display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
            gap:0 20px; align-items:start; }
.colonnes > .colonne { min-width:0; }
.colonnes > .colonne > .card:last-child { margin-bottom:0; }
@media (max-width:900px) { .colonnes { grid-template-columns:1fr; } }

.grille { display:grid; gap:14px;
          grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.grille > .card { margin-bottom:0; }
body.invite .grille { grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }

/* ── Boutons ──────────────────────────────────────────────────────────────
   L'accent taupe porte l'action ordinaire ; l'encre porte celle qui engage
   (accepter un devis, payer). Le contraste dit laquelle compte. */
/* ⚠ L'ENCRE, PAS L'ACCENT. Le premier jet posait le taupe clair en fond de
   bouton avec du texte blanc : un contraste de 1,9 pour 1, illisible au soleil
   sur un téléphone, et surtout PAS la charte — côté admin, un bouton est
   sombre (`domaine.css`). Le taupe reste une couleur de bordure et de
   pastille, pas de fond de texte blanc. */
button, a.btn { display:inline-block; background:var(--encre); color:var(--fond);
  border:none; border-radius:6px; padding:9px 17px; font-size:13px;
  font-family:inherit; font-weight:500; cursor:pointer; text-decoration:none;
  line-height:1.4; }
button:hover, a.btn:hover { background:#463E37; color:var(--fond); }
button.principal { font-weight:600; padding:11px 22px; font-size:14px; }
a.btn.discret, button.sec { background:var(--carte); color:var(--encre);
                            border:1px solid #D9D1C5; }
a.btn.discret:hover, button.sec:hover { background:#F6F2EC; color:var(--encre); }
button:disabled { background:var(--ligne); color:#A49A8E; cursor:not-allowed; }

/* ── Champs ───────────────────────────────────────────────────────────────── */
input[type=text], input[type=password], input[type=email], input[type=date],
input[type=number], select, textarea {
  padding:9px 11px; width:100%; border:1px solid var(--ligne); border-radius:7px;
  font-size:14px; font-family:inherit; color:var(--encre); background:var(--carte);
  margin-bottom:10px; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent-clair);
  outline-offset:1px; border-color:var(--accent); }
label { display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
        color:var(--doux); font-weight:600; margin-bottom:4px; }
body.invite input[type=text], body.invite input[type=password] {
  text-align:center; font-size:16px; padding:11px; }

.consent { display:flex; gap:11px; align-items:flex-start; margin-bottom:14px;
           font-size:13px; }
.consent input { margin-top:3px; flex:none; width:auto; }
.consent label { text-transform:none; letter-spacing:0; font-size:13px;
                 font-weight:400; color:var(--encre); }
/* ⚠ LE LIBELLÉ PORTE LUI-MÊME LA CLASSE dans le devis (<label class="consent">) :
   la règle ci-dessus ne l'atteignait pas, et les deux consentements juridiques
   s'affichaient en capitales espacées, comme un intitulé de champ. */
label.consent { text-transform:none; letter-spacing:0; font-size:13px;
                font-weight:400; color:var(--encre); }

/* ── Tableaux ─────────────────────────────────────────────────────────────── */
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:9px 8px; border-bottom:1px solid var(--ligne-douce);
         font-size:13px; vertical-align:top; }
th { color:var(--doux); font-size:10.5px; text-transform:uppercase;
     letter-spacing:.07em; font-weight:600; }
tr:last-child th, tr:last-child td { border-bottom:none; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums;
                 white-space:nowrap; }

/* ── Messages et pastilles ────────────────────────────────────────────────── */
.flash { padding:11px 14px; border-radius:7px; margin-bottom:14px; font-size:13px; }
.flash.error, .flash.erreur { background:var(--erreur-fond); color:var(--erreur); }
.flash.ok { background:var(--ok-fond); color:var(--ok); }
body.invite .flash { text-align:center; }

.tag, .pill { display:inline-block; font-size:10.5px; padding:3px 9px;
  border-radius:99px; background:var(--neutre-fond); color:var(--neutre);
  font-weight:600; letter-spacing:.03em; }
.tag.ok, .pill.ok { background:var(--ok-fond); color:var(--ok); }
.tag.warn { background:var(--attente-fond); color:var(--attente); }
.tag.danger { background:var(--erreur-fond); color:var(--erreur); }

code { background:var(--ligne-douce); padding:2px 6px; border-radius:4px;
       font-size:12.5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* ── L'encart qu'on ne peut pas encore ouvrir ──────────────────────────────
   Il reste VISIBLE, flouté, avec la raison écrite par-dessus. Le masquer
   ferait disparaître la fonction : le client ne saurait pas qu'elle existe,
   ni ce qui la débloque. Le texte de fond est illisible à dessein — il donne
   la silhouette d'un contenu réel, ce qu'un rectangle vide ne fait pas. */
/* ⚠ LES DEUX COUCHES SE SUPERPOSENT DANS UNE GRILLE, pas en position
   absolue. En absolu, la hauteur du voile ne valait que celle du texte
   flouté : dès que la raison tenait sur deux lignes, elle DÉBORDAIT du cadre
   et se faisait couper. En grille, la case prend la plus haute des deux. */
.voile { display:grid; overflow:hidden; border-radius:7px; }
.voile > * { grid-area:1 / 1; }
.voile .dessous { filter:blur(4px); opacity:.5; user-select:none;
  pointer-events:none; font-size:13px; line-height:1.6; color:var(--doux);
  padding:14px 16px; }
.voile .dessus { display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:5px; text-align:center; padding:16px;
  background:rgba(250,248,245,.82); }
.voile .dessus strong { font-size:14px; color:var(--encre);
                        font-family:"Cormorant Garamond",Georgia,serif;
                        font-size:17px; }
.voile .dessus span { font-size:12px; color:var(--doux); max-width:22rem; }

/* ── Le bandeau d'aperçu admin ─────────────────────────────────────────────
   Dans le gabarit et non dans une page : il doit rester visible partout, y
   compris sur les CGV, pour qu'on ne croie jamais regarder sa propre session. */
.apercu { background:var(--attente-fond); color:var(--attente);
  border-bottom:1px solid #E6D7BD; padding:9px 26px; font-size:12px;
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; }
.apercu a { color:var(--attente); font-weight:600; white-space:nowrap; }

/* ── La grille de photos ──────────────────────────────────────────────────── */
.vignette { position:relative; background:var(--carte); border:1px solid var(--ligne);
            border-radius:9px; overflow:hidden; }
/* Ratio conservé, pas de recadrage : la galerie mélange du 2:3, du carré et des
   bandes photomaton 1:3. Un `cover` en 2:3 amputerait les deux derniers, alors
   que leur format EST l'information. Paysage, comme le boîtier. */
.vignette img, .vignette video { width:100%; display:block; aspect-ratio:3/2;
  object-fit:contain; background:var(--ligne-douce); }
/* Flèche de téléchargement posée SUR la vignette, révélée au survol : un bouton
   sous chaque image alourdissait une grille de cent photos. */
.vignette .tele { position:absolute; top:8px; right:8px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(47,42,37,.55); color:#FFF; text-decoration:none; font-size:15px;
  opacity:0; transition:opacity .15s; }
.vignette:hover .tele, .vignette:focus-within .tele { opacity:1; }
/* Sur écran tactile il n'y a pas de survol : la flèche reste visible. */
@media (hover:none) { .vignette .tele { opacity:.85; } }

@media (max-width:640px) {
  main { padding:18px 14px 48px; }
  header { padding:18px; }
  .card { padding:16px; }
}

/* ── Les conditions générales, mises en page depuis leur Markdown ─────────
   Elles s'affichaient dans un <pre>, donc en Markdown brut. Le texte est long
   et se lit d'un bout à l'autre : on lui donne de l'air, des titres qui se
   repèrent, et une citation qui se distingue sans crier. */
.cgv { font-size:0.95rem; line-height:1.65; }
.cgv h2 { font-size:19px; font-weight:600;
          margin:1.8rem 0 0.5rem; padding-top:1.1rem;
          border-top:1px solid var(--ligne-douce); }
.cgv h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.cgv p { margin:0 0 1rem; }
.cgv ul { margin:0 0 0.9rem; padding-left:1.1rem; }
.cgv li { margin-bottom:0.35rem; }
.cgv blockquote { margin:0 0 1.2rem; padding:0.8rem 1rem;
                  border-left:3px solid var(--accent);
                  background:var(--fond); color:var(--doux); }
.cgv blockquote p:last-child, .cgv p:last-child { margin-bottom:0; }
.cgv h3 { font-size:19px; font-weight:600; margin:2rem 0 0.6rem;
          padding-top:1.2rem; border-top:1px solid var(--ligne-douce); }
.cgv h2 + h3, .cgv h3:first-child { padding-top:0; border-top:0; margin-top:1rem; }
.cgv h4 { font-family:inherit; font-size:0.95rem; font-weight:600;
          margin:1.3rem 0 0.4rem; }
.cgv table { width:100%; border-collapse:collapse; margin:0 0 1.1rem;
             font-size:0.9rem; }
.cgv th, .cgv td { text-align:left; vertical-align:top; padding:0.5rem 0.6rem;
                   border-bottom:1px solid var(--ligne-douce); }
.cgv th { font-weight:600; color:var(--doux); }
.cgv ol { margin:0 0 0.9rem; padding-left:1.3rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   L'ESPACE CLIENT EN ONGLETS, 24/09/2026
   ═══════════════════════════════════════════════════════════════════════════
   Les composants de la fiche admin (`domaine/static/domaine.css` et
   `admin/templates/base.html`), repris pour le client : même en-tête, mêmes
   points d'étape, mêmes onglets, cartes sur deux colonnes. Décision de Brieuc :
   l'espace client prend la direction de l'admin. Recopiés et non liés, pour la
   raison dite en tête de ce fichier. */

.fiche-entete { display:flex; gap:20px; align-items:flex-start; }
.pastille-evenement { flex:none; width:84px; height:84px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:30px;
  color:#6B6055; background:linear-gradient(135deg, var(--accent-clair), var(--accent)); }
.fiche-infos { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.fiche-infos h1 { font-size:30px; }
.fiche-contacts { display:flex; gap:18px; flex-wrap:wrap; color:#4A423A; font-size:13px; }
.ligne-etape { display:flex; gap:10px; align-items:center; font-size:13px; font-weight:600; }

.points { display:inline-flex; gap:4px; }
.points span { width:8px; height:8px; border-radius:50%; background:#DDD5C9; }
.points span.fait { background:var(--encre); }

/* « À faire » : ce qu'on attend du client, et rien d'autre. */
.a-faire { margin-top:16px; padding:12px 16px; border-radius:8px;
  background:var(--attente-fond); }
.a-faire .lbl { margin:0 0 4px; color:var(--attente); }
.a-faire ul { margin:0; padding-left:18px; }
.a-faire li { margin:3px 0; }
.a-faire a { font-weight:600; }

.onglets { display:flex; gap:26px; margin:18px -22px 0; padding:0 22px;
  border-top:1px solid var(--ligne-douce); overflow-x:auto; }
.onglet { padding:12px 0; font-size:13px; font-weight:500; color:var(--doux);
  border-bottom:2px solid transparent; white-space:nowrap; text-decoration:none; }
.onglet:hover { color:var(--encre); }
.onglet.actif { color:var(--encre); font-weight:600; border-bottom-color:var(--encre); }
.onglet.plus-tard { color:#B3A99D; cursor:default; }
.onglet.plus-tard small { font-size:10.5px; margin-left:4px; }

section[data-onglet] { margin-top:18px; }
.bandeau-onglet { margin:0 0 12px; }

/* Deux colonnes, les cartes importantes sur toute la largeur. */
.grille-cartes { display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px; align-items:start; }
.grille-cartes .card { margin:0; }
.grille-cartes > .pleine { grid-column:1 / -1; }
@media (max-width:900px) {
  .grille-cartes { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .fiche-entete { gap:14px; }
  .pastille-evenement { width:56px; height:56px; font-size:22px; }
  .fiche-infos h1 { font-size:24px; }
  .onglets { gap:20px; margin:16px -16px 0; padding:0 16px; }
}

/* ── Le menu latéral de l'espace client (24/09/2026) ──────────────────────
   Repris du menu de l'admin (`domaine.css`), à l'identique : Brieuc veut la
   même direction des deux côtés. Il porte les onglets de l'espace, avec le
   logo Foliebooth au-dessus. Sur téléphone, il devient une barre en haut. */
body.avec-menu { display:flex; min-height:100vh; }
body.avec-menu > .page { flex:1; min-width:0; }
.menu { width:228px; flex:none; background:var(--menu); color:var(--fond);
  display:flex; flex-direction:column; padding:26px 14px 18px;
  position:sticky; top:0; height:100vh; }
.menu-marque { padding:0 12px 24px; display:flex; flex-direction:column; gap:6px; }
.menu-marque .serif { font-size:27px; line-height:1; color:var(--fond); }
.menu-marque .logo { width:100%; max-width:176px; height:auto; display:block; }
.menu-sous { font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#A89D90; }
.menu nav { display:flex; flex-direction:column; gap:2px; }
.menu-item { display:flex; align-items:center; gap:11px; min-height:38px;
  padding:0 12px; border-radius:6px; color:var(--menu-texte); font-size:13px;
  font-weight:500; text-decoration:none; }
.menu-item:hover { color:#FFF; background:var(--menu-actif); }
.menu-item.actif { background:var(--menu-actif); color:var(--fond); }
.menu-item.plus-tard { color:var(--menu-eteint); cursor:default; padding-top:6px;
  padding-bottom:6px; }
.menu-item.plus-tard:hover { background:none; color:var(--menu-eteint); }
.menu-item.plus-tard small { display:block; font-size:10.5px; font-weight:400; }
.menu-item svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.menu-bas { margin-top:auto; padding-top:12px; border-top:1px solid var(--menu-actif); }
.menu-compte { display:flex; align-items:center; gap:10px; padding:10px 12px 0; }
.pastille-compte { width:30px; height:30px; border-radius:50%; background:var(--accent);
  color:var(--encre); display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:12px; flex:none; }
.menu-identifiant { display:block; font-size:12.5px; color:var(--fond); }

body.avec-menu main.large { max-width:1240px; }

@media (max-width:900px) {
  body.avec-menu { flex-direction:column; }
  .menu { width:auto; height:auto; position:static; flex-direction:row;
    align-items:center; gap:14px; padding:12px 14px; overflow-x:auto; }
  .menu-marque { padding:0 8px 0 4px; }
  .menu-marque .serif { font-size:20px; }
  .menu-sous, .menu-bas, .menu-item.plus-tard small { display:none; }
  .menu nav { flex-direction:row; }
  .menu-item { white-space:nowrap; }
}

/* Le choix de l'impression, au moment de signer le devis (24/09/2026). */
.choix-impression { border:1px solid var(--ligne); border-radius:8px;
  padding:12px 16px 8px; margin:0 0 14px; }
.choix-impression legend { font-family:"Cormorant Garamond",Georgia,serif;
  font-size:17px; font-weight:600; padding:0 6px; }
.choix-impression label { display:flex; gap:10px; align-items:baseline;
  text-transform:none; letter-spacing:0; font-size:13px; font-weight:400;
  color:var(--encre); margin:0 0 8px; }
.choix-impression input { width:auto; margin:0; }

/* Les boutons de paiement alignés à droite (24/09/2026). */
.table-paiements td:last-child, .table-paiements th:last-child { text-align:right; }

/* ═══ LES TUILES DE PERSONNALISATION (24/09/2026) ════════════════════════════
   ON : fond blanc, pictogramme sur pastille taupe, interrupteur plein.
   OFF : MÊME TAILLE, texte lisible ; seul le fond passe au neutre et le
   pictogramme au gris. Au survol, la tuile s'éclaire : c'est une invitation,
   pas un retrait (Brieuc). */
/* ═══ LA MOSAÏQUE ILLUSTRÉE (24/09/2026, option D retenue sur maquette) ═══
   Photo en grand à gauche, Vidéo et QR côte à côte, Défis en large dessous. */
.mosaique { display:grid; gap:12px; margin-top:12px;
  grid-template-columns:1.35fr 2fr;
  grid-template-areas:"photo video" "photo defis"; }
@media (max-width:1100px) {
  .mosaique { grid-template-columns:1fr 1fr;
    grid-template-areas:"photo photo" "video video" "defis defis"; } }
@media (max-width:640px) {
  .mosaique { grid-template-columns:1fr; grid-template-areas:"photo" "video" "defis"; } }
.mode-carte { border:1px solid var(--ligne); border-radius:12px; background:var(--neutre-fond);
  padding:14px 16px; display:flex; flex-direction:column; gap:12px; transition:background .15s, border-color .15s; }
.mode-carte.on { background:var(--carte); border-color:var(--accent); }
/* Le QR à l'écran, sous une ligne fine : une rangée à lui, l'illustration à
   gauche, le texte et l'interrupteur à droite. */
.mosaique-apart { border-top:1px solid var(--ligne); margin-top:16px; padding-top:16px;
  display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
@media (max-width:900px) { .mosaique-apart { grid-template-columns:1fr; } }
/* Les réglages du livre d'or, ouverts sous les options quand il est allumé. */
.option-colonne { display:flex; flex-direction:column; }
/* Le tiroir du livre d'or : il se déplie par le bas (grille 0fr → 1fr). */
.livre-tiroir { display:grid; grid-template-rows:1fr; margin-top:10px; opacity:1;
  transition:grid-template-rows .35s ease, opacity .3s ease, margin-top .35s ease; }
.livre-tiroir.replie { grid-template-rows:0fr; opacity:0; margin-top:0; }
.livre-tiroir-interieur { overflow:hidden; min-height:0; }
.livre-erreur { margin:0; font-size:12.5px; color:var(--erreur); }
.livre-erreur:empty { display:none; }
.livre-reglages { background:var(--fond); border-radius:10px; padding:14px 16px;
  display:flex; flex-direction:column; gap:12px; font-size:13px; }
.livre-intro { margin:0; color:var(--doux); }
.livre-fige { margin:0; color:var(--attente); }
.livre-message { display:flex; align-items:center; gap:12px; background:var(--carte);
  border:1px solid var(--ligne); border-radius:10px; padding:10px 12px; }
.livre-message form { margin:0; }
.livre-message-corps { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
/* Le lecteur maison : le même dans tous les navigateurs. */
.lecteur { display:flex; align-items:center; gap:10px; width:100%; }
.lecteur audio { display:none; }
.lecteur-bouton { display:flex; align-items:center; justify-content:center; flex:none; width:34px; height:34px;
  padding:0; border-radius:50%; background:var(--encre); color:var(--fond); }
.lecteur-bouton svg { width:14px; height:14px; fill:currentColor; stroke:none; }
.lecteur .lecteur-pause, .lecteur.en-cours .lecteur-lire { display:none; }
.lecteur.en-cours .lecteur-pause { display:block; }
.lecteur-barre { flex:1; height:6px; border-radius:99px; background:var(--ligne); cursor:pointer; overflow:hidden; }
.lecteur-barre span { display:block; height:100%; width:0; background:var(--encre); border-radius:99px; }
.lecteur-temps { flex:none; min-width:2.6em; text-align:right; font-size:12px; color:var(--doux);
  font-variant-numeric:tabular-nums; }
.livre-icone { display:flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px;
  border-radius:50%; background:var(--accent-clair); }
.livre-reglages svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }
.livre-retirer { background:none; color:#a15c46; padding:6px; border-radius:8px; }
.livre-retirer:hover { background:#F6E6E2; color:#a15c46; }
.livre-actions { display:flex; flex-direction:column; gap:8px; }
.livre-actions form { margin:0; }
.livre-bouton { display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:10px 14px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;
  text-transform:none; letter-spacing:0; margin:0; }
label.livre-bouton, .livre-bouton.sec { background:var(--carte); color:var(--encre); border:1px solid var(--ligne); }
label.livre-bouton:hover, .livre-bouton.sec:hover { background:#F6F2EC; }
.livre-chrono { display:block; text-align:center; font-size:12px; color:var(--doux); margin-top:4px; }
.livre-chrono:empty { display:none; }
#micro-relecture { margin-top:8px; display:flex; flex-direction:column; gap:8px; }
.livre-choix { display:flex; gap:8px; }
.apart-titre { grid-column:1 / -1; margin:0; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--doux); font-weight:600; }
.mosaique-apart .mode-carte { flex-direction:row; align-items:center; }
.mosaique-apart .mode-carte .art { width:120px; min-height:0; height:110px; flex:none; }
.mosaique-apart .mode-carte .tuile-form { flex:1; }
/* Dans la mosaïque, la bascule d'en-tête n'a pas de cadre à elle : c'est la
   tuile du mode qui en porte un. */
.mode-carte .tuile.tete { border:0; background:transparent; padding:0; box-shadow:none; }
.mode-carte .tuile.tete:hover { background:transparent; box-shadow:none; }
.formats { display:grid; grid-template-columns:1fr 1fr; gap:10px; flex:1; }
.tuile.format { flex-direction:column; justify-content:space-between; text-align:center;
  padding:12px; background:var(--fond); }
.tuile.format.on { background:var(--carte); }
.tuile.format .tuile-texte { align-items:center; }
.tuile.defi { padding:10px 12px; background:var(--fond); }
.tuile.defi.on { background:var(--carte); }
.tuile-form.tuile-format { display:flex; }
.tuile-form.tuile-format .tuile { flex:1; }

/* Les illustrations : ce que l'invité obtient. */
.art { display:flex; align-items:center; justify-content:center; border-radius:10px;
  background:var(--fond); min-height:118px; width:100%; transition:filter .15s, opacity .15s; }
.tuile.format .art { flex:1; min-height:130px; background:transparent; }
.mode-carte:not(.on) .art, .tuile:not(.on) .art, .tuile.sous-coupe .art { filter:grayscale(1); opacity:.5; }
.tirage { display:block; width:60px; height:76px; background:#fff; padding:6px 6px 15px;
  box-shadow:0 3px 10px rgba(0,0,0,.12); transform:rotate(-4deg); }
.tirage span, .bande-art span { display:block; width:100%; height:100%;
  background:linear-gradient(135deg,#D9CBB5,#B9A68A); }
.bande-art { display:flex; flex-direction:column; gap:3px; width:34px; height:104px; background:#fff;
  padding:4px; box-shadow:0 3px 10px rgba(0,0,0,.12); transform:rotate(3deg); }
.bande-art span { flex:1; }
.video-art { position:relative; display:flex; align-items:center; justify-content:center;
  width:150px; height:86px; border-radius:8px; background:linear-gradient(135deg,#8A7F74,#4A423A); }
.video-art::after { content:""; margin-left:5px; border-left:18px solid #fff;
  border-top:11px solid transparent; border-bottom:11px solid transparent; }
.video-art em { position:absolute; right:8px; bottom:6px; color:#fff; font-size:10px; font-style:normal; }
.tel-art { display:flex; align-items:center; justify-content:center; width:54px; height:96px;
  border-radius:10px; border:3px solid var(--encre); background:#fff; }
.tel-art svg { width:30px; height:30px; fill:none; stroke:var(--encre); stroke-width:1.6; }
.tuile.defi .art { width:auto; min-height:0; background:transparent; flex:none; }
.moments { display:flex; align-items:center; gap:10px; }
.moment { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10.5px; color:var(--doux); }
.moment .tirage { transform:none; width:40px; height:50px; padding:3px 3px 9px; }
.fleche { color:var(--accent); font-size:18px; }
.tuile-form { margin:0; }
.tuile { width:100%; display:flex; align-items:center; gap:14px; text-align:left;
  padding:14px 16px; border-radius:10px; border:1px solid var(--ligne);
  background:var(--neutre-fond); color:var(--encre); cursor:pointer;
  font:inherit; line-height:1.35; transition:background .15s, border-color .15s, box-shadow .15s; }
.tuile:hover { background:#F7F3EC; border-color:var(--accent); color:var(--encre);
  box-shadow:0 2px 8px rgba(47,42,37,.06); }
.tuile.on { background:var(--carte); border-color:var(--accent); }
.tuile .picto { flex:none; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#E6E1D9; color:#9A9086; transition:background .15s, color .15s; }
.tuile.on .picto { background:var(--accent-clair); color:var(--encre); }
.tuile .picto svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.tuile-texte { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tuile-texte strong { font-size:14px; }
.tuile-texte span, .tuile-texte em { font-size:12.5px; color:var(--doux); }
/* Le refus passe SOUS la tuile, sur toute sa largeur : dans la rangée, il
   écrasait le texte en une colonne d'un mot par ligne (vu le 25/09/2026). */
.tuile { flex-wrap:wrap; }
.tuile.format { flex-wrap:nowrap; }
.tuile.format .tuile-erreur { flex:none; width:100%; text-align:center; }
.tuile-erreur { order:9; flex:1 0 100%; font-size:12.5px; line-height:1.4; text-align:left;
  color:var(--erreur) !important; }
.tuile-erreur:empty { display:none; }
/* L'interrupteur, dessiné et non natif : la tuile entière est le bouton. */
.bascule { flex:none; width:44px; height:24px; border-radius:99px; position:relative;
  background:transparent; border:1.5px solid #B9AFA3; transition:background .15s, border-color .15s; }
.bascule span { position:absolute; top:2.5px; left:3px; width:16px; height:16px; border-radius:50%;
  background:#B9AFA3; transition:left .15s, background .15s; }
.tuile.on .bascule { background:var(--encre); border-color:var(--encre); }
.tuile.on .bascule span { left:22px; background:var(--fond); }
.tuile:disabled { cursor:default; }
.tuile:disabled:hover { box-shadow:none; background:var(--neutre-fond); border-color:var(--ligne); }
.tuile.on:disabled:hover { background:var(--carte); border-color:var(--accent); }
.tuile:disabled .bascule { opacity:.45; }
/* Un format sous un parent coupé : il garde son état, mais ne compte pas. */
.tuile.sous-coupe, .tuile.sous-coupe.on { background:transparent; cursor:default; }
.tuile.sous-coupe .picto { background:#E6E1D9; color:#B3A99D; }
.tuile.sous-coupe .tuile-texte strong, .tuile.sous-coupe .tuile-texte span { color:#A49A8E; }
.tuile.sous-coupe .bascule { background:transparent; border-color:#CFC6BA; }
.tuile.sous-coupe .bascule span { left:3px; background:#CFC6BA; }
.tuile-note { margin:0; padding:8px 14px; font-size:12px; border-top:1px solid var(--ligne-douce); }

/* Le « ? » d'un défi et sa bulle (24/09/2026). */
.aide { position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:6px; border-radius:50%; border:1px solid var(--accent);
  font-size:10.5px; font-weight:600; color:var(--doux); cursor:help; vertical-align:1px; }
.aide .bulle { display:none; position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  width:max-content; max-width:240px; padding:7px 10px; border-radius:7px; background:var(--encre);
  color:var(--fond); font-size:12px; font-weight:400; line-height:1.4; text-align:left; z-index:5;
  box-shadow:0 4px 14px rgba(0,0,0,.18); text-transform:none; letter-spacing:normal; }
.aide:hover .bulle, .aide:focus .bulle, .aide.ouverte .bulle { display:block; }

/* ── Carte des tirages (25/09/2026) ───────────────────────────────────────────
   Design, formats, cadre perso et offre d'impression dans une seule carte.
   Sans formule, elle se regarde : interrupteurs éteints, offre à droite. */
.tirages svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }
.tirages-tete { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.tirages-tete h3 { margin:0; }
.tirages-etat { display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; font-weight:600; color:var(--doux); background:var(--fond);
  padding:4px 10px; border-radius:99px; }
.tirages-etat.ferme { color:var(--attente); background:var(--attente-fond); }
.tirages-etat svg { width:14px; height:14px; }
.tirages-cadenas { margin:10px 0 0; font-size:13px; color:var(--doux); }
.tirages-corps { display:grid; grid-template-columns:1fr; gap:28px; margin-top:18px; }
.tirages-corps.avec-offre { grid-template-columns:1.5fr 1fr; }
.tirages-etape { display:flex; align-items:center; gap:6px; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--doux); font-weight:600; margin:0 0 8px; }
.tirages-etape { flex-wrap:wrap; }
/* L'alerte du dernier format : une bande rouge à côté du titre, qui s'efface. */
.tirages-alerte { text-transform:none; letter-spacing:normal; font-size:12px; font-weight:500;
  color:#a15c46; background:#f7e6e0; border-left:3px solid #a15c46; border-radius:6px;
  padding:5px 10px; margin-left:6px; line-height:1.35; opacity:0; transform:translateX(-4px);
  transition:opacity .25s ease, transform .25s ease; }
.tirages-alerte.visible { opacity:1; transform:none; }
/* Sous un titre d'étape, la bulle ne reprend ni ses capitales ni sa largeur étroite. */
.tirages-etape .aide .bulle { max-width:none; width:min(340px, 80vw); }
.tirages-designs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.tirages-design { display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:99px;
  border:1.5px solid var(--ligne); background:var(--carte); color:var(--encre); font-size:13px; font-weight:400; }
.tirages-design:hover { background:var(--carte); color:var(--encre); border-color:var(--accent); }
.tirages-design.on { border-color:var(--encre); box-shadow:0 0 0 1px var(--encre); }
.tirages .pastille { width:22px; height:22px; border-radius:50%; border:1px solid var(--ligne); }
.tirages .p-blanc { background:#fff; } .tirages .p-alf_a { background:#F3EEE6; }
.tirages .p-alf_b { background:#C9BBA9; }
.tirages .p-perso { background:repeating-linear-gradient(45deg,#FAF8F5 0 4px,#E6E1D9 4px 8px); }
.tirages-erreur { display:block; color:#a15c46; font-size:12px; margin:0 0 8px; min-height:0; }
.tirages-erreur:empty { display:none; }
.tirages-formats { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:6px;
  align-items:start; }
.tirages-avis { font-size:12.5px; color:var(--attente); background:var(--attente-fond);
  border-radius:8px; padding:8px 12px; margin:0 0 10px; }
.tirages-corps:not(.avec-offre) .tirages-formats { grid-template-columns:repeat(6, 1fr); }
.tirage-format { display:flex; flex-direction:column; gap:8px; border:1px solid var(--ligne);
  border-radius:12px; padding:10px; background:var(--carte); transition:border-color .15s; }
.tirage-format.on { border-color:var(--encre); }
/* Coupé : estompé, mais EN COULEUR (Brieuc, 25/09/2026). En gris, le design
   grège paraissait gris, et redevenait grège en grand. */
.tirage-format.coupe .tirage-vignette img { opacity:.4; }
.tirage-vignette { position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:3/2; padding:0; border:0; background:var(--fond); border-radius:8px; cursor:zoom-in; overflow:hidden; }
.tirage-vignette:hover { background:var(--fond); }
/* L'image REMPLIT une boîte fixe et s'y ajuste (`contain`) : en pourcentages
   de hauteur, certains navigateurs ne savaient pas la résoudre dans un bouton
   en flex, et la bande photomaton sortait zoomée, coupée en haut et en bas.
   L'ombre suit les pixels (drop-shadow), pas la boîte. */
.tirage-vignette img { position:absolute; inset:7%; width:86%; height:86%; object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.16)); }
.tirage-format.bande .tirage-vignette img { inset:4% 7%; height:92%; }
/* SANS FORMULE, TOUT LE RÉGLAGE EST FLOU (Brieuc, 25/09/2026) : designs,
   formats et QR, d'un bloc, et `inert` dans le gabarit pour qu'aucun clic ni
   survol n'y passe. L'offre, à côté, reste nette. */
.tirages.verrouillee .tirages-config { filter:blur(4px); opacity:.75; user-select:none; pointer-events:none; }
.tirages.verrouillee .tirage-vignette img { transition:opacity .6s ease; }
/* « Favoris » : rouge, un cœur qui respire doucement (Brieuc, 25/09/2026). */
.tirage-format { position:relative; }
.tirage-prefere { position:absolute; top:-10px; left:12px; z-index:2; display:inline-flex; align-items:center; gap:5px;
  background:#C8413B; color:#fff; font-size:10.5px; font-weight:600; letter-spacing:.03em;
  padding:3px 10px 3px 8px; border-radius:99px; box-shadow:0 2px 8px rgba(200,65,59,.35);
  animation:respire 2.8s ease-in-out infinite; transform-origin:left center; }
.tirage-prefere .coeur { font-size:12px; line-height:1; animation:bat 2.8s ease-in-out infinite; }
@keyframes respire { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.05); } }
@keyframes bat { 0%, 60%, 100% { transform:scale(1); } 20% { transform:scale(1.25); } 35% { transform:scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .tirage-prefere, .tirage-prefere .coeur { animation:none; } }
.tirage-cadenas { display:inline-flex; color:var(--attente); }
.tirage-cadenas svg { width:17px; height:17px; }
/* Une ALERTE, pas une information (Brieuc, 25/09/2026) : teinte rouge douce,
   point d'exclamation. */
.tirages-verrou { display:flex; gap:14px; align-items:center; margin-top:14px; padding:14px 16px;
  border-radius:10px; background:#F9E6E3; border:1px solid #EFC9C3; color:#8E3029; }
.tirages-verrou strong { display:block; font-size:14.5px; color:#7A2620; }
.tirages-verrou span { font-size:13px; }
.tirages-verrou-icone { display:flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; border-radius:50%; background:#C8413B; color:#fff;
  font-weight:700; font-size:18px; line-height:1; }
.tirage-pied { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tirage-pied strong { display:block; font-size:13px; }
.tirage-pied small, .tirage-note { display:block; font-size:11.5px; color:var(--doux); line-height:1.35; }
.tirage-mode { font-size:11px; color:var(--doux); background:var(--fond); padding:3px 9px; border-radius:99px; }
.tirage-bascule { margin:0; }
.tirage-bascule.ligne, .tirages-defaut { display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 0; border-top:1px solid var(--ligne-douce); margin:0; }
.tirage-bascule.ligne small, .tirages-defaut small { display:block; font-size:12px; color:var(--doux); }
.tirages-defaut select { width:auto; min-width:11rem; }
.tirages-reglages { margin-top:10px; }
.interrupteur { position:relative; width:38px; height:22px; padding:0; border-radius:99px; flex:none;
  background:var(--ligne); border:0; }
.interrupteur span { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:left .15s; }
.interrupteur.on { background:var(--encre); }
.interrupteur.on span { left:19px; }
.interrupteur:hover { background:var(--accent); } .interrupteur.on:hover { background:var(--encre); }
.interrupteur:disabled { background:var(--ligne-douce); cursor:not-allowed; }
.interrupteur:disabled span { box-shadow:none; }
.tirages-perso { background:var(--fond); border-radius:10px; padding:14px 16px; margin:4px 0 16px; font-size:13px; }
.tirages-perso p { margin:0 0 10px; }
.perso-ligne { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 0;
  border-top:1px solid var(--ligne); }
.perso-ligne img, .perso-vide { width:96px; aspect-ratio:3/2; object-fit:contain; background:var(--carte);
  border:1px solid var(--ligne); border-radius:6px; flex:none; }
.perso-vide { display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--doux); }
.perso-infos { flex:1; min-width:12rem; display:flex; flex-direction:column; gap:2px; }
.perso-ok { color:var(--ok); font-size:12px; } .perso-attente { color:var(--attente); font-size:12px; }
.perso-infos a { font-size:12px; }
.perso-depot { display:flex; gap:8px; align-items:center; margin:0; flex-wrap:wrap; }
.perso-depot input[type=file] { width:auto; max-width:14rem; font-size:12px; padding:6px; }
.perso-droits { font-size:11.5px; margin-top:8px !important; }
.tirages-avantages { list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:10px; }
.tirages-avantages li { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; }
.tirages-avantages svg { color:var(--ok); }
.tirages-formules { display:flex; flex-direction:column; gap:12px; }
.tirages-formule { position:relative; display:flex; align-items:center; gap:14px; cursor:pointer;
  border:1.5px solid var(--ligne); border-radius:12px; padding:14px 16px; margin:0; background:var(--carte);
  text-transform:none; letter-spacing:0; font-weight:400; color:var(--encre); font-size:13px; }
.tirages-formule input { width:auto; margin:0; accent-color:var(--encre); }
.tirages-formule .qte { flex:1; color:var(--doux); }
.tirages-formule .qte strong { display:block; font-size:15px; color:var(--encre); }
.tirages-formule .prix { text-align:right; }
.tirages-formule .prix strong { display:block; font-family:"Cormorant Garamond",Georgia,serif;
  font-size:24px; line-height:1; }
.tirages-formule .prix small { color:var(--doux); }
.tirages-formule:has(input:checked) { border-color:var(--encre); box-shadow:0 0 0 1px var(--encre); }
.tirages-badge { position:absolute; top:-10px; left:14px; background:var(--ok); color:#fff;
  font-size:10.5px; letter-spacing:.04em; padding:3px 10px; border-radius:99px; }
.tirages-formule.meilleure .prix small { color:var(--ok); font-weight:600; }
.tirages-cta { width:100%; padding:13px; font-size:14px; font-weight:600; margin-top:14px; }
.tirages-note-offre { font-size:12px; color:var(--doux); margin:8px 0 0; }
.tirages-grand { border:0; border-radius:12px; padding:18px; max-width:min(920px, 94vw); background:var(--carte);
  opacity:0; transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .25s ease; }
.tirages-grand.ouvert { opacity:1; }
.tirages-grand::backdrop { background:rgba(47,42,37,.55); opacity:0; transition:opacity .3s ease; }
.tirages-grand.ouvert::backdrop { opacity:1; }
.tirages-grand.bande img { max-height:80vh; }
.tirages-grand img { display:block; max-width:100%; max-height:72vh; margin:0 auto; box-shadow:0 4px 18px rgba(0,0,0,.18); }
.tirages-grand p { margin:12px 0 0; font-size:13px; } .tirages-grand p strong { margin-right:8px; }
.tirages-grand form { position:absolute; top:8px; right:8px; margin:0; }
.tirages-grand .fermer { background:none; color:var(--encre); font-size:22px; padding:0 8px; line-height:1; }
@media (max-width:1300px) {
  .tirages-corps:not(.avec-offre) .tirages-formats { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:1000px) {
  .tirages-corps.avec-offre { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .tirages-formats { grid-template-columns:repeat(2, 1fr); }
}

/* ── Carte des tirages, deuxième passe (25/09/2026) ─────────────────────── */
.tirages-tete-gauche { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tirages-plus { margin:0; }
.tirages-plus-bouton { display:inline-flex; align-items:center; gap:7px; padding:6px 14px 6px 10px;
  border-radius:99px; background:var(--ok-fond); color:var(--ok); border:1px solid #C9DCCD;
  font-size:12.5px; font-weight:600; }
.tirages-plus-bouton:hover { background:#D6E7DA; color:var(--ok); }
.tirages-plus-bouton svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.tirages-plus-bouton strong { background:var(--ok); color:#fff; border-radius:99px; padding:1px 8px; }
.tirages-ligne { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.tirages-ligne .tirages-etape { margin:0; }
.qr-compact { display:flex; align-items:center; gap:10px; margin:0; font-size:12.5px; color:var(--encre); }
.tirages-designs { margin-top:8px; }
.tirage-pied .aide { margin-left:4px; }
/* Le « ? » du photomaton reste sur la ligne du nom : sur la ligne d'après, la
   tuile devenait plus haute que les autres. */
.tirage-pied > span:first-child { display:flex; align-items:center; white-space:nowrap; }
.tirage-pied > span:first-child strong { display:inline; }
.tirage-pied .bulle { white-space:normal; left:auto; right:-8px; transform:none; }
/* Le tiroir « Votre design » */
.tirages-perso { margin-top:18px; padding:18px; border-radius:12px; background:var(--fond);
  display:flex; flex-direction:column; gap:16px; font-size:13px; }
.tirages-perso > .tirages-etape { margin:0; }
.perso-etapes { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.perso-etapes li { display:flex; flex-direction:column; gap:4px; background:var(--carte); border:1px solid var(--ligne);
  border-radius:10px; padding:12px 14px; counter-increment:etape; }
.perso-etapes li span:last-child { color:var(--doux); font-size:12.5px; }
.perso-etape-icone { display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; background:var(--accent-clair); margin-bottom:4px; }
.tirages-perso svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }
.perso-consignes { background:var(--carte); border:1px solid var(--ligne); border-radius:10px; padding:14px 16px; }
.perso-consignes-tete { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.perso-consignes ul { margin:10px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:5px; color:var(--encre); }
.perso-copier { width:auto; padding:6px 12px; font-size:12px; }
.perso-lignes { display:flex; flex-direction:column; gap:10px; }
.tirages-perso .perso-ligne { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 12px;
  border:1px solid var(--ligne); border-top:1px solid var(--ligne); border-radius:10px; background:var(--carte); }
.tirages-perso .perso-ligne[hidden] { display:none; }
.perso-apercu { display:flex; align-items:center; justify-content:center; width:110px; aspect-ratio:3/2; flex:none;
  border-radius:6px; background:var(--fond); overflow:hidden; font-size:11px; color:var(--doux); }
.perso-apercu img { width:100%; height:100%; object-fit:contain; }
.tirages-perso .perso-infos small { color:var(--doux); font-size:11.5px; }
.perso-etat { font-size:12px; } .perso-etat.ok { color:var(--ok); } .perso-etat.attente { color:var(--attente); }
.perso-verdict { font-size:12px; } .perso-verdict:empty { display:none; }
.perso-verdict.ko { color:var(--erreur); } .perso-verdict.bon { color:var(--ok); } .perso-verdict.avis { color:var(--attente); }
.perso-actions { display:flex; align-items:center; gap:8px; }
.perso-actions form { margin:0; }
.perso-actions .livre-bouton { width:auto; padding:8px 12px; text-decoration:none; }
.perso-actions label.livre-bouton:not(.sec) { background:var(--encre); color:var(--fond); border:0; }
@media (max-width:760px) { .perso-etapes { grid-template-columns:1fr; } }

/* Le QR code, mis en avant : une bande à lui en tête de carte. */
.qr-bande { display:flex; align-items:center; gap:14px; margin:0 0 16px; padding:14px 16px; border-radius:12px;
  border:1.5px solid var(--ligne); background:var(--fond); transition:background .15s, border-color .15s; }
.qr-bande.on { background:var(--carte); border-color:var(--encre); }
.qr-bande-icone { display:flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px;
  border-radius:12px; background:var(--encre); color:var(--fond); }
.qr-bande:not(.on) .qr-bande-icone { background:var(--ligne); color:var(--doux); }
.qr-bande-icone svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; }
.qr-bande-texte { flex:1; display:flex; flex-direction:column; gap:2px; }
.qr-bande-texte strong { font-size:14.5px; }
.qr-bande-texte span { font-size:12.5px; color:var(--doux); }

/* Les trois étapes sont CHRONOLOGIQUES : un numéro les ordonne (25/09/2026). */
.perso-etapes li { position:relative; }
.perso-etape-numero { position:absolute; top:12px; right:14px; font-family:"Cormorant Garamond",Georgia,serif;
  font-size:26px; line-height:1; color:var(--accent); }

/* Une option annoncée, pas encore branchée : lisible, mais rien ne se touche. */
.option-bientot .tuile { cursor:default; opacity:.7; }
/* Le livre d'or à gauche sur deux rangées (ses réglages s'y déplient), le QR
   puis le diaporama l'un sous l'autre à droite : plus de trou sous le QR. */
/* Deux colonnes empilées (26/09/2026) : livre d'or à gauche, QR, dernières
   impressions et diaporama à droite. Un tiroir qui s'ouvre pousse ce qui est
   dessous, et l'animation du tiroir le fait glisser. */
.option-droite { gap:12px; }
.option-droite > .option-colonne { display:flex; flex-direction:column; }

/* L'aperçu d'un cadre importé est un bouton : il s'ouvre en grand. */
button.perso-apercu { padding:0; border:0; color:var(--doux); cursor:zoom-in; }
button.perso-apercu:hover { background:var(--fond); }
button.perso-apercu:disabled { cursor:default; background:var(--fond); }

/* Dernières impressions (26/09/2026) : une heure et un choix, rien d'autre. */
.fin-ligne { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fin-lbl { font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.fin-heure { margin:0; }
.fin-heure input { width:auto; margin:0; height:34px; padding:0 10px; font-size:13px;
  border:1px solid var(--ligne); border-radius:8px; background:var(--carte);
  transition:border-color .3s, box-shadow .3s; }
.fin-heure input.a-remplir { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-clair); }
.fin-heure input.enregistre { border-color:#6f9a6a; box-shadow:0 0 0 3px #e3eee1; }
.fin-impose { color:var(--doux); font-size:12px; }
.fin-choix { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; }
.fin-choix button { display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin:0;
  padding:10px 12px; border-radius:10px; text-align:left; text-transform:none; letter-spacing:0;
  background:var(--carte); color:var(--encre); border:1px solid var(--ligne); cursor:pointer; }
.fin-choix button strong { font-size:13px; }
.fin-choix button span { font-size:12px; font-weight:400; color:var(--doux); }
.fin-choix button.on { border-color:var(--encre); box-shadow:inset 0 0 0 1px var(--encre); }
@media (max-width:520px) { .fin-choix { grid-template-columns:1fr; } }
/* Les « ? » des tiroirs restent DANS le tiroir, qui cache ce qui dépasse pour
   son animation : vers le bas pour « À partir de », vers le haut pour le
   choix, posé en bas. Sans script (un observateur a figé la page, 26/09). */
.livre-tiroir .aide .bulle { top:calc(100% + 6px); bottom:auto; left:-8px; transform:none;
  white-space:normal; width:min(400px, 75vw); max-width:none; }
.fin-choix .aide .bulle { width:220px; }
.fin-choix .aide { margin-left:4px; }
.fin-choix button { justify-content:center; min-height:44px; }
.fin-choix .aide .bulle { left:auto; right:-8px; top:auto; bottom:calc(100% + 6px); }

/* Le jour J, à droite de l'en-tête (26/09/2026) : code et contact sur place. */
.jourj { flex:none; display:flex; flex-direction:column; gap:12px; width:280px;
  padding-left:22px; border-left:1px solid var(--ligne); align-self:center; }
.jourj-ligne { display:flex; flex-direction:column; gap:2px; }
.jourj-lbl { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--doux);
  font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.jourj-lbl .bulle { text-transform:none; letter-spacing:0; white-space:normal; width:230px;
  left:auto; right:-8px; transform:none; top:calc(100% + 6px); bottom:auto; }
.jourj-valeur { display:flex; align-items:center; gap:6px; font-size:15px; }
.jourj-editer { background:none; color:var(--doux); padding:4px; margin:0; border-radius:6px; display:flex; }
.jourj-editer:hover { background:var(--fond); color:var(--encre); }
.jourj-editer svg, .jourj-cadenas svg { width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.jourj-cadenas { color:var(--doux); display:flex; }
.jourj-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; margin:0;
  padding:14px 16px; background:var(--fond); border-radius:10px; font-size:13px; }
.jourj-form label { display:flex; flex-direction:column; gap:4px; font-weight:600; margin:0; }
.jourj-form label .doux { font-weight:400; }
.jourj-form input[type=text], .jourj-form input[type=email] { margin:0; width:220px; }
.jourj-form button { margin:0; }
.jourj-note { flex-basis:100%; margin:0; font-size:12px; color:var(--doux); }
@media (max-width:760px) { .fiche-entete { flex-wrap:wrap; }
  .jourj { flex-basis:100%; padding-left:0; border-left:0; border-top:1px solid var(--ligne); padding-top:12px; } }
.fin-choix button { align-items:center; text-align:center; }
.jourj-vide { color:var(--attente); }
/* Le jour J compact (26/09/2026) : le code se modifie sur sa ligne, le contact
   dans une fenêtre flottante. L'en-tête ne change jamais de hauteur. */
.jourj-inline { margin:0; align-items:center; gap:4px; }
.jourj-inline:not([hidden]) { display:flex; }
.jourj-inline input { width:92px; height:30px; margin:0; padding:0 8px; font-size:15px; font-weight:600;
  letter-spacing:.08em; font-variant-numeric:tabular-nums; }
.jourj-ok { color:var(--encre); }
.jourj-ancre { position:relative; }
.jourj-pop { position:absolute; right:0; top:calc(100% + 8px); width:300px; z-index:30;
  background:var(--carte); border:1px solid var(--ligne); border-radius:12px; padding:14px;
  box-shadow:0 14px 34px rgba(40,30,20,.16); animation:jourj-pop .18s ease-out; }
@keyframes jourj-pop { from { opacity:0; transform:translateY(-4px); } }
.jourj-pop .jourj-form { flex-direction:column; align-items:stretch; flex-wrap:nowrap;
  padding:0; background:none; gap:8px; }
.jourj-pop .jourj-form input[type=text], .jourj-pop .jourj-form input[type=email] { width:100%; }
.jourj-pop-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:2px; }
@media (max-width:760px) { .jourj-pop { left:0; right:auto; width:min(300px, 100%); } }
.jourj-valeur[hidden], .jourj-pop[hidden] { display:none; }
.perso-limite { display:block; margin-top:4px; font-style:normal; font-weight:600; color:var(--attente); }
/* Le « ? » du bandeau de l'onglet : bulle à droite, jamais coupée à gauche. */
.bandeau-onglet .aide { margin-left:4px; vertical-align:middle; }
.bandeau-onglet .aide .bulle { left:-8px; transform:none; white-space:normal; width:min(340px, 80vw); max-width:none; }
/* L'en-tête de la carte des tirages en trois colonnes égales sur les côtés :
   le bouton du milieu tombe au centre exact, quel que soit l'état à droite. */
.tirages-tete { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.tirages-tete .tirages-tete-gauche { grid-column:1; justify-self:start; }
.tirages-tete .tirages-plus { grid-column:2; justify-self:center; }
.tirages-tete .tirages-etat { grid-column:3; justify-self:end; }
@media (max-width:760px) { .tirages-tete { grid-template-columns:1fr; }
  .tirages-tete .tirages-plus, .tirages-tete .tirages-etat { grid-column:1; justify-self:start; } }

/* ── La caution en frise (26/09/2026) ─────────────────────────────────────── */
.caution h3 { margin-bottom:0; }
.caution-attendue { border-left:3px solid var(--attente); }
.caution-promesse { margin:6px 0 0; font-size:14px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.caution-promesse .bulle { white-space:normal; width:min(280px, 70vw); }
.caution-frise { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); margin:18px 0 16px; padding:0; }
.caution-frise li { position:relative; padding-top:26px; font-size:12.5px; color:var(--doux); }
.caution-frise li:before { content:""; position:absolute; top:8px; left:0; right:0; height:2px; background:var(--ligne); }
.caution-frise li:first-child:before { left:9px; }
.caution-frise li:last-child:before { right:auto; width:9px; }
.caution-frise .pt { position:absolute; top:0; left:0; width:18px; height:18px; border-radius:50%; z-index:1;
  background:var(--carte); border:2px solid var(--ligne); display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:var(--doux); }
.caution-frise strong { display:block; color:var(--encre); font-size:13px; margin-bottom:2px; }
.caution-frise li.fait .pt { background:var(--ok); border-color:var(--ok); color:#fff; }
.caution-frise li.fait:before { background:var(--ok); }
.caution-frise li.ici .pt { border-color:var(--attente); background:var(--attente-fond); color:var(--attente); }
.caution-frise li.ici strong { color:var(--attente); }
.caution-action { background:var(--fond); border-radius:10px; padding:14px 16px; }
.caution-action p { margin:0; font-size:13px; }
.caution-action p + p { margin-top:8px; }
.caution-form { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:0; }
.caution-form button { margin:0; }
.caution-accord { display:flex; gap:8px; align-items:flex-start; flex:1 1 320px; margin:0;
  font-size:12px; font-weight:400; color:var(--doux); text-transform:none; letter-spacing:0; }
.caution-accord input { width:auto; margin:2px 0 0; }
.caution-echec { color:var(--attente); }

/* L'option dans « Vos paiements » (26/09/2026) : retirer, ou passer à 700. */
.option-gestes { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
.option-gestes form { margin:0; display:inline; }
.option-retirer { background:none; border:0; padding:0; margin:0; font:inherit; font-size:12.5px;
  color:#a15c46; text-decoration:underline; cursor:pointer; text-transform:none; letter-spacing:0; }
.option-retirer:hover { background:none; color:#8a4735; }
.option-plus { display:inline-flex; align-items:center; gap:6px; margin:0; padding:3px 11px; border-radius:99px;
  background:#E4EFE6; color:var(--ok); border:1px solid #cfe2d4; font-size:12px; font-weight:600;
  text-transform:none; letter-spacing:0; cursor:pointer; }
.option-plus:hover { background:#D6E7DA; color:var(--ok); }
.option-definitive { font-size:12px; margin:10px 0 0; }

/* « Nous contacter » : un petit volet sous la note, sans script (26/09/2026). */
.option-definitive { margin-top:10px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.option-definitive p { margin:0; font-size:12px; flex:1 1 260px; }
.nous-contacter { position:relative; }
.nous-contacter summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center;
  padding:5px 12px; border:1px solid var(--ligne); border-radius:8px; background:var(--carte);
  font-size:12.5px; font-weight:600; color:var(--encre); }
.nous-contacter summary::-webkit-details-marker { display:none; }
.nous-contacter[open] summary { border-color:var(--encre); }
.nous-contacter-pop { position:absolute; right:0; top:calc(100% + 6px); z-index:30; display:flex;
  flex-direction:column; gap:6px; padding:12px 14px; background:var(--carte); border:1px solid var(--ligne);
  border-radius:10px; box-shadow:0 12px 30px rgba(40,30,20,.14); white-space:nowrap; font-size:13px; }
/* Paiements et caution à la même hauteur (26/09/2026). */
.grille-cartes > .col-paiements { display:flex; flex-direction:column; align-self:stretch; }
.grille-cartes > .col-paiements > .card { flex:1; }
.grille-cartes > .caution { align-self:stretch; }
/* La caution remplit sa hauteur : la frise se centre dans l'espace libre, la
   zone d'action se cale en bas, au niveau de « Nous contacter » (26/09/2026). */
.grille-cartes > .caution { display:flex; flex-direction:column; }
.grille-cartes > .caution .caution-frise { margin-top:auto; margin-bottom:auto; padding:18px 0 16px; }
/* « Ajouter des tirages ? » à côté des paiements, avant l'acompte (26/09/2026). */
.tirages-formule .qte small { display:block; font-size:12px; color:var(--ok); font-weight:600; }
.tirages-argument { margin:0; font-size:13.5px; line-height:1.55; }
/* « Ajouter des tirages ? », option B (26/09/2026) : deux tuiles égales. */
.ajout-tete { display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.ajout-tete h3 { margin:0; }
.ajout-tete p { margin:0; font-size:13px; color:var(--doux); }
.ajout-tuiles { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ajout-tuile { display:flex; align-items:center; gap:16px; margin:0; padding:16px 18px;
  border:1px solid var(--ligne); border-radius:12px; background:var(--carte); }
.ajout-tuile.mise-en-avant { border-color:var(--encre); box-shadow:0 0 0 1px var(--encre); }
.ajout-tuile.actuelle { background:var(--fond); }
.ajout-tuile .q { flex:1; min-width:0; }
.ajout-tuile .q strong { display:block; font-size:15px; }
.ajout-tuile .q span { font-size:12px; color:var(--doux); }
.ajout-tuile .q span.vert { color:var(--ok); font-weight:600; }
.ajout-tuile .prix { font-family:"Cormorant Garamond",Georgia,serif; font-weight:700; font-size:26px; line-height:1; white-space:nowrap; }
.ajout-tuile button { margin:0; min-width:92px; height:40px; }
.ajout-tuile button.sec { background:var(--carte); color:var(--encre); border:1px solid var(--encre); }
.ajout-etat { min-width:92px; display:flex; justify-content:center; }
.ajout-note { margin:10px 0 0; font-size:12px; color:var(--doux); }
@media (max-width:760px) { .ajout-tuiles { grid-template-columns:1fr; } }

/* ── L'onglet Photos (26/09/2026, maquette v5) ────────────────────────────── */
.medias { display:grid; grid-template-columns:1.15fr 1fr; gap:26px; align-items:center; }
.medias-a-trier { border-left:3px solid var(--attente); }
.medias-mosaique { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:78px; gap:6px; }
.medias-mosaique > :first-child { grid-column:span 2; grid-row:span 2; }
.medias-mosaique img, .medias-vide { width:100%; height:100%; object-fit:cover; border-radius:8px; display:block;
  background:linear-gradient(135deg,var(--accent-clair),var(--accent)); }
.medias-titre { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.medias-titre h3 { margin:0; }
/* « Trier ma galerie » : un geste majeur, gros, dégradé taupe, qui respire. */
.btn-tri { display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 28px;
  border-radius:12px; font-size:16px; font-weight:600; color:#fff; text-decoration:none;
  background:linear-gradient(135deg,#B59E83,#8A7058); --halo:rgba(138,112,88,.45);
  animation:souffle 3.2s ease-in-out infinite; }
.btn-tri:hover { color:#fff; filter:brightness(1.05); }
@keyframes souffle { 0%,100% { box-shadow:0 0 0 0 var(--halo); transform:scale(1); }
  50% { box-shadow:0 0 0 8px transparent; transform:scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .btn-tri { animation:none; } }
.medias-chiffres { display:flex; gap:24px; }
.medias-chiffres b { display:block; font-family:"Cormorant Garamond",Georgia,serif; font-size:34px; line-height:1; }
.medias-chiffres span { font-size:12px; color:var(--doux); }
.medias-frise { margin:18px 0 0; }
.partage-corps { display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; margin-top:12px; }
.partage-bulle { background:#E9E4DC; border-radius:18px 18px 18px 4px; padding:10px; width:340px; max-width:100%; }
.partage-apercu { background:var(--carte); border-radius:12px; overflow:hidden; margin-bottom:8px; }
.partage-images { height:90px; display:grid; grid-template-columns:2fr 1fr 1fr; gap:2px; background:var(--accent-clair); }
.partage-images img { width:100%; height:100%; object-fit:cover; display:block; }
.partage-lien { padding:8px 10px; }
.partage-lien b { display:block; font-size:13px; }
.partage-lien span { font-size:11px; color:var(--doux); }
.partage-bulle p { margin:0 4px 2px; font-size:13px; line-height:1.5; }
.partage-actions { display:flex; flex-direction:column; gap:10px; }
.partage-actions p { margin:0 0 4px; font-size:13.5px; }
.partage-actions button { margin:0; height:44px; width:100%; }
.partage-actions button.sec { background:var(--carte); color:var(--encre); border:1px solid var(--ligne); }
.partage-retour { font-size:12px; color:var(--ok); min-height:1em; }
.partage-attente { margin:10px 0 0; background:var(--fond); border-radius:10px; padding:14px 16px; font-size:13px; color:var(--doux); }
.telecharger-tuiles { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px; }
.telecharger-tuile { display:flex; align-items:center; gap:16px; border:1px solid var(--ligne); border-radius:12px; padding:14px 16px; }
.telecharger-tuile .q { flex:1; min-width:0; }
.telecharger-tuile .q strong { display:block; font-size:14.5px; }
.telecharger-tuile .q span { font-size:12.5px; color:var(--doux); }
.telecharger-tuile .poids { font-family:"Cormorant Garamond",Georgia,serif; font-weight:700; font-size:22px; white-space:nowrap; }
.telecharger-tuile .btn { margin:0; }
.telecharger-tuile .btn.sec { background:var(--carte); color:var(--encre); border:1px solid var(--ligne); }
.telecharger-note { margin:10px 0 0; font-size:12px; color:var(--doux); }
.medias-lecteur { padding:10px 0; border-top:1px solid var(--ligne); }
.medias-lecteur:first-of-type { border-top:0; }
.medias-suite { margin:10px 0 0; font-size:12.5px; }
.montages-grille { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.montages-grille.seul { grid-template-columns:1fr; }
.montage { position:relative; display:block; height:150px; border-radius:10px; overflow:hidden; background:var(--encre); }
.montage img { width:100%; height:100%; object-fit:cover; opacity:.85; }
.montage span { position:absolute; left:10px; bottom:10px; background:rgba(0,0,0,.45); color:#fff;
  padding:4px 9px; border-radius:6px; font-size:12.5px; font-weight:600; }
@media (max-width:900px) { .medias, .partage-corps, .telecharger-tuiles, .montages-grille { grid-template-columns:1fr; } }
.caution-frise li { padding-right:10px; }
.partage-etat { background:var(--attente-fond); color:var(--attente); border-radius:8px; padding:10px 12px; }
.partage-etat strong { color:var(--attente); }
.partage-actions form { margin:0; }
.partage-ouvrir { background:none !important; border:0 !important; color:var(--encre) !important; height:auto !important;
  padding:4px 0 !important; text-decoration:underline; font-size:13px; font-weight:600; }

/* ── Galerie, reprise du 27/09/2026 ─────────────────────────────────────── */
.medias { display:block; }
.medias .medias-titre { margin-bottom:16px; }
.medias .medias-titre h3 { font-size:22px; }
.medias-corps { display:grid; grid-template-columns:1.15fr 1fr; gap:26px; align-items:center; }
.medias-frise { margin-top:16px; }
.partage-ligne { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.partage-texte { flex:1; min-width:220px; }
.partage-texte h3 { margin:0; }
.partage-texte p { margin:4px 0 0; font-size:13px; color:var(--doux); }
.partage-code { display:flex; flex-direction:column; align-items:center; padding:6px 18px;
  border:1px solid var(--ligne); border-radius:10px; background:var(--fond); }
.partage-code span { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--doux); font-weight:600; }
.partage-code strong { font-family:"Cormorant Garamond",Georgia,serif; font-size:26px; letter-spacing:.08em; line-height:1.1; }
.partage .partage-actions { flex-direction:row; gap:10px; }
.partage .partage-btn { margin:0; height:44px; padding:0 20px; width:auto; border-radius:10px;
  background:var(--encre); color:var(--fond); border:0; font-weight:600; }
.partage-retour { display:block; margin-top:6px; }
.partage-ferme { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding:10px 14px; border-radius:10px; background:var(--attente-fond);
  font-size:13px; color:var(--attente); }
.partage-ferme strong { color:var(--attente); }
.partage-ferme form { margin:0; }
.partage-ferme .partage-ouvrir { background:none !important; border:0 !important; color:var(--attente) !important;
  height:auto !important; padding:0 !important; text-decoration:underline; font-size:13px; font-weight:600; margin:0; }
@media (max-width:900px) { .medias-corps { grid-template-columns:1fr; }
  .partage .partage-actions { width:100%; } .partage .partage-btn { flex:1; } }
/* Partager et Télécharger côte à côte, une colonne chacun, même hauteur
   (Brieuc, 27/09/2026). Dans une demi-largeur, tout s'empile. */
.grille-cartes > .partage, .grille-cartes > .telecharger { align-self:stretch; display:flex; flex-direction:column; }
.partage .partage-ligne { flex-direction:column; align-items:stretch; gap:14px; }
.partage .partage-code { flex-direction:row; justify-content:space-between; align-items:center; padding:8px 14px; }
.partage .partage-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.partage .partage-btn { width:100%; padding:0 10px; }
.partage .partage-ferme { margin-top:auto; }
.partage .partage-retour:empty { display:none; }
.telecharger .telecharger-tuiles { grid-template-columns:1fr; gap:10px; }
.telecharger .telecharger-note { margin-top:auto; padding-top:10px; }
.partage .partage-ligne { margin-bottom:14px; }
/* 27/09/2026 : mosaïque à angles droits, comme la grille de tri ; les deux
   formats remplissent la carte de téléchargement, plus de vide dessous. */
.medias-mosaique img, .medias-vide { border-radius:0; }
.medias-mosaique { gap:3px; }
.telecharger .telecharger-tuiles { flex:1; grid-auto-rows:1fr; }
.telecharger .telecharger-note { margin-top:0; padding-top:10px; }
.partage .partage-ferme { margin-top:14px; }
a.medias-mosaique { text-decoration:none; cursor:pointer; }
a.medias-mosaique img { transition:filter .15s; }
a.medias-mosaique:hover img { filter:brightness(1.06); }
.partage-lien-galerie a { font-size:13.5px; font-weight:600; color:var(--encre); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; min-width:0; margin-left:12px; }
.partage .partage-code.partage-lien-galerie { min-height:48px; }
.partage .partage-code { box-sizing:border-box; }
/* 27/09/2026 : « Trier ma galerie » rentre dans le rang. Le dégradé taupe qui
   respirait détonnait sur le reste de l'espace : même bouton sombre que
   « Télécharger » ou « Copier le message ». */
.btn-tri { height:44px; padding:0 20px; border-radius:10px; font-size:14px; background:var(--encre);
  color:var(--fond); animation:none; box-shadow:none; }
.btn-tri:hover { color:var(--fond); filter:none; background:#46403a; }
.partage-ouverte { margin-top:14px; padding:12px 14px; border-radius:10px; background:var(--ok-fond);
  font-size:13px; color:var(--ok); }
.partage-ouverte strong { color:var(--ok); }
.medias-contenu { margin:4px 0 0; font-size:13px; color:var(--doux); }
.medias .medias-frise { margin-top:0; }
/* Bandeau de la galerie, 27/09/2026 (idée de Brieuc) : une rangée de cinq
   photos au hasard, en 3:2, puis la frise dessous sur toute la largeur. */
.medias-corps { display:block; }
.medias-mosaique { grid-template-columns:repeat(5,1fr); grid-auto-rows:auto; }
.medias-mosaique > :first-child { grid-column:auto; grid-row:auto; }
.medias-mosaique img, .medias-vide { aspect-ratio:3/2; height:auto; }
.medias-infos { margin-top:18px; }
@media (max-width:700px) { .medias-mosaique { grid-template-columns:repeat(3,1fr); }
  .medias-mosaique > :nth-child(n+4) { display:none; } }
/* La frise de la galerie sur toute la largeur : 1 à gauche, 2 au centre,
   3 à droite, une seule ligne derrière, verte jusqu'à l'étape atteinte. */
.medias-frise { display:flex; justify-content:space-between; position:relative; }
.medias-frise::before { content:""; position:absolute; top:8px; left:9px; right:9px; height:2px; background:var(--ligne); }
.medias-frise.partagee::after { content:""; position:absolute; top:8px; left:9px; width:calc(50% - 9px); height:2px; background:var(--ok); }
.medias-frise li { flex:0 0 auto; padding-right:0; }
.medias-frise li::before { display:none; }
.medias-frise li:nth-child(2) { text-align:center; }
.medias-frise li:nth-child(2) .pt { left:50%; transform:translateX(-50%); }
.medias-frise li:last-child { text-align:right; }
.medias-frise li:last-child .pt { left:auto; right:0; }
/* UN SEUL BOUTON dans l'onglet Galerie (27/09/2026) : ils avaient trois tailles,
   deux graisses et deux hauteurs. */
.btn-tri, .partage .partage-btn, .telecharger-tuile .btn {
  height:42px; padding:0 18px; font-size:13.5px; font-weight:600; letter-spacing:0;
  border-radius:10px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; }
/* ── AUDIT DES BOUTONS, 27/09/2026 ────────────────────────────────────────
   Un seul gabarit pour tous les boutons d'ACTION de l'espace client et de la
   page de tri : 13,5 px, graisse 600, 42 px de haut, angles de 10 px. Le fond
   (sombre = principal, clair bordé = secondaire) reste propre à chacun.
   Hors champ, et c'est voulu : puces de filtre, pastilles de design, tuiles
   de mode, choix segmentés, interrupteurs, boutons-icônes. */
.table-paiements button, .ajout-tuile button, .caution-form button,
.nous-contacter summary, .livre-bouton, a.livre-bouton, label.livre-bouton,
.btn-tri, .partage .partage-btn, .telecharger-tuile .btn, .tri-fin button,
.jourj-form button, .jourj-pop-actions button {
  height:42px; min-height:42px; padding:0 18px; font-size:13.5px; font-weight:600;
  letter-spacing:0; text-transform:none; border-radius:10px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; line-height:1; }
.livre-actions .livre-bouton { width:100%; }
/* Audit, suite (27/09/2026, Brieuc) : les choix Aléatoire / Choix sur la borne
   prennent le format des boutons ; les pastilles de design et les filtres du
   tri ont le même format entre eux. « Passer à 700 tirages » garde sa pastille. */
.fin-choix button { height:42px; min-height:42px; font-size:13.5px; font-weight:600; border-radius:10px; }
.fin-choix button strong { font-size:13.5px; font-weight:600; }
.tirages-design, .puce { height:36px; min-height:36px; font-size:13px; font-weight:500; border-radius:99px;
  box-sizing:border-box; }

/* ── Parcours invité, 30/09/2026 : mêmes boutons et pastilles que l'espace
   client (audit du 27/09). ─────────────────────────────────────────────── */
body.invite form button[type=submit], body.invite main a.btn {
  height:42px; min-height:42px; padding:0 18px; font-size:13.5px; font-weight:600; letter-spacing:0;
  text-transform:none; border-radius:10px; box-sizing:border-box; display:inline-flex;
  align-items:center; justify-content:center; gap:8px; line-height:1; }
body.invite main a.btn.discret { background:var(--carte); color:var(--encre); border:1px solid var(--ligne); }
.galerie-filtres { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-start; margin:0 0 16px; }
.galerie-filtres .puce { display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:99px;
  background:var(--carte); border:1px solid var(--ligne); font-size:13px; font-weight:500;
  color:var(--encre); text-decoration:none; box-sizing:border-box; }
.galerie-filtres .puce.on { background:var(--encre); color:var(--fond); border-color:var(--encre); }
/* Avec une IA (05/10/2026) */
.perso-ia { padding:0; }
.perso-ia[hidden] { display:none; }
.perso-ia-titre { cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; padding:12px 16px; }
.perso-ia-titre::-webkit-details-marker { display:none; }
.perso-ia-titre .perso-etape-icone { width:30px; height:30px; margin:0; }
.perso-ia-titre strong { flex:1; }
.perso-ia-fleche { width:18px !important; height:18px !important; color:var(--doux); transition:transform .2s; }
.perso-ia[open] .perso-ia-fleche { transform:rotate(180deg); }
.perso-ia-corps { display:flex; flex-direction:column; gap:8px; padding:0 16px 16px; }
.perso-ia-corps .perso-ia-intro { margin:0; color:var(--encre); font-size:13px; line-height:1.5; }
.perso-ia-corps .perso-ia-champ { display:block; margin:4px 0 -2px; padding:0; font-size:12.5px; font-weight:600; color:var(--encre); text-transform:none; letter-spacing:0; }
.perso-ia-corps textarea { margin:0; font:inherit; font-size:13px; font-weight:400; color:var(--encre); padding:9px 11px;
  border:1px solid var(--ligne); border-radius:8px; background:var(--fond); resize:vertical; width:100%; box-sizing:border-box; }
.perso-ia-corps textarea::placeholder { font-weight:400; color:var(--doux); }
.perso-ia-mention { color:var(--doux); font-size:12px; }
.perso-ia-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px; }
.perso-ia-actions .perso-copier { width:auto; }
.perso-ia-lien { background:none; border:0; padding:0; font:inherit; font-size:12.5px; color:var(--doux);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.perso-ia-corps pre { white-space:pre-wrap; font:inherit; font-size:12px; color:var(--encre); background:var(--fond);
  border-radius:8px; padding:10px 12px; margin:0; }
.perso-intro { display:flex; flex-direction:column; gap:6px; color:var(--encre); font-size:13px; line-height:1.5; }
.perso-intro p { margin:0; }
.perso-ia-corps input[type=text] { font:inherit; font-size:13px; color:var(--encre); padding:9px 11px; margin:0;
  border:1px solid var(--ligne); border-radius:8px; background:var(--fond); width:100%; box-sizing:border-box; }
.perso-ia-corps input[type=text]::placeholder { color:var(--doux); }
/* « À venir… » (05/10/2026) : préparation et photos voilées tant qu'elles sont en chantier */
section:has(> .a-venir) { position:relative; }
.a-venir { filter:blur(7px); opacity:.55; pointer-events:none; user-select:none; max-height:70vh; overflow:hidden; }
.a-venir-voile { position:absolute; inset:0; z-index:2; display:flex; align-items:flex-start; justify-content:center;
  padding-top:18vh; pointer-events:none; }
.a-venir-voile p { margin:0; font-family:var(--titre, "Cormorant Garamond", serif); font-size:30px; color:var(--encre); }