/* ==========================================================================
   MERRYTTI - Socle commun
   Variables, typographie, grille et bibliothèque de composants.
   Aucun framework : tout est écrit à la main, chaque composant existe
   en une seule version réutilisée partout.
   ========================================================================== */

/* --- Polices auto-hébergées ---------------------------------------------
   Servies depuis notre serveur : sur une connexion lente, une requête
   vers un domaine tiers coûte une résolution DNS et une poignée de main
   TLS de plus. display=swap pour que le texte s'affiche tout de suite.  */

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-latin.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    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+2074, U+20AC,
                   U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-latin-ext.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    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: 'Karla';
    src: url('../fonts/karla-latin.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    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: 'Karla';
    src: url('../fonts/karla-latin-ext.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    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;
}

/* --- Jetons de conception ------------------------------------------------ */

:root {
    /* Marque */
    --bordeaux:        #5D0117;
    --bordeaux-fonce:  #3A000E;
    --bordeaux-clair:  #7D0620;
    --bordeaux-voile:  #F7EEF0;

    /* Le jaune du logotype. Relevé au pixel dans le fichier fourni :
       la marque est un aplat unique de #F0C064, on ne la décline pas.
       Il tient l'AA sur le bordeaux (8,4:1) mais pas sur le blanc (1,7:1) :
       sur fond clair, le texte passe par --or-encre, même teinte assombrie (5,9:1 sur blanc). */
    --or:              #F0C064;
    --or-encre:        #8A5A0F;
    --or-voile:        rgba(240, 192, 100, .16);

    /* Neutres teintés vers le rouge-brun, jamais gris pur */
    --encre:           #241417;
    --encre-douce:     #6B565A;
    --ligne:           #E4D9DB;
    --papier:          #FDFAFA;
    --blanc:           #FFFFFF;

    /* États système */
    --valide:          #2F6B4F;
    --valide-voile:    #E8F1EC;
    --attente:         #B26A00;
    --attente-voile:   #FBF1E3;
    --expire:          #6B6169;
    --expire-voile:    #F0EDEF;
    --erreur:          #A5122B;
    --erreur-voile:    #FBECEE;

    /* Typographie */
    --serif: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --sans:  'Karla', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    /* Échelle 1.25 sur base 16 px */
    --t-xs:  0.8rem;
    --t-s:   0.9rem;
    --t-m:   1rem;
    --t-l:   1.25rem;
    --t-xl:  1.56rem;
    --t-2xl: 1.95rem;
    --t-3xl: 2.44rem;
    --t-4xl: 3.05rem;

    /* Rythme vertical */
    --e-1: 0.25rem;
    --e-2: 0.5rem;
    --e-3: 0.75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;
    --e-8: 4rem;
    --e-9: 6rem;

    /* Site public : angles quasi droits, esprit imprimé. */
    --rayon: 2px;

    /* Portails : surfaces adoucies. Un outil qu'on regarde huit heures
       par jour n'a pas les mêmes besoins qu'une vitrine éditoriale -
       les arrondis et les ombres douces y délimitent les blocs sans
       multiplier les filets. */
    --rayon-s:      10px;
    --rayon-m:      14px;
    --rayon-l:      20px;
    --rayon-pilule: 999px;

    /* Fond de l'application : un gris rosé, jamais un gris pur. */
    --fond-app: #F1ECED;

    /* Ombres teintées bordeaux, jamais du noir neutre. */
    --ombre:          0 1px 2px rgba(93, 1, 23, .06), 0 8px 24px -12px rgba(93, 1, 23, .18);
    --ombre-carte:    0 1px 2px rgba(93, 1, 23, .04), 0 10px 26px -18px rgba(93, 1, 23, .20);
    --ombre-flottante: 0 2px 6px rgba(93, 1, 23, .05), 0 20px 44px -24px rgba(93, 1, 23, .30);

    --largeur-max: 1200px;
    --largeur-texte: 34rem;   /* environ 70 caractères */

    --transition: 160ms cubic-bezier(.2, .6, .3, 1);
}

/* --- Réinitialisation ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: var(--t-m);
    line-height: 1.65;
    color: var(--encre);
    background: var(--papier);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* --- Titres --------------------------------------------------------------
   Playfair Display pour les titres, les prix et les numéros de carte.
   Jamais pour du texte courant ni pour un libellé d'interface.          */

h1, h2, h3, h4, .serif {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--encre);
}

h1 { font-size: var(--t-4xl); line-height: 1.1; }
h2 { font-size: var(--t-3xl); line-height: 1.15; }
h3 { font-size: var(--t-2xl); line-height: 1.2; font-weight: 500; }
h4 { font-size: var(--t-xl);  line-height: 1.3; font-weight: 500; }
h5 { font-family: var(--sans); font-size: var(--t-l); font-weight: 700; line-height: 1.4; }

@media (max-width: 640px) {
    h1 { font-size: 2.3rem; }
    h2 { font-size: 1.85rem; }
    h3 { font-size: 1.5rem; }
}

p { max-width: var(--largeur-texte); }
p + p { margin-top: var(--e-4); }

/* Pas de soulignement : un lien se repère à sa couleur, et à sa graisse
   quand il est pris dans une phrase. Le soulignement n'apparaît qu'au
   survol d'un lien de texte. */
a {
    color: var(--bordeaux);
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transition);
}
a:hover { color: var(--bordeaux-clair); }
:where(p, dd, .champ__aide, .vide, .alerte) a:not([class]) { font-weight: 700; }
:where(p, dd, .champ__aide, .vide, .alerte) a:not([class]):hover { text-decoration: underline; }

strong { font-weight: 700; }
small  { font-size: var(--t-xs); line-height: 1.5; }

/* --- Utilitaires de mise en page ----------------------------------------- */

.contenant {
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding-inline: var(--e-5);
}
@media (max-width: 640px) { .contenant { padding-inline: var(--e-4); } }

.contenant--etroit { max-width: 780px; }
.contenant--large  { max-width: 1440px; }

.pile > * + *      { margin-top: var(--e-4); }
.pile-s > * + *    { margin-top: var(--e-2); }
.pile-l > * + *    { margin-top: var(--e-6); }

.rangee {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-4);
    align-items: center;
}
.rangee--entre  { justify-content: space-between; }
.rangee--fin    { justify-content: flex-end; }
.rangee--haut   { align-items: flex-start; }
.rangee--serree { gap: var(--e-2); }

.grille { display: grid; gap: var(--e-5); }
.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 940px) { .grille--3, .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grille--2, .grille--3, .grille--4 { grid-template-columns: minmax(0, 1fr); } }

.pousse { margin-left: auto; }
.centre { text-align: center; }
.droite { text-align: right; }
.discret { color: var(--encre-douce); }
.tres-discret { color: var(--encre-douce); font-size: var(--t-s); }
.nombre { font-variant-numeric: tabular-nums; }
.sans-marge { margin: 0; }
.pleine-largeur { width: 100%; max-width: none; }

/* Surtitre : le seul endroit où l'on espace des capitales. */
.surtitre {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--or-encre);
}

/* Filet or : la signature graphique de la marque. */
.filet {
    width: 44px;
    height: 1px;
    background: var(--or);
    border: 0;
    margin: var(--e-4) 0;
}
.filet--large { width: 100%; background: var(--ligne); }

/* Mention réservée au papier : sans cette règle, elle resterait
   visible à l'écran, print.css n'étant chargé qu'en media="print". */
.impression-pied { display: none; }

/* Accessibilité : visible uniquement au clavier. */
.saut-contenu {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--bordeaux);
    color: var(--blanc);
    padding: var(--e-3) var(--e-4);
    z-index: 200;
}
.saut-contenu:focus { left: var(--e-4); top: var(--e-4); }

.hors-ecran {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Anneau de focus visible partout, jamais supprimé. */
:focus-visible {
    outline: 2px solid var(--bordeaux);
    outline-offset: 2px;
    border-radius: 1px;
}

/* --- Marque ---------------------------------------------------------------
   Le logotype est un composant de base : il apparaît sur le site public,
   dans les portails et sur les écrans de connexion.                      */

.logo {
    display: inline-block;
    font-family: var(--serif);
    font-size: var(--t-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--bordeaux);
    text-decoration: none;
    line-height: 1;
    flex: none;
}
.logo span {
    display: block;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--or-encre);
    margin-top: 4px;
}
.logo:hover { color: var(--bordeaux-clair); }

/* Logotype dessiné. Le fichier fourni est un aplat de #F0C064 sur
   transparence : il ne se pose donc que sur du bordeaux. Les gabarits
   servent le verrouillage horizontal (paquet + mot) dans les en-têtes
   et le paquet seul là où la place manque. */
.marque {
    display: inline-flex;
    align-items: center;
    flex: none;
    text-decoration: none;
    /* La cible tactile déborde l'image sans décaler la barre. */
    padding: var(--e-2) 0;
}
.marque__image {
    display: block;
    height: 38px;
    width: auto;
}
.marque--pied .marque__image { height: 34px; }
/* Verrouillage empilé : réservé aux pages de connexion, où la marque
   dispose d'une colonne entière. */
.marque__image--empilee { height: auto; width: min(230px, 60%); }
@media (max-width: 560px) { .marque__image { height: 32px; } }
/* Le logo empilé garde ses proportions à toutes les tailles : sans cette
   règle, la hauteur de 32 px ci-dessus l'écrasait sur les téléphones. */
.marque__image.marque__image--empilee { height: auto; max-width: 100%; }

/* ==========================================================================
   COMPTE - le même bloc dans les quatre en-têtes
   Il décrit l'état de connexion complet du navigateur : les trois
   familles de comptes sont indépendantes, et les trois peuvent être
   ouvertes en même temps. Le déclencheur vit sur le bordeaux des
   en-têtes, le panneau qu'il ouvre sur du papier.
   ========================================================================== */

.compte { position: relative; flex: none; }

.compte__declencheur {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    max-width: 15rem;
    padding: 4px 10px 4px 4px;
    border: 1px solid rgba(240, 192, 100, .3);
    border-radius: var(--rayon-pilule);
    background: rgba(240, 192, 100, .1);
    color: var(--or);
    font: inherit;
    font-size: var(--t-xs);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.compte__declencheur:hover {
    background: rgba(240, 192, 100, .2);
    border-color: rgba(240, 192, 100, .55);
}

.compte__pastille {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--or);
    color: var(--bordeaux-fonce);
    font-family: var(--serif);
    font-size: var(--t-s);
    font-weight: 600;
    flex: none;
}
.compte__pastille--vide {
    background: transparent;
    border: 1px solid rgba(240, 192, 100, .45);
    color: var(--or);
}

.compte__texte { display: block; min-width: 0; }
.compte__nom {
    display: block;
    font-weight: 700;
    line-height: 1.2;
    color: var(--or);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.compte__role {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    color: rgba(240, 192, 100, .72);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.compte__chevron { display: grid; color: rgba(240, 192, 100, .8); flex: none; }
.compte__declencheur[aria-expanded="true"] .compte__chevron { transform: rotate(180deg); }

/* Sur téléphone, seule la pastille reste : la barre y est disputée. */
@media (max-width: 720px) {
    .compte__texte,
    .compte__chevron { display: none; }
    .compte__declencheur { padding: 4px; border-radius: 50%; }
}

.compte__panneau {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(292px, calc(100vw - 28px));
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-top: 3px solid var(--or);
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre-flottante);
    overflow: hidden;
    z-index: 90;
}
.compte__panneau[hidden] { display: none; }

.compte__bloc {
    padding: var(--e-3) var(--e-4);
    border-bottom: 1px solid var(--ligne);
}
.compte__bloc:last-child { border-bottom: 0; }
.compte__bloc--calme { background: var(--bordeaux-voile); }

.compte__surtitre {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--or-encre);
}
.compte__identite {
    font-family: var(--serif);
    font-size: var(--t-m);
    font-weight: 600;
    line-height: 1.25;
    margin-top: 2px;
}
.compte__detail {
    font-size: var(--t-xs);
    color: var(--encre-douce);
    /* Une adresse e-mail longue se coupe plutôt qu'elle n'élargit le panneau. */
    overflow-wrap: anywhere;
    margin-bottom: var(--e-2);
}

.compte__action {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: 6px 0;
    font-size: var(--t-s);
    color: var(--encre);
    text-decoration: none;
}
.compte__action:hover { color: var(--bordeaux); }
.compte__action svg { color: var(--encre-douce); flex: none; }
.compte__action--sortie { color: var(--bordeaux); font-weight: 700; }
.compte__action--sortie svg { color: var(--bordeaux); }

/* ==========================================================================
   MOT DE PASSE - bouton d'affichage
   Un champ masqué se saisit mal sur un clavier de téléphone. Le
   bouton est posé par main.js : sans JavaScript, le champ reste un
   champ normal plutôt que d'afficher un bouton inerte.
   ========================================================================== */

/* La zone est posée par main.js autour du seul champ : le bloc .champ
   contient aussi le libellé et l'aide, dont la hauteur varie. */
.champ-secret__zone { position: relative; display: block; }

/* Le sélecteur reprend le type du champ : base.css pose un `padding`
   raccourci sur `.champ input[type="password"]`, plus spécifique, qui
   écraserait un simple `.champ-secret input`. Les deux types sont
   visés parce que le bouton bascule l'un vers l'autre. */
.champ-secret .champ-secret__zone input[type="password"],
.champ-secret .champ-secret__zone input[type="text"] { padding-right: 48px; }

.champ-secret__oeil {
    position: absolute;
    /* Calé sur la hauteur réelle du champ, qui peut dépasser 44 px. */
    top: 0; bottom: 0; right: 0;
    width: 46px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: var(--encre-douce);
    cursor: pointer;
    /* Le champ porte une bordure : le bouton s'arrête juste avant. */
    margin: 1px 1px 1px 0;
    border-radius: 0 var(--rayon) var(--rayon) 0;
}
.champ-secret__oeil:hover,
.champ-secret__oeil:focus-visible { color: var(--bordeaux); }
.champ-secret__oeil[aria-pressed="true"] { color: var(--bordeaux); }

/* ==========================================================================
   BOUTONS - trois niveaux, pas un de plus
   ========================================================================== */

.bouton {
    --fond: var(--bordeaux);
    --texte: var(--blanc);
    --bordure: var(--bordeaux);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: 44px;
    padding: 0 var(--e-5);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond);
    color: var(--texte);
    font-family: var(--sans);
    font-size: var(--t-s);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.bouton:hover { --fond: var(--bordeaux-clair); --bordure: var(--bordeaux-clair); color: var(--blanc); }
.bouton:active { transform: translateY(1px); }

.bouton--secondaire {
    --fond: transparent;
    --texte: var(--bordeaux);
    --bordure: var(--bordeaux);
}
.bouton--secondaire:hover { --fond: var(--bordeaux-voile); --texte: var(--bordeaux); color: var(--bordeaux); }

.bouton--discret {
    --fond: transparent;
    --texte: var(--bordeaux);
    --bordure: transparent;
    padding-inline: var(--e-2);
    text-decoration: none;
}
.bouton--discret:hover { --fond: transparent; color: var(--bordeaux-clair); }

.bouton--danger { --fond: var(--erreur); --bordure: var(--erreur); }
.bouton--danger:hover { --fond: #8C0F24; --bordure: #8C0F24; }

.bouton--clair {
    --fond: transparent;
    --texte: var(--blanc);
    --bordure: rgba(255, 255, 255, .5);
}
.bouton--clair:hover { --fond: rgba(255, 255, 255, .1); --bordure: var(--blanc); color: var(--blanc); }

/* Bouton posé sur le bordeaux d'un en-tête : le bouton plein y
   disparaîtrait, faute de contraste avec son propre fond. */
.bouton--entete {
    --fond: var(--or);
    --texte: var(--bordeaux-fonce);
    --bordure: var(--or);
    border-radius: var(--rayon-pilule);
}
.bouton--entete:hover { --fond: #F7D68C; --bordure: #F7D68C; color: var(--bordeaux-fonce); }

.bouton--large  { width: 100%; }
.bouton--grand  { min-height: 54px; font-size: var(--t-m); padding-inline: var(--e-6); }
.bouton--petit  { min-height: 34px; font-size: var(--t-xs); padding-inline: var(--e-3); }

.bouton[disabled], .bouton[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* État de chargement : le libellé reste lisible, l'indicateur s'ajoute. */
.bouton[data-chargement="1"] { pointer-events: none; opacity: .8; }
.bouton[data-chargement="1"]::before {
    content: "";
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: rotation .7s linear infinite;
}
@keyframes rotation { to { transform: rotate(360deg); } }

/* ==========================================================================
   BADGES DE STATUT - pastille + libellé, jamais la couleur seule
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: 3px var(--e-3) 3px var(--e-2);
    border: 1px solid transparent;
    border-radius: var(--rayon);
    font-size: var(--t-xs);
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.badge__point {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.badge--neuve    { border-color: var(--or); color: var(--encre); background: transparent; }
.badge--neuve .badge__point { background: var(--or); }
.badge--envoyee  { background: var(--bordeaux-voile); color: var(--bordeaux); }
.badge--utilisee { background: var(--valide-voile); color: var(--valide); }
.badge--expiree  { background: var(--expire-voile); color: var(--expire); }
.badge--annulee  { border-color: var(--erreur); color: var(--erreur); background: transparent; }
.badge--attente  { background: var(--attente-voile); color: var(--attente); }
.badge--valide   { background: var(--valide-voile); color: var(--valide); }

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */

.champ { margin-bottom: var(--e-5); }

.champ label,
.etiquette {
    display: block;
    margin-bottom: var(--e-2);
    font-size: var(--t-s);
    font-weight: 700;
    color: var(--encre);
}
.champ label .facultatif {
    font-weight: 400;
    color: var(--encre-douce);
}

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="password"],
.champ input[type="tel"],
.champ input[type="number"],
.champ input[type="date"],
.champ input[type="search"],
.champ input[type="url"],
.champ input[type="file"],
.champ select,
.champ textarea,
.saisie {
    width: 100%;
    min-height: 44px;
    padding: var(--e-3);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: var(--blanc);
    color: var(--encre);
    font-size: var(--t-m);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.champ textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.champ input:focus,
.champ select:focus,
.champ textarea:focus,
.saisie:focus {
    outline: none;
    border-color: var(--bordeaux);
    box-shadow: 0 0 0 3px rgba(93, 1, 23, .12);
}

.champ input::placeholder,
.champ textarea::placeholder { color: #A4979A; }

.champ select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235D0117' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--e-3) center;
    padding-right: var(--e-6);
}

.champ__aide {
    display: block;
    margin-top: var(--e-2);
    font-size: var(--t-xs);
    color: var(--encre-douce);
}

.champ__erreur {
    display: block;
    margin-top: var(--e-2);
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--erreur);
}

.champ--erreur input,
.champ--erreur select,
.champ--erreur textarea {
    border-color: var(--erreur);
    background: var(--erreur-voile);
}

/* Cases à cocher et boutons radio : la zone cliquable est l'étiquette. */
.choix {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    padding: var(--e-3);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: var(--blanc);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.choix:hover { border-color: var(--or); }
.choix input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--bordeaux); flex: none; }
.choix:has(input:checked) { border-color: var(--bordeaux); background: var(--bordeaux-voile); }
.choix__titre { font-weight: 700; font-size: var(--t-s); display: block; }
.choix__texte { font-size: var(--t-xs); color: var(--encre-douce); display: block; margin-top: 2px; }
.choix__prix  { margin-left: auto; font-family: var(--serif); font-weight: 600; white-space: nowrap; }

.champs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
@media (max-width: 640px) { .champs-2 { grid-template-columns: minmax(0, 1fr); gap: 0; } }

fieldset { border: 0; padding: 0; margin: 0 0 var(--e-6); }
legend {
    padding: 0;
    margin-bottom: var(--e-4);
    font-family: var(--serif);
    font-size: var(--t-xl);
    font-weight: 500;
}

/* ==========================================================================
   ALERTES
   ========================================================================== */

.alerte {
    display: flex;
    gap: var(--e-3);
    padding: var(--e-4);
    border: 1px solid;
    border-left-width: 3px;
    border-radius: var(--rayon);
    font-size: var(--t-s);
    line-height: 1.55;
}
.alerte p { max-width: none; }
.alerte + .alerte { margin-top: var(--e-3); }

.alerte--succes { background: var(--valide-voile);   border-color: var(--valide); color: #1E4A36; }
.alerte--erreur { background: var(--erreur-voile);   border-color: var(--erreur); color: #7A0D20; }
.alerte--info   { background: var(--bordeaux-voile); border-color: var(--bordeaux); color: var(--bordeaux); }
.alerte--alerte { background: var(--attente-voile);  border-color: var(--attente); color: #7A4900; }

.alerte__titre { font-weight: 700; display: block; margin-bottom: 2px; }

/* ==========================================================================
   TABLEAUX DE DONNÉES
   ========================================================================== */

.tableau-enveloppe {
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: var(--blanc);
    overflow-x: auto;
}

.tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-s);
}

.tableau th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: var(--e-3) var(--e-4);
    background: var(--bordeaux);
    color: var(--blanc);
    font-weight: 700;
    font-size: var(--t-xs);
    text-align: left;
    white-space: nowrap;
}
.tableau th a { color: var(--blanc); text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.tableau th a:hover { color: var(--or); }
.tableau th.est-triee a { color: var(--or); }

.tableau td {
    padding: var(--e-3) var(--e-4);
    border-bottom: 1px solid var(--ligne);
    vertical-align: middle;
}

.tableau tbody tr:nth-child(even) { background: rgba(247, 238, 240, .4); }
.tableau tbody tr:hover { box-shadow: inset 0 -2px 0 var(--or); }
.tableau tbody tr:last-child td { border-bottom: 0; }

.tableau .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau .compact { white-space: nowrap; }
.tableau__actions { display: flex; gap: var(--e-2); justify-content: flex-end; }

.tableau__vide {
    padding: var(--e-7) var(--e-5);
    text-align: center;
    color: var(--encre-douce);
}
.tableau__vide strong { display: block; color: var(--encre); font-size: var(--t-m); margin-bottom: var(--e-2); }

/* Barre de filtres au-dessus du tableau. */
.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    align-items: flex-end;
    padding: var(--e-4);
    margin-bottom: var(--e-4);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: var(--blanc);
}
.filtres .champ { margin-bottom: 0; flex: 1 1 160px; min-width: 0; }
.filtres .champ label { font-size: var(--t-xs); }
.filtres__actions { display: flex; gap: var(--e-2); }

/* Sur mobile, chaque ligne se replie en fiche empilée. */
@media (max-width: 760px) {
    .tableau--repliable thead { display: none; }
    .tableau--repliable, .tableau--repliable tbody, .tableau--repliable tr, .tableau--repliable td {
        display: block;
        width: 100%;
    }
    .tableau--repliable tr {
        padding: var(--e-3) 0;
        border-bottom: 1px solid var(--ligne);
    }
    .tableau--repliable tbody tr:hover { box-shadow: none; }
    .tableau--repliable td {
        display: flex;
        justify-content: space-between;
        gap: var(--e-4);
        padding: var(--e-2) var(--e-4);
        border: 0;
        text-align: right;
    }
    .tableau--repliable td::before {
        content: attr(data-libelle);
        font-weight: 700;
        font-size: var(--t-xs);
        color: var(--encre-douce);
        text-align: left;
        flex: none;
    }
    .tableau--repliable td:first-child {
        font-weight: 700;
        font-size: var(--t-m);
        border-bottom: 0;
    }
    .tableau__actions { justify-content: flex-end; }
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    margin-top: var(--e-4);
    flex-wrap: wrap;
}
.pagination__liens { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.pagination__lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding-inline: var(--e-2);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    color: var(--encre);
    text-decoration: none;
    font-size: var(--t-s);
    background: var(--blanc);
}
.pagination__lien:hover { border-color: var(--bordeaux); color: var(--bordeaux); }
.pagination__lien[aria-current="page"] {
    background: var(--bordeaux);
    border-color: var(--bordeaux);
    color: var(--blanc);
    font-weight: 700;
}

/* ==========================================================================
   MODALES - confirmation obligatoire des actions irréversibles
   ========================================================================== */

.modale {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--e-4);
    background: rgba(36, 20, 23, .55);
}
.modale[data-ouverte="1"] { display: flex; }

.modale__boite {
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--e-6);
    background: var(--blanc);
    border-radius: var(--rayon);
    border-top: 3px solid var(--bordeaux);
    box-shadow: var(--ombre);
}
.modale__titre { font-family: var(--serif); font-size: var(--t-xl); margin-bottom: var(--e-3); }
.modale__texte { color: var(--encre-douce); font-size: var(--t-s); max-width: none; }
.modale__actions {
    display: flex;
    gap: var(--e-3);
    justify-content: flex-end;
    margin-top: var(--e-6);
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .modale__actions { flex-direction: column-reverse; }
    .modale__actions .bouton { width: 100%; }
}

/* Fenêtre de confirmation, construite par main.js. Le liseré rouge dit
   d'un coup d'œil qu'il ne s'agit pas d'une simple information. */
.modale--confirmer .modale__boite {
    max-width: 440px;
    border-top-color: var(--erreur);
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre-flottante);
}
.modale--confirmer .modale__texte:empty { display: none; }
.modale--confirmer .modale__actions { margin-top: var(--e-5); }

/* ==========================================================================
   LA CARTE CADEAU - composant signature, trois formats
   Seul endroit du projet où la mise en forme est ornementale.
   ========================================================================== */

.carte-cadeau {
    position: relative;
    display: block;
    padding: var(--e-6);
    background: var(--bordeaux);
    color: var(--blanc);
    border-radius: var(--rayon);
    text-decoration: none;
    overflow: hidden;
}
.carte-cadeau::after {
    /* Filet or intérieur, décalé de 8 px */
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid var(--or);
    pointer-events: none;
}

.carte-cadeau__marque {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--or);
    text-transform: uppercase;
}
.carte-cadeau__pour { font-size: var(--t-xs); color: var(--or); margin-top: var(--e-5); }
.carte-cadeau__nom {
    font-family: var(--serif);
    font-size: var(--t-2xl);
    font-weight: 600;
    line-height: 1.15;
    color: var(--blanc);
    margin-top: var(--e-1);
}
.carte-cadeau__contenu {
    font-family: var(--serif);
    font-size: var(--t-l);
    font-weight: 500;
    color: var(--blanc);
    margin-top: var(--e-4);
    max-width: 24rem;
}
.carte-cadeau__message {
    margin-top: var(--e-4);
    font-size: var(--t-s);
    font-style: italic;
    color: var(--or);
    max-width: 26rem;
}
.carte-cadeau__code {
    font-family: var(--serif);
    font-size: var(--t-xl);
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--or);
    margin-top: var(--e-5);
}
.carte-cadeau__pied {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-4);
    justify-content: space-between;
    margin-top: var(--e-5);
    padding-top: var(--e-4);
    border-top: 1px solid rgba(224, 198, 138, .35);
    font-size: var(--t-xs);
    color: var(--or);
}

/* Cartouche blanc du QR : le code doit rester sur fond blanc pur. */
.carte-cadeau__qr {
    background: var(--blanc);
    padding: var(--e-3);
    border-radius: var(--rayon);
    width: fit-content;
}
.carte-cadeau__qr img, .carte-cadeau__qr svg { width: 148px; height: 148px; display: block; }

/* Format vignette, pour les listes. */
.carte-cadeau--vignette { padding: var(--e-4); }
.carte-cadeau--vignette::after { inset: 5px; }
.carte-cadeau--vignette .carte-cadeau__nom  { font-size: var(--t-l); }
.carte-cadeau--vignette .carte-cadeau__code { font-size: var(--t-m); margin-top: var(--e-3); }
.carte-cadeau--vignette .carte-cadeau__contenu { font-size: var(--t-m); margin-top: var(--e-2); }

/* Format fiche complète : QR à droite sur grand écran. */
.carte-cadeau--fiche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--e-6);
    align-items: start;
    padding: var(--e-7);
}
@media (max-width: 700px) {
    .carte-cadeau--fiche { grid-template-columns: minmax(0, 1fr); padding: var(--e-5); }
    .carte-cadeau__qr { margin-inline: auto; }
}

/* Une carte utilisée ou expirée se voit immédiatement. */
.carte-cadeau--inactive { background: var(--bordeaux-fonce); }
.carte-cadeau--inactive::after { border-color: rgba(224, 198, 138, .3); }
.carte-cadeau--inactive .carte-cadeau__qr { opacity: .35; }

/* ==========================================================================
   BLOCS D'INFORMATION
   ========================================================================== */

.encart {
    padding: var(--e-5);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: var(--blanc);
}
.encart--voile { background: var(--bordeaux-voile); border-color: transparent; }
.encart--accent { border-left: 3px solid var(--or); }
.encart__titre {
    font-family: var(--sans);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--encre-douce);
    margin-bottom: var(--e-3);
}

/* Paire libellé / valeur, utilisée dans toutes les fiches. */
.paires { display: grid; gap: var(--e-3); }
.paire { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--e-4); align-items: baseline; }
.paire dt { font-size: var(--t-xs); color: var(--encre-douce); font-weight: 700; }
.paire dd { margin: 0; }
@media (max-width: 560px) { .paire { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Indicateur chiffré. */
.indicateur {
    padding: var(--e-4) var(--e-5);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: var(--blanc);
}
.indicateur__libelle {
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--encre-douce);
    letter-spacing: .04em;
}
.indicateur__valeur {
    font-family: var(--serif);
    font-size: var(--t-2xl);
    font-weight: 600;
    line-height: 1.1;
    margin-top: var(--e-2);
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}
.indicateur__detail { font-size: var(--t-xs); color: var(--encre-douce); margin-top: var(--e-1); }
.indicateur--accent { border-left: 3px solid var(--bordeaux); }
.indicateur--accent .indicateur__valeur { color: var(--bordeaux); }
.indicateur--alerte { border-left: 3px solid var(--attente); }
.indicateur--alerte .indicateur__valeur { color: var(--attente); }

/* ==========================================================================
   PRIX
   ========================================================================== */

.prix {
    font-family: var(--serif);
    font-size: var(--t-xl);
    font-weight: 600;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}
.prix--barre {
    font-size: var(--t-m);
    color: var(--encre-douce);
    text-decoration: line-through;
    font-weight: 500;
    margin-right: var(--e-2);
}
.prix__devise { font-size: .58em; font-weight: 500; margin-left: .28em; letter-spacing: .02em; }
.prix__usd { display: block; font-family: var(--sans); font-size: var(--t-xs); color: var(--encre-douce); }

/* ==========================================================================
   MOUVEMENT - respecté seulement si l'utilisateur l'accepte
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Menu mobile ouvert (site public et portails) : la page ne défile plus
   derrière le menu. Posée sur <html> par main.js. */
html.menu-ouvert,
html.menu-ouvert body { overflow: hidden; overscroll-behavior: none; }