@font-face{font-family:"Jost";font-weight:300;font-display:swap;src:url(fonts/jost-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:400;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-display:swap;src:url(fonts/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:600;font-display:swap;src:url(fonts/jost-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Josefin Sans";font-weight:300;font-display:swap;src:url(fonts/josefin-sans-latin-300-normal.woff2) format("woff2")}

:root{
  --creme:#FFF8F1; --peche:#FAC0A7; --menthe:#98D2AC; --menthe-clair:#D6EEDE;
  --vert:#2E5E45; --vert-fonce:#1F3B2D; --texte:#1F2E26; --texte-2:#33423A;
  --brun:#6B3B26; --bordure:#F1DCCF; --champ:#C9B5A8;
  --pad:clamp(20px,6vw,120px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--creme);color:var(--texte);font-family:"Jost","Futura","Century Gothic",sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--vert)}a:hover{color:#1B3D2B}
:focus-visible{outline:3px solid var(--vert);outline-offset:3px;border-radius:6px}
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--vert);color:#fff;padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:8px}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 28px;border-radius:999px;font:500 17px/1.2 inherit;font-family:inherit;text-decoration:none;cursor:pointer;border:1.5px solid transparent}
.btn-plein{background:var(--vert);color:#fff}
.btn-plein:hover{background:#244C37;color:#fff}
.btn-ligne{border-color:var(--texte);color:var(--texte);background:transparent}
.btn-ligne:hover{background:rgba(31,46,38,.06);color:var(--texte)}

/* En-tête */
.entete{position:sticky;top:0;z-index:50;background:var(--creme);border-bottom:1px solid var(--bordure)}
.entete .wrap{height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.entete .logo img{width:64px;height:64px}
.nav{display:flex;align-items:center;gap:36px;font-weight:500;font-size:16px}
.nav a{text-decoration:none;color:var(--texte)}
.nav a.btn{color:#fff;min-height:44px;padding:10px 22px;font-size:16px}
.menu-btn{display:none;background:none;border:0;width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer;color:var(--texte)}
@media (max-width:860px){
  .menu-btn{display:inline-flex}
  .nav{display:none;position:absolute;top:88px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--creme);border-bottom:1px solid var(--bordure);padding:8px var(--pad) 20px}
  .nav.ouvert{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--bordure)}
  .nav a.btn{margin-top:14px;border-bottom:0}
}

/* Hero */
.hero{background:var(--peche)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:64px;align-items:center;padding-block:96px}
.surtitre{margin:0;font-size:15px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--brun)}
.hero h1{margin:24px 0;font-weight:300;font-size:clamp(38px,5vw,66px);line-height:1.1}
.hero h1 span{font-weight:500}
.hero p.intro{margin:0 0 32px;max-width:620px;font-size:clamp(18px,1.6vw,20px);color:#3A2A22}
.actions{display:flex;flex-wrap:wrap;gap:16px}
@media (max-width:1024px){
  .hero .wrap{grid-template-columns:1fr;padding-block:64px;gap:40px}
}

/* Titres de section */
.etiquette{font-family:"Josefin Sans","Jost",sans-serif;font-weight:300;font-size:22px;letter-spacing:.25em;text-transform:uppercase;color:var(--vert);margin:0 0 16px}
h2{margin:0;font-weight:500;font-size:clamp(30px,3.2vw,44px);line-height:1.2}

/* Présentation */
.presentation{padding-block:clamp(72px,9vw,120px)}
.presentation .grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px;align-items:start}
.presentation .texte p{margin:0 0 20px;font-size:19px;line-height:1.7;color:var(--texte-2)}
.presentation strong{font-weight:600;color:var(--texte)}
@media (max-width:860px){.presentation .grille{grid-template-columns:1fr;gap:28px}}

/* Méthode */
.methode{margin-top:clamp(56px,7vw,96px);background:var(--peche);border-radius:40px 40px 40px 0;padding:clamp(32px,5vw,64px)}
.methode .etiquette{color:var(--texte)}
.methode ol{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.methode li{display:flex;flex-direction:column;gap:12px}
.methode .num{font-weight:300;font-size:88px;line-height:1}
.methode .titre{font-weight:600;font-size:17px;letter-spacing:.08em;text-transform:uppercase}
.methode .desc{font-size:16px;color:#3A2A22}
@media (max-width:1024px){.methode ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.methode ol{grid-template-columns:1fr}.methode .num{font-size:64px}}

/* Expertises */
.expertises{background:var(--menthe);padding-block:clamp(72px,9vw,120px)}
.expertises .entete-section{text-align:center;margin-bottom:56px}
.expertises h2{font-family:"Josefin Sans","Jost",sans-serif;font-weight:300;letter-spacing:.12em;text-transform:uppercase;color:var(--texte);font-size:clamp(28px,3.4vw,48px)}
.expertises .entete-section p{margin:16px 0 0;font-size:19px}
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
@media (max-width:1100px){.cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.cartes{grid-template-columns:1fr}}
.carte{position:relative;display:flex;flex-direction:column;gap:20px;background:var(--menthe-clair);border-radius:28px 28px 28px 0;padding:36px}
.carte header{display:flex;align-items:center;gap:16px}
.carte .icone{width:52px;height:52px;flex-shrink:0;border-radius:999px;background:var(--peche);display:flex;align-items:center;justify-content:center}
.carte h3{margin:0;font-weight:500;font-size:21px;line-height:1.3;letter-spacing:.1em;text-transform:uppercase}
.carte ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.5;color:#2A3A31}
.carte .benefice{margin-top:auto;background:var(--peche);border-radius:16px;padding:18px 20px;font-weight:600;font-size:18px;text-align:center}
.carte .nouveau{position:absolute;top:-14px;right:28px;background:var(--vert);color:#fff;font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:999px}

/* Contact */
.contact{padding-block:clamp(72px,9vw,120px)}
.contact .grille{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start}
@media (max-width:1024px){.contact .grille{grid-template-columns:1fr}}
.contact .intro{margin:20px 0 28px;font-size:19px;line-height:1.7;color:var(--texte-2)}
.coordonnees{background:var(--peche);border-radius:28px 28px 28px 0;padding:36px;display:flex;flex-direction:column;gap:16px}
.coordonnees .nom{font-size:24px}
.coordonnees .nom span{font-weight:600}
.coordonnees a,.coordonnees div.ligne{display:flex;align-items:center;gap:12px;color:var(--texte);text-decoration:none;font-size:18px;overflow-wrap:anywhere}
.coordonnees a:hover{text-decoration:underline}
.coordonnees svg{flex-shrink:0}

.formulaire{background:#fff;border:1px solid var(--bordure);border-radius:32px;padding:clamp(24px,4vw,48px)}
.formulaire form{display:flex;flex-direction:column;gap:24px}
.champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:600px){.champs{grid-template-columns:1fr}}
.champ{display:flex;flex-direction:column;gap:8px}
.champ label,fieldset legend{font-size:15px;font-weight:500}
.champ input,.champ textarea{font:inherit;font-size:16px;color:var(--texte);background:#FFFCF9;border:1.5px solid var(--champ);border-radius:12px;padding:0 16px;height:52px}
.champ textarea{height:auto;min-height:150px;padding:14px 16px;line-height:1.5;resize:vertical}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(46,94,69,.25)}
fieldset{margin:0;padding:0;border:0}
fieldset legend{padding:0;margin-bottom:12px}
.puces{display:flex;flex-wrap:wrap;gap:10px}
.puce input{position:absolute;opacity:0;pointer-events:none}
.puce span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--champ);background:#FFFCF9;font-size:15px;cursor:pointer;user-select:none}
.puce input:checked+span{background:var(--vert);border-color:var(--vert);color:#fff}
.puce input:focus-visible+span{outline:3px solid var(--vert);outline-offset:3px}
.consentement{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:#4A564F}
.consentement input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--vert);flex-shrink:0}
.pied-form{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.pied-form small{font-size:14px;color:#5A665F}
.pied-form .btn{min-height:56px;padding:0 36px}
.pied-form .btn[disabled]{opacity:.6;cursor:wait}
.erreur{margin:0;padding:14px 18px;border-radius:12px;background:#FDECEC;color:#8A1F1F;font-size:15px}
.hp{display:none}
[hidden]{display:none!important}
.merci{min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}
.merci img{width:104px;height:104px}
.merci h3{margin:0;font-weight:500;font-size:clamp(24px,3vw,32px)}
.merci p{margin:0;max-width:420px;font-size:18px;color:var(--texte-2)}

/* Pied de page */
.pied{background:var(--vert-fonce);color:#E8F3EC}
.pied .wrap{padding-block:56px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px}
.pied .marque{display:flex;align-items:center;gap:20px}
.pied .marque img{width:80px;height:80px}
.pied .marque span{color:#C6DDCF}
.pied .legal{display:flex;flex-direction:column;gap:6px;font-size:15px;color:#C6DDCF;text-align:right}
.pied a{color:var(--peche)}
.pied a:hover{color:#fff}
@media (max-width:700px){.pied .legal{text-align:left}}

/* Pages légales */
.page-legale{padding-block:clamp(56px,7vw,96px)}
.page-legale .contenu{max-width:760px}
.page-legale h1{margin:0 0 32px;font-weight:500;font-size:clamp(32px,4vw,48px);line-height:1.15}
.page-legale h2{font-size:24px;margin:40px 0 12px}
.page-legale p,.page-legale li{color:var(--texte-2)}
.page-legale .retour{display:inline-block;margin-bottom:32px}
