/* ==========================================================================
   style-demande.css
   --------------------------------------------------------------------------
   Feuille de style du formulaire de demande au Service Communication.

   Palette :
     --bleu-nuit   #16324F  (bleu officiel, en-tête, titres)
     --bleu-clair  #2F6690  (accents, liens)
     --ocre        #C08A2E  (bouton principal, rappel du blason de la ville)
     --creme       #F6F3EC  (fond général)
     --blanc       #FFFFFF  (cartes / blocs)
     --vert-fonce  #2E7D4F  (statut succès)
     --orange      #C97C1F  (statut avertissement)
     --rouge       #B3382C  (statut échec / danger)

   Typographies :
     - Titres : "Fraunces" (serif à forte personnalité, évoque un document
       officiel gravé) avec repli sur serif système.
     - Texte courant : "Inter" (sans-serif très lisible sur formulaire)
   ========================================================================== */

/*@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;700&family=Inter:wght@400;500;600&display=swap');*/

:root {
    --bleu-nuit: #16324F;
    --bleu-clair: #2F6690;
    --ocre: #C08A2E;
    --ocre-fonce: #96690E;
    --creme: #F6F3EC;
    --blanc: #FFFFFF;
    --vert-fonce: #2E7D4F;
    --orange: #C97C1F;
    --rouge: #B3382C;
    --texte: #24303D;
    --bordure: #DCD5C6;
    --rayon: 10px;
    --affiche: hsl(268, 100%, 90%);
    --impression: hsl(120, 100%, 93%);
    --diffusion: hwb(199 80% 0%);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--creme);
    color: var(--texte);
    font-family: 'Inter', Arial, sans-serif;
    line-height: 1.5;
}

h1, h2, h3 {
    font-family: 'Fraunces', Georgia, serif;
    /*color: var(--bleu-nuit);*/
    margin-top: 0;
}

/* -------------------- En-tête et pied de page -------------------- */
.entete_comm {
    background: linear-gradient(135deg, var(--bleu-nuit), var(--bleu-clair));
    color: var(--blanc);
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(22, 50, 79, 0.35);
}
.entete_comm h1 {
    color: #FFFFFF; /*var(--blanc);*/
    font-size: 1.8rem;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}
.entete_comm p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.95rem; color:#ffffff; position:relative; top:-21px;
}
.entete_comm .titre {
    margin: 0;
	font-weight:700;
	font-size:40px;
    top :0px;
	line-height:1em;
    color:#ffffff; position:relative; top:0px;
}
.entete_comm img {width:30% !important; box-shadow:none; transform: translatex(32%); left:-78px;}
/* Header */
.entete_comm {min-height:229px; height:229px;}


/* -------------------- Pied de page -------------------- */
.pied-page {
    text-align: center;
    padding: 20px;
    color: var(--bleu-nuit);
    font-size: 0.85rem;
    opacity: 0.75;
}

/* -------------------- Mise en page générale -------------------- */
.conteneur {
    max-width: 760px;
    margin: 32px auto;
    padding: 0 16px 48px;
}

.bloc {
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 24px 26px;
    margin-bottom: 24px;
    box-shadow: 0 2px 6px rgba(22, 50, 79, 0.06);
}

.sous-bloc {
    border-left: 3px solid var(--ocre);
    background: #FBF9F4;
    padding: 16px 18px;
    margin: 14px 0;
    border-radius: 6px;
}

.recap-demande { border-top: 4px solid var(--ocre); }

/* -------------------- Champs de formulaire -------------------- */
label {
    display: block;
    font-weight: 600;
    margin: 14px 0 6px;
    font-size: 0.93rem;
    color: #025e87;/*var(--bleu-nuit);*/
}
.libelle {
    font-weight: 600;
    margin: 16px 0 6px;
    color: var(--bleu-nuit);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bordure);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--creme);
    color: var(--texte);
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--bleu-clair);
    box-shadow: 0 0 0 3px rgba(47, 102, 144, 0.18);
}

input[type="file"] { margin-top: 4px; }

.grille-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
@media (max-width: 560px) {
    .grille-2 { grid-template-columns: 1fr; }
}

/* Grille des quantités d'impression par format (A3, A4, A5, A6...) */
.grille-formats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 4px 16px;
    margin: 6px 0 4px;
}
.grille-formats label {
    margin: 0 0 6px;
}

.choix-radio, .choix-case {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 6px 0 4px;
}
.case-radio, .case-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 0.94rem;
    cursor: pointer;
}
.case-radio input, .case-checkbox input {
    width: 17px;
    height: 17px;
    accent-color: var(--ocre);
    cursor: pointer;
}

.apercu-image {
    display: block;
    max-width: 100%;
    max-height: 260px;
    width: auto;
    margin: 12px 0;
    border-radius: 8px;
    border: 1px solid var(--bordure);
    object-fit: contain;
}
.apercu-image[hidden] {
    display: none;
}

.erreur {
    color: var(--rouge);
    font-size: 0.85rem;
    margin-top: -4px;
}

/* -------------------- Boutons en relief (effet 3D) --------------------
   Le relief est obtenu par un dégradé vertical (haut plus clair, bas
   plus foncé) combiné à une ombre portée + une bordure inférieure
   épaisse simulant une "tranche". Au clic, le bouton s'enfonce
   (translateY) et son ombre se réduit. */
.bouton-3d {
    display: inline-block;
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--blanc);
    text-decoration: none;
    text-align: center;
    padding: 14px 30px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--ocre) 0%, var(--ocre-fonce) 100%);
    box-shadow:
        0 5px 0 #7A5309,
        0 9px 14px rgba(0, 0, 0, 0.25);
    transform: translateY(0);
    transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.bouton-3d:hover { filter: brightness(1.06); }
.bouton-3d:active {
    transform: translateY(4px);
    box-shadow:
        0 1px 0 #7A5309,
        0 3px 6px rgba(0, 0, 0, 0.25);
}
.bouton-3d:disabled {
    background: linear-gradient(180deg, #B9B9B9, #8C8C8C);
    box-shadow: 0 5px 0 #6b6b6b, 0 9px 14px rgba(0,0,0,0.15);
    cursor: not-allowed;
}

.bouton-principal { background: linear-gradient(180deg, var(--bleu-clair) 0%, var(--bleu-nuit) 100%); box-shadow: 0 5px 0 #0D2136, 0 9px 14px rgba(0,0,0,0.25); line-height:1.2em !important; border-color:#165177; border-style:solid;}
.bouton-principal:active { box-shadow: 0 1px 0 #0D2136, 0 3px 6px rgba(0,0,0,0.25); }

.bouton-danger { background: linear-gradient(180deg, #D1594A 0%, var(--rouge) 100%); box-shadow: 0 5px 0 #7A241C, 0 9px 14px rgba(0,0,0,0.25); }
.bouton-danger:active { box-shadow: 0 1px 0 #7A241C, 0 3px 6px rgba(0,0,0,0.25); }

.zone-bouton {text-align: center; margin-top: 26px; position:relative; top:-12px;}
.bouton-danger { height: 100%; background: linear-gradient(180deg, #D1594A 0%, var(--rouge) 100%); box-shadow: 0 2px 0 #7A241C; line-height:0px; font-size:15px;position:relative; top:8px; border-style:solid; border-width:1px; border-color:#f9b0a8;}
.bouton-danger:active { box-shadow: 0 1px 0 #7A241C, 0 3px 6px rgba(0,0,0,0.25); }
.statut-succes { border-top: 5px solid var(--vert-fonce); }
.statut-succes h2 { color: var(--vert-fonce); }

.statut-avertissement { border-top: 5px solid var(--orange); }
.statut-avertissement h2 { color: var(--orange); }

.statut-echec { border-top: 5px solid var(--rouge); }
.statut-echec h2 { color: var(--rouge); }

/* -------------------- Espace Communication / liste -------------------- */
.liste-demandes {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}
.liste-demandes li { margin-bottom: 10px; }
.lien-demande {
    display: block;
    padding: 12px 14px;
    background: var(--creme);
    border: 1px solid var(--bordure);
    border-radius: 6px;
    color: var(--bleu-nuit);
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.lien-demande:hover { background: #EFE9DA; border-color: var(--ocre); }

.bloc-suppression { border-top: 3px solid var(--rouge); }
/* ---------------------------------------------------------------------------------------------- */
/* Fin du fichier style-demande.css : modification du style pour le formulaire de demande au Service Communication. */
/* ---------------------------------------------------------------------------------------------- */
/* Input */
.bloc input[type=radio]{position:relative; top:6px;}
/* Input */
.bloc .case-checkbox input[type=checkbox]{position:relative; top:6px;}
/* Apercu impression */
#apercuImpression{width:100%; grid-template-rows:auto; align-content:center; justify-content:center;}
/* Label */
#blocImpression .grille-formats label{padding-right:0px; display:inline-block;}
/* Division */
#blocImpression .grille-formats div{ height:32px; width:223px; padding-left:6px; display:flex; flex-direction:row;}
/* Label */
.conteneur-demande-comm #formulaireDemande .bloc #blocImpression .grille-formats div label{width:57% !important;}
/* Input */
.conteneur-demande-comm #formulaireDemande .bloc #blocImpression .grille-formats div input[type=number]{width:36% !important;}

/* ------------------------------------------------------------------------------ */
/* Bouton de téléchargement de l'affiche */
/* ------------------------------------------------------------------------------ */

/* Link */
.recap-demande  center a{
	padding-left:15px;
	padding-right:15px;
	padding-top:15px;
	padding-bottom:15px;
	line-height:1.5em;
	font-size:16px;
	color:#ecf0f1;
}

/* Link */
.recap-demande center a:nth-child(2){
	background-image:linear-gradient(to right, #c0392b 0%, #d35400 100%);
	box-shadow:1px 3px 0px 0px #9e0000;
	color:#ffffff;
	font-weight:700;
	line-height:1.2em;
	padding-top:4px;
	border-color:#e50000;
	border-style:solid;
	border-width:1px;
	height:30px;
	position:relative;
	left:-8px;
	border-top-left-radius:15px;
	border-top-right-radius:15px;
	border-bottom-left-radius:15px;
	border-bottom-right-radius:15px;
}
.recap-demande center{transform:translatey(-40px);} /* remonte le bloc de téléchargement de l'affiche pour qu'il soit plus proche du bloc récapitulatif */

/* Button */
.comm-mdp-oublie form .\.recap-demande{
	background-image:linear-gradient(to right, #fb1c1c 0%, #f67931 100%);
	border-top-right-radius:15px;
	border-top-left-radius:15px;
	border-bottom-left-radius:15px;
	border-bottom-right-radius:15px;
	border-color:#c14747;
	border-width:2px;
	border-style:solid;
	padding-left:6px;
	padding-right:7px;
	padding-top:7px;
	padding-bottom:7px;
}

.bloc-gris-clair .info_terminer{margin-top:0px;}

.bloc-gris-clair h2{margin-bottom:2px;}
.comm-mdp-oublie form .choix-radio{justify-content:center;}
/* ------------------------------------------------------------------------------ */
/* Bouton réinitialisation formulaire */
/* ------------------------------------------------------------------------------ */
/* Bouton danger */
.bouton-reinit{
	height:34px;
	padding-left:10px;
	padding-right:10px;
	padding-top:0px;
	padding-bottom:0px;
	display:inline-block;
}
.entete_comm .bouton-danger{
	padding-top:0px;
	padding-bottom:0px;
	padding-right:10px;
	padding-left:10px;
}
.entete_comm p{
	margin-bottom:2px;
}

/* Bouton danger */
.entete_comm .bouton-danger{
	position:relative;
	top:-40px;
}
/* ------------------------------------------------------------------------------ */
/* Bouton téléchargement affiche fournie */
/* ------------------------------------------------------------------------------ */
/* Button */
#dlBtn{
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	height:25px;
	padding-left:10px;
	padding-right:10px;
	padding-top:1px;
	padding-bottom:0px;
	color:#ffffff;
	border-color:#28a1bd;
	border-style:solid;
	border-width:1px;
	background-image:linear-gradient(141deg, #0d9e94 0%, #279cc7 100%);
	font-weight:700;
	letter-spacing:1.1px;
	width:181px;
	position:relative;
	left:0px;
	box-shadow:0px 4px 0px 0px #2980b9;
	border-color:#9fc5e9;
	border-width:1px;
	border-style:solid;
	font-size:12px;
	letter-spacing:0.8px;
}

#dlBtn:active {
    transform: translateY(4px);
    box-shadow:
        0 1px 0 #06384d,
        0 3px 6px rgba(0, 0, 0, 0.25);
}
/* ------------------------------------------------------------------------------ */
/* Bouton glissière : absence du DGS et consentement RGPD                          */
/* (les deux écritures "democomm" et "demandecomm" sont gérées)                    */
/* ------------------------------------------------------------------------------ */
.democomm-toggle-wrap,
.demandecomm-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 6px;
}
.democomm-toggle,
.demandecomm-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
    margin: 0;
}
.democomm-toggle input,
.demandecomm-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.democomm-toggle .slider,
.demandecomm-toggle .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #e53935;   /* rouge par défaut (décoché) */
    border-radius: 26px;
    transition: background-color .3s;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}
.democomm-toggle .slider:before,
.demandecomm-toggle .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform .3s;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.democomm-toggle input:checked + .slider,
.demandecomm-toggle input:checked + .slider {
    background-color: #4caf50;   /* vert quand coché */
}
.democomm-toggle input:checked + .slider:before,
.demandecomm-toggle input:checked + .slider:before {
    transform: translateX(22px);
}
.democomm-toggle-label,
.demandecomm-toggle-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}
.comm-toggle-hint {
    font-size: 11px;
    color: #666;
    margin: 4px 0;
    line-height: 1.5;
}
#democomm-dgs-status, #demandecomm-dgs-status,
#democomm-rgpd-status, #demandecomm-rgpd-status {
    font-weight: 700;
}
#democomm-dgs-status.present, #demandecomm-dgs-status.present,
#democomm-rgpd-status.accepte, #demandecomm-rgpd-status.accepte { color: #2e7d32; }
#democomm-dgs-status.absent, #demandecomm-dgs-status.absent,
#democomm-rgpd-status.refuse, #demandecomm-rgpd-status.refuse { color: #c62828; }
/* Cadre observations du DGS, du Maire et de l'Adjoint */
.Adjoint{
    background-color:#f3fbfa;
    border-left-color:#3498db;
    border-left-color:#3498db;
	border-width:3px;
	box-shadow:0px 2px 6px 0px rgba(22,50,79,0.4);
	border-top-width:1px;
	border-top-color:#dcd5c6;
	border-right-width:1px;
	border-right-color:#dcd5c6;
	border-bottom-width:1px;
	border-bottom-color:#dcd5c6;
}
.maire{
    background-color:#faebe6;
    border-left-color:#5c170a;
    border-width:3px;
	box-shadow:0px 2px 6px 0px rgba(22,50,79,0.4);
	border-top-width:1px;
	border-top-color:#dcd5c6;
	border-right-width:1px;
	border-right-color:#dcd5c6;
	border-bottom-width:1px;
	border-bottom-color:#dcd5c6;
}
.dgs{
    background-color:#e2ffe0;
    border-left-color:#064900;
    border-width:3px;
	box-shadow:0px 2px 6px 0px rgba(22,50,79,0.4);
	border-top-width:1px;
	border-top-color:#dcd5c6;
	border-right-width:1px;
	border-right-color:#dcd5c6;
	border-bottom-width:1px;
	border-bottom-color:#dcd5c6;
}
/* ------------------------------------------------------------------------------ */
/* Aperçu de la 1ère page du PDF d'un livret (canvas généré par pdf.js) */
/* ------------------------------------------------------------------------------ */
.apercu-pdf {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 12px 0;
    border-radius: 8px;
    border: 1px solid var(--bordure);
}
.apercu-pdf[hidden] {
    display: none;
}
#choixLivretWrap{
	position:relative;
	top:-12px;
}
.visionneuse-pdf-zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}
.visionneuse-pdf-zoom button {
    padding: 4px 14px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}
#zoomLivretIndicateur {
    font-size: 0.85rem;
    color: var(--bleu-nuit);
    font-weight: 600;
    min-width: 45px;
    text-align: center;
}
/* Zoom livret moins */
#zoomLivretMoins{
	padding-left:10px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom:5px;
}

/* Zoom livret plus */
#zoomLivretPlus{
	padding-left:10px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom:5px;
}

/* Page livret prec */
#pageLivretPrec{
	width:50px !important;
	height:33px !important;
	font-size:16px;
	padding-right:20px;
	padding-left:15px;
	padding-top:5px;
	padding-bottom:5px;
	line-height:1em !important;
	background-image:linear-gradient(to right, #8e0e00 0%, #1f1c18 100%);
}

/* Page livret suiv */
#pageLivretSuiv{
	width:50px !important;
	height:33px !important;
	font-size:16px;
	padding-right:15px;
	padding-left:20px;
	padding-top:5px;
	padding-bottom:5px;
	line-height:1em !important;
	background-image:linear-gradient(to right, #8e0e00 0%, #1f1c18 100%);
}

/* Link */
.affiche-demande center a{
	padding-left:15px;
	padding-top:5px;
	padding-bottom:5px;
}

/* Page livret prec (active) */
#pageLivretPrec:active{
	background-image:linear-gradient(to right, #ffe259 0%, #ffa751 100%);
}

/* Page livret prec (hover) */
#pageLivretPrec:hover{
	background-image:linear-gradient(to right, #36d1dc 0%, #5b86e5 100%);
}

/* Page livret suiv (active) */
#pageLivretSuiv:active{
	background-image:linear-gradient(to right, #ffe259 0%, #ffa751 100%);
}

/* Page livret suiv (hover) */
#pageLivretSuiv:hover{
	background-image:linear-gradient(to right, #36d1dc 0%, #5b86e5 100%);
}