/*
 * Fournitures scolaires : feuille de style.
 *
 * Charte reprise de la maquette de communication : bleu marine profond, orange
 * chaleureux, fond tres clair, formes douces. L'objectif est un service
 * accueillant, lisible au telephone, pas un document administratif.
 *
 * Trois regles structurantes :
 *   arrondis doux de 6 px, jamais de pilules ni de gros rayons
 *   l'orange sert a l'action et au prix, jamais a decorer
 *   le survol ne change que ce qui est reellement cliquable
 *
 * La liste des interdits visuels est dans CLAUDE.md.
 */

:root {
    /* Charte */
    --marine: #17275c;
    --marine-clair: #2b3d7a;
    --orange: #f07e26;
    --orange-clair: #f58e3f;
    /*
     * Orange assombri, reserve au TEXTE sur fond clair. L'orange vif ne donne
     * que 3,45 de contraste en petit corps, sous le minimum lisible de 4,5.
     */
    --orange-texte: #b0540d;

    /*
     * Les trois couleurs du drapeau camerounais.
     *
     * Elles ne rejoignent pas la charte : le marine et l'orange restent les
     * couleurs du site. Celles-ci ne servent qu'au filet de trois pixels,
     * pose en haut de page et en tete du pied.
     *
     * C'est une citation, pas une palette — et c'est parce qu'elle tient en
     * un trait qu'elle ne se lit pas comme un arc-en-ciel. Les etendre a des
     * fonds, des boutons ou des pastilles ferait exactement ce que la
     * direction artistique refuse : de l'exotisme de carte postale.
     */
    --drapeau-vert: #007a5e;
    --drapeau-rouge: #ce1126;
    --drapeau-jaune: #fcd116;

    --fond: #f4f6fb;
    --surface: #fdfeff;
    --surface-creuse: #eef2f9;
    --bordure: #e0e6f1;
    --bordure-marquee: #c9d2e4;

    --texte: #232a3b;
    --texte-doux: #616b80;

    --vert: #2f7d5b;
    --rouge: #c0492c;

    /* Rythme resserre : le confort de lecture ne vient pas de la taille. */
    --pas-1: 0.25rem;
    --pas-2: 0.5rem;
    --pas-3: 0.75rem;
    --pas-4: 1.125rem;
    --pas-5: 1.75rem;
    --pas-6: 2.75rem;

    --rayon: 12px;
    --rayon-petit: 8px;
    --rayon-large: 16px;

    --titre: 'Rubik', 'Segoe UI', system-ui, sans-serif;
    --courant: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

    /*
     * Ombres teintees de marine plutot que de noir : une ombre grise sur un fond
     * bleute donne un rendu sale. Trois niveaux seulement, pour que l'elevation
     * reste lisible.
     */
    --relief: 0 1px 2px rgba(23, 39, 92, 0.04), 0 2px 8px rgba(23, 39, 92, 0.05);
    --relief-moyen: 0 2px 4px rgba(23, 39, 92, 0.05), 0 8px 24px rgba(23, 39, 92, 0.08);
    --relief-orange: 0 4px 14px rgba(240, 126, 38, 0.28);

    --transition: 180ms cubic-bezier(0.2, 0.8, 0.3, 1);

    /* Largeur de lecture. En dessous de 72 rem, un ecran de 1900 px laisse des
       marges vides enormes et la page a l'air posee au milieu de rien. */
    --largeur: 76rem;
    --largeur-texte: 44rem;
}

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

html {
    /* Sans cette declaration, Windows en theme sombre repeint les champs et les
       listes deroulantes natifs en sombre sur nos fonds clairs. */
    color-scheme: light;
}

/* Supprime le delai de 300 ms au double-tap sur mobile. */
a,
button,
input,
select,
textarea,
label {
    touch-action: manipulation;
}

body {
    margin: 0;
    font-size: 1rem;
    background-color: var(--fond);
    background-image:
        radial-gradient(at 0% 0%, rgba(23, 39, 92, 0.045) 0, transparent 45%),
        radial-gradient(at 100% 0%, rgba(240, 126, 38, 0.05) 0, transparent 42%);
    background-attachment: fixed;
    color: var(--texte);
    font-family: var(--courant);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/*
 * Liens de contenu.
 *
 * Sans cette regle, un lien sans classe s'affiche en bleu #0000EE souligne :
 * la couleur par defaut du navigateur, etrangere a la charte. Les liens
 * habilles d'une classe (.bouton, .rayon-lien, .lien-nav) la neutralisent
 * chacun de leur cote.
 */
main a:not([class]),
.pied p a,
.encadre a:not([class]),
.vide a,
.bloc a:not([class]) {
    color: var(--marine);
    text-decoration: underline;
    text-decoration-color: var(--bordure-marquee);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--transition), text-decoration-color var(--transition);
}

main a:not([class]):hover,
main a:not([class]):focus-visible,
.vide a:hover,
.bloc a:not([class]):hover {
    color: var(--orange-texte);
    text-decoration-color: currentColor;
}

/* Chiffres alignes en colonne sans passer par une troisieme famille. */
.col-qte,
.col-prix,
.col-total,
.mention-valeur,
.choix-prix,
.totaux-valeur,
.releve-nombre,
.champ-quantite {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- structure */

/*
 * Deux niveaux : la bande occupe toute la largeur de l'ecran et porte le fond,
 * le conteneur borne la lecture au centre. Sans les bandes, toutes les sections
 * flottent sur un aplat uniforme et la page n'a aucun rythme.
 */
.conteneur {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 0 var(--pas-5);
}

.bande {
    padding: var(--pas-6) 0;
}

.bande-creuse {
    background: var(--surface-creuse);
    border-top: 1px solid var(--bordure);
    border-bottom: 1px solid var(--bordure);
}

.bande-marine {
    background: var(--marine);
    color: rgba(255, 255, 255, 0.82);
}

.bande-marine .titre-section,
.bande-marine .chiffre-valeur,
.bande-marine strong {
    color: #fff;
}

/* Pages interieures : une seule colonne bornee, sans bandes. */
.feuille {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: var(--pas-5) var(--pas-5) var(--pas-6);
}

/* ------------------------------------------------------------------ entete */

.entete {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--pas-4) 0;
    margin-bottom: var(--pas-4);
    border-bottom: 1px solid var(--bordure);
}

.marque {
    display: flex;
    gap: var(--pas-3);
    align-items: center;
    /* Meme cible tactile que le reste : la marque ramene a l'accueil. */
    min-height: 44px;
    text-decoration: none;
    color: inherit;
}

.marque svg {
    flex: none;
    display: block;
}

.enseigne {
    font-family: var(--titre);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--marine);
}

.enseigne-suite {
    display: block;
    font-family: var(--courant);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--texte-doux);
}

/* Pastille d'etat : discrete, elle nomme l'etape en cours dans l'en-tete. */
.tampon {
    display: inline-block;
    margin-bottom: var(--pas-3);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--marine);
    background: var(--surface-creuse);
    border: 1px solid var(--bordure-marquee);
    border-radius: var(--rayon);
    padding: var(--pas-1) var(--pas-3);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ titres */

.titre-section {
    font-family: var(--titre);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--marine);
    margin: var(--pas-5) 0 var(--pas-3);
}

.accroche {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--texte-doux);
    max-width: var(--largeur-texte);
    margin: 0 0 var(--pas-4);
}

/* Mot mis en avant dans un titre, comme sur la maquette. */
.souligne {
    color: var(--orange);
}

/* --------------------------------------------------------------- arguments */

.arguments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--pas-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.argument {
    display: flex;
    gap: var(--pas-3);
    align-items: flex-start;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.argument svg {
    flex: none;
    margin-top: 2px;
}

.argument strong {
    display: block;
    font-family: var(--titre);
    font-size: 1rem;
    font-weight: 600;
    color: var(--marine);
}

.argument span {
    color: var(--texte-doux);
}

/* Etapes numerotees : la pastille porte le chiffre, pas une icone. */
.etapes {
    counter-reset: etape;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--pas-3);
}

.etapes {
    gap: 0;
}

/*
 * Le numero occupe la premiere colonne, le titre et le texte la seconde.
 * Sans les grid-column explicites ci-dessous, le paragraphe retombait dans la
 * colonne du numero, large de 3 rem : le texte s'affichait a la verticale,
 * un mot par ligne.
 */
.etape {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 0 var(--pas-4);
    align-items: baseline;
    padding: var(--pas-5) 0;
    border-top: 1px solid var(--bordure);
    font-size: 1rem;
    color: var(--texte-doux);
}

.etape-titre,
.etape p {
    grid-column: 2;
}

.etape:first-child {
    border-top: none;
}

/* Le numero est decoratif : le titre de l'etape porte deja le sens. */
.etape::before {
    counter-increment: etape;
    content: counter(etape, decimal-leading-zero);
    font-family: var(--titre);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--orange-texte);
    font-variant-numeric: tabular-nums;
}

.etape-titre {
    font-family: var(--titre);
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--marine);
    margin: 0 0 var(--pas-1);
}

.etape p {
    margin: 0;
    max-width: 46rem;
    /* 60 a 75 caracteres par ligne : au-dela, l'oeil perd la ligne suivante. */
}

/* ------------------------------------------------------------------- blocs */

.bloc,
.fiche,
.depot,
.reception,
.releve {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-large);
    box-shadow: var(--relief);
}

.fiche {
    box-shadow: var(--relief-moyen);
    overflow: hidden;
}

.bloc {
    padding: var(--pas-4);
    margin-top: var(--pas-4);
}

.depot {
    padding: var(--pas-4);
    margin-top: var(--pas-4);
}

.depot-titre {
    font-family: var(--titre);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--marine);
    margin: 0 0 var(--pas-3);
}

.fiche-entete {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-4);
    padding: var(--pas-3) var(--pas-4);
    border-bottom: 1px solid var(--bordure);
    background: var(--surface-creuse);
}

.mention {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.mention-cle {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--texte-doux);
}

.mention-valeur {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--marine);
}

/* ------------------------------------------------------------------ lignes */

.lignes {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.lignes thead th {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    color: var(--texte-doux);
    padding: var(--pas-3) var(--pas-4);
    border-bottom: 1px solid var(--bordure);
}

.lignes td {
    padding: var(--pas-3) var(--pas-4);
    border-bottom: 1px solid var(--bordure);
    vertical-align: top;
}

.lignes tbody tr:last-child td {
    border-bottom: none;
}

.col-qte,
.col-prix,
.col-total {
    text-align: right;
    white-space: nowrap;
}

.col-qte {
    width: 4rem;
    text-align: left;
}

.col-total {
    font-weight: 600;
    color: var(--marine);
}

.article {
    display: block;
    font-weight: 600;
    color: var(--texte);
}

.article-source {
    display: block;
    font-size: 0.75rem;
    color: var(--texte-doux);
}

/*
 * Etat des lignes : un filet vertical de couleur et une mention en petit.
 * Une ligne resolue ne porte aucune marque, parce qu'elle n'a rien a signaler.
 */
.ligne-a-choisir td:first-child {
    box-shadow: inset 3px 0 0 var(--orange);
}

.ligne-non-identifiee td:first-child {
    box-shadow: inset 3px 0 0 var(--rouge);
}

.ligne-non-identifiee {
    background: rgba(192, 73, 44, 0.04);
}

.etat {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: var(--pas-1);
}

.etat-a-choisir {
    color: var(--orange-texte);
}

.etat-non-identifiee {
    color: var(--rouge);
}

/* Choix proposes : de vrais boutons radio, pas des cartes cliquables. */
.choix {
    margin: var(--pas-2) 0 0;
    padding: 0;
    border: none;
}

.choix legend {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--texte-doux);
    padding: 0;
}

.choix-option {
    display: flex;
    gap: var(--pas-2);
    align-items: center;
    padding: var(--pas-1) 0;
}

.choix-option input {
    accent-color: var(--orange);
    margin: 0;
}

.choix-option label {
    display: flex;
    flex: 1;
    gap: var(--pas-3);
    justify-content: space-between;
    cursor: pointer;
}

.choix-option label:hover {
    color: var(--marine);
}

.choix-prix {
    white-space: nowrap;
    color: var(--texte-doux);
}

/* ------------------------------------------------------------------ totaux */

.totaux {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--bordure);
    background: var(--surface-creuse);
    padding: var(--pas-3) var(--pas-4);
}

.totaux-grille {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--pas-2) var(--pas-5);
    align-items: baseline;
}

.totaux-cle {
    font-size: 0.9375rem;
    color: var(--texte-doux);
}

.totaux-valeur {
    text-align: right;
    font-weight: 600;
}

.totaux-cle.est-somme {
    font-family: var(--titre);
    font-size: 1rem;
    font-weight: 600;
    color: var(--marine);
    padding-top: var(--pas-2);
    border-top: 1px solid var(--bordure-marquee);
}

.totaux-valeur.est-somme {
    font-family: var(--titre);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--orange-texte);
    padding-top: var(--pas-2);
    border-top: 1px solid var(--bordure-marquee);
}

/* ---------------------------------------------------------------- messages */

.message,
.erreurs,
.avertissement {
    border-radius: var(--rayon);
    padding: var(--pas-4);
    margin: var(--pas-4) 0;
    font-size: 0.9375rem;
    display: flex;
    gap: var(--pas-3);
    align-items: flex-start;
}

.message {
    background: rgba(47, 125, 91, 0.07);
    border: 1px solid rgba(47, 125, 91, 0.22);
    color: #1f5a41;
}

.erreurs {
    background: rgba(192, 73, 44, 0.07);
    border: 1px solid rgba(192, 73, 44, 0.24);
    color: #8f3620;
}

.erreurs ul {
    margin: 0;
    padding-left: var(--pas-4);
}

.avertissement {
    background: rgba(240, 126, 38, 0.08);
    border: 1px solid rgba(240, 126, 38, 0.28);
    color: #8a4a11;
}

.avertissement strong {
    color: var(--orange-texte);
}

/* ----------------------------------------------------------------- actions */

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-3);
    margin-top: var(--pas-4);
}

.bouton {
    font-family: var(--titre);
    font-size: 0.9375rem;
    /* Cible tactile minimale : en dessous, on rate le bouton au doigt. */
    min-height: 44px;
    font-weight: 600;
    padding: var(--pas-3) var(--pas-5);
    border: 1px solid var(--bordure-marquee);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--marine);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    gap: var(--pas-2);
    align-items: center;
    justify-content: center;
    box-shadow: var(--relief);
    transition: background-color var(--transition), border-color var(--transition),
                transform var(--transition), box-shadow var(--transition);
}

.bouton:hover,
.bouton:focus-visible {
    background: var(--surface-creuse);
    border-color: var(--marine-clair);
    transform: translateY(-1px);
    box-shadow: var(--relief-moyen);
}

/* L'enfoncement au clic confirme l'appui, y compris au doigt. */
.bouton:active {
    transform: translateY(0) scale(0.985);
}

/*
 * Bouton principal : l'orange vif de la maquette, mais texte marine et non
 * blanc. Le blanc sur cet orange ne donne que 2,72 de contraste, illisible en
 * plein soleil comme pour une vue fatiguee. Le marine monte a 5,21 et laisse
 * l'orange intact.
 */
.bouton-principal {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--marine);
}

.bouton-principal {
    box-shadow: var(--relief-orange);
}

.bouton-principal:hover,
.bouton-principal:focus-visible {
    background: var(--orange-clair);
    border-color: var(--orange-clair);
    color: var(--marine);
    box-shadow: 0 6px 20px rgba(240, 126, 38, 0.36);
}

.bouton:focus-visible {
    outline: 2px solid var(--marine);
    outline-offset: 2px;
}

/* -------------------------------------------------------------- formulaire */

.champ {
    display: block;
    margin-top: var(--pas-4);
}

.champ-libelle {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--marine);
    margin-bottom: var(--pas-2);
}

.champ-aide {
    display: block;
    font-size: 0.875rem;
    color: var(--texte-doux);
    margin-top: var(--pas-2);
    max-width: 34rem;
}

.champ-texte,
.champ-liste,
.champ-zone,
.champ-fichier,
.champ-quantite {
    font-family: var(--courant);
    font-size: 1rem;
    padding: var(--pas-3);
    border: 1px solid var(--bordure-marquee);
    border-radius: var(--rayon-petit);
    background: var(--surface);
    color: var(--texte);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.champ-texte,
.champ-liste,
.champ-zone,
.champ-fichier {
    width: 100%;
    max-width: 32rem;
}

.champ-court {
    max-width: 14rem;
}

.champ-zone {
    line-height: 1.7;
    resize: vertical;
}

/*
 * Champ de fichier : l'element natif reste, son habillage est a nous.
 *
 * Le bouton du navigateur affichait « Choose File / No file chosen », en
 * anglais : sa langue est celle du navigateur, et aucune feuille de style ne
 * la change. Sur l'action principale du parcours photo, sur un site francais,
 * ca ne va pas.
 *
 * L'input est donc rendu invisible a l'oeil — jamais au clavier ni aux
 * lecteurs d'ecran — et le `label` qui l'entoure l'active. C'est lui qui
 * ouvre l'appareil photo ou la galerie selon le telephone : aucune reecriture
 * en JavaScript ne ferait mieux.
 */
.champ-fichier-natif {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.depose-zone {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-3);
    align-items: center;
    padding: var(--pas-4);
    background: var(--surface-creuse);
    border: 2px dashed var(--bordure-marquee);
    border-radius: var(--rayon-petit);
    transition: border-color var(--transition), background var(--transition);
}

.champ:hover .depose-zone {
    border-color: var(--orange);
    background: var(--surface);
}

/*
 * Le contour de mise au point se pose sur la zone, pas sur l'input invisible :
 * sans cela, un parent au clavier ne verrait jamais ou il se trouve.
 */
.champ-fichier-natif:focus-visible + .depose-zone {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
    border-color: var(--orange);
}

.depose-bouton {
    display: inline-flex;
    align-items: center;
    gap: var(--pas-2);
    /* 44 px de haut : c'est une cible tactile a part entiere. */
    min-height: 44px;
    padding: 0 var(--pas-4);
    font-family: var(--titre);
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--rayon);
    /* Texte marine sur l'orange : le blanc tombe a 2,72 de contraste. */
    background: var(--orange);
    color: var(--marine);
}

.champ:hover .depose-bouton {
    background: var(--orange-clair);
}

.depose-nom {
    color: var(--texte-doux);
    font-size: 0.9375rem;
    word-break: break-word;
}

.depose-nom[data-choisi] {
    color: var(--marine);
    font-weight: 600;
}

.champ-quantite {
    width: 3.25rem;
    text-align: right;
}

/*
 * Un seul anneau de mise au point, pas deux.
 *
 * La bordure passait a l'orange en meme temps qu'un contour orange se posait
 * a 1 px : les deux se touchaient presque et formaient un bourrelet epais.
 * La bordure garde donc sa couleur, et le contour se detache nettement.
 */
.champ-texte:focus-visible,
.champ-liste:focus-visible,
.champ-zone:focus-visible,
.champ-quantite:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.retirer {
    display: inline-flex;
    gap: var(--pas-2);
    align-items: center;
    /* L'etiquette enveloppe la case : c'est elle la cible, pas le carre de
       13 px que dessine le navigateur. */
    min-height: 44px;
    margin-top: var(--pas-2);
    font-size: 0.75rem;
    color: var(--texte-doux);
    cursor: pointer;
}

.retirer input {
    accent-color: var(--rouge);
    margin: 0;
}

.retirer:hover {
    color: var(--rouge);
}

.identite {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-4) var(--pas-5);
    padding-top: var(--pas-4);
    margin-top: var(--pas-4);
    border-top: 1px solid var(--bordure);
}

.identite .champ {
    margin-top: 0;
}

.separateur {
    display: flex;
    gap: var(--pas-3);
    align-items: center;
    margin: var(--pas-5) 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texte-doux);
}

.separateur::before,
.separateur::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--bordure);
}

/* --------------------------------------------------------------- reception */

/*
 * Ecran de recapitulatif : deux modes en cartes, adresse conditionnelle.
 *
 * L'ecran precedent presentait des radios brutes empilees, avec « Ville » et
 * « Adresse » toujours visibles, meme quand aucun mode n'etait choisi. Le
 * parent ne savait pas ou etait la question ni ou etait la reponse. Les deux
 * modes deviennent des vraies cartes cliquables, dont le mode selectionne se
 * detache par la couleur et par un anneau ; l'adresse n'apparait que si la
 * livraison est choisie.
 */
.reception {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-large);
    box-shadow: var(--relief);
    padding: var(--pas-5);
    margin-top: var(--pas-5);
}

.reception-modes {
    border: 0;
    padding: 0;
    margin: 0 0 var(--pas-4);
    display: grid;
    gap: var(--pas-3);
}

.reception-titre {
    font-family: var(--titre);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--marine);
    padding: 0;
    margin: 0 0 var(--pas-3);
    /* `float: left` retire l'aire reservee par la legende dans son fieldset :
       sans ca, un espace vide apparait au-dessus, meme quand tout va bien. */
    float: none;
}

/*
 * Chaque mode est une carte. Le radio reste dans le DOM pour le clavier et
 * les lecteurs d'ecran, il est simplement sorti du flux visuel.
 */
.mode-choix {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--pas-2) var(--pas-4);
    align-items: start;
    padding: var(--pas-4);
    background: var(--surface);
    border: 2px solid var(--bordure);
    border-radius: var(--rayon-large);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.mode-choix:hover {
    border-color: var(--marine);
    transform: translateY(-1px);
}

.mode-choix.est-actif {
    border-color: var(--orange);
    background: var(--surface-creuse);
}

.mode-choix input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.mode-choix input:focus-visible ~ .mode-marque {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.mode-marque {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--surface-creuse);
    color: var(--marine);
    font-size: 1.1rem;
    transition: background var(--transition), color var(--transition);
}

.mode-choix.est-actif .mode-marque {
    background: var(--orange);
    color: var(--marine);
}

.mode-corps {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mode-nom {
    font-family: var(--titre);
    font-size: 1rem;
    font-weight: 600;
    color: var(--marine);
}

.mode-detail {
    font-size: 0.875rem;
    color: var(--texte-doux);
    line-height: 1.5;
}

.reception-livraison {
    padding-top: var(--pas-4);
    border-top: 1px dashed var(--bordure);
    margin-top: var(--pas-3);
}

.actions-recap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-3);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--pas-5);
    padding-top: var(--pas-4);
    border-top: 1px solid var(--bordure);
}

.bouton-discret {
    background: transparent;
    border-color: transparent;
    color: var(--texte-doux);
    padding-left: var(--pas-2);
    padding-right: var(--pas-2);
}

.bouton-discret:hover {
    color: var(--marine);
    background: var(--surface-creuse);
}

/* ------------------------------------------------------------------ releve */

.releve {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-5);
    padding: var(--pas-4);
    margin-top: var(--pas-4);
}

.releve-poste {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.releve-nombre {
    font-family: var(--titre);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--marine);
}

.releve-libelle {
    font-size: 0.75rem;
    color: var(--texte-doux);
}

/* -------------------------------------------------------------------- pied */

.pied {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--marine);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9375rem;
    padding: var(--pas-6) 0 var(--pas-5);
    margin-top: var(--pas-6);
}

/*
 * Le motif de fournitures, sur la moitie diagonale du pied.
 *
 * La diagonale, et non toute la surface : le texte du pied occupe la gauche,
 * et un motif partout passerait dessous en reduisant le contraste. La coupe
 * en biais laisse la lecture au propre et donne au bloc une matiere que
 * l'aplat marine n'avait pas.
 *
 * Le trace est celui de la bande d'appel a agir : c'est le meme dessin, donc
 * la meme famille visuelle d'un bout a l'autre de la page.
 */
.pied::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('../images/fournitures.svg');
    background-size: 300px 300px;
    opacity: 0.9;
    /*
       Coupe franche d'un coin a l'autre, et non un degrade.
       `to top right` suit la diagonale reelle du bloc : le motif occupe le
       triangle superieur droit, le texte garde le triangle inferieur gauche.
       Une coupe floue ne se lisait pas comme une diagonale.
    */
    mask-image: linear-gradient(to top right, transparent 50%, #000 50%);
    -webkit-mask-image: linear-gradient(to top right, transparent 50%, #000 50%);
}

/* Le trait de la diagonale, comme le bord d'une regle posee sur la page. */
.pied::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        to top right,
        transparent calc(50% - 1px),
        rgba(255, 255, 255, 0.16) calc(50% - 1px),
        rgba(255, 255, 255, 0.16) calc(50% + 1px),
        transparent calc(50% + 1px)
    );
}

.pied-grille {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: var(--pas-5);
}

.pied-titre {
    font-family: var(--titre);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 var(--pas-3);
}

.pied ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--pas-2);
}

.pied a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
}

.pied a:hover,
.pied a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.pied p {
    margin: 0 0 var(--pas-3);
    max-width: 30rem;
}

.pied-bas {
    margin-top: var(--pas-5);
    padding-top: var(--pas-4);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Etiquette lue par les lecteurs d'ecran, invisible a l'oeil. */
.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* -------------------------------------------------------------- adaptations */

@media (max-width: 45rem) {
    .feuille {
        padding: 0 var(--pas-3) var(--pas-5);
    }

    .lignes td,
    .lignes thead th {
        padding: var(--pas-3);
    }

    .col-prix {
        display: none;
    }

    .totaux {
        justify-content: stretch;
    }

    .totaux-grille {
        width: 100%;
    }

    .actions .bouton {
        flex: 1;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bouton {
        transition: none;
    }
}

/* Fiche en lecture seule : alternance discrete pour suivre les lignes. */
.fiche-figee .lignes tbody tr:nth-child(odd) {
    background: rgba(23, 39, 92, 0.02);
}

/* ============================================================== navigation */

.saut {
    position: absolute;
    left: -999px;
}

.saut:focus {
    position: fixed;
    top: var(--pas-2);
    left: var(--pas-2);
    z-index: 10;
    background: var(--marine);
    color: #fff;
    padding: var(--pas-2) var(--pas-3);
    border-radius: var(--rayon);
}

.barre {
    background: var(--surface);
    border-bottom: 1px solid var(--bordure);
}

/*
 * Le filet national.
 *
 * Trois bandes franches, jamais un degrade : les arrets nets donnent trois
 * aplats et non un fondu, ce qui est toute la difference entre un drapeau
 * et une decoration. Vert, rouge, jaune, de gauche a droite.
 *
 * Il coiffe la barre collante, donc il reste visible au defilement. Pose
 * au-dessus d'elle, il disparaitrait au premier geste et ne se verrait
 * qu'a l'ouverture de la page.
 *
 * En `::before` et non en element : c'est un signe, pas une information.
 * Un lecteur d'ecran n'a rien a annoncer, et le balisage reste propre.
 *
 * Une seule pose sur tout le site. Le pied a deja ses deux
 * pseudo-elements pour le motif de fournitures, et repeter le filet en
 * bas n'ajouterait rien qu'on ne lise deja en haut.
 */
.barre::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(
        to right,
        var(--drapeau-vert) 0 33.333%,
        var(--drapeau-rouge) 33.333% 66.667%,
        var(--drapeau-jaune) 66.667% 100%
    );
}

.barre {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(253, 254, 255, 0.92);
    backdrop-filter: saturate(1.4) blur(8px);
}

.barre-contenu {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: var(--pas-3) var(--pas-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-3) var(--pas-4);
    align-items: center;
    justify-content: space-between;
}

.navigation {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-4);
}

.lien-nav {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--texte-doux);
    text-decoration: none;
    padding: var(--pas-1) 0;
    border-bottom: 2px solid transparent;
}

.lien-nav:hover,
.lien-nav:focus-visible {
    color: var(--marine);
}

.lien-nav.est-actif {
    color: var(--marine);
    border-bottom-color: var(--orange);
}

/* ==================================================================== heros */

.heros {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--pas-6);
    align-items: center;
}

.heros-texte {
    max-width: 34rem;
}

.surtitre {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texte-doux);
    margin: 0 0 var(--pas-3);
}

.titre-heros {
    font-family: var(--titre);
    font-size: clamp(2.25rem, 1.3rem + 3vw, 3.75rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--marine);
    margin: 0 0 var(--pas-3);
}

.heros-visuel {
    max-width: 30rem;
    width: 100%;
    justify-self: center;
}

.chiffres {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pas-4);
    margin: var(--pas-5) 0 0;
    padding-top: var(--pas-4);
    border-top: 1px solid var(--bordure);
}

.chiffre {
    display: flex;
    flex-direction: column-reverse;
}

.chiffre-valeur {
    font-family: var(--titre);
    font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
    line-height: 1.1;
    font-weight: 700;
    color: var(--marine);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.chiffre-libelle {
    font-size: 0.8125rem;
    color: var(--texte-doux);
}

/* =================================================================== rayons */

.section {
    margin-top: var(--pas-6);
}

.section:first-child {
    margin-top: 0;
}

.rayons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--pas-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.rayon {
    display: flex;
    gap: var(--pas-3);
    align-items: center;
    padding: var(--pas-4);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--marine);
    text-decoration: none;
}

.rayon {
    box-shadow: var(--relief);
    transition: transform var(--transition), box-shadow var(--transition),
                border-color var(--transition);
}

.rayon:hover,
.rayon:focus-visible {
    border-color: var(--orange);
    transform: translateY(-2px);
    box-shadow: var(--relief-moyen);
}

.recherche {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-2);
    align-items: center;
    margin-bottom: var(--pas-4);
}

/* ================================================================ produits */

.grille-produits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--pas-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.produit {
    display: flex;
    flex-direction: column;
    gap: var(--pas-2);
    padding: var(--pas-4);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-large);
    box-shadow: var(--relief);
    transition: transform var(--transition), box-shadow var(--transition),
                border-color var(--transition);
}

.produit:hover {
    border-color: var(--bordure-marquee);
    transform: translateY(-2px);
    box-shadow: var(--relief-moyen);
}

/* Pastille du rayon : elle donne un point d'entree visuel a chaque carte. */
.produit-icone {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--rayon-petit);
    background: var(--surface-creuse);
    color: var(--marine);
    font-size: 0.9375rem;
}

.produit-nom {
    font-family: var(--titre);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--marine);
    margin: 0;
    /* Les libelles longs ne doivent pas casser l'alignement de la grille. */
    overflow-wrap: break-word;
}

.produit-prix {
    font-family: var(--titre);
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--orange-texte);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.produit-mention {
    font-size: 0.75rem;
    color: var(--texte-doux);
    margin: 0;
}

.produit form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-2);
    align-items: center;
    margin-top: auto;
    padding-top: var(--pas-2);
}

.produit-compteur {
    font-size: 0.75rem;
    color: var(--texte-doux);
}

.bouton-compact {
    padding: var(--pas-2) var(--pas-4);
    font-size: 0.875rem;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-3) var(--pas-4);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--pas-5);
    padding-top: var(--pas-4);
    border-top: 1px solid var(--bordure);
}

.pagination-position {
    margin: 0;
    font-size: 0.875rem;
    color: var(--texte-doux);
}

.pagination-liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-2);
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination-lien {
    display: inline-flex;
    gap: var(--pas-2);
    align-items: center;
    justify-content: center;
    /* Meme cible tactile que les boutons : on rate une pagination trop fine. */
    min-height: 44px;
    min-width: 44px;
    padding: 0 var(--pas-3);
    border: 1px solid var(--bordure-marquee);
    border-radius: var(--rayon-petit);
    background: var(--surface);
    color: var(--marine);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--transition), border-color var(--transition);
}

.pagination-lien:hover,
.pagination-lien:focus-visible {
    background: var(--surface-creuse);
    border-color: var(--marine-clair);
}

.pagination-lien.est-actif {
    background: var(--marine);
    border-color: var(--marine);
    color: #fff;
}

.pagination-lien.est-inactif {
    opacity: 0.45;
    cursor: default;
}

.pagination-ecart {
    padding: 0 var(--pas-1);
    color: var(--texte-doux);
}

@media (max-width: 45rem) {
    .pagination {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .pagination-liste {
        justify-content: center;
    }

    .pagination-position {
        text-align: center;
    }
}

/* ================================================================== panier */

.colonnes {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--pas-4);
    align-items: start;
}

.encadre {
    background: var(--surface-creuse);
    border: 1px dashed var(--bordure-marquee);
    border-radius: var(--rayon);
    padding: var(--pas-4);
}

.encadre p {
    font-size: 0.875rem;
    color: var(--texte-doux);
    margin-top: 0;
}

.vide {
    padding: var(--pas-5) var(--pas-4);
    margin: 0;
    text-align: center;
    color: var(--texte-doux);
}

.ligne-qte {
    display: flex;
    flex-direction: column;
    gap: var(--pas-1);
    align-items: flex-start;
}

/* Action secondaire dans un tableau : un vrai bouton, presente comme un lien. */
.lien-action {
    font: inherit;
    font-size: 0.75rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--texte-doux);
    text-decoration: underline;
    cursor: pointer;
}

.lien-action:hover,
.lien-action:focus-visible {
    color: var(--marine);
}

.lien-action.est-destructif:hover,
.lien-action.est-destructif:focus-visible {
    color: var(--rouge);
}

/* ============================================================ adaptations */

@media (max-width: 60rem) {
    .heros {
        grid-template-columns: 1fr;
        gap: var(--pas-5);
    }

    .heros-texte {
        max-width: none;
    }

    .heros-visuel {
        display: none;
    }

    .pied-grille {
        grid-template-columns: 1fr;
        gap: var(--pas-4);
    }

    .colonnes {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 45rem) {
    .conteneur,
    .feuille {
        padding-left: var(--pas-4);
        padding-right: var(--pas-4);
    }

    .bande {
        padding: var(--pas-5) 0;
    }

    .chiffres {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--pas-3);
    }

    .chiffre-valeur {
        font-size: 1.375rem;
    }

    .barre-contenu {
        padding: var(--pas-3) var(--pas-4);
    }

    .navigation {
        order: 3;
        width: 100%;
        gap: var(--pas-3);
        overflow-x: auto;
    }

    .chiffres {
        gap: var(--pas-4);
    }
}

/* ====================================================== icones Font Awesome */

/*
 * Un seul jeu d'icones, style solid, taille normalisee. Les icones sont toutes
 * decoratives : chaque libelle reste ecrit a cote, en toutes lettres.
 */
.lien-nav i,
.bouton i {
    font-size: 0.8125rem;
    opacity: 0.9;
}

.argument-icone,
.rayon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/*
 * Pastille des arguments : fond orange tres pale, icone en marine. L'orange
 * assombri sur ce fond ne donnait que 4,44 de contraste, sous le seuil ; le
 * marine depasse 10 et reste dans la charte.
 */
.argument-icone {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--rayon-petit);
    background: rgba(240, 126, 38, 0.14);
    color: var(--marine);
    font-size: 1rem;
}

.rayon i {
    width: 1.75rem;
    color: var(--orange-texte);
    font-size: 1rem;
}

.message i,
.erreurs i,
.avertissement i {
    margin-top: 2px;
    font-size: 1rem;
}

/* ============================================================ appel a agir */

.appel {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-5);
    align-items: center;
    justify-content: space-between;
}

.appel .titre-section {
    margin-top: 0;
}

.appel-texte {
    max-width: 34rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
}

.appel .actions {
    margin-top: 0;
}

/* Bouton secondaire sur fond marine : il doit rester lisible. */
.bande-marine .bouton:not(.bouton-principal) {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

.bande-marine .bouton:not(.bouton-principal):hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/* ================================================================= scene */

/*
 * Illustration du heros. Chaque plan flotte a sa propre cadence : c'est ce
 * decalage qui donne la profondeur, pas une ombre.
 */
.scene {
    width: 100%;
    height: auto;
    overflow: visible;
}

.plan {
    transform-box: fill-box;
    transform-origin: center;
}

.tampon-proforma {
    transform-box: view-box;
    transform-origin: 402px 118px;
}

/* ------------------------------------------------------------- animations */

/*
 * Les blocs sont visibles par defaut. Ils ne sont masques que si le script a
 * pris la main : si le JavaScript ne se charge pas, la page reste entiere.
 */
.revele-actif [data-revele] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 520ms ease-out, transform 520ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.revele-actif [data-revele].est-visible {
    opacity: 1;
    transform: none;
}

.anime .plan-fond {
    animation: flotte 9s ease-in-out infinite;
}

.anime .plan-cahier {
    animation: flotte 7s ease-in-out infinite 0.4s;
}

.anime .plan-cartable {
    animation: flotte 8s ease-in-out infinite 0.9s;
}

.anime .plan-outils {
    animation: flotte 6.5s ease-in-out infinite 0.2s;
}

.anime .tampon-proforma {
    animation: tamponne 900ms cubic-bezier(0.2, 1.2, 0.4, 1) 500ms both;
}

.anime .ecriture path {
    transform-box: fill-box;
    transform-origin: left center;
    animation: ecrit 700ms ease-out both;
}

.anime .ecriture path:nth-child(1) { animation-delay: 250ms; }
.anime .ecriture path:nth-child(2) { animation-delay: 350ms; }
.anime .ecriture path:nth-child(3) { animation-delay: 450ms; }
.anime .ecriture path:nth-child(4) { animation-delay: 550ms; }
.anime .ecriture path:nth-child(5) { animation-delay: 650ms; }
.anime .ecriture path:nth-child(6) { animation-delay: 750ms; }
.anime .ecriture path:nth-child(7) { animation-delay: 850ms; }

@keyframes flotte {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* Le tampon arrive de haut, un peu trop grand, et se pose. */
@keyframes tamponne {
    0% { opacity: 0; transform: rotate(-11deg) scale(1.5); }
    100% { opacity: 1; transform: rotate(-11deg) scale(1); }
}

/* Les lignes du cahier s'ecrivent de gauche a droite. */
@keyframes ecrit {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

/* ------------------------------------------------------- etapes illustrees */

.etape {
    grid-template-columns: 2.5rem minmax(0, 1fr) 7.5rem;
    align-items: center;
}

.etape-image {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 7.5rem;
    height: auto;
    justify-self: end;
}

/* --------------------------------------------------- reglure de fond */

/*
 * Reglure de cahier sur les bandes creuses : le motif du produit lui-meme,
 * a peine visible. Ce n'est pas une trame decorative posee au hasard.
 */
.bande-creuse {
    position: relative;
    isolation: isolate;
}

.bande-creuse::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('../images/cahier.svg');
    background-size: 240px 224px;
    /* Le motif s'efface sur les bords pour ne pas cerner la bande. */
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

/*
 * Le heros est pose sur une page de cahier, un peu plus marquee que sur les
 * bandes creuses : c'est la premiere chose qu'on voit, et c'est ce qui dit le
 * sujet du site avant meme d'avoir lu le titre.
 */
.bande-heros {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.bande-heros::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('../images/cahier.svg');
    background-size: 280px 261px;
    mask-image: radial-gradient(120% 100% at 65% 40%, #000 34%, transparent 80%);
}

/* Marge rouge du cahier, tracee a gauche comme sur une vraie page. */
.bande-heros::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(2.5rem, calc((100% - var(--largeur)) / 2 + 1.5rem));
    width: 1px;
    z-index: -1;
    background: rgba(240, 126, 38, 0.32);
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

/*
 * Bande d'appel a agir : fournitures dessinees au trait sur le marine. Le motif
 * est assez pale pour que le texte pose dessus reste au-dessus de 4,5.
 */
.bande-marine {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.bande-marine::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('../images/fournitures.svg');
    background-size: 320px 320px;
    mask-image: linear-gradient(105deg, #000 0%, rgba(0, 0, 0, 0.25) 52%, #000 100%);
}

@media (max-width: 45rem) {
    .etape {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .etape-image {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .plan,
    .tampon-proforma,
    .ecriture path {
        animation: none !important;
    }
}

/* ========================================================= mobile : confort */

/*
 * Encoches et barre gestuelle : sans ces marges, la barre collante passe sous
 * l'encoche et le pied de page sous la barre de geste de l'iPhone.
 */
.barre-contenu {
    padding-left: max(var(--pas-5), env(safe-area-inset-left));
    padding-right: max(var(--pas-5), env(safe-area-inset-right));
}

.pied {
    padding-bottom: max(var(--pas-5), env(safe-area-inset-bottom));
}

@media (max-width: 45rem) {
    /*
     * Toute cible tactile fait au moins 44 px. Les liens de navigation
     * tombaient a 35 px et ceux du pied de page a 20 : on les rate au doigt,
     * surtout en marchant ou d'une seule main.
     */
    .lien-nav {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .marque {
        min-height: 44px;
    }

    .pied ul {
        gap: var(--pas-1);
    }

    .pied li a,
    .lien-action {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
    }

    /* Deux colonnes de produits tiennent sur un telephone : une seule oblige
       a defiler trois fois plus pour parcourir le meme rayon. */
    .grille-produits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--pas-2);
    }

    .produit {
        padding: var(--pas-3);
    }

    .produit-nom {
        font-size: 0.9375rem;
    }

    .produit form {
        width: 100%;
    }

    .produit .bouton {
        width: 100%;
    }

    /* La recherche prend toute la largeur : un champ de 224 px a cote d'un
       bouton, ce n'est confortable ni a lire ni a viser. */
    .recherche {
        gap: var(--pas-2);
    }

    .recherche .champ-texte {
        flex: 1;
        max-width: none;
    }

    .rayons-filtre {
        gap: var(--pas-4);
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        /* Le defilement s'arrete sur un filtre, jamais entre deux. */
        scroll-snap-type: x proximity;
    }

    .rayons-filtre::-webkit-scrollbar {
        display: none;
    }

    .filtre {
        white-space: nowrap;
        scroll-snap-align: start;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .identite {
        gap: var(--pas-4);
    }

    .identite .champ,
    .champ-court {
        width: 100%;
        max-width: none;
    }
}

/* Tres petits ecrans : on repasse a une colonne plutot que d'ecraser. */
@media (max-width: 22rem) {
    .grille-produits {
        grid-template-columns: 1fr;
    }
}

/* ======================================================= entetes de page */

/*
 * Les pages interieures portent le meme decor que l'accueil : bande pleine
 * largeur et page de cahier. Sans cela, le catalogue et le panier ont l'air
 * d'appartenir a un autre site.
 */
.bande-entete {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--pas-5) 0;
    border-bottom: 1px solid var(--bordure);
}

/*
 * Le motif de fournitures sur la moitie diagonale de l'en-tete.
 *
 * Les pages interieures n'avaient que du texte sur la reglure : a cote du
 * heros de l'accueil et de son illustration, elles paraissaient inachevees.
 * Le motif leur donne la meme matiere, sans demander une illustration par
 * page.
 *
 * En biais, et non partout : le titre et l'accroche occupent la gauche, un
 * motif sous le texte ferait baisser le contraste. Il est aussi beaucoup plus
 * pale qu'au pied de page, ou le fond marine le supporte.
 */
.bande-entete::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Variante marine : le trace blanc serait invisible sur ce fond pale. */
    background-image: url('../images/fournitures-marine.svg');
    background-size: 260px 260px;
    opacity: 0.9;
    mask-image: linear-gradient(to top right, transparent 50%, #000 50%);
    -webkit-mask-image: linear-gradient(to top right, transparent 50%, #000 50%);
}

@media (max-width: 45rem) {
    /*
     * Sur telephone, le texte prend toute la largeur : le motif passerait
     * dessous. On le retire plutot que de le laisser gener la lecture.
     */
    .bande-entete::before {
        display: none;
    }
}

.entete-page {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-4) var(--pas-5);
    align-items: flex-end;
    justify-content: space-between;
}

.titre-page {
    font-family: var(--titre);
    font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--marine);
    margin: 0 0 var(--pas-2);
}

.bande-entete .accroche {
    margin-bottom: 0;
}

.entete-appui {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-4);
    align-items: center;
}

/*
 * Chiffre d'appui dans un en-tete : nombre d'articles, total du panier.
 *
 * Il flottait nu a cote du titre et se lisait comme une note de bas de page,
 * alors que c'est l'information que le parent vient chercher. Pose sur une
 * plaque, avec un filet orange, il tient son rang face au titre.
 */
.appui-chiffre {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: var(--pas-3) var(--pas-4);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-large);
    box-shadow: var(--relief);
    text-align: right;
}

.appui-valeur {
    font-family: var(--titre);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--marine);
    font-variant-numeric: tabular-nums;
}

.appui-libelle {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--orange-texte);
}

@media (max-width: 45rem) {
    .entete-page {
        align-items: flex-start;
    }
}

/* ============================================================== parcours */

/*
 * Suivi de commande. Chaque etape franchie porte une coche, l'etape en cours
 * est mise en avant, les suivantes restent en attente. L'etat n'est jamais
 * porte par la seule couleur : il y a toujours une coche ou une mention.
 */
.parcours {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--pas-3);
    list-style: none;
    margin: 0 0 var(--pas-5);
    padding: 0;
    counter-reset: parcours;
}

.parcours-etape {
    display: flex;
    gap: var(--pas-3);
    align-items: flex-start;
    padding: var(--pas-4);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}

.parcours-marque {
    display: flex;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--rayon-petit);
    background: var(--surface-creuse);
    color: var(--texte-doux);
    font-family: var(--titre);
    font-size: 0.8125rem;
    font-weight: 700;
}

.parcours-texte strong {
    display: block;
    font-family: var(--titre);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--texte-doux);
}

.parcours-etat {
    font-size: 0.75rem;
    color: var(--texte-doux);
}

.parcours-etape.est-franchie .parcours-marque {
    background: rgba(47, 125, 91, 0.14);
    color: var(--vert);
}

.parcours-etape.est-franchie .parcours-texte strong {
    color: var(--texte);
}

.parcours-etape.est-courante {
    border-color: var(--orange);
    box-shadow: var(--relief-moyen);
}

.parcours-etape.est-courante .parcours-marque {
    background: var(--orange);
    color: var(--marine);
}

.parcours-etape.est-courante .parcours-texte strong {
    color: var(--marine);
}

.parcours-etape.est-courante .parcours-etat {
    color: var(--orange-texte);
    font-weight: 700;
}

/* ========================================================= photos produits */

/*
 * La photo occupe le haut de la carte, au format 4:3. Le rapport est fixe pour
 * que la grille reste alignee quelle que soit la photo envoyee, et les
 * dimensions sont declarees pour que la page ne saute pas au chargement.
 */
.produit-photo {
    display: block;
    width: calc(100% + 2 * var(--pas-4));
    margin: calc(-1 * var(--pas-4)) calc(-1 * var(--pas-4)) var(--pas-2);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--rayon-large) var(--rayon-large) 0 0;
    background: var(--surface-creuse);
}

/*
 * Place tenue par le pictogramme du rayon, faute de photo.
 *
 * C'etait le plus grand aplat clair de la page : un quart de chaque carte,
 * repete vingt-quatre fois, a peine plus fonce que la carte elle-meme. La
 * grille se lisait comme une etendue blanche.
 *
 * Le fond descend d'un cran, une reglure tres pale rappelle le cahier, et le
 * pictogramme grandit assez pour qu'on identifie le rayon d'un coup d'oeil.
 */
.produit-photo-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--marine);
    font-size: 2.75rem;
    opacity: 0.28;
    background-color: #e7ecf6;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 13px,
        rgba(23, 39, 92, 0.06) 13px 14px
    );
}

.vignette {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: var(--rayon-petit);
    background: var(--surface-creuse);
}

.vignette-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texte-doux);
}

.apercu-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--rayon);
    margin-bottom: var(--pas-3);
    background: var(--surface-creuse);
}

.apercu-vide {
    display: flex;
    flex-direction: column;
    gap: var(--pas-2);
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    margin: 0 0 var(--pas-3);
    border: 1px dashed var(--bordure-marquee);
    border-radius: var(--rayon);
    color: var(--texte-doux);
    font-size: 0.875rem;
}

.apercu-vide i {
    font-size: 1.75rem;
}

/* Article retire du catalogue : visible, mais visiblement inactif. */
.ligne-inactive {
    opacity: 0.55;
}

@media (max-width: 45rem) {
    .produit-photo {
        width: calc(100% + 2 * var(--pas-3));
        margin: calc(-1 * var(--pas-3)) calc(-1 * var(--pas-3)) var(--pas-2);
    }
}

/* ============================================================ ecran scinde */

/*
 * Page de connexion. Le panneau de gauche porte l'identite, le formulaire reste
 * seul face au regard. Sur telephone le panneau passe au-dessus, reduit a son
 * essentiel : on ne fait pas defiler une identite avant de pouvoir se connecter.
 */
.ecran-scinde {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

.volet-identite {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--pas-6);
    padding: var(--pas-6) clamp(var(--pas-5), 5vw, 4rem);
    background-color: var(--marine);
    background-image: url('../images/fournitures.svg');
    background-size: 320px 320px;
    color: rgba(255, 255, 255, 0.78);
}

.volet-marque {
    display: flex;
    gap: var(--pas-3);
    align-items: center;
    text-decoration: none;
    color: inherit;
    width: fit-content;
}

.volet-nom {
    display: block;
    font-family: var(--titre);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.volet-suite {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.volet-phrase {
    font-family: var(--titre);
    font-size: clamp(1.5rem, 1rem + 1.6vw, 2.125rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: #fff;
    margin: 0 0 var(--pas-4);
    text-wrap: balance;
}

.volet-detail {
    max-width: 30rem;
    margin: 0;
    line-height: 1.7;
}

.volet-chiffres {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-5);
    margin: var(--pas-5) 0 0;
    padding-top: var(--pas-4);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.volet-chiffres div {
    display: flex;
    flex-direction: column-reverse;
}

.volet-chiffres dd {
    font-family: var(--titre);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.volet-chiffres dt {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Filet coupe par un mot, comme une mention de bas de page. */
.volet-pied {
    display: flex;
    gap: var(--pas-3);
    align-items: center;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.volet-pied span {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

/* ---------------------------------------------------------- cote formulaire */

.volet-formulaire {
    display: flex;
    flex-direction: column;
    gap: var(--pas-4);
    align-items: center;
    justify-content: center;
    padding: var(--pas-6) var(--pas-5);
}

.carte-connexion {
    width: 100%;
    max-width: 26rem;
    padding: var(--pas-5);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-large);
    box-shadow: var(--relief-moyen);
}

.carte-connexion .titre-page {
    margin-bottom: var(--pas-2);
}

.carte-connexion .accroche {
    font-size: 1rem;
    margin-bottom: var(--pas-4);
}

.carte-connexion .separateur {
    margin: var(--pas-4) 0 var(--pas-3);
}

.carte-connexion code {
    font-size: 0.875rem;
    padding: 2px var(--pas-2);
    border-radius: var(--rayon-petit);
    background: var(--surface-creuse);
    color: var(--marine);
}

.bouton-pleine-largeur {
    width: 100%;
}

.retour-site a {
    display: inline-flex;
    gap: var(--pas-2);
    align-items: center;
    min-height: 44px;
    font-size: 0.875rem;
    color: var(--texte-doux);
    text-decoration: none;
}

.retour-site a:hover {
    color: var(--marine);
}

/*
 * Chrome repeint les champs remplis automatiquement en bleu pale, ce qui
 * casse la carte. On lui impose nos couleurs.
 */
.champ-texte:-webkit-autofill,
.champ-texte:-webkit-autofill:hover,
.champ-texte:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--texte);
    -webkit-box-shadow: 0 0 0 40rem var(--surface) inset;
    caret-color: var(--texte);
}

@media (max-width: 56rem) {
    .ecran-scinde {
        grid-template-columns: 1fr;
    }

    .volet-identite {
        gap: var(--pas-4);
        padding: var(--pas-4) var(--pas-4) var(--pas-5);
    }

    /* Sur telephone, on ne fait pas defiler une identite avant de se connecter. */
    .volet-propos,
    .volet-pied {
        display: none;
    }

    .volet-formulaire {
        padding: var(--pas-5) var(--pas-4) var(--pas-6);
    }
}

/* ========================================================= rayons en colonne */

/*
 * Neuf intitules a la suite se lisent comme un tas : on ne sait pas lequel
 * contient ce qu'on cherche, et rien ne dit s'il est vide. Une colonne, avec
 * une icone et un nombre par rayon, se parcourt d'un regard.
 */
.catalogue-mise-en-page {
    display: grid;
    /* Assez large pour que « Classement et papeterie » tienne sur une ligne :
       des rayons de hauteurs inegales se lisent mal. */
    grid-template-columns: 16.75rem minmax(0, 1fr);
    gap: var(--pas-5);
    align-items: start;
}

.rayons-colonne {
    position: sticky;
    top: 5rem;
}

.rayons-colonne .titre-mineur {
    font-family: var(--titre);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texte-doux);
    margin: var(--pas-4) 0 var(--pas-2);
}

.rayons-colonne .titre-mineur:first-child {
    margin-top: 0;
}

.rayons-liste {
    display: grid;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rayon-lien {
    display: flex;
    gap: var(--pas-3);
    align-items: center;
    min-height: 44px;
    padding: 0 var(--pas-3);
    border-radius: var(--rayon);
    font-size: 0.9375rem;
    color: var(--texte);
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition);
}

.rayon-lien i {
    width: 1.125rem;
    text-align: center;
    color: var(--texte-doux);
}

.rayon-lien svg {
    flex: none;
}

.rayon-nom {
    flex: 1;
    min-width: 0;
}

/* Le nombre d'articles evite de cliquer sur un rayon vide. */
.rayon-compte {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--texte-doux);
}

.rayon-lien:hover,
.rayon-lien:focus-visible {
    background: var(--surface-creuse);
    color: var(--marine);
}

/* Le rayon courant se distingue par un fond et un filet, pas par la couleur
   du texte seule. */
.rayon-lien.est-actif {
    background: var(--surface);
    border: 1px solid var(--bordure);
    box-shadow: inset 3px 0 0 var(--orange), var(--relief);
    font-weight: 600;
    color: var(--marine);
    padding-left: calc(var(--pas-3) - 1px);
}

.rayon-lien.est-actif .rayon-compte {
    color: var(--marine);
    font-weight: 700;
}

.rayon-compte.est-alerte {
    color: var(--rouge);
    font-weight: 700;
}

/* Rappel de ce qui est filtre, avec le moyen de revenir en arriere. */
.resume-filtre {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-2) var(--pas-4);
    align-items: center;
    justify-content: space-between;
    margin: 0 0 var(--pas-4);
    font-size: 0.875rem;
    color: var(--texte-doux);
}

/*
 * Retirer le filtre est une action, pas un renvoi vers une autre page : elle se
 * presente comme une pastille avec une croix, et non comme un lien souligne.
 */
.retirer-filtre {
    display: inline-flex;
    gap: var(--pas-2);
    align-items: center;
    min-height: 36px;
    padding: 0 var(--pas-3);
    border: 1px solid var(--bordure-marquee);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--marine);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition), border-color var(--transition),
                color var(--transition);
}

.retirer-filtre i {
    font-size: 0.75rem;
    opacity: 0.7;
}

.retirer-filtre:hover,
.retirer-filtre:focus-visible {
    background: rgba(192, 73, 44, 0.08);
    border-color: var(--rouge);
    color: var(--rouge);
}

@media (max-width: 60rem) {
    /*
     * minmax(0, 1fr) et non 1fr : sans le minimum a zero, la rangee de rayons
     * qui defile impose sa largeur intrinseque a la colonne, et toute la page
     * deborde de l'ecran.
     */
    .catalogue-mise-en-page {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--pas-4);
    }

    .rayons-colonne,
    .catalogue-corps {
        min-width: 0;
    }

    /* Sur telephone la colonne repasse en rangee qui defile : une liste de
       neuf rayons avant les produits obligerait a faire defiler pour rien. */
    .rayons-colonne {
        position: static;
    }

    .rayons-liste {
        display: flex;
        gap: var(--pas-2);
        overflow-x: auto;
        padding-bottom: var(--pas-2);
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .rayons-liste::-webkit-scrollbar {
        display: none;
    }

    .rayon-lien {
        white-space: nowrap;
        scroll-snap-align: start;
        border: 1px solid var(--bordure);
        background: var(--surface);
    }

    .rayon-nom {
        flex: none;
    }
}

/* ================================================== pages d'erreur */

.actions-erreur {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-3);
    margin-top: var(--pas-4);
}

/* ============================================ etats vides, version riche */

/*
 * Un etat vide n'est pas une erreur, c'est un moment ou l'on peut repartir.
 * Il lui faut donc une sortie evidente : un dessin qui dedramatise, une
 * phrase qui explique, et de vrais boutons. Une ligne de texte grise avec un
 * lien dedans laisse le parent devant rien.
 */
.vide-riche {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pas-3);
    padding: var(--pas-6) var(--pas-4);
}

.vide-image {
    width: min(14rem, 60%);
    height: auto;
}

.vide-titre {
    font-family: var(--titre);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--marine);
    margin: 0;
}

.vide-detail {
    max-width: 34rem;
    margin: 0;
    color: var(--texte-doux);
}

.vide-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pas-3);
    margin: var(--pas-2) 0 0;
}


/* ================================================================= listes */

/*
 * Menu deroulant.
 *
 * La fleche du systeme n'a ni la couleur ni le trait du site : elle trahit
 * le formulaire au milieu d'une page dessinee. On la remplace par un chevron
 * marine, du meme trace que les pictogrammes.
 *
 * Ce qui s'ouvre au clic, en revanche, est dessine par le systeme
 * d'exploitation : aucune feuille de style ne l'atteint, sur aucun navigateur
 * repandu. On ne fait donc pas semblant de le styler.
 */
.champ-liste {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* De la place pour le chevron, sinon un nom de ville long passe dessous. */
    padding-right: var(--pas-6);
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%2317275c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--pas-3) center;
    background-size: 0.875rem;
    cursor: pointer;
}

/*
 * Hauteur des champs : 44 px au moins.
 *
 * Le menu des villes tombait a 38 : on rate la cible au doigt, surtout en
 * marchant ou d'une seule main. C'est la meme regle que pour les boutons.
 */
.champ-texte,
.champ-liste,
.champ-fichier {
    min-height: 44px;
}

.champ-liste:hover {
    border-color: var(--marine);
}

/* ================================================= commande en cours */

.barre-actions {
    display: flex;
    gap: var(--pas-2);
    align-items: center;
}

/*
 * Lien vers la commande en cours.
 *
 * Il porte le numero, pas seulement « ma commande » : un parent qui a deja
 * commande pour deux enfants doit savoir laquelle il rouvre. Le numero passe
 * en second, plus discret, pour que le libelle reste lisible d'abord.
 */
.lien-commande {
    display: inline-flex;
    align-items: center;
    gap: var(--pas-2);
    white-space: nowrap;
}

.lien-commande-numero {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--texte-doux);
}

@media (max-width: 60rem) {
    /*
     * Sur telephone, la barre est deja serree : le numero passe a la trappe,
     * le libelle et le pictogramme suffisent a retrouver son chemin.
     */
    .lien-commande-numero {
        display: none;
    }
}

/* ------------------------------------- ajouter a une commande en cours */

.encadre-commande {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-3);
    align-items: center;
    justify-content: space-between;
}

.ajouter-encore {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-2) var(--pas-3);
    align-items: center;
    margin-top: var(--pas-4);
}

.ajouter-encore-note {
    font-size: 0.875rem;
    color: var(--texte-doux);
}

/* ============================================== fiche publique d'un article */

/*
 * Fil d'Ariane. Il situe la page dans le catalogue, pour le parent comme pour
 * le moteur de recherche : sans lui, une fiche atteinte depuis une recherche
 * est une impasse.
 */
.fil {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-2);
    align-items: center;
    font-size: 0.875rem;
    color: var(--texte-doux);
    margin-bottom: var(--pas-4);
}

.fil a {
    color: var(--marine);
    text-decoration: none;
    border-bottom: 1px solid var(--bordure-marquee);
}

.fil a:hover { color: var(--orange-texte); border-bottom-color: currentColor; }

.fiche-produit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--pas-5);
    align-items: start;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-large);
    box-shadow: var(--relief);
    padding: var(--pas-5);
    margin-bottom: var(--pas-6);
}

.fiche-produit-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-creuse);
    border-radius: var(--rayon);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.fiche-produit-image img { width: 100%; height: 100%; object-fit: cover; }

.fiche-produit-image .produit-photo-vide {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: var(--rayon);
}

.fiche-produit-prix {
    font-family: var(--titre);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--marine);
    font-variant-numeric: tabular-nums;
    margin: 0 0 var(--pas-2);
}

.fiche-produit-etat {
    display: flex;
    gap: var(--pas-2);
    align-items: center;
    color: var(--texte-doux);
    margin: 0 0 var(--pas-4);
}

.fiche-produit-points {
    margin: var(--pas-4) 0 0;
    padding-left: var(--pas-4);
    color: var(--texte-doux);
    font-size: 0.9375rem;
}

.fiche-produit-points li { margin-bottom: var(--pas-1); }
.fiche-produit-points li::marker { color: var(--orange); }

/* Le nom d'un article mene a sa fiche, dans la grille comme dans les voisins. */
.produit-nom a,
.produit-lien {
    color: inherit;
    text-decoration: none;
}

.produit-nom a:hover,
.produit-lien:hover .produit-nom {
    color: var(--orange-texte);
}

.produit-lien { display: block; }

@media (max-width: 45rem) {
    .fiche-produit { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------- point de retrait */

/*
 * « Retrait » tout court ne dit pas ou aller. Le parent se deplace : il lui
 * faut le nom, l'adresse et le numero sous les yeux, sinon il rappelle pour
 * demander. Le bloc se detache donc du reste de l'encadre.
 */
.point-retrait {
    background: var(--surface-creuse);
    border-radius: var(--rayon-petit);
    padding: var(--pas-3) var(--pas-4);
    margin: var(--pas-3) 0;
}

.point-retrait-titre {
    display: flex;
    gap: var(--pas-2);
    align-items: center;
    font-family: var(--titre);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--orange-texte);
    margin-bottom: var(--pas-2);
}

/* ---------------------------------- adresse de la librairie sur la carte */

/*
 * L'adresse du point de retrait, glissee dans la carte de mode.
 *
 * On l'annonce avant la validation : le parent qui coche « Retrait » doit
 * savoir ou il ira, pas le decouvrir a la fin.
 */
.mode-adresse {
    display: block;
    margin-top: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    font-size: 0.875rem;
    color: var(--texte);
}

.mode-adresse strong {
    color: var(--marine);
}

/* --------------------------------------- encadre « ou retirer » (confirmation) */

.encadre-retrait {
    display: flex;
    flex-direction: column;
    gap: var(--pas-2);
    padding: var(--pas-4);
    background: var(--surface-creuse);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-large);
    margin: var(--pas-4) 0;
}

.encadre-titre {
    display: flex;
    gap: var(--pas-2);
    align-items: center;
    margin: 0;
    font-family: var(--titre);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--orange-texte);
}

.encadre-retrait p {
    margin: 0;
    line-height: 1.6;
}

/* ============================================ vente au paquet */

/*
 * Prix a l'unite / prix au paquet.
 *
 * Deux prix pour le meme article ne peuvent pas s'afficher a plat sans se
 * concurrencer. Le prix a l'unite garde sa taille et son poids ; celui du
 * paquet vient en dessous, plus petit, avec sa mention.
 */
.fiche-produit-prix {
    display: flex;
    align-items: baseline;
    gap: var(--pas-2);
    flex-wrap: wrap;
    margin: 0 0 var(--pas-2);
}

.fiche-produit-prix-paquet {
    font-size: 1.5rem;
    color: var(--marine-clair, var(--marine));
    margin-top: 0;
    margin-bottom: var(--pas-3);
}

.fiche-produit-prix-mention {
    font-family: var(--corps);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--texte-doux);
    letter-spacing: 0;
    text-transform: none;
}

.fiche-produit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-3);
    margin-bottom: var(--pas-3);
}

/* Carte du catalogue : mention discrete du prix paquet sous le prix unite. */
.produit-prix-paquet {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--corps);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--texte-doux);
}

/* Panier : mention du conditionnement sous le libelle. */
.ligne-conditionnement {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    color: var(--orange-texte);
    font-weight: 600;
}

.col-prix-mention {
    display: block;
    font-size: 0.75rem;
    color: var(--texte-doux);
    font-weight: 400;
    font-variant-numeric: normal;
}