.csins-modal { border: 0; padding: 0; max-width: 680px; width: calc(100% - 2em);
    border-radius: var(--csins-rayon, 14px); background: var(--csins-fond, #fff); color: var(--csins-texte, #1d2327);
    box-shadow: 0 24px 60px -16px rgba(0,0,0,.35), 0 4px 18px rgba(0,0,0,.14);
    opacity: 1; transform: none;
    transition: opacity 180ms ease-out, transform 180ms cubic-bezier(.23,1,.32,1); }
@starting-style { .csins-modal[open] { opacity: 0; transform: scale(.96) translateY(8px); } }
.csins-modal::backdrop { background: rgba(12,12,16,.55); backdrop-filter: blur(2px); }
.csins-modal__panneau { position: relative; padding: 1.6em 1.7em 1.4em; }
.csins-modal__fermer { position: absolute; top: .6em; right: .6em; width: 2.2em; height: 2.2em;
    display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
    background: transparent; font-size: 1.3em; line-height: 1; cursor: pointer; color: inherit;
    opacity: .55; transition: background-color 140ms ease, opacity 140ms ease; }
.csins-modal__fermer:hover { opacity: 1; background: color-mix(in srgb, var(--csins-texte, #1d2327) 8%, transparent); }
.csins-modal__ajoute { display: flex; align-items: center; flex-wrap: wrap; gap: .55em;
    margin: 0 0 1em; padding-right: 2.2em; font-weight: 600; }
/* Vert, et non la couleur d'accent de la boutique : cette pastille dit
   « c'est fait », un sens que le vert porte partout. Sur une boutique
   dont l'accent est rouge, la reprendre ici ferait lire une erreur là
   où tout s'est bien passé. */
.csins-modal__coche { display: inline-flex; align-items: center; justify-content: center;
    width: 1.5em; height: 1.5em; border-radius: 50%;
    background: #1f8b4c !important; color: #fff !important;
    font-size: .72em; flex: 0 0 auto; line-height: 1; }
.csins-modal__compte { flex-basis: 100%; font-weight: 400; opacity: .65; font-size: .92em; }
.csins-modal__titre { font-size: 1em; margin: 0 0 .8em; }
/* Ni sur la liste ni sur la fenêtre : aucun défilement interne. Les
   vignettes fixes et le format compact ci-dessous existent pour que le
   contenu tienne réellement, plutôt que de masquer le débordement
   derrière une barre de défilement. */
.csins-modal__liste { list-style: none; margin: 0 0 1.1em; padding: 0; display: grid; gap: .7em; }
.csins-modal__liste--ligne { grid-template-columns: 1fr; }
/* Largeur de colonne fixe, pas étirée en 1fr : avec moins de suggestions
   qu'il n'y a de place, une colonne en 1fr comble l'espace restant en
   s'élargissant, ce qui pousse les cartes à gauche plutôt que de les
   centrer. Une largeur fixe + auto-fit (qui élimine les pistes vides) et
   justify-content:center centrent la rangée quel que soit son nombre
   de cartes. */
.csins-modal__liste--colonnes { grid-template-columns: repeat(auto-fit, 140px);
    justify-content: center; }
.csins-modal__liste--ligne .csins-modal__item { display: flex; align-items: center; gap: .8em; }
.csins-modal__liste--ligne .csins-modal__item a:first-child { display: flex; align-items: center;
    gap: .8em; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; }
/* Colonne = carte compacte : la vignette a une taille FIXE plutôt que de
   suivre la largeur de la colonne — une photo produit qui n'est pas
   carrée (deux pièces côte à côte, un gros plan tout en longueur…)
   gonflait sinon la case bien au-delà de ce que son contenu réel exige,
   c'est ce qui rendait la fenêtre trop haute pour tenir sans défiler.
   Le nom est plafonné à deux lignes, hauteur toujours réservée, pour que
   les cartes restent de la même taille quel que soit le nom réel ; le
   bouton reste collé en bas (margin-top:auto) même sur un nom court. */
.csins-modal__liste--colonnes .csins-modal__item { display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: .4em; }
.csins-modal__liste--colonnes .csins-modal__item a:first-child { display: flex; flex-direction: column;
    align-items: center; gap: .4em; flex: 1 1 auto; text-decoration: none; color: inherit; }
.csins-modal__liste--colonnes .csins-modal__item img { width: 56px; height: 56px; }
.csins-modal__liste--colonnes .csins-modal__nom { display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; min-height: calc(.8em * 1.3 * 2); }
.csins-modal__liste--colonnes .csins-modal__ajouter, .csins-modal__liste--colonnes .csins-modal__voir {
    margin-top: auto !important; }
.csins-modal__item img { display: block; object-fit: cover; flex: 0 0 auto; width: 56px; height: 56px;
    border-radius: max(4px, calc(var(--csins-rayon, 14px) * .5)); }
.csins-modal__nom { font-size: .8em; line-height: 1.3; }
.csins-modal__prix { display: block; font-size: .8em; font-weight: 700; color: var(--csins-accent, #1d2327);
    margin-top: .15em; }
/* Ces trois-là doivent avoir exactement la même taille, alors qu'ils
   ne sont pas du même type : « Ajouter » est un <button>, « Voir le
   produit » et « Voir le panier » sont des <a>. Un thème hôte habille
   presque toujours ses boutons (casse, interligne, hauteur minimale,
   rembourrage) sans toucher aux liens ordinaires — d'où deux tailles
   différentes si on le laisse faire. On fige donc ici TOUT ce qui
   détermine la boîte rendue, et rien d'autre : la couleur et le rayon
   restent réglables, la taille non. Sans quoi la fenêtre change
   d'allure d'un thème à l'autre. */
.csins-modal__ajouter, .csins-modal__voir, .csins-modal__pied .button {
    box-sizing: border-box !important; flex: 0 0 auto; white-space: nowrap; border: 0; cursor: pointer;
    text-decoration: none; text-align: center;
    /* Marges remises à zéro : un thème qui donne une marge basse à ses
       <button> sans en donner aux liens décale les deux d'autant, et
       « Ajouter » ne s'aligne plus avec « Voir le produit ». */
    margin: 0 !important; vertical-align: middle !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 118px !important; min-width: 118px !important; max-width: 118px !important;
    font-size: .74em !important; line-height: 1.15 !important;
    padding: .55em .7em !important; min-height: 0 !important; height: auto !important;
    text-transform: none !important; letter-spacing: normal !important;
    font-weight: 600 !important; font-family: inherit !important;
    background: var(--csins-accent, #1d2327); color: #fff;
    border-radius: max(4px, calc(var(--csins-rayon, 14px) * .55));
    transition: transform 140ms ease-out, opacity 140ms ease; }
.csins-modal__ajouter:hover, .csins-modal__voir:hover, .csins-modal__pied .button:hover { opacity: .88; }
.csins-modal__ajouter:active, .csins-modal__voir:active, .csins-modal__pied .button:active { transform: scale(.96); }
.csins-modal__ajouter[disabled] { opacity: .55; cursor: default; transform: none; }
.csins-modal__pied { display: flex; gap: 1em; align-items: center; justify-content: center; flex-wrap: wrap;
    padding-top: 1em; border-top: 1px solid color-mix(in srgb, var(--csins-texte, #1d2327) 12%, transparent); }
/* « Continuer mes achats » est un <button>, « Voir le panier » un lien :
   le thème hôte habille le premier et pas le second, et leurs boîtes
   cessent de s'aligner. Ce lien déguisé n'a pas la taille des autres
   boutons — il ne doit pas en avoir l'allure — mais il lui faut les
   mêmes remises à zéro pour partager leur ligne. */
.csins-modal__continuer { background: none !important; border: 0; text-decoration: underline;
    cursor: pointer; color: inherit; opacity: .75;
    margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important;
    font-family: inherit !important; font-size: .9em !important; font-weight: 400 !important;
    line-height: 1.15 !important; text-transform: none !important; letter-spacing: normal !important;
    border-radius: 0 !important; }
.csins-modal__continuer:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .csins-modal { transition: none; } }
.csins-avertir { position: fixed; bottom: 1.2em; right: 1.2em; left: auto; max-width: 320px;
    background: #d63638; color: #fff; padding: .8em 1.1em; border-radius: 6px;
    font-size: .9em; box-shadow: 0 4px 14px rgba(0,0,0,.2); z-index: 100000; }