/* Polices hébergées par le site (Fontsource, sous-ensemble latin, licence OFL : voir ../fonts/OFL.txt) */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:200 800;font-stretch:100%;src:url(../fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2-variations'),url(../fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-wght-normal.woff2) format('woff2-variations'),url(../fonts/inter-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-display:swap;font-weight:400 700;src:url(../fonts/caveat-latin-wght-normal.woff2) format('woff2-variations'),url(../fonts/caveat-latin-wght-normal.woff2) format('woff2')}
/* Ajout hors maquette : l'attribut hidden doit l'emporter sur les display en ligne */
[hidden]{display:none !important}
/* Étape 4 : l'alerte d'échec du formulaire est vide (donc cachée) tant qu'aucun envoi n'a échoué. */
#devis-erreur:empty{display:none}
#devis-form{position:relative}
body{margin:0}
html{scroll-behavior:smooth}
a{color:#0E2A2F}a:hover{color:#0B7C87}
@keyframes floatY{0%,100%{transform:translateZ(var(--z,0px)) translateY(0)}50%{transform:translateZ(var(--z,0px)) translateY(-9px)}}
@keyframes sway{0%,100%{transform:rotateY(-10deg) rotateX(5deg)}50%{transform:rotateY(10deg) rotateX(-2deg)}}
@keyframes rig{0%{transform:rotateX(12deg) rotateY(-28deg) rotateZ(2deg)}100%{transform:rotateX(6deg) rotateY(-10deg) rotateZ(0deg)}}
@keyframes cube{from{transform:rotateX(-22deg) rotateY(0deg)}to{transform:rotateX(-22deg) rotateY(360deg)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes popIn{0%{opacity:0;transform:translateY(14px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-8deg)}}
.float-a{animation:floatY 6s ease-in-out infinite}
.float-b{animation:floatY 7s ease-in-out -2s infinite}
.float-c{animation:floatY 8s ease-in-out -4s infinite}
.spin{animation:spin 40s linear infinite}
.marquee{animation:marquee 45s linear infinite}
.draw{stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 1.3s ease-out .5s forwards}
.draw-late{stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 1.1s ease-out 1.3s forwards}
.pop{animation:popIn .45s ease-out both}
.wave{display:inline-block;transform-origin:70% 80%;animation:wave 2.6s ease-in-out 1s infinite}
.hero-scene{transform-style:preserve-3d;animation:sway 12s ease-in-out infinite}
.cz-rig{transform-style:preserve-3d;transform:rotateX(8deg) rotateY(-18deg);animation:rig 8s ease-in-out infinite alternate}
.cz-rig:hover{animation-play-state:paused}
.cube{transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(-30deg);animation:cube 16s linear infinite}
.tilt{transition:transform .35s ease}
.tilt:hover{transform:perspective(900px) rotateX(5deg) rotateY(-7deg) translateY(-6px)}
@keyframes ex1{0%,12%{transform:translateZ(14px)}40%,82%{transform:translateZ(68px)}100%{transform:translateZ(14px)}}
@keyframes ex2{0%,12%{transform:translateZ(28px)}40%,82%{transform:translateZ(136px)}100%{transform:translateZ(28px)}}
@keyframes ex3{0%,12%{transform:translateZ(42px)}40%,82%{transform:translateZ(204px)}100%{transform:translateZ(42px)}}
@keyframes ex4{0%,12%{transform:translateZ(56px)}40%,82%{transform:translateZ(272px)}100%{transform:translateZ(56px)}}
.l1{animation:ex1 9s cubic-bezier(.65,0,.3,1) infinite}
.l2{animation:ex2 9s cubic-bezier(.65,0,.3,1) infinite}
.l3{animation:ex3 9s cubic-bezier(.65,0,.3,1) infinite}
.l4{animation:ex4 9s cubic-bezier(.65,0,.3,1) infinite}
.plate{transition:transform .3s ease,background-color .3s ease}
.layer:hover .plate{transform:translateZ(22px)}
@media (max-width:760px){.stack-wrap{height:500px !important;padding-bottom:40px !important}.stack{transform:scale(.7) rotateX(58deg) rotateZ(-42deg) !important}}
@keyframes reveal{from{opacity:0;translate:0 48px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes rigScroll{from{transform:rotateX(22deg) rotateY(-38deg) rotateZ(3deg)}to{transform:rotateX(4deg) rotateY(-8deg) rotateZ(0deg)}}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline: view()){
.reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
.reveal:nth-child(2){animation-range:entry 6% cover 32%}
.reveal:nth-child(3){animation-range:entry 12% cover 38%}
.reveal:nth-child(4){animation-range:entry 18% cover 44%}
.cz-rig{animation:rigScroll linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
.progress{animation:progress linear both;animation-timeline:scroll(root)}
.stack{animation:stackScroll linear both;animation-timeline:scroll(root);animation-range:0px 750px}
.wipe,.flip,.swing,.slide-l,.slide-r{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
.flip:nth-child(2),.swing:nth-child(2),.slide-r{animation-range:entry 5% cover 28%}
.flip:nth-child(3),.swing:nth-child(3){animation-range:entry 10% cover 32%}
.swing:nth-child(4){animation-range:entry 15% cover 36%}
.hl{animation:hlGrow linear both;animation-timeline:view();animation-range:entry 60% cover 50%}
.letter{animation:letterIn linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
.tape{animation:tapeIn linear both;animation-timeline:view();animation-range:entry 70% cover 45%}
.cz-notif{animation:notifIn linear both;animation-timeline:view();animation-range:entry 20% cover 55%}
.cz-phone{animation:phoneIn linear both;animation-timeline:view();animation-range:entry 10% cover 50%}
}
@media (max-width:760px){.float-a,.float-b,.float-c,.wiggle:hover{animation:none}.tilt:hover,.lift:hover{transform:none}}
@keyframes heroOut{to{opacity:.1;translate:0 -110px;scale:.95}}
@keyframes stackScroll{from{transform:rotateX(58deg) rotateZ(-42deg)}to{transform:rotateX(38deg) rotateZ(-4deg) scale(1.15)}}
@keyframes bandTilt{from{rotate:-5deg;translate:-7% 0}to{rotate:4deg;translate:5% 0}}
@keyframes wipe{from{clip-path:inset(-15% 100% -25% -5%);translate:0 34px}to{clip-path:inset(-15% -5% -25% -5%);translate:0 0}}
@keyframes hlGrow{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes flipUp{from{opacity:0;translate:0 140px;rotate:x 60deg}to{opacity:1;translate:0 0;rotate:x 0deg}}
@keyframes swingL{from{opacity:0;translate:-160px 80px;rotate:-10deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes swingR{from{opacity:0;translate:160px 80px;rotate:10deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes slideL{from{opacity:0;translate:-220px 0;rotate:-6deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes slideR{from{opacity:0;translate:220px 0;rotate:6deg;scale:.85}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes drawLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes letterIn{from{opacity:0;rotate:-14deg;translate:0 160px;scale:.88}to{opacity:1;rotate:0deg;translate:0 0;scale:1}}
@keyframes tapeIn{from{scale:0 1}to{scale:1 1}}
@keyframes notifIn{from{opacity:0;translate:-200px 0}to{opacity:1;translate:0 0}}
/* Écart à la maquette : le téléphone devient opaque dès 35 % de la plage (sinon on voit l'ordinateur à travers), la montée dure toute la plage. */
@keyframes phoneIn{from{opacity:0;translate:0 200px}35%{opacity:1}to{opacity:1;translate:0 0}}
@keyframes giantSlide{from{translate:6% 0}to{translate:-38% 0}}
.hl{background-repeat:no-repeat !important;background-position:left bottom !important}
.lift{transition:transform .2s ease}
.lift:hover{transform:translate(-3px,-3px)}
.wiggle:hover{animation:wiggle .5s ease-in-out}
input,select,textarea{font:inherit;font-size:15px;font-weight:400;color:#0E2A2F;background:#FFFFFF;border:1.5px solid #6E8A8E;border-radius:12px;padding:12px 14px;min-height:48px;box-sizing:border-box;width:100%}
textarea{min-height:128px;resize:vertical}
input[type=checkbox]{width:20px;height:20px;min-height:20px;padding:0;flex:none;accent-color:#0B7C87;margin:2px 0 0}
::placeholder{color:#6B8185}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid #0B7C87;outline-offset:2px}
@media (max-width:760px){.hide-sm{display:none !important}}
@media (max-width:1150px){.steps-line{display:none}}
@media (prefers-reduced-motion: reduce){.float-a,.float-b,.float-c,.spin,.marquee,.pop,.wave,.wiggle:hover,.hero-scene,.cz-rig,.cube,.l1,.l2,.l3,.l4,.reveal,.progress,.hero-text,.stack,.band,.wipe,.hl,.flip,.swing,.slide-l,.slide-r,.line,.letter,.tape,.cz-notif,.cz-phone,.giant{animation:none !important}.layer:hover .plate{transform:none}.tilt:hover{transform:none}.draw,.draw-late{animation:none;stroke-dashoffset:0}.lift:hover{transform:none}}
/* Écart à la maquette : sur mobile, la bulle « Nouvelle réservation » sortait de l'écran à gauche (left:-6% en ligne + translateZ et perspective). */
@media (max-width:760px){.cz-notif{left:20% !important}}

/* Champ obligatoire encore vide dans infos.toml : visible en jaune en brouillon (outils/construire.py).
   N'apparaît jamais dans la version --final. */
mark.a-fournir{background:#FFEB3B;color:#0E2A2F;outline:2px dashed #C62828;padding:0 .25em;border-radius:3px;overflow-wrap:anywhere}