/* Police de secours pour les lettres accentuées absentes de Mazaeni (ç, é…) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@800&display=swap');
/* Djakodico – module traduction. Pensé pour téléphone, tablette et ordinateur. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Montserrat",system-ui,sans-serif;background:#fff;color:#111;line-height:1.5}
a{color:#1a73e8}
button,input,select,textarea{font-family:inherit}
img{max-width:100%}

/* ---------- En-tête ---------- */
.hdr{background-color:#fffef1;background-image:linear-gradient(rgba(255,254,241,.93),rgba(255,254,241,.93)),url("fond.png");background-repeat:repeat;background-size:auto,20%;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:24px 48px}
.logo{height:130px;width:auto;display:block}
.hdr-titre{text-align:center;flex:1;min-width:260px}
.hdr-user{text-align:right;font-size:15px}
.hdr-user a{font-weight:400}
.ttl{font-family:"Mazaeni Regular","Playfair Display",Georgia,serif;font-weight:400;letter-spacing:0;margin:0}
h1.ttl{font-size:52px;line-height:1.1}
.ttl.sous{font-size:26px;margin-top:8px}
.sec{font-family:"Mazaeni Regular","Playfair Display",Georgia,serif;font-weight:400;text-decoration:underline;margin:0;font-size:26px}
.sec.grand{font-size:38px}.sec.petit{font-size:22px}.sec.petit2{font-size:28px}
.grand2{font-size:40px;line-height:1.15}.grand3{font-size:20px}

main{max-width:1000px;width:100%;margin:0 auto;padding:40px 24px;display:flex;flex-direction:column;gap:24px}

/* ---------- Composants ---------- */
.btn,.btn2{min-height:48px;padding:0 22px;border-radius:11px;font-weight:700;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;line-height:1.2;-webkit-tap-highlight-color:transparent}
.btn{background:#000;color:#fff;border:2px solid #000}
.btn2{background:#fff;color:#000;border:2px solid #000}
.btn.btn2{background:#fff;color:#000}
.btn:focus-visible,.btn2:focus-visible{outline:3px solid #E0A030;outline-offset:2px}
.btn:disabled{opacity:.6;cursor:wait}
.btn:hover,.btn2:hover{filter:brightness(1.1)}
.pilule{border-radius:999px}
.gros{font-size:18px;min-height:56px}
.card{background:#fff;border:1px solid #D6D6D6;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:16px}
.form-etroit{max-width:520px;width:100%;margin:0 auto}
.colonne{display:flex;flex-direction:column;gap:16px}
.rangee{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.rangee.centre{justify-content:center}
.rangee-carte{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
.inp{min-height:48px;padding:0 16px;border:2px solid #ccc;border-radius:5px;font-size:16px;background:#fff;width:100%}
.inp:focus{outline:3px solid #E0A030;outline-offset:1px;border-color:#000}
.inp.court{width:84px}.inp.large{flex:1;min-width:240px;width:auto}
label{font-weight:600}
.gras{font-weight:700}
.mut{color:#444}
.petit{font-size:14px;margin:0}
.interligne{line-height:1.7;margin:12px 0 0}
.invisible{position:absolute;left:-9999px}
.alerte{background:#FDECEA;color:#7A1710;border-radius:8px;padding:12px 16px;font-weight:600}
.ok{background:#E6F4EA;color:#14532D;border:2px solid #1E7A34;border-radius:10px;padding:14px 16px;font-weight:600}
.ok-large{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.ok-large[hidden],.alerte[hidden]{display:none}
.bas{border-top:1px solid #D6D6D6;padding-top:24px}
.vert{color:#1E7A34}.bleu{color:#0B57D0}
.onglets{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Formulaires ---------- */
.grille2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.champ{display:flex;flex-direction:column;gap:6px}
.aide{font-size:13px;color:#444;margin:0}
.choix,.choix-genre{border:0;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}
.choix legend,.choix-genre legend{font-weight:700;font-size:15px;margin-bottom:6px;padding:0}
.choix-genre input,.choix input{position:absolute;opacity:0}
.choix-genre label{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;border:2px solid #000;border-radius:10px;font-weight:700;cursor:pointer;flex:1;min-width:140px}
.choix-genre input:checked+label{background:#000;color:#fff}
.choix-genre input:focus-visible+label{outline:3px solid #E0A030;outline-offset:2px}
.insta{display:flex;align-items:stretch}
.insta span{display:flex;align-items:center;padding:0 14px;background:#F7F4E4;border:2px solid #D6D6D6;border-right:0;border-radius:8px 0 0 8px;font-weight:700}
.insta .inp{border-radius:0 8px 8px 0}
.age{display:flex;align-items:center;min-height:48px;padding:0 16px;background:#F7F4E4;border-radius:8px;font-weight:700}

/* ---------- Compteur ---------- */
.compteur{position:sticky;top:8px;z-index:5;gap:8px;box-shadow:0 2px 8px rgba(0,0,0,.12);padding:16px 24px}
.ligne-compteur{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:18px}
.barre{height:12px;background:#E5E5E5;border-radius:999px;overflow:hidden}
.barre-pleine{height:12px;background:#000;border-radius:999px;transition:width .3s}

/* ---------- Page Proposer ---------- */
.mot{position:relative}
.idk-case{position:absolute;opacity:0;pointer-events:none}
.saisie{display:flex;flex-direction:column;gap:12px}
.lignes{display:flex;flex-direction:column;gap:8px}
.ligne-saisie{display:flex;gap:8px;align-items:center}
.ligne-saisie .btn2{min-width:48px;padding:0}
.deja{background:#F2F2F2;border-radius:8px;padding:10px 14px;font-size:14px}
.bouton-label{cursor:pointer}
.bande-idk{display:none;align-items:center;gap:12px;background:#E0E0E0;border-radius:8px;padding:8px 16px;font-weight:700;color:#222;cursor:pointer;min-height:56px}
.picto{flex:none}
.idk-case:checked~.saisie{display:none}
.idk-case:checked~.bande-idk{display:flex}
.idk-case:focus-visible~.saisie .bi{outline:3px solid #E0A030}

/* ---------- Page Corriger ---------- */
.liste-props{display:flex;flex-direction:column;gap:20px;border-top:1px dashed #D6D6D6;padding-top:12px}
.prop{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;position:relative}
.prop-tete{display:flex;flex-direction:column;gap:6px;min-width:200px}
.texte-prop{font-size:20px}
.av{position:absolute;opacity:0;pointer-events:none}
.t-on{display:none}
.boutons{display:flex;gap:8px;flex-wrap:wrap}
.bv{color:#1E7A34;border-color:#1E7A34}
.br{color:#B42318;border-color:#B42318}
.bi{color:#333;border-color:#6B6B6B}
.anim{transition:transform .15s,background .15s,color .15s}
.anim:hover{transform:translateY(-2px) scale(1.04)}
.anim:active{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(.88)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.av.valider:checked~.boutons .bv,.av.valider:checked~.bv{background:#1E7A34;color:#fff}
.av.rejeter:checked~.boutons .br,.av.rejeter:checked~.br{background:#B42318;color:#fff}
.av.valider:checked~.boutons .bv .t-off,.av.valider:checked~.bv .t-off,.av.rejeter:checked~.boutons .br .t-off,.av.rejeter:checked~.br .t-off{display:none}
.av.valider:checked~.boutons .bv .t-on,.av.valider:checked~.bv .t-on,.av.rejeter:checked~.boutons .br .t-on,.av.rejeter:checked~.br .t-on{display:inline}
.av.inconnu:checked~.boutons{display:none}
.av.inconnu:checked~.bande-idk{display:flex}
.correction{display:none;gap:12px;flex-wrap:wrap;align-items:center;width:100%;background:#FDECEA;border-radius:8px;padding:12px}
.correction .inp{flex:1;min-width:220px;width:auto}
.av.rejeter:checked~.correction{display:flex}
.av:focus-visible~.boutons .btn2,.av:focus-visible~.btn2{outline:3px solid #E0A030;outline-offset:2px}

/* ---------- Calendrier ---------- */
.cal-ligne{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.cal-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:6px 4px;max-width:560px;flex:1 1 340px;min-width:0}
.cal-tete{text-align:center;font-weight:700;font-size:14px}
.cal-case{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:62px}
.cal-jour{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;position:relative}
.cal-jour.auj{background:#000;color:#fff}
.cal-jour.tirage{border:3px solid #000}
.cal-croix{position:absolute;left:0;top:0;width:100%;height:100%}
.cal-etiq{font-size:11px;font-weight:700;line-height:1.2;text-align:center}
.cal-etiq.vert{color:#1E7A34}.cal-etiq.bleu{color:#0B57D0}
.cal-legende{flex:1 1 240px;display:flex;flex-direction:column;gap:14px;font-size:14px;padding-top:28px}
.cal-legende span{display:inline-flex;align-items:center;gap:8px}
.pt{width:20px;height:20px;border-radius:50%;display:inline-block}
.pt.rond{border:3px solid #000}.pt.plein{background:#000}

/* ---------- Remerciements ---------- */
.merci{text-align:center;align-items:center;padding:56px 24px 220px;gap:32px;position:relative;overflow:hidden}
.texte-merci{font-size:18px;line-height:1.8;max-width:640px;margin:0;position:relative}
.confetti{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:chute 6s linear infinite}
.confetti.c0{background:#000}.confetti.c1{background:#E0A030}.confetti.c2{background:#1E7A34}.confetti.c3{background:#B42318}.confetti.c4{background:#0B57D0}
@keyframes chute{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(720px) rotate(540deg)}}
.bitmoji{position:absolute;right:8px;bottom:12px;height:150px;width:auto;animation:sway 2.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.bulle{position:absolute;right:8px;bottom:176px;background:#fff;border:2px solid #000;border-radius:14px;padding:8px 14px;font-weight:700;font-size:15px;text-align:center;line-height:1.3}
.bulle span{position:absolute;right:28px;bottom:-9px;width:14px;height:14px;background:#fff;border-right:2px solid #000;border-bottom:2px solid #000;transform:rotate(45deg)}

/* ---------- Admin ---------- */
.mot-admin{display:flex;flex-direction:column;gap:12px;border-top:1px solid #D6D6D6;padding-top:16px}
.prop-admin{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:6px;border:2px solid transparent;border-radius:10px;position:relative}
.manque-msg,.manque-mot{display:none;color:#B42318;font-weight:700;width:100%}
.prop-admin.manque{background:#FDECEA;border-color:#B42318;padding:12px}
.prop-admin.manque .manque-msg{display:block}
.mot-admin.trop{background:#FDECEA;border-radius:10px;padding:12px}
.mot-admin.trop .manque-mot{display:block}
.defile{overflow-x:auto;margin-top:8px;-webkit-overflow-scrolling:touch}
.tab{border-collapse:collapse;font-size:14px}
.tab th{padding:8px 12px;text-align:left;border-bottom:2px solid #000;white-space:nowrap}
.tab th span{font-weight:400}
.tab td{padding:8px 12px;border-bottom:1px solid #D6D6D6;white-space:nowrap}

/* ---------- Tablette ---------- */
@media(max-width:1024px){
  .hdr{padding:20px 28px}
  h1.ttl{font-size:38px}
  main{padding:32px 20px}
}

/* ---------- Téléphone ---------- */
@media(max-width:640px){
  .hdr{padding:16px;justify-content:center;gap:12px;flex-direction:column}
  .logo{height:84px}
  h1.ttl{font-size:30px}
  .ttl.sous{font-size:17px}
  .hdr-user{text-align:center;width:100%}
  main{padding:20px 16px;gap:20px}
  .sec.grand{font-size:26px}.sec.petit2{font-size:24px}.grand2{font-size:30px}
  .card{padding:16px}
  .compteur{padding:12px 16px}.ligne-compteur{font-size:15px}
  .grille2{grid-template-columns:1fr}
  .btn,.btn2{width:100%}
  .onglets .btn,.onglets .btn2{width:100%}
  .ligne-saisie .btn2{width:48px}
  .rangee,.boutons{flex-direction:column;align-items:stretch}
  .rangee .inp.court,.rangee-carte .inp.court{width:100%}
  .rangee-carte{flex-direction:column;align-items:stretch}
  .prop{flex-direction:column;align-items:stretch}
  .correction .inp{min-width:0;width:100%}
  .ok-large{flex-direction:column;align-items:stretch}
  .inp.large{min-width:0;width:100%}
  .cal-grille{flex-basis:100%;gap:4px 2px}
  .cal-jour{width:36px;height:36px;font-size:14px}
  .cal-etiq{font-size:10px}
  .cal-legende{padding-top:0;flex-basis:100%}
  .merci{padding:36px 16px 200px}
  .bitmoji{height:130px}.bulle{bottom:156px;font-size:14px}
  .confetti{display:none}
  .texte-merci{font-size:16px}
}

@media(prefers-reduced-motion:reduce){
  .anim,.anim:active,.confetti,.bitmoji,.barre-pleine{animation:none;transition:none}
}

/* Pied de page : même fond que le site */
.pied-site{background-color:#fffef1;background-image:linear-gradient(rgba(255,254,241,.93),rgba(255,254,241,.93)),url("fond.png");background-size:auto,20%;text-align:center;padding:20px;font-size:.8em;border-top:1px solid #000;margin-top:40px}

/* Page d'entrée */
.hub{max-width:640px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.hub-lien{display:flex;flex-direction:column;gap:6px;padding:20px 24px;border:2px solid #000;border-radius:11px;background:#fff;color:#000;text-decoration:none;min-height:48px}
.hub-lien:hover,.hub-lien:focus-visible{background:#000;color:#fff}
.hub-lien:hover .sec,.hub-lien:focus-visible .sec{color:#fff}
.hub-lien .sec{font-size:28px}

/* Profil, consentement, badges */
.consent{display:flex;gap:12px;align-items:flex-start;font-weight:400;line-height:1.5;cursor:pointer}
.consent input{width:24px;height:24px;flex:none;margin-top:2px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{border:2px solid #000;border-radius:11px;padding:16px;display:flex;flex-direction:column;gap:6px;background:#fffef1}
.stat strong{font-family:"Mazaeni Regular","Playfair Display",Georgia,serif;font-weight:400;font-size:40px;line-height:1}
.stat span{font-size:14px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.badge{border:2px dashed #bbb;border-radius:11px;padding:14px;display:flex;flex-direction:column;gap:4px;opacity:.55;background:#fff}
.badge span{font-size:28px;filter:grayscale(1)}
.badge small{font-size:12px;color:#444}
.badge.acquis{border:2px solid #1E7A34;opacity:1;background:#E6F4EA}
.badge.acquis span{filter:none}
.br-btn{border-color:#c0392b;color:#c0392b}
.br-btn:hover{background:#c0392b;color:#fff}
@media (max-width:1024px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.stats{grid-template-columns:1fr 1fr}.stat strong{font-size:32px}}
.membres tr.bloque td{background:#FDECEA}
.pagination{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}

/* Page « on vérifie les mots » */
.ferme{align-items:center;text-align:center;max-width:720px;margin:0 auto;width:100%}
.bitmoji-ferme{width:200px;height:auto;animation:flotte 3s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.decompte{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.decompte div{background:#fffef1;border:2px solid #000;border-radius:11px;padding:12px 16px;min-width:84px;display:flex;flex-direction:column}
.decompte strong{font-family:"Mazaeni Regular","Playfair Display",Georgia,serif;font-weight:400;font-size:44px;line-height:1}
.decompte span{font-size:13px}
@media (prefers-reduced-motion:reduce){.bitmoji-ferme{animation:none}}
@media (max-width:640px){.decompte div{min-width:70px;padding:10px}.decompte strong{font-size:34px}}

.cal-jour.verif{outline:2px dashed #E0A030;outline-offset:-3px;background:#FFF6E0}
.pt.verif{display:inline-block;width:16px;height:16px;border:2px dashed #E0A030;background:#FFF6E0;vertical-align:middle;border-radius:3px}

/* Chiffres : la police Mazaeni (version d'essai) affiche un filigrane sur les chiffres */
.num{font-family:inherit;font-weight:inherit;letter-spacing:0}

/* Admin : proposition modifiable, retour à la ligne pour les textes longs */
.prop-texte{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:4px}
.prop-texte textarea.edit-prop{min-height:48px;padding:10px 14px;line-height:1.4;resize:vertical;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.prop-admin .rangee{flex:0 0 auto}

/* ---------- Ergonomie commune : PC, tablette, téléphone (portrait et paysage) ---------- */
/* Mêmes effets partout : léger relief au survol (souris), enfoncement au toucher */
.btn,.btn2,.hub-lien,.pilule,.card a.btn,.card a.btn2{transition:transform .15s,background .15s,color .15s,filter .15s,box-shadow .15s}
@media(hover:hover) and (pointer:fine){
  .btn:hover,.btn2:hover,.hub-lien:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.15)}
}
.btn:active,.btn2:active,.hub-lien:active{transform:scale(.97);box-shadow:none}
/* Zones tactiles confortables et pas de zoom involontaire sur iPhone */
.btn,.btn2,.inp,select,textarea{min-height:48px}
input,select,textarea{font-size:16px}
textarea.inp{padding-top:10px;padding-bottom:10px}
a,button,label{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* Encoches et coins arrondis (téléphones récents, paysage) */
.hdr,main,.pied-site{padding-left:max(var(--p-gauche,24px),env(safe-area-inset-left));padding-right:max(var(--p-droite,24px),env(safe-area-inset-right))}
.hdr{--p-gauche:48px;--p-droite:48px}
@media(max-width:1024px){.hdr{--p-gauche:28px;--p-droite:28px}main{--p-gauche:20px;--p-droite:20px}}
@media(max-width:640px){.hdr{--p-gauche:16px;--p-droite:16px}main{--p-gauche:16px;--p-droite:16px}}
/* Tablette en portrait : boutons de navigation sur une ligne, cartes pleine largeur */
@media(min-width:641px) and (max-width:1024px){
  .onglets{justify-content:center}
  .rangee-carte{gap:14px}
}
/* Téléphone ou tablette en paysage (écran peu haut) : bandeau compact en ligne */
@media(max-height:520px) and (orientation:landscape){
  .hdr{flex-direction:row;flex-wrap:nowrap;justify-content:space-between;padding-top:8px;padding-bottom:8px;gap:12px}
  .logo{height:56px}
  h1.ttl{font-size:26px}
  .ttl.sous{font-size:14px;margin-top:2px}
  .hdr-user{text-align:right;width:auto;font-size:13px}
  main{padding-top:16px;padding-bottom:16px;gap:16px}
  .btn,.btn2{width:auto}
  .onglets .btn,.onglets .btn2{width:auto}
  .rangee,.boutons{flex-direction:row;align-items:center}
}
/* Très grands écrans : contenu centré, jamais étiré */
@media(min-width:1600px){main{max-width:1100px}}
@media(prefers-reduced-motion:reduce){.btn,.btn2,.hub-lien,.pilule{transition:none}.btn:hover,.btn2:hover,.hub-lien:hover,.btn:active,.btn2:active,.hub-lien:active{transform:none;box-shadow:none}}

/* ---------- Textes qui dépassent + remerciements (confettis, bitmoji) sur tous les supports ---------- */
main,.hdr,.card,.merci,.hub-lien,.prop,.prop-admin,.mot-admin,.pied-site{overflow-wrap:anywhere;min-width:0}
h1.ttl,h2.ttl,.sec,.grand2,.grand3{overflow-wrap:anywhere;hyphens:auto}
.grand2{font-size:clamp(26px,7vw,40px)}
.texte-merci,.texte-prop,.deja,.mut{overflow-wrap:anywhere}
.btn,.btn2{white-space:normal;max-width:100%}
img,svg,video,canvas{max-width:100%;height:auto}
.logo{height:130px;width:auto}
@media(max-width:1024px){.logo{height:100px}}
@media(max-width:640px){.logo{height:84px}}
/* Les confettis tombent sur toute la hauteur de la carte, quelle que soit la taille de l'écran */
@keyframes chute{0%{top:-20px;transform:rotate(0)}100%{top:100%;transform:rotate(540deg)}}
.confetti{transform:none}
.merci{min-height:420px}
@media(max-width:640px){
  .merci{padding:36px 16px 190px;gap:22px}
  .texte-merci{font-size:16px;line-height:1.7}
  .bitmoji{height:112px;right:4px}
  .bulle{right:4px;bottom:138px;font-size:13px;padding:6px 10px}
  .bitmoji-ferme{width:min(200px,60vw)}
}
@media(min-width:641px) and (max-width:1024px){.bitmoji{height:130px}.bulle{bottom:156px}}
@media(max-height:520px) and (orientation:landscape){
  .merci{padding:28px 150px 28px 24px;min-height:0}
  .bitmoji{height:100px}
  .bulle{bottom:112px;font-size:12px}
}