/* Chapiloc — site public
   Direction : la fête de village à la tombée du soir.
   Fond bleu nuit, toile de chapiteau claire, ampoules ambrées. */

:root{
  --nuit:#14294B;
  --nuit-clair:#1E3A63;
  --toile:#F5F2EA;
  --toile-ombre:#E7E1D4;
  --ampoule:#E8B148;
  --brique:#DB7049;
  --herbe:#3B8A63;
  --encre:#14294B;
  --encre-doux:#5A6B85;
  --pale:#B4C4DA;
  --r:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--nuit);color:var(--toile);
  font-family:Karla,system-ui,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3{
  font-family:Fraunces,Georgia,serif;
  font-variation-settings:'SOFT' 40,'WONK' 1,'opsz' 40;
  font-weight:600;line-height:1.05;letter-spacing:-.02em;margin:0;
}
h1{font-size:clamp(2.6rem,7vw,5rem)}
h2{font-size:clamp(2rem,4.4vw,3.2rem)}
h3{font-size:1.25rem;line-height:1.2}

.enveloppe{max-width:1080px;margin:0 auto;padding:0 22px}
.etroit{max-width:760px}

.oeil{
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ampoule);
}
.oeil.sombre{color:var(--brique)}

/* ---------- barre ---------- */
.barre{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-bottom:3px solid var(--ampoule)}
.barre .enveloppe{display:flex;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px}
.barre img{height:64px;width:auto}
@media(max-width:760px){.barre img{height:52px}}
.liens{margin-left:auto;display:flex;gap:26px;align-items:center}
.liens a{color:var(--encre-doux);text-decoration:none;font-size:15px;font-weight:500;
  transition:color .15s ease}
.liens a:hover:not(.bouton){color:var(--nuit)}
.liens a.bouton{color:#12233F}
.liens a.bouton:hover{color:#12233F}
@media(max-width:760px){.liens a:not(.bouton){display:none}}

.bouton{
  display:inline-block;background:var(--ampoule);color:#12233F;
  border:0;border-radius:99px;padding:13px 26px;font:inherit;font-weight:700;
  font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.bouton:hover{transform:translateY(-2px);background:#F0BC5C;
  box-shadow:0 8px 22px rgba(232,177,72,.34)}
.bouton:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--ampoule);outline-offset:3px}
.bouton.fantome{background:none;color:var(--toile);border:1.5px solid rgba(255,255,255,.28)}
.bouton.fantome:hover{border-color:var(--ampoule);box-shadow:none}
.bouton.sombre{background:var(--nuit);color:var(--toile)}
.bouton:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}

/* ---------- guirlande ---------- */
.guirlande{display:block;width:100%;height:64px;margin-bottom:-8px}
.guirlande .fil{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5}
.guirlande circle{transform-origin:center}
@keyframes lueur{0%,100%{opacity:.55}50%{opacity:1}}
.guirlande circle{animation:lueur 4s ease-in-out infinite}
.guirlande circle:nth-child(3n){animation-delay:-1.3s}
.guirlande circle:nth-child(3n+1){animation-delay:-2.6s}

/* ---------- héros ---------- */
.heros{padding:18px 0 76px;position:relative;overflow:hidden}
.heros h1{max-width:14ch}
.heros h1 em{font-style:normal;color:var(--ampoule)}
.chapo{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--pale);max-width:44ch;margin:22px 0 0}

/* ---------- vérificateur ---------- */
.verif{
  background:var(--toile);color:var(--encre);border-radius:var(--r);
  padding:26px;margin-top:40px;box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.verif h3{margin-bottom:4px}
.verif .aide{color:var(--encre-doux);font-size:15px;margin:0 0 18px}
.champs{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.champ{flex:1 1 160px;min-width:0}
.champ label{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-doux);margin-bottom:6px}
input,select,textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--toile-ombre);border-radius:10px;
  background:#fff;font:inherit;color:var(--encre);font-size:16px;   /* 16px : évite le zoom auto d'iOS */
  -webkit-appearance:none;appearance:none;
}
/* Safari centre le texte des dates et impose sa propre hauteur */
input[type=date],input[type=datetime-local]{text-align:left;min-height:52px;display:block}
input[type=date]::-webkit-date-and-time-value,
input[type=datetime-local]::-webkit-date-and-time-value{text-align:left;margin:0}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6B85' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
input:focus,select:focus,textarea:focus{border-color:var(--nuit)}
textarea{resize:vertical}

.dates{display:grid;grid-template-columns:1fr 1fr;gap:1.5px;background:var(--toile-ombre);
  border:1.5px solid var(--toile-ombre);border-radius:12px;overflow:hidden;margin-bottom:14px}
.dates .bloc-date{background:#fff;padding:11px 14px 12px}
.dates .bloc-date label{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--encre-doux);margin:0 0 2px}
.dates .bloc-date input{border:0;border-radius:0;padding:0;min-height:30px;
  font-size:17px;font-weight:600;background:none;color:var(--encre)}
.dates .bloc-date input:focus{outline:none}
.dates .bloc-date:focus-within{box-shadow:inset 0 0 0 2px var(--nuit)}
.bouton.pleine-largeur{display:block;width:100%;text-align:center}

.resultats{margin-top:22px;border-top:1px solid var(--toile-ombre);padding-top:20px}
.jeton{
  display:inline-flex;align-items:center;gap:9px;background:#fff;
  border:1.5px solid var(--toile-ombre);border-radius:99px;
  padding:9px 16px 9px 12px;margin:0 8px 8px 0;font-size:15px;font-weight:500;
}
.jeton .pt{width:9px;height:9px;border-radius:99px;background:var(--herbe);flex:0 0 auto}
.jeton.complet{opacity:.5;text-decoration:line-through}
.jeton.complet .pt{background:var(--brique)}
.jeton b{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--encre-doux)}
.verdict{font-size:15px;color:var(--encre-doux);margin:0 0 16px}
.verdict.ko{color:var(--brique);font-weight:600}

/* ---------- feston de toile ---------- */
.feston{height:26px;background:var(--toile);
  -webkit-mask:radial-gradient(circle at 13px 26px,transparent 13px,#000 13.5px) 0 0/26px 26px repeat-x;
  mask:radial-gradient(circle at 13px 26px,transparent 13px,#000 13.5px) 0 0/26px 26px repeat-x}
.feston.inverse{background:var(--nuit);
  -webkit-mask:radial-gradient(circle at 13px 0,transparent 13px,#000 13.5px) 0 0/26px 26px repeat-x;
  mask:radial-gradient(circle at 13px 0,transparent 13px,#000 13.5px) 0 0/26px 26px repeat-x}

/* ---------- sections claires ---------- */
.clair{background:var(--toile);color:var(--encre)}
.clair .oeil{color:var(--brique)}
.section{padding-top:70px;padding-bottom:70px}
.section h2{max-width:18ch}
.intro{color:var(--encre-doux);max-width:52ch;margin:16px 0 0;font-size:1.05rem}
.sombre .intro{color:var(--pale)}

/* ---------- matériel ---------- */
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:16px;margin-top:38px;align-items:stretch}
.tuile{background:#fff;border-radius:var(--r);border:1.5px solid var(--toile-ombre);
  overflow:hidden;display:flex;flex-direction:column}
.tuile .corps{padding:20px;display:flex;flex-direction:column;gap:6px;flex:1}
.tuile h3{font-size:1.08rem}
.tuile p{color:var(--encre-doux);font-size:15px;margin:0}
.tuile .dim{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--brique);font-weight:600}

/* zone visuelle identique, qu'il y ait une photo ou non */
.tuile .media{aspect-ratio:4/3;position:relative;flex:0 0 auto;overflow:hidden;
  background:var(--toile-ombre)}
.tuile .media img{width:100%;height:100%;object-fit:cover;display:block}
/* sans photo : rayures de toile, discrètes, pour ne pas signaler un manque */
.tuile .media.vide{background:
  repeating-linear-gradient(135deg,#EFEADD 0 14px,#E7E1D4 14px 28px)}
.tuile .media .toit{position:absolute;inset:0;margin:auto;width:46%;height:auto;opacity:.5}

/* les tuiles d'argumentaire n'ont pas de visuel */
.tuile.texte .corps{padding:24px}

/* ---------- déroulé ---------- */
.etapes{margin-top:44px;display:grid;gap:2px}
.etape{display:grid;grid-template-columns:74px 1fr;gap:24px;align-items:start;
  padding:26px 0;border-top:1px solid rgba(255,255,255,.13)}
.etape:last-child{border-bottom:1px solid rgba(255,255,255,.13)}
.etape .rang{font-family:Fraunces,serif;font-size:2.6rem;line-height:1;color:var(--ampoule);
  font-variation-settings:'WONK' 1}
.etape p{margin:8px 0 0;color:var(--pale);max-width:56ch}

/* ---------- zone ---------- */
.communes{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.commune{background:#fff;border:1.5px solid var(--toile-ombre);border-radius:99px;
  padding:8px 16px;font-size:15px}
.commune b{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--encre-doux);margin-left:5px}

/* ---------- pied ---------- */
.pied{padding:60px 0 40px;border-top:1px solid rgba(255,255,255,.12)}
.pied .cols{display:flex;gap:50px;flex-wrap:wrap;justify-content:space-between}
.pied a{color:var(--pale);text-decoration:none}
.pied a:hover{color:var(--ampoule)}
.pied .legal{margin-top:40px;font-size:13px;color:rgba(159,176,201,.6);
  display:flex;gap:20px;flex-wrap:wrap}

/* ---------- formulaire de réservation ---------- */
.etapesf{display:flex;gap:6px;margin-bottom:30px;flex-wrap:wrap}
.pastille{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--pale);
  background:rgba(255,255,255,.06);border-radius:99px;padding:8px 16px}
.pastille i{width:22px;height:22px;border-radius:99px;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;font-style:normal;
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600}
.pastille.active{background:var(--ampoule);color:var(--nuit);font-weight:600}
.pastille.active i{background:rgba(0,0,0,.16)}
.pastille.faite i{background:var(--herbe);color:#fff}

.carte{background:var(--toile);color:var(--encre);border-radius:var(--r);padding:28px;
  box-shadow:0 24px 60px rgba(0,0,0,.26)}
.carte + .carte{margin-top:16px}
.ligne{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--toile-ombre)}
.ligne:last-child{border-bottom:0}
.ligne .nom{flex:1;min-width:0}
.ligne .nom b{display:block}
.ligne .nom span{font-size:13px;color:var(--encre-doux)}
.compteur{display:flex;align-items:center;gap:10px}
.compteur button{width:38px;height:38px;border:1.5px solid var(--toile-ombre);background:#fff;
  border-radius:10px;font-size:19px;line-height:1;cursor:pointer;color:var(--encre)}
.compteur button:hover:not(:disabled){border-color:var(--nuit)}
.compteur span{min-width:26px;text-align:center;font-family:"IBM Plex Mono",monospace;font-weight:600}
.recap{background:#fff;border-radius:10px;padding:18px;margin-top:18px;font-size:15px}
.recap dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}
.recap dt{color:var(--encre-doux)}
.recap dd{margin:0;font-weight:600}
.alerte{background:#FBE7DF;color:#A8421F;border-radius:10px;padding:13px 16px;font-size:15px;margin-top:16px}
.succes{background:#E2F0E8;color:#256B45;border-radius:10px;padding:13px 16px;font-size:15px;margin-top:16px}
.mentions{font-size:14px;color:var(--encre-doux);margin-top:18px}
.miel{position:absolute;left:-9999px}

.fin{text-align:center;padding:80px 0}
.fin .rond{width:72px;height:72px;border-radius:99px;background:var(--herbe);
  display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:34px}

/* ---------- mosaïque de réalisations ---------- */
.mosaique{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin-top:38px}
.mosaique figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--nuit-clair);
  aspect-ratio:4/3}
.mosaique figure.large{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;min-height:100%}
.mosaique img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mosaique figure:hover img{transform:scale(1.04)}
@media(max-width:640px){.mosaique figure.large{grid-column:span 1;grid-row:span 1;aspect-ratio:4/3}}

/* vignette produit */
.tuile .vignette{width:calc(100% + 44px);margin:-22px -22px 16px;height:150px;
  object-fit:cover;border-radius:var(--r) var(--r) 0 0}


/* ---------- ajustements téléphone ---------- */
@media (max-width:600px){
  .enveloppe{padding:0 18px}
  .section{padding-top:48px;padding-bottom:48px}
  .heros{padding-bottom:52px}
  h1{line-height:1.08}
  .chapo{margin-top:16px}
  .verif{padding:20px;margin-top:30px;border-radius:12px}
  .dates{grid-template-columns:1fr}
  .verif .champs{gap:12px}
  .verif .champ{flex:1 1 100%}
  .grille{gap:12px;margin-top:26px}
  .etape{grid-template-columns:52px 1fr;gap:14px;padding:20px 0}
  .etape .rang{font-size:2rem}
  .etapes{margin-top:30px}
  .communes{gap:7px;margin-top:22px}
  .commune{font-size:14px;padding:7px 13px}
  .mosaique{gap:8px;margin-top:26px}
  .pied{padding:44px 0 32px}
  .pied .cols{gap:32px}
  .legal{gap:10px;font-size:12px}
  .jeton{font-size:14px;padding:8px 13px 8px 10px;margin:0 6px 6px 0}
  .carte{padding:20px;border-radius:12px}
  .etapesf{gap:5px}
  .pastille{font-size:13px;padding:7px 12px}
}
@media (max-width:380px){
  .enveloppe{padding:0 15px}
  h1{font-size:2.2rem}
  h2{font-size:1.75rem}
}

/* ---------- questions fréquentes ---------- */
.faq{margin-top:34px;border-top:1px solid var(--toile-ombre)}
.faq details{border-bottom:1px solid var(--toile-ombre)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:Fraunces,Georgia,serif;font-size:1.15rem;font-weight:600;line-height:1.3;
  color:var(--encre)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:8px;top:26px;width:13px;height:13px;
  border-right:2.5px solid var(--brique);border-bottom:2.5px solid var(--brique);
  transform:rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq summary:hover{color:var(--brique)}
.faq .reponse{padding:0 44px 22px 0;color:var(--encre-doux);max-width:62ch}
.faq .reponse p{margin:0;line-height:1.7}
@media (max-width:600px){
  .faq summary{font-size:1.05rem;padding:16px 36px 16px 0}
  .faq .reponse{padding-right:0;padding-bottom:18px}
}

/* ---------- saisie assistée d'adresse ---------- */
.suggestions{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:4px;
  background:#fff;border:1.5px solid var(--toile-ombre);border-radius:10px;overflow:hidden;
  box-shadow:0 12px 30px rgba(20,41,75,.16);max-height:260px;overflow-y:auto}
.suggestions[hidden]{display:none}
.sugg{display:block;width:100%;text-align:left;background:none;border:0;padding:11px 14px;
  cursor:pointer;font:inherit;border-bottom:1px solid var(--toile-ombre)}
.sugg:last-child{border-bottom:0}
.sugg b{display:block;font-weight:600;font-size:15px;color:var(--encre)}
.sugg span{font-size:13px;color:var(--encre-doux)}
.sugg:hover,.sugg.sur{background:#F4F1E8}