/* L'accueil de la section Carrousel (03/10) : la carte dorée « Mes templates », la bibliothèque, les templates, le planning. */
.ph-tuile.cr-or { background: var(--ok-fond); border-color: rgba(201,162,74,.6); }
.ph-tuile.cr-or:hover { border-color: var(--or); }
.cr-or .ph-tuile-ico { background: linear-gradient(160deg, var(--or2), var(--or)); color: var(--bx); }
.cr-or .ph-tuile-go { color: var(--or-texte); }

/* La bibliothèque : la couverture en 4:5, les pastilles rondes, le nom dessous. */
.ph-resultats.cr-grille { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; margin-top: 0; }
.cr-carte { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cr-res .cr-vue { cursor: pointer; aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--surface); }
.cr-res .cr-vue img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cr-vide { padding: 10px; color: var(--encre2); font-size: 14px; text-align: center; }
.cr-nom { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-nom b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-nom small { font-size: 14px; color: var(--encre2); }
.ph-res-act .cr-etoile.on, .ph-res-act .cr-etoile:hover { background: var(--or); color: #fff; }
.cr-res-or { box-shadow: 0 0 0 2px rgba(201,162,74,.75); }
.cr-utiliser { align-self: flex-start; }

/* Le planning : une ligne par carrousel prévu. */
.cr-posts { display: grid; gap: 10px; }
.cr-post { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--carte); border-radius: var(--radius); box-shadow: var(--ombre); min-width: 0; }
.cr-post-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cr-post-txt b { font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.cr-post-txt small { font-size: 14px; color: var(--encre2); overflow-wrap: anywhere; }
.cr-post-date { display: block; font-size: 14px; color: var(--or-texte); }
.cr-post-date::first-letter { text-transform: uppercase; }
.cr-statut { font-style: normal; text-transform: none; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--doux); color: var(--bx); font-size: 14px; }
.cr-statut.cree, .cr-statut.publie { background: var(--ok-fond); color: var(--or-texte); }
.cr-post .btn { flex: 0 0 auto; }

/* Mes templates : les actions sous chaque carte, l'invitation du premier template. */
.cr-res .cr-vue.cr-fixe { cursor: default; }
.tp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-actions.tp-liens { gap: 2px 10px; }
.tp-actions.tp-liens .btn.lien { padding: 4px 0; font-size: 14px; font-weight: 500; }
.tp-premier .btn { background: var(--or); color: var(--bx); }

/* Le brief d'un carrousel : « Ton template », en petites cartes (le doré est réservé aux templates). */
.tpl-choix { display: flex; flex-wrap: wrap; gap: 10px; }
.tpl-carte { display: flex; flex-direction: column; gap: 6px; width: 104px; padding: 6px; border: 1.5px solid var(--ligne); border-radius: 14px; background: var(--carte); color: var(--bx); cursor: pointer; text-align: left; font-family: inherit; }
.tpl-carte img, .tpl-carte i { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 9px; background: var(--surface); }
.tpl-carte.sans i { background: transparent; border: 1.5px dashed rgba(27,33,31,.22); box-sizing: border-box; }
.tpl-carte span { font-size: 14px; font-weight: 500; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.tpl-carte:hover { border-color: var(--or); }
.tpl-carte.on { border-color: var(--or); background: var(--ok-fond); box-shadow: 0 0 0 1px var(--or); }
.tpl-carte:focus-visible { outline: 2px solid var(--bx2); outline-offset: 2px; }

/* Un template dans le parcours : son nom dans la colonne, l'étiquette de chaque page, « Ajouter une page ». */
.etapes .tpl-nom { margin: 0; padding: 4px 12px 10px; font-size: 15.5px; font-weight: 600; color: var(--bx); overflow-wrap: anywhere; }
.vig-role { font-size: 14px; font-weight: 500; color: var(--or-texte); line-height: 1.25; overflow-wrap: anywhere; }
.tpl-plus { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--bx); }
.tpl-plus select { border: 1px solid rgba(27,33,31,.18); border-radius: 999px; padding: 9px 14px; font-size: 14.5px; background: #fff; color: var(--bx); font-family: inherit; }

/* Mes favoris, dans l'onglet Éléments de l'atelier. */
.fav-liste { display: grid; gap: 6px; margin: 8px 0; }
.fav-item { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fav-poser { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; border: 1px solid var(--ligne); background: #fff; color: var(--bx); border-radius: 10px; padding: 8px 10px; font-size: 14px; font-family: inherit; text-align: left; cursor: pointer; }
.fav-poser:hover { border-color: var(--bx2); background: var(--doux); }
.fav-poser i { flex: none; width: 22px; text-align: center; font-style: normal; color: var(--encre2); }
.fav-poser span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-item .btn.lien { flex: none; padding: 4px 2px; font-size: 14px; color: #a3392b; }

@media (max-width: 640px) {
  .ph-resultats.cr-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cr-post { flex-direction: column; align-items: stretch; }
  .cr-post .btn { justify-content: center; }
}

/* 04/10 : « Mes templates », carte épurée (proposition A). */
.tp-neuf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 4 / 5; padding: 12px; border: 1.5px dashed rgba(23,70,63,.35); border-radius: 14px; background: none; color: var(--bx); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: background .2s, border-color .2s; }
.tp-neuf:hover { background: #fff; border-color: var(--bx2); }
.tp-neuf:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.tp-neuf-plus { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bx2); color: #fff; font-size: 24px; font-weight: 500; line-height: 1; }
.tp-ligne { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tp-ligne .cr-nom { flex: 1 1 auto; }
.tp-menu-zone { position: relative; flex: none; }
.tp-points { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--encre2); cursor: pointer; }
.tp-points:hover, .tp-points[aria-expanded="true"] { background: var(--surface); color: var(--bx); }
.tp-points:focus-visible { outline: 2px solid var(--bx2); outline-offset: 1px; }
.tp-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5; min-width: 160px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(23,70,63,.2); display: flex; flex-direction: column; }
.tp-menu[hidden] { display: none; }
.tp-menu button { border: 0; background: none; color: var(--bx); font: inherit; font-size: 15px; text-align: left; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.tp-menu button:hover { background: var(--surface); }
.tp-menu .tp-danger { color: #9A3B2A; }
.tp-utiliser { width: 100%; justify-content: center; }
.cr-en-template { width: 100%; justify-content: center; }
.cr-en-template.on { background: var(--ok-fond); border-color: transparent; color: var(--bx2); }

/* 04/10 : chaque carte (template, carrousel généré) est ENCADRÉE, comme sur la maquette : l'image, le nom, les actions
   tiennent dans une même carte blanche. « Nouveau template » prend toute la hauteur de la carte voisine. */
.ph-resultats.cr-grille { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-items: stretch; }
.cr-cadre { background: var(--carte); border-radius: 18px; box-shadow: var(--ombre); padding: 10px; gap: 10px; }
.cr-cadre .ph-res { border-radius: 12px; overflow: hidden; }
.cr-cadre .cr-nom { gap: 0; padding: 0 2px; }
.cr-cadre .cr-nom small { line-height: 1.3; }
.tp-neuf { aspect-ratio: auto; height: 100%; min-height: 260px; border-radius: 18px; }
.tp-ligne { align-items: flex-start; gap: 4px; }
.tp-points { width: 30px; height: 30px; margin: -2px -4px 0 0; background: none; }
.tp-points:hover, .tp-points[aria-expanded="true"] { background: var(--surface); }
.tp-utiliser, .cr-en-template { margin-top: auto; }
/* Le nom, modifiable sur place : il a l'air d'un titre, un crayon discret dit qu'on peut le changer. */
.cr-nom-champ { display: flex; align-items: center; gap: 4px; min-width: 0; cursor: text; }
.cr-nom-champ input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; border-bottom: 1.5px solid transparent; border-radius: 0; background: none; padding: 1px 0; color: var(--bx); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; }
.cr-nom-champ:hover input { border-bottom-color: rgba(23,70,63,.25); }
.cr-nom-champ input:focus { outline: none; border-bottom-color: var(--bx2); }
.cr-crayon { flex: none; color: var(--encre2); opacity: .55; transition: opacity .2s; }
.cr-nom-champ:hover .cr-crayon, .cr-nom-champ:focus-within .cr-crayon { opacity: 1; color: var(--bx2); }
@media (max-width: 640px) { .ph-resultats.cr-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tp-neuf { min-height: 200px; } }

/* 06/10 : « Dessiné par Claude », première carte du design dans le brief, et ses réglages (images, visuels de la marque). */
.tpl-carte.claude i { display: flex; align-items: flex-end; justify-content: center; padding: 6px; box-sizing: border-box; background: linear-gradient(160deg, color-mix(in srgb, var(--or) 55%, #fff), color-mix(in srgb, var(--bx2) 30%, #fff)); }
.tpl-carte.claude i small { font-size: 14px; line-height: 1.2; color: var(--bx); text-align: center; }
.claude-regl { flex: 1 0 100%; display: grid; gap: 10px; margin-top: 4px; }
.claude-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.claude-ligne .lbl { font-size: 14.5px; font-weight: 500; color: var(--bx); }
.choix.petit button { padding: 7px 13px; font-size: 14px; }

/* Le chat du design system : on relit la boîte de pièces et on la corrige avant de s'en servir. */
.ds-chat { display: grid; gap: 10px; }
.ds-fil { display: flex; flex-direction: column; gap: 8px; }
.ds-fil:empty { display: none; }
.ds-bulle { max-width: min(720px, 92%); align-self: flex-start; padding: 11px 15px; border-radius: 18px; border-bottom-left-radius: 6px; background: #fff; border: 1px solid var(--ligne); color: var(--bx); font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.ds-bulle.moi { align-self: flex-end; background: var(--bx2); border-color: var(--bx2); color: #fff; border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; }
.ds-saisie { display: flex; gap: 8px; align-items: center; }
.ds-saisie input { flex: 1 1 auto; min-width: 0; border: 1px solid rgba(27,33,31,.18); border-radius: 999px; padding: 11px 16px; font: inherit; font-size: 15.5px; color: var(--bx); background: #fff; }
.ds-saisie input:disabled { opacity: .55; }