:root{--trame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M19 7v12H8' fill='none' stroke='%23FFCD5B' stroke-width='3'/%3E%3C/svg%3E");--police:"Nunito Sans","Avenir Next",Avenir,"Segoe UI",Helvetica,Arial,sans-serif;--jaune:#FFCD5B;--noir:#000;--blanc:#fff;--gris:#8a8a8a;--w:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
button{font-family:inherit}
body{margin:0;font-family:"Nunito Sans","Avenir Next",Avenir,"Segoe UI",Helvetica,Arial,sans-serif;color:var(--noir);background:var(--blanc);font-size:18px;line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--noir);outline-offset:3px}
.wrap{width:min(var(--w),100% - 48px);margin-inline:auto}
/* motif de coins */
.motif{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M19 7v12H8' fill='none' stroke='%23FFCD5B' stroke-width='3'/%3E%3C/svg%3E");background-size:36px 36px}
/* en-tête */
.entete{background:var(--jaune);clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),0 100%);padding:18px 0 40px;position:relative;z-index:5}
.entete .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{min-width:0}
.logo img{height:min(102px,9.5vw);width:auto}
.menu{display:flex;align-items:center;gap:clamp(20px,3.4vw,44px);list-style:none;margin:0;padding:0}
.menu a{color:var(--blanc);text-decoration:none;font-weight:700;font-size:19px;padding-bottom:2px;border-bottom:2px solid transparent}
.menu a:hover{border-color:var(--blanc)}
.menu a[aria-current="page"]{color:var(--noir);border-color:var(--noir)}
.menu svg{width:30px;height:30px;fill:var(--blanc);display:block}
.menu .insta:hover svg{fill:var(--noir)}
.burger{display:none;background:none;border:0;padding:6px;cursor:pointer}
.burger span{display:block;width:30px;height:4px;background:var(--noir);margin:6px 0}
/* étiquette de page */
.etiquette{display:flex;justify-content:flex-start;margin-top:-30px;position:relative;z-index:6}
.etiquette.gauche{justify-content:center}
.etiquette span{display:inline-flex;align-items:center;gap:14px;background:var(--jaune);font-weight:800;padding:14px 26px;transform:rotate(-1deg);font-size:18px}
.etiquette svg{width:26px;height:26px;stroke:var(--blanc);stroke-width:5;fill:none}
/* contenu */
main{flex:1;display:flex;flex-direction:column}
h1{font-size:clamp(30px,4.2vw,46px);line-height:1.15;margin:0 0 4px;font-weight:800}
h1 em{font-style:normal;color:var(--jaune)}
.sous-titre{font-size:clamp(20px,2.6vw,30px);font-weight:400;margin:0}
.accueil-intro{padding:36px 0 26px}
.cadre-video{padding:28px 0;margin-bottom:22px}
.lecteur{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.lecteur iframe,.lecteur video{position:absolute;inset:0;width:100%;height:100%;border:0}
.lecteur .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.35);border:0;cursor:pointer;width:100%}
.play svg{width:min(18vw,150px);fill:none;stroke:var(--jaune);stroke-width:9;stroke-linejoin:miter}
.play:hover svg{stroke:var(--blanc)}
.bientot{position:absolute;inset:auto 0 18px 0;text-align:center;color:var(--blanc);font-weight:700;text-shadow:0 1px 6px #000}
.btn{display:block;width:100%;background:var(--jaune);color:var(--noir);border:0;text-align:center;font:700 19px/1 var(--police);padding:17px 20px;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--noir);color:var(--jaune)}
.btn.large{max-width:620px;margin-inline:auto}
.espace{height:40px}
/* book */
.nav-cat{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 46px;padding:34px 0 8px;list-style:none;margin:0}
.nav-cat button{font:800 21px/1.2 var(--police);background:none;border:0;padding:4px 8px;cursor:pointer;color:var(--noir);border-bottom:3px solid rgba(255,205,92,.7)}
.nav-cat button:hover{border-color:var(--noir)}
.nav-cat button[aria-pressed="true"]{background:var(--jaune);border-color:var(--jaune);padding:4px 16px}
.nav-sous{position:relative;max-width:900px;margin:26px auto 8px;padding:22px 52px;text-align:center;display:none}
.nav-sous.actif{display:block}
.nav-sous::before,.nav-sous::after{content:"";position:absolute;width:26px;height:26px;border:5px solid var(--jaune)}
.nav-sous::before{left:0;top:0;border-right:0;border-bottom:0}
.nav-sous::after{right:0;bottom:0;border-left:0;border-top:0}
.nav-sous button{font:400 19px/1.4 var(--police);background:none;border:0;padding:2px 6px;cursor:pointer}
.nav-sous button:hover,.nav-sous button[aria-pressed="true"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;font-weight:700}
.nav-sous i{font-style:normal;margin:0 6px}
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:72px 0}
#book>.motif{margin-bottom:72px;margin-top:6px}
@media(max-width:900px){.galerie{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.galerie{grid-template-columns:1fr}}
.tuile{position:relative;aspect-ratio:16/9;overflow:hidden;border:0;padding:0;cursor:pointer;background:#fff;display:block;width:100%;text-align:left}
.tuile img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tuile:hover img{transform:scale(1.04)}
/* diaporama */
.visionneuse{padding:30px 0 44px;display:none}
.visionneuse.actif{display:block}
.scene{position:relative;aspect-ratio:16/9;background:#fff;overflow:hidden;touch-action:pan-y}
.scene img.vue{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.fleche{position:absolute;top:50%;transform:translateY(-50%);width:84px;height:130px;border:0;background:none;cursor:pointer;display:grid;place-items:center;z-index:3}
.fleche svg{width:56px;height:96px;fill:none;stroke:var(--blanc);stroke-width:14;stroke-linecap:butt;filter:drop-shadow(0 0 3px rgba(0,0,0,.35))}
.fleche.suiv svg{stroke:var(--jaune)}
.scene.video .fleche{width:44px;height:70px}.scene.video .fleche svg{width:26px;height:46px;stroke-width:12}
.fleche.prec{left:6px}.fleche.suiv{right:6px}
.fleche:hover svg{stroke:var(--noir)}
.compteur{text-align:center;font-weight:700;margin-top:12px}
.retour{margin:0 0 14px;background:none;border:0;font:700 17px var(--police);cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:4px}
/* qui suis-je */
.duo{display:grid;grid-template-columns:minmax(240px,400px) 1fr;gap:44px;align-items:center;padding:52px 0 70px}
.duo .photo{position:relative;isolation:isolate}
main{overflow-x:clip}
.duo .photo img{width:100%;height:auto}
.duo p{margin:0 0 20px;text-align:justify}
.duo p.accent{color:#FFCD5B;font-weight:700}
.duo .motif-fond{position:absolute;left:-60px;right:-9999px;bottom:-30px;height:150px;z-index:-1}
@media(max-width:800px){.duo{grid-template-columns:1fr;gap:24px;padding-bottom:60px}.duo .photo{max-width:400px}}
/* CV */
.cv-bloc{position:relative;display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:56px;align-items:center;padding:52px 0 70px}
.cv-bloc .cv-img{display:block}
.cv-bloc img{width:100%;height:auto;box-shadow:0 2px 14px rgba(0,0,0,.28);display:block}
.cv-sect,.contact-sect{position:relative;flex:1}
.cv-sect::before{content:"";position:absolute;left:0;width:57%;top:90px;bottom:0;background-image:var(--trame);background-size:36px 36px}
.contact-sect{overflow:hidden;isolation:isolate}
.zone-msg{position:relative}
.zone-msg textarea{margin-bottom:12px}
.zone-msg::before{content:"";position:absolute;z-index:-1;left:-100vw;right:-100vw;top:33.33%;height:3000px;background-image:var(--trame);background-size:36px 36px}
.cv-bloc .btn{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 20px;font-size:22px;max-width:440px}
.cv-bloc .btn svg{width:70px;height:70px;fill:none;stroke:var(--blanc);stroke-width:5}
.cv-bloc .btn:hover svg{stroke:var(--jaune)}
@media(max-width:960px){.cv-bloc{grid-template-columns:1fr;gap:28px;justify-items:center}.cv-bloc .cv-img{width:100%;max-width:520px}.cv-bloc .btn{width:100%;max-width:520px;margin-inline:auto}}
/* contact */
.formulaire{position:relative;max-width:700px;margin:0 auto;padding:60px 0 110px}
.zone-msg textarea{position:relative}
.formulaire label{display:block;font-size:18px;margin-top:4px}
.formulaire label small{color:var(--gris);font-size:inherit}
.formulaire input,.formulaire textarea{width:100%;border:3px solid var(--jaune);border-radius:2px;padding:10px 12px;font:inherit;background:#fff;margin:4px 0 12px;display:block}
.formulaire textarea{min-height:240px;resize:vertical}
.formulaire input:focus,.formulaire textarea:focus{outline:3px solid var(--noir);outline-offset:0}
.piege{position:absolute;left:-9999px}
.confirm{background:var(--jaune);padding:16px 20px;font-weight:700;margin-bottom:20px;display:none}
.confirm.actif{display:block}
/* tarifs */
.tarifs-sect{position:relative;flex:1}
.tarifs-sect::before{content:"";position:absolute;left:15%;right:2%;top:175px;bottom:0;background-image:var(--trame);background-size:36px 36px}
.tarifs{position:relative;display:grid;grid-template-columns:minmax(120px,300px) minmax(0,560px);gap:60px;align-items:center;justify-content:center;padding:60px 0 120px}
.euro{width:100%;max-width:280px;height:auto;margin-inline:auto}
.table-tarifs{list-style:none;margin:0 0 14px;padding:0;border-top:2px solid var(--noir)}
.table-tarifs li{display:flex;align-items:baseline;gap:6px;padding:11px 14px;border-bottom:2px solid var(--noir);font-size:17px}
.table-tarifs li{background:#fff}
.table-tarifs li:nth-child(odd){background:linear-gradient(90deg,rgba(255,205,92,.9),#fff 55%),#fff}
.table-tarifs{background:#fff}
.tarifs .btn{position:relative}
.table-tarifs .pts{flex:1;border-bottom:2px dotted var(--noir);transform:translateY(-4px);min-width:20px}
.table-tarifs b{font-weight:600;white-space:nowrap}
@media(max-width:800px){.tarifs{grid-template-columns:1fr;gap:26px}.euro{max-width:120px}}
/* pied de page */
.pied{background:var(--jaune);padding:26px 0;margin-top:auto}
.pied .wrap{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 70px;font-weight:700;font-size:17px}
.pied a{text-decoration:none}.pied a:hover,.pied a[aria-current="page"]{text-decoration:underline;color:var(--noir)}
.pied a[aria-current="page"]{color:var(--blanc)}
/* mobile */
@media(max-width:860px){
 .logo img{width:min(300px,calc(100vw - 120px));height:auto}
 .burger{display:block}
 .menu{position:absolute;left:0;right:0;top:100%;background:var(--jaune);flex-direction:column;align-items:flex-start;gap:0;padding:6px 24px 22px;display:none;clip-path:none}
 .menu.ouvert{display:flex}
 .menu li{width:100%}.menu a{display:inline-block;padding:12px 0;font-size:21px}
 .entete{clip-path:none}
 .entete::after{content:"";position:absolute;left:0;right:0;bottom:-17px;height:18px;background:var(--jaune);clip-path:polygon(0 0,100% 0,0 100%)}
 .etiquette{margin-top:-14px}
}
@media(max-width:860px){.fleche{width:36px;height:56px}.fleche svg{width:20px;height:36px;stroke-width:12}.scene.video .fleche{width:30px;height:48px}.scene.video .fleche svg{width:16px;height:30px}.fleche.prec{left:2px}.fleche.suiv{right:2px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


.btn-contact{display:inline-block;width:auto;padding:16px 48px;margin-top:4px}
.pile{display:grid;gap:12px}
.pile img{width:100%;height:auto;display:block;background:#fff}
@media(max-width:860px){
 body.menu-ouvert .etiquette{display:none}
 .etiquette span{font-size:15px;padding:9px 18px}
 .nav-cat{gap:6px 12px;padding:14px 0 2px}
 .nav-cat button{font-size:15px;padding:2px 6px;border-bottom-width:2px}
 .nav-cat button[aria-pressed="true"]{padding:2px 10px}
 .nav-sous{margin:12px auto 0;padding:10px 20px}
 .nav-sous::before,.nav-sous::after{width:14px;height:14px;border-width:3px}
 .nav-sous button{font-size:14px;line-height:1.3;padding:1px 3px}
 .nav-sous i{margin:0 1px}
 .galerie{padding:36px 0;gap:10px}
 #book>.motif{margin-bottom:36px}
 .visionneuse{padding:12px 0 30px}
 .retour{margin:0 0 8px;font-size:15px}
}
