/* L’espace d’écriture, lot 2c : les photos — la tuile « Image », le tiroir d’une image et de l’image principale, ce que l’on
   verra (la page, le partage) ; le PDF du guide ; « Mes fichiers ». Chargée après admin-2b.css ; même charte, aucune ombre, aucun style en ligne (la CSP les refuse). */
/* « Ajouter ici » : la dixième tuile, seule sur sa ligne (jamais une tuile orpheline sous la grille de trois) */
.types .tuile-ajout[data-ajout="type-image"]{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px}
/* le choix d’un fichier : hors de l’écran, pas display:none (certains navigateurs refusent alors de l’ouvrir) */
.fichier-cache{position:fixed;top:0;left:-200vw;width:1px;height:1px;opacity:0;pointer-events:none}
/* une photo en route (le bouton s’efface), refusée */
.photo{display:grid;gap:8px;justify-items:start}
.photo.en-cours > button{display:none}
.photo-dit{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:var(--encre)}
.photo-dit::before{content:'';flex:none;width:14px;height:14px;border:2px solid var(--or);border-top-color:transparent;border-radius:50%;animation:tourne 1s linear infinite}
.photo .refus{font-size:14px}
.photo .refus:empty{display:none}
/* la photo telle qu’elle est rangée, entière ; l’avis « relis le texte alternatif » */
.vignette-image img{display:block;max-width:100%;max-height:220px;height:auto;border-radius:10px;background:var(--creme)}   /* (sa place : width/height, tiroir-image.js) */
.avis{margin:0;padding:8px 12px;border-radius:10px;background:#FBE7C6;color:#7A4D1D;font-size:13.5px}
/* les trois aperçus de l’image principale : coupée comme sur ordinateur et sur téléphone (au centre, le milieu à 55 % : comme le
   site, rendu/article.css), puis le partage (le JPEG 1200 × 630 lui-même) */
.cadres{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cadres figure{margin:0}
.cadres img{display:block;width:100%;object-fit:cover;object-position:center 55%;border-radius:8px;background:var(--creme)}
.cadres .ordi img{aspect-ratio:1.62}
.cadres .tel img{aspect-ratio:1.4}
.cadres .partage{grid-column:1/-1}
.cadres .partage img{aspect-ratio:1200/630}
.cadres figcaption{margin-top:4px;font-size:12.5px;color:var(--gris)}
.avis .lien{margin-left:4px;font-size:13.5px;color:#7A4D1D}
/* une photo en route, dans la barre du haut (le tiroir fermé n’efface rien) ; une alerte qui reste (une photo perdue, posée ailleurs) */
.t-photo{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#8A4B1C;font-weight:500}   /* seule elle se resserre (« Réessayer » reste entier) */
.alerte{position:fixed;left:50%;top:calc(var(--barre) + 10px);z-index:71;transform:translateX(-50%);width:max-content;max-width:min(560px,calc(100% - 24px));display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 14px;border-radius:12px;background:var(--nuit);color:#F5EEE3;font-size:14px}
.alerte p{flex:1 1 220px;margin:0}
.alerte .lien{color:#F5EEE3}
.alerte .b-cadre{min-height:36px;border-color:#8a7a68;color:#F5EEE3}
.alerte .b-cadre:hover{background:#3b332b}
@media (prefers-reduced-motion:reduce){.photo-dit::before{animation:none}}
/* une image qui sert aussi ailleurs (ailleurs.js) : la ligne, la question (une case par endroit, cochées), la réponse */
.sert-aussi{display:grid;gap:6px}   /* (pas « .ailleurs » : le bandeau « modifié ailleurs », admin.css) */
.sert-aussi p{margin:0}
.sert-aussi-q{display:grid;gap:8px;min-width:0;margin:0;padding:8px 12px 12px;border:1px solid var(--or2);border-radius:12px;background:#FBF1E0}
.sert-aussi-q legend{float:left;padding:0;font-weight:600;font-size:14px;line-height:1.35;color:var(--nuit)}   /* (flottante : DANS le cadre, jamais à cheval sur sa bordure) */
.sert-aussi-q .case{align-items:flex-start;font-size:14px;line-height:1.4}
.sert-aussi-q .case input{flex:none;margin:0}
.sert-aussi-b{display:flex;flex-wrap:wrap;gap:8px}
.sert-aussi-dit{font-size:14px;color:var(--encre)}
/* le PDF du guide (pdf-guide.js) : son nom, puis « Ouvrir » (un nouvel onglet) — un nom long passe à la ligne */
.fiche-pdf{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;overflow-wrap:anywhere}
.fiche-pdf .fiche-nom{color:var(--encre)}
.fiche-pdf .lien{padding:0;font-size:14px}
/* Mes fichiers (fichiers.js) : le bouton dans l’en-tête de « Mes articles » ; une carte par fichier — sa vignette ou son icône, son nom,
   sa taille et sa date, où il sert, pourquoi il reste, ses gestes ; les fichiers retirés, repliés en bas (comme la Corbeille) */
body[data-ecran="fichiers"] #ecran-fichiers{display:block}
.b-fichiers svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fichiers-aide,.fichiers-dit,.fichiers-vide{margin:0 0 12px;font-size:14px;color:var(--gris)}
.fichiers{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fichier{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:start;padding:12px;border:1px solid var(--ligne);border-radius:14px;background:var(--papier)}
.fichier.retire{background:#F3EDE3}
.fichier.retire .vignette{filter:grayscale(1);opacity:.6}
.fichier .fi-icone{display:grid;place-items:center;align-content:center;gap:2px;color:var(--brun);font-size:11px;font-weight:600;letter-spacing:.08em}
.fi-icone svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fi-texte{display:grid;gap:3px;min-width:0;overflow-wrap:anywhere}
.fi-nom{font:600 16.5px/1.3 'Fredoka','Jost',sans-serif;color:var(--encre)}
.fi-details{font-size:13px;color:var(--gris)}
.fi-usage{font-size:14px}
.fi-dit{margin:2px 0 0;font-size:13.5px;color:var(--gris)}   /* en gris, comme les détails : rien n'est à corriger (la revue du 06/10) */
.fichiers-place{margin:24px 0 0;font-size:13px;color:var(--gris)}
.regles li.attente{color:var(--gris)}
.fi-gestes{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:6px}
.fi-gestes .lien{padding:0}
#fichiers-retires{margin-top:24px}
#fichiers-retires .fichiers{margin-top:10px}
@media (max-width:700px){.fichier{grid-template-columns:72px minmax(0,1fr);gap:12px}}
/* au téléphone, l’en-tête de « Mes articles » garde son titre sur une ligne : le bouton sans son icône, des marges plus courtes */
@media (max-width:480px){.liste-tete{gap:8px}.liste-tete .b{padding:0 10px}.b-fichiers svg{display:none}}
.son-choix{display:grid;gap:8px}