:root{
  --bg:#f7f4ef;
  --ink:#171717;
  --muted:#666;
  --card:#ffffff;
  --line:#ded8cf;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body{overflow:hidden}
button,input{font:inherit}
button{touch-action:manipulation}
.app{width:100%;height:100%;min-height:100dvh}
.screen{display:none;width:100%;height:100%;min-height:100dvh;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));align-items:center;justify-content:center}
.screen.active{display:flex}
.card{width:min(760px,100%);background:var(--card);border:1px solid var(--line);border-radius:30px;padding:clamp(24px,4vw,54px);box-shadow:0 18px 50px rgba(0,0,0,.08);text-align:center}
.hero{padding-top:clamp(38px,7vh,80px);padding-bottom:clamp(38px,7vh,80px)}
.eyebrow{font-size:14px;letter-spacing:.26em;font-weight:700;color:var(--muted);margin-bottom:18px}
h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(44px,8vw,82px);line-height:.95;margin:0 0 16px;font-weight:500}
h1 span{font-style:italic;font-weight:400}
h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,5vw,54px);margin:0 0 18px;font-weight:500}
.date{font-size:clamp(18px,2.5vw,26px);letter-spacing:.08em;text-transform:uppercase;margin:0 0 34px}
.lead{font-size:clamp(20px,3vw,30px);margin:0 0 34px}
.small{font-size:13px;line-height:1.5;color:var(--muted);margin-top:22px}
.primary,.secondary{border:0;border-radius:18px;padding:16px 22px;font-weight:800;letter-spacing:.04em;cursor:pointer}
.primary{background:#111;color:#fff}
.secondary{background:#ece8e1;color:#111}
.big{font-size:clamp(20px,3vw,28px);min-height:66px}
.actions{display:flex;gap:16px;justify-content:center;align-items:center;margin-top:18px;flex-wrap:wrap}
.actions.two>*{flex:1;min-width:180px}
.camera-wrap{position:relative;width:min(920px,100%);height:min(72vh,820px);background:#000;border-radius:28px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.16)}
video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.camera-overlay{position:absolute;inset:0;pointer-events:none}
.topbar{position:absolute;left:0;right:0;top:0;padding:20px;text-align:center;color:#fff;font-size:18px;font-weight:700;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.countdown{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:min(30vw,220px);font-weight:900;text-shadow:0 8px 26px rgba(0,0,0,.45);z-index:3}
.preview-frame{position:relative;overflow:hidden;border-radius:24px;background:#111;max-height:62vh}
.preview-frame img{display:block;width:100%;max-height:62vh;object-fit:contain}
.photo-caption{position:absolute;left:0;right:0;bottom:0;padding:18px 22px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72));display:flex;align-items:end;justify-content:space-between;gap:20px;text-align:left}
.photo-caption strong{font-family:Georgia,"Times New Roman",serif;font-size:26px}
.photo-caption span{font-size:16px}
form{display:grid;gap:20px}
input[type=email]{width:100%;border:2px solid var(--line);border-radius:18px;padding:20px;font-size:24px;outline:none;background:#fff}
input[type=email]:focus{border-color:#111}
.consent{display:flex;gap:12px;align-items:flex-start;text-align:left;font-size:15px;line-height:1.4;color:#444}
.consent input{width:22px;height:22px;flex:0 0 auto;margin-top:1px}
.error{min-height:24px;color:#a40000;font-weight:600}
.centered{display:flex;flex-direction:column;align-items:center}
.spinner{width:70px;height:70px;border:7px solid #ddd;border-top-color:#111;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:24px}
@keyframes spin{to{transform:rotate(360deg)}}
.success-icon,.error-icon{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:54px;font-weight:900;margin-bottom:24px}
.success-icon{background:#e7f6eb}
.error-icon{background:#fdeaea}
@media (orientation:landscape) and (max-height:700px){
  .camera-wrap{height:62vh}
  .card{padding:24px}
  h1{font-size:58px}
}

/* =========================================
   CAMERA PHOTOBOOTH PLEIN ECRAN
   ========================================= */

#screen-camera.camera-screen {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #000;
    overflow: hidden;
}

#screen-camera .camera-wrap {
    position: relative;

    width: 100vw;
    height: 100vh;
    height: 100dvh;

    max-width: none;
    max-height: none;

    border-radius: 0;
    margin: 0;

    background: #000;
    overflow: hidden;
}


/* IMAGE CAMERA */

#screen-camera video {
    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: cover;

    top: 0;
    left: 0;

    transform: scaleX(-1);
}


/* SURIMPRESSION */

#screen-camera .camera-overlay {
    position: absolute;
    inset: 0;

    pointer-events: none;
}


/* TITRE EN HAUT */

#screen-camera .topbar {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    padding:
        max(25px, env(safe-area-inset-top))
        20px
        50px;

    text-align: center;

    color: white;

    font-size: 22px;
    font-weight: 700;

    text-shadow: 0 2px 8px rgba(0,0,0,.8);

    background:
        linear-gradient(
            rgba(0,0,0,.55),
            transparent
        );
}


/* BARRE DU BAS */

#screen-camera .camera-controls {

    position: absolute;

    bottom: 0;
    left: 0;
    right: 0;

    height: 145px;

    padding-bottom:
        max(20px, env(safe-area-inset-bottom));

    display: grid;

    grid-template-columns: 1fr 140px 1fr;

    align-items: center;

    padding-left: 40px;
    padding-right: 40px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.80)
        );

    pointer-events: auto;
}


/* BOUTON ANNULER */

#screen-camera .cancel-camera {

    justify-self: start;

    border: none;
    background: transparent;

    color: white;

    font-size: 20px;
    font-weight: 700;

    padding: 20px;

    cursor: pointer;
}


/* GROS BOUTON PHOTO CENTRAL */

#screen-camera .shutter-button {

    justify-self: center;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    border: 5px solid white;

    background: rgba(255,255,255,.25);

    padding: 7px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* INTERIEUR BOUTON PHOTO */

#screen-camera .shutter-inner {

    width: 76px;
    height: 76px;

    border-radius: 50%;

    background: white;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 32px;
}


/* COMPTE A REBOURS */

#screen-camera .countdown {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    z-index: 10;

    color: white;

    font-size: 180px;
    font-weight: 900;

    text-shadow:
        0 5px 25px rgba(0,0,0,.8);

    pointer-events: none;
}


/* EMPECHE LE TROISIEM EMPLACEMENT
   DE DECALER LE BOUTON CENTRAL */

#screen-camera .camera-spacer {
    width: 1px;
}

/* =========================================
   APERCU PHOTO PLUS GRAND
   ========================================= */

/* Carte de l'écran aperçu */
#screen-preview .card {
    width: 95vw;
    max-width: 1200px;

    height: 95vh;
    height: 95dvh;

    padding: 20px;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


/* Titre */
#screen-preview h2 {
    margin: 0 0 15px 0;
    font-size: 36px;
}


/* Cadre contenant la photo */
#screen-preview .preview-frame {

    flex: 1;

    width: 100%;

    max-height: none;

    border-radius: 20px;

    background: #111;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;
}


/* Photo */
#screen-preview .preview-frame img {

    width: 100%;
    height: 100%;

    max-height: none;

    object-fit: contain;
}


/* Boutons Refaire / Garder */
#screen-preview .actions {

    flex: 0 0 auto;

    width: 100%;

    margin-top: 15px;
}


/* Boutons plus grands pour l'iPad */
#screen-preview .actions button {

    min-height: 65px;

    font-size: 22px;
}

.email-autocomplete {
    position: relative;
}

.email-suggestions {

    display: none;

    position: absolute;

    top: calc(100% + 8px);
    left: 0;
    right: 0;

    background: white;

    border: 1px solid #ddd;

    border-radius: 15px;

    overflow: hidden;

    z-index: 100;

    box-shadow:
        0 10px 30px rgba(0,0,0,.15);

    max-height: 280px;

    overflow-y: auto;
}


.email-suggestion {

    width: 100%;

    border: 0;

    border-bottom: 1px solid #eee;

    background: white;

    padding: 18px 20px;

    text-align: left;

    font-size: 21px;

    cursor: pointer;
}


.email-suggestion:last-child {
    border-bottom: none;
}


.email-suggestion:active {
    background: #eee;
}