/* ==========================================================================
   Wizard d'inscription au concours (page concours) — markup :
   view/concours/5_fr/html/020__100__html.html, logique : javascript_custom/concours.js
   Composants réutilisables pour l'assistant d'adhésion (ggStepper, ggChoice, ggSeg, ggTotal).
   ========================================================================== */
.ggConcours{
	--ggc-accent: var(--color-1, #1a4e93);
	--ggc-accent-2: var(--color-2, #fcb229);
	--ggc-soft: var(--color-3, #f8f2e9);
	--ggc-text: #222;
	--ggc-muted: #666;
	--ggc-line: #d8d8d8;
	--ggc-ok: #2e7d32;
	--ggc-err: #b3261e;
	--ggc-radius: var(--radius-std, 10px);
	--shinyInput-color: #333;
	--shinyInput-background: #fff;
	width: 100%; max-width: 760px; margin: 0 auto 60px; padding: 0 16px; box-sizing: border-box;
	color: var(--ggc-text); font-family: arial, sans-serif; text-align: left;
}
.ggConcours [hidden]{display: none !important;}
.ggConcours *, .ggConcours *::before, .ggConcours *::after{box-sizing: border-box;}
.ggcHead{text-align: center; margin-bottom: 24px;}
.ggcSub{color: var(--ggc-muted); margin: 0;}
.ggcSr{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}

/* --- états (chargement / connexion / fermé) --- */
.ggcState{text-align: center; padding: 24px;}
.ggcNotice{background: var(--ggc-soft); border-radius: var(--ggc-radius);}
.ggcNotice .button_valid{display: inline-block; text-decoration: none;}
.ggcPaidList{list-style: none; margin: 0 0 12px; padding: 0;}
.ggcPaidList li{padding: 4px 0;}
.ggcMine{margin: 0 0 20px;}
.ggcMine h3{margin: 0 0 6px;}
.ggcSpinner{display: inline-block; width: 1em; height: 1em; border: 2px solid var(--ggc-line); border-top-color: var(--ggc-accent); border-radius: 50%; vertical-align: -2px; animation: ggcSpin .8s linear infinite;}
@keyframes ggcSpin{to{transform: rotate(360deg);}}

/* --- carte du wizard --- */
.ggcWizard{background: #fff; border: 1px solid var(--ggc-line); border-radius: var(--ggc-radius); padding: 24px 28px 0; box-shadow: 0 10px 30px rgba(0,0,0,.06);}
.ggcStep{animation: ggcFade .25s ease-out; padding-bottom: 8px;}
.ggcStep h3{margin: 8px 0 12px; font-size: var(--large-text, 23px); color: var(--ggc-accent); outline: none;}
@keyframes ggcFade{from{opacity: 0; transform: translateY(6px);} to{opacity: 1; transform: none;}}
.ggcHelp{color: var(--ggc-muted); font-size: .92em;}
.ggcHelp a{color: var(--ggc-accent); text-decoration: underline;}

/* --- barre d'étapes --- */
.ggStepper{display: flex; list-style: none; margin: 0 0 20px; padding: 0; counter-reset: none;}
.ggStepper li{flex: 1; position: relative; display: flex; justify-content: center;}
.ggStepper li::before{content: ""; position: absolute; top: 16px; left: -50%; width: 100%; height: 2px; background: var(--ggc-line); z-index: 0;}
.ggStepper li:first-child::before{display: none;}
.ggStepper li.is-done::before, .ggStepper li.is-current::before{background: var(--ggc-accent);}
.ggStepper button{position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font: inherit; color: var(--ggc-muted); cursor: default;}
.ggStepper .ggsNum{display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid var(--ggc-line); font-weight: bold; transition: all .2s;}
.ggStepper .ggsLabel{font-size: .8em;}
.ggStepper li.is-current .ggsNum{background: var(--ggc-accent); border-color: var(--ggc-accent); color: #fff; box-shadow: 0 0 0 4px rgba(26,78,147,.15);}
.ggStepper li.is-current .ggsLabel{color: var(--ggc-accent); font-weight: bold;}
.ggStepper li.is-done .ggsNum{border-color: var(--ggc-accent); color: var(--ggc-accent);}
.ggStepper li.is-done button:not([disabled]){cursor: pointer;}
.ggStepper li.is-done button:not([disabled]):hover .ggsNum{background: var(--ggc-soft);}
.ggStepper li.is-skipped{opacity: .35;}
.ggsMobile{display: none;}

/* --- alertes --- */
.ggcAlert{background: #fdecea; color: var(--ggc-err); border-left: 4px solid var(--ggc-err); border-radius: 6px; padding: 10px 14px; margin-bottom: 14px;}

/* --- champs (repris de l'assistant d'adhésion) --- */
.ggConcours .ggcRow{display: flex; gap: 4%; flex-wrap: wrap;}
.ggConcours .shinyGroup{position: relative; margin: 1.1em 0 .4em;}
.ggConcours .shinyGroup.fullW{width: 100%;}
.ggConcours .shinyGroup.halfW{width: 48%;}
.ggConcours .shinyInput{width: 100%; padding: .9em .75em; border: 1px solid #999; border-radius: 6px; background: var(--shinyInput-background); color: var(--shinyInput-color); font-size: var(--small-text, 16px); letter-spacing: .05em; transition: border-color .2s, box-shadow .2s;}
.ggConcours .shinyInput:focus{outline: none; border-color: var(--ggc-accent); box-shadow: 0 0 0 3px rgba(26,78,147,.15);}
.ggConcours .shinyInput[aria-invalid="true"]{border-color: var(--ggc-err);}
.ggConcours .shinyLabel{position: absolute; top: .95em; left: .75em; color: #777; pointer-events: none; transform-origin: left center; transition: all .15s ease;}
.ggConcours .shinyInput:focus + .shinyLabel, .ggConcours .shinyInput:not(:placeholder-shown) + .shinyLabel{top: -.6em; left: .5em; padding: 0 .35em; transform: scale(.8); background: var(--shinyInput-background); color: var(--ggc-accent);}

/* --- carte entreprise / badges --- */
.ggcCard{position: relative; background: var(--ggc-soft); border-radius: var(--ggc-radius); padding: 18px 20px; line-height: 1.5;}
.ggcCompany{font-weight: bold; font-size: 1.15em; padding-right: 110px;}
.ggcSirenLine{color: var(--ggc-muted); font-size: .9em;}
.ggcCard .ggcBadge{position: absolute; top: 16px; right: 16px;}
.ggcBadge{display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8em; font-weight: bold; background: #eee; color: #555;}
.ggcBadge.is-adherent{background: #e3f1e4; color: var(--ggc-ok);}

/* --- tuiles de choix (cases / épreuves) --- */
.ggConcours fieldset{border: 0; margin: 14px 0 0; padding: 0; min-width: 0;}
.ggConcours legend{font-weight: bold; margin-bottom: 8px; padding: 0;}
.ggcChoices, .ggcTiles{display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;}
.ggcTilesSmall{grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 8px;}
.ggcTiles > legend{grid-column: 1 / -1;}
.ggChoice{position: relative; display: block; cursor: pointer;}
.ggChoice input{position: absolute; opacity: 0; width: 1px; height: 1px;}
.ggChoiceBody{display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 14px 14px 44px; border: 2px solid var(--ggc-line); border-radius: var(--ggc-radius); background: #fff; transition: border-color .15s, background .15s, box-shadow .15s;}
.ggChoiceBody::before{content: ""; position: absolute; left: 14px; top: 16px; width: 18px; height: 18px; border: 2px solid #999; border-radius: 4px; background: #fff; transition: all .15s;}
.ggChoiceBody small{color: var(--ggc-muted);}
.ggChoiceBody em{font-style: normal; color: var(--ggc-accent); font-weight: bold;}
.ggChoice:hover .ggChoiceBody{border-color: #aab9cf;}
.ggChoice input:focus-visible + .ggChoiceBody{box-shadow: 0 0 0 3px rgba(26,78,147,.25);}
.ggChoice input:checked + .ggChoiceBody{border-color: var(--ggc-accent); background: #f2f6fc;}
.ggChoice input:checked + .ggChoiceBody::before{background: var(--ggc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center/12px no-repeat; border-color: var(--ggc-accent);}
.ggChoice .ggTaken{display: none; color: var(--ggc-err);}
.ggChoice.is-taken{cursor: not-allowed;}
.ggChoice.is-taken .ggChoiceBody{background: #f4f4f4; color: #999; border-style: dashed;}
.ggChoice.is-taken .ggTaken{display: block;}
.ggTile .ggChoiceBody{padding: 12px 12px 12px 40px;}

/* --- boutons segmentés (employeur/salarié, nombre d'apprentis) --- */
.ggcSegmented{display: inline-flex; flex-wrap: wrap; gap: 0;}
.ggcSegmented > legend{width: 100%;}
.ggSeg{position: relative; cursor: pointer;}
.ggSeg input{position: absolute; opacity: 0; width: 1px; height: 1px;}
.ggSeg span{display: block; padding: 10px 22px; border: 2px solid var(--ggc-accent); margin-left: -2px; color: var(--ggc-accent); font-weight: bold; background: #fff; transition: background .15s, color .15s;}
.ggSeg:first-of-type span{border-radius: 999px 0 0 999px; margin-left: 0;}
.ggSeg:last-of-type span{border-radius: 0 999px 999px 0;}
.ggSeg input:checked + span{background: var(--ggc-accent); color: #fff;}
.ggSeg input:focus-visible + span{box-shadow: 0 0 0 3px rgba(26,78,147,.25);}
.ggSeg input:disabled + span{opacity: .4; cursor: not-allowed;}

/* --- apprentis --- */
.ggcPerson{border: 1px solid var(--ggc-line) !important; border-radius: var(--ggc-radius); padding: 6px 16px 16px !important; margin-top: 16px !important;}
.ggcPerson > legend{padding: 0 8px; color: var(--ggc-accent);}

/* --- récapitulatif --- */
.ggcRecapCompany{margin-bottom: 10px; color: var(--ggc-muted);}
.ggcRecap{width: 100%; border-collapse: collapse; margin: 6px 0 18px;}
.ggcRecap th, .ggcRecap td{padding: 10px 8px; border-bottom: 1px solid var(--ggc-line); text-align: left; vertical-align: top;}
.ggcRecap thead th{font-size: .85em; text-transform: uppercase; color: var(--ggc-muted);}
.ggcRecap tfoot th, .ggcRecap tfoot td{border-bottom: 0; font-size: 1.15em; font-weight: bold;}
.ggcRecap .ggcNum{text-align: right; white-space: nowrap;}
.ggcRecap small{display: block; color: var(--ggc-muted);}
.ggcEngage{display: flex; gap: 10px; align-items: flex-start; padding: 14px; background: var(--ggc-soft); border-radius: var(--ggc-radius); cursor: pointer;}
.ggcEngage input{margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--ggc-accent);}

/* --- navigation + total collant --- */
.ggcNav{display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px;}
.ggConcours .ggcNav .button_valid, .ggConcours .ggcNav .button_edit{margin: 20px 0 !important; font-family: inherit;}
.ggConcours .ggcNav button[disabled]{opacity: .6; cursor: progress;}
.ggConcours .ggcNav > [hidden]{display: none !important;}
.ggcNav:has(> .prevStep[hidden]){justify-content: flex-end;}
.ggTotal{position: sticky; bottom: 0; z-index:1;display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 -28px; padding: 14px 28px; background: #fff; border-top: 1px solid var(--ggc-line); border-radius: 0 0 var(--ggc-radius) var(--ggc-radius); box-shadow: 0 -8px 16px rgba(0,0,0,.04); font-size: 1.05em;}
.ggTotal strong{font-size: 1.25em; color: var(--ggc-accent);}

/* --- mobile --- */
@media (max-width: 600px){
	.ggcWizard{padding: 16px 16px 0;}
	.ggTotal{margin: 0 -16px; padding: 12px 16px;}
	.ggStepper{display: none;}
	.ggsMobile{display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-weight: bold; color: var(--ggc-accent);}
	.ggsBar{display: block; height: 6px; background: var(--ggc-line); border-radius: 3px; overflow: hidden;}
	.ggsBar span{display: block; height: 100%; width: 0; background: var(--ggc-accent); transition: width .25s;}
	.ggConcours .shinyGroup.halfW{width: 100%;}
	.ggcNav{flex-direction: column-reverse; align-items: stretch;}
	.ggConcours .ggcNav .button_valid, .ggConcours .ggcNav .button_edit{margin: 6px 0 !important; width: 100%;}
	.ggcCompany{padding-right: 0;}
	.ggcCard .ggcBadge{position: static; margin-top: 8px;}
	.ggSeg span{padding: 10px 16px;}
}
@media (prefers-reduced-motion: reduce){
	.ggcStep, .ggcSpinner{animation: none;}
	.ggConcours *{transition: none !important;}
}

/* --- paiement intégré (étape 6) : formulaire Stripe renvoyé par GandG_stripe::SetExpressCheckout --- */
.ggcPayment{margin: 18px 0 8px; padding: 18px; border: 2px solid var(--ggc-accent); border-radius: var(--ggc-radius); background: #fff;}
.ggcPayment #payment-form{width: 100%; max-width: none; margin: 0;}
.ggcPayment #payment-element{margin-bottom: 16px;}
.ggcPayment #payment-form #submit{width: 100%;}
.ggcPayment .hidden{display: none;}

/** Paramètres du wizard concours — sous-groupe 890 (items 900-940 : édition, dates, règlement,
    prix) : masqué aux visiteurs (.athideUser), visible en mode admin (.connected) **/
.connected #concours__5_fr__groups__890{
	display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px;
	max-width: 1080px; margin: 40px auto; padding: 56px 20px 20px; box-sizing: border-box;
	position: relative; background: #fbf7ef; border: 2px dashed #c9a24a; border-radius: 12px;
}
.connected #concours__5_fr__groups__890::before{
	content: '⚙ Paramétrage du concours — visible en mode admin uniquement';
	position: absolute; top: 16px; left: 20px; right: 20px;
	font: bold 20px/1.2 fontti, arial, sans-serif; color: #134167;
}
#concours__5_fr__groups__890 > div{
	display: block; position: relative; box-sizing: border-box; width: auto; margin: 0;
	padding: 44px 16px 12px; background: #fff; border: 1px solid #e3dccb; border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}
/* titre de carte */
#concours__5_fr__groups__890 > div::before{
	position: absolute; top: 12px; left: 16px; right: 48px;
	font: bold 12px/1.2 'Open Sans', arial, sans-serif; color: #134167; text-transform: uppercase; letter-spacing: .05em;
}
#concours__5_fr__groups__900{grid-column: 1 / -1;}
#concours__5_fr__groups__900::before{content: 'Édition et calendrier';}
#concours__5_fr__groups__910::before{content: 'Candidat — tarif adhérent';}
#concours__5_fr__groups__920::before{content: 'Candidat — tarif non adhérent';}
#concours__5_fr__groups__930::before{content: 'Apprenti — tarif adhérent';}
#concours__5_fr__groups__940::before{content: 'Apprenti — tarif non adhérent';}
/* carte « Édition » : édition / ouverture / date limite sur une ligne, le nom et le règlement en pleine largeur */
#concours__5_fr__groups__900{display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0 16px; align-items: end;}
#concours__5_fr__groups__900 > .item_name, #concours__5_fr__groups__900 > .item_reglement{grid-column: 1 / -1;}
#concours__5_fr__groups__900 > .item_edition .prefixe{color: #c0392b;}
/* chaque paramètre : libellé au-dessus, valeur présentée comme un champ */
#concours__5_fr__groups__890 .t_g[class*="item_"]{display: block; margin: 0 0 10px;}
#concours__5_fr__groups__890 .prefixe{flex: 0 0 100%; margin-bottom: 4px; font-size: 12px; color: #6b6b6b;}
/* ligne libellé / valeur / unité : le champ prend la place, l'unité reste à sa droite */
#concours__5_fr__groups__890 .t_g[class*="item_"] .imageSub .imageSub{display: flex; flex-wrap: wrap; align-items: center;}
#concours__5_fr__groups__890 .suffixe{flex: 0 0 auto; margin-left: 8px; font-size: 15px; font-weight: bold; color: #134167;}
#concours__5_fr__groups__890 [id^="textcontent_"]{
	flex: 1 1 0; min-width: 0; min-height: 20px; padding: 8px 12px; font-size: 15px;
	background: #f6f6f6; border: 1px solid #ddd; border-radius: 6px; color: #222; font-weight: 600;
	word-break: break-word;
}
#concours__5_fr__groups__890 .t_g[class*="item_"]:hover [id^="textcontent_"]{border-color: #134167; background: #fff;}
#concours__5_fr__groups__890 .item_price [id^="textcontent_"]{font-size: 18px; color: #134167;}
/* valeur vide (TVA, règlement) : rappel visible */
#concours__5_fr__groups__890 [id^="textcontent_"]:empty::after{content: '— vide —'; font-weight: normal; color: #aaa;}
/* règlement : fichier joint par le trombone de l'éditeur → lien visible */
#concours__5_fr__groups__890 .item_reglement a{color: #134167; text-decoration: underline;}
#concours__5_fr__groups__890 .item_reglement a::before{content: '📎 ';}
/* bouton d'édition de l'article (prix) : coin haut droit de la carte */
#concours__5_fr__groups__890 .editItemButtom{position: absolute; top: 6px; right: 8px; margin: 0;}
@media (max-width: 760px){
	.connected #concours__5_fr__groups__890, #concours__5_fr__groups__900{grid-template-columns: 1fr;}
}
