/*
lieu-photo.css

QUOI : Page publique « Proposer une photo » d'un point d'intérêt, sa page de confirmation, et l'état
       « cette fiche n'accepte plus de photo ».

COMMENT : Importe le système visuel du formulaire événement (`submission-form` + `submission-inputs`),
          comme le fait `suggestion-entreprise.css` : la classe racine est `.submission-form`, donc ces
          règles s'appliquent sans rien dupliquer. Ces deux feuilles ne sont PAS dans `app.css` —
          les oublier laisse un formulaire aux `fieldset` bruts du navigateur, ce qui a été constaté
          en vérification navigateur avant de les ajouter. `submission-layout` / `-preview` /
          `-cropper` restent dehors : pas de grille bento, pas d'aperçu, pas de recadrage ici.

OÙ : Chargée par `lieu/photo_proposer.html.twig` et `lieu/photo_merci.html.twig`.

POURQUOI la case d'autorisation est dessinée comme un encadré plein et non comme une ligne de
         formulaire : son intitulé porte trois engagements en une phrase — c'est le seul texte de la
         page que personne ne doit pouvoir cocher sans l'avoir vu. Une case alignée sur les autres
         champs se coche au passage ; un panneau qu'il faut traverser, non.
*/

@import url("submission-form-5_IKgLg.css");
@import url("submission-inputs-HyWDFKM.css");

.lphoto-form {
    max-width: 46rem;
}

.lphoto-note {
    margin: 0.55rem 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--c-texte-doux);
}

/* ---- L'autorisation ---------------------------------------------------------------------------- */

/* Case d'abord, libellé à côté. `order` et non l'ordre du marquage : le thème de formulaire du projet
   rend le libellé AVANT le widget, ce qui rejetait la case à l'extrémité droite de la section, à une
   demi-largeur d'écran du texte qu'elle valide (constaté en vérification navigateur). Alignement en
   haut : l'intitulé fait deux à trois lignes, une case centrée verticalement flotterait au milieu du
   paragraphe au lieu d'en marquer le début. */
.lphoto-accord {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-xs);
}

.lphoto-accord input[type="checkbox"] {
    order: -1;
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    accent-color: var(--c-mer);
}

.lphoto-accord label {
    flex: 1 1 18rem;
    font-weight: 400;
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--c-texte);
}

/* Le message d'erreur passe sous la ligne entière, jamais en troisième colonne à côté du libellé. */
.lphoto-accord .form-errors {
    flex: 1 0 100%;
    margin: 0.35rem 0 0;
}

/* ---- Ce qu'il advient de la photo -------------------------------------------------------------- */

.lphoto-promesses {
    max-width: 46rem;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--c-bordure);
}

.lphoto-promesses__titre {
    margin: 0 0 var(--space-sm);
    font-size: 1rem;
    font-weight: 700;
}

.lphoto-promesses__liste {
    display: grid;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Puces pleines, et surtout PAS de numéros : le formulaire juste au-dessus porte déjà une suite
   « 1, 2, 3 » (ses sections). Une seconde numérotation à la file se lit comme sa continuation — on
   croit à six étapes à remplir alors que ces trois-là ne demandent rien. */
.lphoto-promesses__liste li {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.7rem;
    row-gap: 0.15rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.lphoto-promesses__liste li::before {
    content: "";
    grid-row: span 2;
    align-self: start;
    width: 0.42rem;
    height: 0.42rem;
    margin-top: 0.55rem;
    border-radius: 999px;
    background: var(--c-corail-texte);
}

.lphoto-promesses__liste strong { font-weight: 700; }
.lphoto-promesses__liste span { color: var(--c-texte-doux); }

/* ---- Fiche fermée aux envois ------------------------------------------------------------------- */

.lphoto-ferme {
    max-width: 46rem;
    padding: var(--space-lg) var(--space-md);
    border: 1px dashed var(--c-bordure);
    border-radius: var(--radius-md);
    text-align: center;
}

.lphoto-ferme__titre {
    margin: 0 0 0.35rem;
    font-weight: 700;
}

.lphoto-ferme__texte {
    max-width: 48ch;
    margin: 0 auto var(--space-sm);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--c-texte-doux);
}

/* ---- Confirmation ------------------------------------------------------------------------------ */

.lphoto-merci {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 40rem;
    margin: var(--space-xl) auto;
    text-align: center;
}

.lphoto-merci__coche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--c-sable-clair);
    color: var(--c-corail-texte);
}
.lphoto-merci__coche svg { width: 1.6rem; height: 1.6rem; }

[data-theme="dark"] .lphoto-merci__coche {
    background: rgba(255, 255, 255, 0.06);
}

.lphoto-merci__titre {
    margin: 0.3rem 0 0;
    font-size: 1.5rem;
    line-height: 1.2;
}

.lphoto-merci__texte {
    max-width: 48ch;
    margin: 0;
    line-height: 1.6;
    color: var(--c-texte-doux);
}

.lphoto-merci__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}