/* ===================================================================
   ARTISAN BRANDING — refonte (maquette)
   Même langage que les sites livrés (exemple : Palis & Co) :
   photo plein cadre en cartes arrondies, grande typographie légère,
   boutons pastille, formulaire express en deux temps.
   Couleurs du logo : encre, jaune (actions), violet (relief), rouge (rare).
   Contrastes AA : encre/jaune 10,3:1 · violet/blanc 10,6:1 · gris/blanc 6,2:1
   =================================================================== */
:root{
  --encre:#14171C;
  --encre-2:#1F242C;
  --jaune:#FEB712;
  --jaune-fonce:#E5A300;
  --violet:#513263;
  --violet-clair:#B9A4C9;
  --rouge:#ED4A43;
  --sable:#F3F1ED;
  --sable-2:#ECE8E1;
  --page:#FFFFFF;
  --gris:#5A6170;
  --ligne:#E2DED6;

  --f-titre:'Urbanist',system-ui,sans-serif;
  --f-texte:'Manrope',system-ui,sans-serif;

  --r-xl:30px; --r-l:22px; --r-m:14px;
  --max:1320px;
  --marge:clamp(12px,1.6vw,22px);
  --gout:clamp(18px,4vw,56px);
  --pas:clamp(72px,10vw,140px);
  --t:220ms cubic-bezier(.2,.7,.2,1);
  --ombre:0 30px 60px -30px rgba(20,23,28,.5);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--encre);font:400 16.5px/1.65 var(--f-texte);-webkit-font-smoothing:antialiased;touch-action:manipulation}
h1,h2,h3,h4{font-family:var(--f-titre);font-weight:500;line-height:1.05;margin:0;letter-spacing:-.01em;text-wrap:balance}
p,figure,blockquote,dl,dd{margin:0}
:where(ul[class],ol[class],nav ul,.pied ul){list-style:none;padding:0;margin:0}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
a svg,button svg{flex-shrink:0}
:where(a,button,summary,input,select,textarea,label):focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.sur-photo :where(a,button,label):focus-visible,.sombre :where(a,button,summary,label):focus-visible{outline-color:var(--jaune)}
:where(input,select,textarea,summary,button){scroll-margin:120px 0 120px}
[id]{scroll-margin-top:100px}
.saut{position:absolute;left:-9999px;top:0}
.saut:focus{left:12px;top:12px;z-index:999;background:var(--encre);color:#fff;padding:12px 18px;border-radius:99px}
.env{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gout)}
.sec{padding-block:var(--pas)}

.etiquette{display:inline-flex;align-items:center;gap:10px;font:600 12.5px/1 var(--f-texte);letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.etiquette::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--jaune)}
.sombre .etiquette,.sur-photo .etiquette{color:rgba(255,255,255,.78)}
.h2{font-size:clamp(32px,4vw,56px);font-weight:400;letter-spacing:-.02em}
.h2 em,.capitales em{font-style:normal;color:var(--violet)}
.sombre .h2 em,.sur-photo .h2 em{color:var(--jaune)}
.chapo{font-size:17.5px;color:var(--gris);max-width:58ch}
.sombre .chapo{color:rgba(255,255,255,.76)}
.tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px;margin-bottom:clamp(32px,4vw,52px)}
.tete .h2{margin-top:16px}

/* ---------- boutons pastille ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 14px 12px 26px;border-radius:99px;border:1.5px solid transparent;font:700 15.5px/1.1 var(--f-texte);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--t),color var(--t),border-color var(--t),transform var(--t)}
.btn:active{transform:scale(.98)}
.btn__rond{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--encre);color:#fff;transition:transform var(--t)}
.btn__rond svg{width:16px;height:16px}
.btn:hover .btn__rond{transform:translateX(3px)}
.btn--jaune{background:var(--jaune);color:var(--encre)}
.btn--jaune:hover{background:var(--jaune-fonce)}
.btn--encre{background:var(--encre);color:#fff}
.btn--encre .btn__rond{background:var(--jaune);color:var(--encre)}
.btn--encre:hover{background:var(--violet)}
.btn--contour{border-color:currentColor;background:transparent;padding-inline:24px}
.btn--contour:hover{background:var(--encre);color:#fff;border-color:var(--encre)}
.sur-photo .btn--contour,.sombre .btn--contour{color:#fff;border-color:rgba(255,255,255,.5)}
.sur-photo .btn--contour:hover,.sombre .btn--contour:hover{background:#fff;color:var(--encre);border-color:#fff}
.btn svg.ico{width:18px;height:18px}
.btn--plein{width:100%}
.lien{display:inline-flex;align-items:center;gap:10px;font-weight:700;text-decoration:none}
.lien span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid currentColor;transition:background-color var(--t),color var(--t)}
.lien svg{width:15px;height:15px}
.lien:hover span{background:var(--encre);color:#fff;border-color:var(--encre)}

/* ---------- navigation ---------- */
.nav-haut{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px clamp(20px,3vw,40px)}
.logo{display:block;flex:none;line-height:0}
.logo img{height:52px;width:auto}
.liens{display:none}
.liens ul{display:flex;gap:2px}
.liens a{display:block;padding:10px 14px;border-radius:99px;font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;transition:background-color var(--t)}
.liens a:hover{background:rgba(255,255,255,.14)}
.nav-haut__actions{display:flex;align-items:center;gap:10px}
.nav-haut__tel{display:none;align-items:center;gap:8px;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;padding:10px 4px}
.nav-haut__tel svg{width:17px;height:17px}
.nav-haut .btn{min-height:46px;padding:8px 8px 8px 20px;font-size:14.5px}
.nav-haut .btn__rond{width:30px;height:30px}
.nav-haut .btn--jaune{display:none}
.burger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;min-height:48px;padding:0 16px;border-radius:99px;border:1.5px solid rgba(255,255,255,.5);background:transparent;color:inherit;font:700 14.5px var(--f-texte);cursor:pointer}
.burger svg{width:20px;height:20px}
.sur-photo .nav-haut{color:#fff}
.nav-claire{color:var(--encre)}
.nav-claire .liens a:hover{background:var(--sable)}
.nav-claire .burger{border-color:var(--ligne)}
@media (min-width:640px){.nav-haut .btn--jaune{display:inline-flex}}
@media (min-width:1080px){.liens{display:block}}
@media (min-width:1280px){.nav-haut__tel{display:inline-flex}}
@media (max-width:420px){.nav-haut{padding:16px 14px 16px 18px;gap:12px}.logo img{height:38px}.burger{padding:0 14px}}

.flottante{position:fixed;top:10px;left:50%;z-index:60;width:min(calc(100% - 20px),var(--max));transform:translate(-50%,-140%);visibility:hidden;transition:transform 380ms cubic-bezier(.2,.7,.2,1),visibility 0s linear 380ms;background:rgba(255,255,255,.93);backdrop-filter:blur(14px) saturate(1.3);border:1px solid var(--ligne);border-radius:99px;box-shadow:0 12px 30px -18px rgba(20,23,28,.4)}
.flottante .nav-haut{padding:8px 8px 8px 22px}
.flottante .logo img{height:36px}
.defile .flottante{transform:translate(-50%,0);visibility:visible;transition:transform 380ms cubic-bezier(.2,.7,.2,1)}

/* menu latéral : panneau qui glisse depuis la droite, sur toutes les tailles d'écran */
.voile{position:fixed;inset:0;z-index:79;background:rgba(14,16,20,.55);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.voile.ouvert{opacity:1;visibility:visible;transition:opacity .35s ease}
.menu{position:fixed;top:var(--marge);right:var(--marge);bottom:var(--marge);z-index:80;width:min(440px,calc(100% - 2*var(--marge)));display:flex;flex-direction:column;padding:18px clamp(20px,2.6vw,32px) 24px;border-radius:var(--r-xl);background:var(--encre);color:#fff;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);transform:translateX(calc(100% + 40px));visibility:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s linear .45s}
.menu.ouvert{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.menu__haut{display:flex;justify-content:space-between;align-items:center;min-height:56px}
.menu__haut .burger{border-color:rgba(255,255,255,.3)}
.menu__titre{margin-top:26px;font:700 12px/1 var(--f-texte);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.menu ul{margin-top:10px}
.menu li a{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);text-decoration:none;font:400 clamp(21px,2vw,25px)/1.15 var(--f-titre);transition:color var(--t),padding var(--t)}
.menu li a span{flex:1}
.menu li a svg{width:20px;height:20px;color:var(--jaune);opacity:.6;transition:transform var(--t),opacity var(--t)}
.menu li a:hover{color:var(--jaune);padding-left:6px}
.menu li a:hover svg{opacity:1;transform:translateX(3px)}
.menu li a[aria-current="true"]{color:var(--jaune)}
.menu li a[aria-current="true"]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--jaune);flex:none}
.menu__exemple{display:flex;align-items:center;gap:10px;margin-top:18px;padding:14px 16px;border-radius:var(--r-m);background:rgba(255,255,255,.07);text-decoration:none;font-size:14.5px;font-weight:600}
.menu__exemple:hover{background:rgba(255,255,255,.12)}
.menu__exemple svg{width:18px;height:18px;color:var(--jaune);margin-left:auto}
.menu__bas{margin-top:auto;padding-top:24px;display:grid;gap:10px}
.menu__bas p{font-size:13.5px;color:rgba(255,255,255,.65)}

.barre{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;display:grid;grid-template-columns:1fr 1.35fr;gap:6px;padding:6px;border-radius:99px;background:rgba(20,23,28,.94);backdrop-filter:blur(12px);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.barre .btn{min-height:50px;padding:8px 14px;font-size:15px}
.barre .btn--contour{color:#fff;border-color:rgba(255,255,255,.35)}
body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
@media (min-width:900px){.barre{display:none}body{padding-bottom:0}}

/* ---------- héros ---------- */
.cadre{padding:var(--marge) var(--marge) 0}
.heros{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);min-height:min(94svh,920px);display:flex;flex-direction:column;color:#fff;background:var(--encre)}
.heros__photo{position:absolute;inset:0;z-index:-2}
.heros__photo img{width:100%;height:100%;object-fit:cover;object-position:72% 35%}
.heros::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,16,20,.6) 0%,rgba(14,16,20,0) 24%),linear-gradient(90deg,rgba(14,16,20,.86) 0%,rgba(14,16,20,.5) 52%,rgba(14,16,20,.18) 100%),linear-gradient(0deg,rgba(14,16,20,.7) 0%,rgba(14,16,20,0) 42%)}
.heros__corps{flex:1;display:grid;gap:36px;align-items:end;padding:clamp(28px,5vw,64px) clamp(20px,3vw,40px) calc(clamp(28px,4vw,48px) + clamp(40px,6vw,90px))}
.heros h1{margin:0;font:300 clamp(40px,6.4vw,98px)/.92 var(--f-titre);text-transform:uppercase;letter-spacing:-.035em}
.heros h1>span{display:block}
.heros h1 .jaune{color:var(--jaune)}
.heros__texte{max-width:46ch;margin-top:26px;font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:rgba(255,255,255,.86)}
.heros__texte strong{color:#fff}
.heros__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.rassure{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;padding:10px 18px;border-radius:99px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);font-size:14px;width:fit-content;max-width:100%}
.rassure li{display:flex;align-items:center;gap:7px}
.rassure svg{width:16px;height:16px;color:var(--jaune)}
@media (min-width:1080px){.heros__corps{grid-template-columns:minmax(0,1fr) 410px;gap:48px}}

/* ---------- formulaire express ---------- */
.express{position:relative;background:#fff;color:var(--encre);border-radius:var(--r-l);padding:24px;box-shadow:var(--ombre)}
.express__haut{display:flex;align-items:center;gap:14px}
.express__puce{width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--jaune);color:var(--encre)}
.express__puce svg{width:24px;height:24px}
.express h2,.express h3{font:500 24px/1.1 var(--f-titre)}
.express__intro{margin-top:4px;font-size:14px;color:var(--gris)}
.express fieldset{border:0;margin:20px 0 0;padding:0;min-width:0}
.express legend{padding:0;margin-bottom:10px;font-weight:700;font-size:14.5px}
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puce{position:relative}
.puce input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.puce span{display:inline-flex;align-items:baseline;gap:6px;min-height:42px;padding:10px 15px;border-radius:99px;border:1.5px solid var(--ligne);background:var(--sable);font-size:14.5px;font-weight:700;transition:background-color var(--t),border-color var(--t),color var(--t)}
.puce small{font-weight:500;font-size:13px;color:var(--gris)}
.puce:hover span{border-color:#C9C2B5}
.puce input:checked+span{background:var(--encre);border-color:var(--encre);color:#fff}
.puce input:checked+span small{color:var(--jaune)}
.puce input:focus-visible+span{outline:3px solid var(--violet);outline-offset:2px}
.express__suite{display:grid;gap:12px;margin-top:18px}
.express__suite[hidden]{display:none}
.express__suite.ouvre{animation:ouvre 320ms cubic-bezier(.2,.7,.2,1)}
@keyframes ouvre{from{opacity:0;transform:translateY(-6px)}}
.garantie{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.5;color:var(--gris)}
.garantie svg{width:16px;height:16px;color:var(--violet);margin-top:1px}
.garantie a{color:inherit}
.champ label{display:block;margin-bottom:6px;font-weight:700;font-size:14px}
.champ .fac{font-weight:500;color:var(--gris)}
.champ input,.champ select{width:100%;min-height:50px;padding:12px 16px;border:1.5px solid var(--ligne);border-radius:var(--r-m);background:#fff;color:var(--encre);font:400 16px/1.4 var(--f-texte);transition:border-color var(--t),box-shadow var(--t)}
.champ select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23513263' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;padding-right:42px}
.champ input:focus,.champ select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(81,50,99,.14)}
.champ [aria-invalid="true"]{border-color:#C0392B}
.champ__aide{display:block;margin-top:6px;font-size:13px;color:var(--gris)}
.err{margin-top:6px;font-size:13.5px;font-weight:700;color:#C0392B}
.err:empty{display:none}
.etat{padding:12px 14px;border-radius:var(--r-m);font-weight:700;font-size:14.5px}
.etat:empty{display:none}
.etat--ok{background:#E5EFE8;color:#2F6B43}
.etat--err{background:#FBE9E7;color:#C0392B}
.btn[aria-busy="true"]{opacity:.7;cursor:progress}

/* ---------- cartes métiers ---------- */
.metiers{position:relative;z-index:2;margin-top:clamp(-90px,-6vw,-40px);padding-inline:calc(var(--marge) + clamp(10px,2vw,28px))}
.metiers__grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:var(--max);margin-inline:auto}
.metier{position:relative;display:block;overflow:hidden;border-radius:var(--r-l);aspect-ratio:4/5;border:5px solid #fff;background:var(--encre);color:#fff;text-decoration:none;box-shadow:0 18px 40px -26px rgba(0,0,0,.5)}
.metier img{width:100%;height:100%;object-fit:cover;transition:transform 700ms cubic-bezier(.2,.7,.2,1)}
.metier::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,16,20,.8),rgba(14,16,20,0) 58%)}
.metier:hover img{transform:scale(1.05)}
.metier__txt{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.metier h3{font:500 clamp(19px,1.7vw,24px)/1.05 var(--f-titre)}
.metier h3 small{display:block;margin-top:4px;font:600 12px/1.2 var(--f-texte);letter-spacing:.08em;text-transform:uppercase;color:var(--jaune)}
.metier__fl{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--jaune);color:var(--encre);flex:none;transition:transform var(--t)}
.metier__fl svg{width:15px;height:15px}
.metier:hover .metier__fl{transform:rotate(-45deg)}
.metiers__liste{max-width:var(--max);margin:18px auto 0;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:14px;color:var(--gris)}
.metiers__liste li{padding:5px 12px;border-radius:99px;background:var(--sable);font-weight:600;color:var(--encre)}
.metiers__liste .titre{background:none;padding:5px 4px 5px 0;color:var(--gris);font-weight:500}
@media (min-width:860px){.metiers__grille{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.metier{aspect-ratio:5/4}}

/* ---------- constat ---------- */
.declaration{display:grid;gap:44px}
.capitales{font:400 clamp(26px,3.3vw,48px)/1.08 var(--f-titre);text-transform:uppercase;letter-spacing:-.02em}
.capitales span{display:block;margin-top:18px;font:400 clamp(19px,1.7vw,24px)/1.4 var(--f-titre);text-transform:none;letter-spacing:0;color:var(--gris)}
.chiffres{display:flex;flex-wrap:wrap;gap:30px 50px;margin-top:40px}
.chiffre strong{display:block;font:400 clamp(40px,4vw,56px)/1 var(--f-titre);letter-spacing:-.03em}
.chiffre span{display:block;margin-top:8px;font-size:14px;color:var(--gris);max-width:18ch}
.fourche{display:grid;gap:10px;margin-top:34px}
.issue{padding:20px 22px;border-radius:var(--r-l)}
.issue b{display:inline-block;margin-bottom:6px;padding:4px 10px;border-radius:99px;font:700 11.5px/1.2 var(--f-texte);letter-spacing:.08em;text-transform:uppercase}
.issue--oui{background:var(--encre);color:#fff}
.issue--oui b{background:var(--jaune);color:var(--encre)}
.issue--non{background:var(--sable);color:var(--gris)}
.issue--non b{background:#fff;color:var(--encre);border:1px dashed #B5AEA2}
@media (min-width:640px){.fourche{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.declaration{grid-template-columns:.8fr 1.6fr;gap:64px}.declaration__gauche{display:flex;flex-direction:column;justify-content:space-between}}

.lignes{display:grid;border-top:1px solid var(--ligne)}
.lignes li{display:grid;gap:4px 40px;padding:24px 0;border-bottom:1px solid var(--ligne)}
.lignes h3{font:500 clamp(21px,2vw,27px)/1.12 var(--f-titre)}
.lignes p{color:var(--gris);max-width:60ch}
@media (min-width:860px){.lignes li{grid-template-columns:minmax(220px,.8fr) 1.6fr;align-items:baseline}}
.lignes--2col{margin-top:52px}
@media (min-width:1000px){.lignes--2col{grid-template-columns:1fr 1fr;column-gap:48px;border-top:0}.lignes--2col li{grid-template-columns:1fr;border-top:1px solid var(--ligne);border-bottom:0}}

/* ---------- mosaïque ---------- */
.mosaique{display:grid;gap:10px}
.tuile{border-radius:var(--r-l);overflow:hidden;background:var(--sable);min-height:240px}
.tuile--photo img{width:100%;height:100%;object-fit:cover;min-height:240px}
.tuile--txt{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,3vw,34px)}
.tuile--txt .num{font:600 13px/1 var(--f-texte);letter-spacing:.14em;color:var(--violet)}
.tuile--txt h3{font:500 clamp(23px,2vw,30px)/1.08 var(--f-titre)}
.tuile--txt p{color:var(--gris);font-size:15.5px}
.tuile--sombre{background:var(--encre);color:#fff}
.tuile--sombre p{color:rgba(255,255,255,.74)}
.tuile--sombre .num{color:var(--jaune)}
.tuile--violet{background:var(--violet);color:#fff}
.tuile--violet p{color:rgba(255,255,255,.8)}
.tuile--violet .num{color:var(--jaune)}
@media (min-width:760px){.mosaique{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.mosaique{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:300px}.tuile,.tuile--photo img{min-height:0}.tuile--grande{grid-column:span 2;grid-row:span 2}}

/* ---------- exemple ---------- */
.exemple{display:grid;gap:40px;padding:clamp(28px,4.5vw,64px);border-radius:var(--r-xl);background:var(--encre);color:#fff;overflow:hidden}
.exemple .chapo{margin-top:18px}
.exemple ul{display:grid;gap:12px;margin-top:26px}
.exemple li{display:flex;gap:12px;color:rgba(255,255,255,.8);font-size:15.5px}
.exemple li svg{width:18px;height:18px;color:var(--jaune);margin-top:4px}
.exemple li b{color:#fff}
.navigateur{display:block;border-radius:16px;overflow:hidden;background:#2A2F38;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);text-decoration:none;transition:transform var(--t)}
.navigateur:hover{transform:translateY(-4px)}
.navigateur__barre{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#2A2F38}
.navigateur__barre i{width:11px;height:11px;border-radius:50%;display:block}
.navigateur__url{margin-left:12px;flex:1;padding:5px 14px;border-radius:99px;background:#1B1F26;color:rgba(255,255,255,.72);font-size:12.5px}
.navigateur img{width:100%;height:auto}
@media (min-width:1000px){.exemple{grid-template-columns:.85fr 1.15fr;align-items:center;gap:56px}}

/* ---------- formules ---------- */
.fond-sable{background:var(--sable);border-radius:var(--r-xl);margin-inline:var(--marge)}
.formules{display:grid;gap:12px}
.formule{display:flex;flex-direction:column;gap:20px;padding:clamp(24px,2.6vw,34px);border-radius:var(--r-l);background:#fff;border:1px solid var(--ligne)}
.formule__badge{align-self:flex-start;padding:6px 12px;border-radius:99px;background:var(--jaune);color:var(--encre);font:700 12px/1 var(--f-texte);letter-spacing:.06em;text-transform:uppercase}
.formule h3{font:500 28px/1.05 var(--f-titre)}
.formule__accroche{margin-top:8px;color:var(--gris);font-size:15.5px}
.formule__prix{display:grid;gap:4px;padding-block:18px;border-block:1px solid var(--ligne)}
.formule__montant{font:300 clamp(48px,4.4vw,64px)/1 var(--f-titre);letter-spacing:-.03em}
.formule__prefixe{font:700 12.5px/1 var(--f-texte);letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
.formule__suffixe{font-size:14px;color:var(--gris)}
.formule__socle{font-size:14.5px;color:var(--gris)}
.formule ul,.exemple ul{list-style:none;padding:0;margin:0}
.formule ul{display:grid;gap:9px}
.formule li{display:flex;gap:10px;font-size:15px}
.formule li svg{width:17px;height:17px;color:var(--violet);margin-top:4px}
.formule .btn{margin-top:auto}
.formule--phare{background:var(--violet);color:#fff;border-color:var(--violet);box-shadow:var(--ombre)}
.formule--phare .formule__accroche,.formule--phare .formule__suffixe,.formule--phare .formule__socle{color:rgba(255,255,255,.78)}
.formule--phare .formule__prix{border-color:rgba(255,255,255,.18)}
.formule--phare .formule__prefixe{color:var(--jaune)}
.formule--phare li svg{color:var(--jaune)}
.formule--phare .formule__socle b{color:#fff}
@media (min-width:1000px){.formules{grid-template-columns:repeat(3,1fr);align-items:stretch}.formule--phare{transform:translateY(-12px)}}
.difference{display:grid;margin-top:44px;border-top:1px solid #D8D2C7}
.difference li{display:grid;gap:4px 24px;padding:18px 0;border-bottom:1px solid #D8D2C7;font-size:16px}
.difference b{font:500 22px/1.1 var(--f-titre)}
@media (min-width:760px){.difference li{grid-template-columns:200px 1fr;align-items:baseline}}
.conditions{display:grid;gap:10px;margin-top:30px}
.conditions li{display:flex;gap:10px;font-size:15px;color:var(--gris)}
.conditions svg{width:17px;height:17px;color:var(--violet);margin-top:4px}
@media (min-width:1000px){.conditions{grid-template-columns:repeat(3,1fr);gap:24px}}

/* ---------- déroulement ---------- */
.methode{display:grid;gap:40px}
.methode__photo{border-radius:var(--r-xl);overflow:hidden;min-height:380px}
.methode__photo img{width:100%;height:100%;object-fit:cover;object-position:center 75%}
.etapes{counter-reset:e;display:grid;margin-top:30px;border-top:1px solid var(--ligne)}
.etape{display:grid;grid-template-columns:56px 1fr;gap:6px 18px;padding:22px 0;border-bottom:1px solid var(--ligne)}
.etape::before{counter-increment:e;content:counter(e);grid-row:span 3;width:44px;height:44px;border-radius:50%;background:var(--jaune);display:grid;place-items:center;font:600 17px var(--f-titre)}
.etape h3{font:500 22px/1.15 var(--f-titre)}
.etape p{color:var(--gris);font-size:15.5px}
.etape__delai{font:700 12px/1 var(--f-texte);letter-spacing:.12em;text-transform:uppercase;color:var(--violet);margin-top:4px}
.planning{margin-top:30px;padding:18px;border-radius:var(--r-l);background:var(--sable);font-size:13px}
.planning__grille{display:grid;grid-template-columns:52px repeat(7,1fr);gap:6px;align-items:center}
.planning__jour{text-align:center;font-weight:700;color:var(--gris)}
.planning__piste{font-weight:700}
.planning__barre{padding:7px 8px;border-radius:99px;font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.planning__barre--vous{background:var(--jaune);color:var(--encre)}
.planning__barre--nous{background:var(--encre);color:#fff}
.planning__barre--jalon{background:var(--violet);color:#fff;text-align:center;padding-inline:4px;text-overflow:clip}
.planning figcaption{margin-top:12px;color:var(--gris)}
@media (min-width:1000px){.methode{grid-template-columns:1fr 1fr;gap:72px;align-items:stretch}}

/* ---------- zone ---------- */
.paysage{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);min-height:clamp(520px,54vw,680px);display:flex;align-items:flex-end;color:#fff}
.paysage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.paysage::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(14,16,20,.92) 0%,rgba(14,16,20,.62) 48%,rgba(14,16,20,.08) 88%)}
.paysage__txt{padding:clamp(24px,4vw,52px);display:grid;gap:18px;width:100%}
.paysage__txt .h2{max-width:18ch}
.paysage__txt .chapo{color:rgba(255,255,255,.82)}
.puces-zone{display:flex;flex-wrap:wrap;gap:6px}
.puces-zone li{padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);font-size:13.5px}
.puces-zone li.principal{background:var(--jaune);border-color:var(--jaune);color:var(--encre);font-weight:700}
.zone__bas{display:grid;gap:26px;margin-top:26px;padding-inline:clamp(4px,1vw,12px)}
.zone__bas h3{font:500 22px/1.1 var(--f-titre);margin-bottom:12px}
.zone__bas p{color:var(--gris);font-size:15.5px;max-width:48ch}
.puces-claires{display:flex;flex-wrap:wrap;gap:6px}
.puces-claires li{padding:6px 12px;border-radius:99px;background:var(--sable);font-size:14px;font-weight:600}
@media (min-width:900px){.zone__bas{grid-template-columns:1.4fr 1fr;gap:56px}}

/* ---------- engagements & FAQ ---------- */
.deux-col{display:grid;gap:36px}
@media (min-width:1000px){.deux-col{grid-template-columns:.8fr 1.6fr;gap:64px}}
.deux-col .chapo{margin-top:18px}
.faq{display:grid;border-top:1px solid var(--ligne)}
.faq details{border-bottom:1px solid var(--ligne)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:72px;padding:18px 0;cursor:pointer;list-style:none;font:500 clamp(18px,1.6vw,21px)/1.25 var(--f-titre)}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ligne);display:grid;place-items:center;transition:transform var(--t),background-color var(--t)}
.faq summary span svg{width:15px;height:15px}
.faq details[open] summary span{transform:rotate(45deg);background:var(--jaune);border-color:var(--jaune)}
.faq details>div{padding:0 56px 22px 0;color:var(--gris)}
.faq details>div p+p{margin-top:10px}

/* ---------- contact ---------- */
.contact{display:grid;gap:40px;padding:clamp(28px,4.5vw,64px);border-radius:var(--r-xl);background:var(--encre);color:#fff;position:relative;isolation:isolate;overflow:hidden}
.contact__photo{position:absolute;inset:0;z-index:-2;opacity:.28}
.contact__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3)}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,23,28,.96) 30%,rgba(20,23,28,.7))}
.contact .chapo{margin-top:18px}
.contact__tel{display:inline-flex;align-items:center;gap:14px;margin-top:30px;font:300 clamp(36px,4.4vw,62px)/1 var(--f-titre);letter-spacing:-.02em;text-decoration:none;color:#fff;white-space:nowrap}
.contact__tel svg{width:.6em;height:.6em;color:var(--jaune)}
.contact__tel:hover{color:var(--jaune)}
.contact__mail{display:inline-block;margin-top:14px;color:rgba(255,255,255,.8);font-weight:600;text-underline-offset:4px}
.contact__infos{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:14.5px;color:rgba(255,255,255,.7)}
.contact .express{box-shadow:none}
.contact__champs{display:grid;gap:14px;margin-top:18px}
@media (min-width:640px){.contact__champs{grid-template-columns:1fr 1fr}}
.remerciement{background:#fff;color:var(--encre);border-radius:var(--r-l);padding:clamp(24px,3vw,36px)}
.remerciement[hidden]{display:none}
.remerciement__coche{width:56px;height:56px;border-radius:50%;background:var(--jaune);display:grid;place-items:center;margin-bottom:18px}
.remerciement__coche svg{width:26px;height:26px}
.remerciement h3{font:500 28px/1.1 var(--f-titre);margin-bottom:12px}
.remerciement p{color:var(--gris);margin-top:10px}
.remerciement a{color:var(--violet);font-weight:700}
@media (min-width:1000px){.contact{grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}}

/* ---------- pied ---------- */
.pied{margin:var(--pas) var(--marge) var(--marge);border-radius:var(--r-xl);background:var(--encre);color:rgba(255,255,255,.72);padding:clamp(40px,6vw,80px) 0 28px;font-size:15px}
.pied__haut{display:grid;gap:30px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
.pied__accroche{font:300 clamp(34px,4.4vw,64px)/.98 var(--f-titre);text-transform:uppercase;letter-spacing:-.03em;color:#fff}
.pied__accroche em{font-style:normal;color:var(--jaune);white-space:nowrap}
.pied__cta{display:flex;flex-wrap:wrap;gap:10px}
.pied__grille{display:grid;gap:32px;padding-top:44px}
.pied h2{font:700 12.5px/1 var(--f-texte);letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.pied ul a{display:inline-block;padding-block:5px;text-decoration:none}
.pied ul a:hover{color:#fff}
.pied address{font-style:normal;display:grid;gap:6px;margin-top:18px}
.pied address a{color:#fff;font-weight:700;text-decoration:none}
.pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:48px;font-size:13.5px;color:rgba(255,255,255,.55)}
@media (min-width:640px){.pied__grille{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.pied__haut{grid-template-columns:1.4fr auto;align-items:end}.pied__grille{grid-template-columns:1.3fr 1fr 1fr 1fr 1fr}}

/* ---------- apparitions ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .apparait{opacity:0;transform:translateY(22px);transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .apparait.vu{opacity:1;transform:none}
  .heros__photo img{animation:zoom 2.4s cubic-bezier(.2,.7,.2,1) backwards}
  @keyframes zoom{from{transform:scale(1.08)}}
  .heros h1>span{animation:monte .9s cubic-bezier(.2,.7,.2,1) backwards}
  .heros h1>span:nth-child(2){animation-delay:.07s}
  .heros h1>span:nth-child(3){animation-delay:.14s}
  .heros h1>span:nth-child(4){animation-delay:.21s}
  @keyframes monte{from{opacity:0;transform:translateY(.25em)}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}

/* =================== PAGES DÉDIÉES =================== */
.heros--page{min-height:min(80svh,760px)}
.heros--page .heros__corps{padding-bottom:clamp(28px,4vw,48px)}
.heros--page h1{font-size:clamp(38px,5.6vw,86px)}
.fil{margin-bottom:22px;font-size:14px;color:rgba(255,255,255,.78)}
.fil ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.fil li{display:flex;align-items:center;gap:6px}
.fil li+li::before{content:"/";opacity:.6}
.fil a{text-underline-offset:3px;padding-block:4px;display:inline-block}
.liens a[aria-current="page"]{background:rgba(255,255,255,.16)}
.nav-claire .liens a[aria-current="page"]{background:var(--sable)}
.menu li a[aria-current="page"]{color:var(--jaune)}
.menu li a[aria-current="page"]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--jaune);flex:none}

.texte p{color:var(--gris);max-width:62ch}
.texte p+p{margin-top:14px}
.texte a,.lignes a,.etape a,.faq a,.note a{color:var(--violet);font-weight:600;text-underline-offset:3px}
.texte h3{font:500 24px/1.15 var(--f-titre);margin:34px 0 10px}
.texte h3:first-child{margin-top:0}
.texte .lignes{margin-top:8px}
.note{margin-top:22px;padding:16px 18px;border-radius:var(--r-m);background:var(--sable);color:var(--gris);font-size:14.5px}
.deux-col--centre{align-items:center}

.checks{display:grid;gap:12px;list-style:none;padding:0;margin:0}
.checks li{display:flex;gap:12px;padding:14px 18px;border-radius:var(--r-m);background:var(--sable);font-weight:600;font-size:15.5px}
.checks svg{width:18px;height:18px;color:var(--violet);margin-top:3px;flex:none}
@media (min-width:760px){.checks{grid-template-columns:1fr 1fr}}

.bande-prix{display:grid;gap:30px;padding:clamp(28px,4.5vw,60px);border-radius:var(--r-xl);background:var(--violet);color:#fff}
.bande-prix .etiquette{color:rgba(255,255,255,.8)}
.bande-prix__montant{margin-top:14px;font:300 clamp(64px,8vw,120px)/.9 var(--f-titre);letter-spacing:-.04em}
.bande-prix__montant small{display:block;margin-bottom:10px;font:700 13px/1 var(--f-texte);letter-spacing:.14em;text-transform:uppercase;color:var(--jaune)}
.conditions--sombre{grid-template-columns:1fr!important;margin-top:0}
.conditions--sombre li{color:rgba(255,255,255,.88);font-size:16px}
.conditions--sombre svg{color:var(--jaune)}
.bande-prix .heros__cta{margin-top:26px}
@media (min-width:1000px){.bande-prix{grid-template-columns:.8fr 1.2fr;align-items:center;gap:56px}}

.mini-formules{display:grid;gap:12px}
.mini-formule{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:var(--r-l);background:var(--sable);text-decoration:none;transition:transform var(--t),background-color var(--t)}
.mini-formule:hover{transform:translateY(-3px);background:var(--sable-2)}
.mini-formule__nom{font:500 24px/1.1 var(--f-titre)}
.mini-formule__prix{font:300 40px/1 var(--f-titre);letter-spacing:-.03em}
.mini-formule__txt{color:var(--gris);font-size:15px}
.mini-formule__lien{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;font-weight:700;font-size:14.5px;color:var(--violet)}
.mini-formule__lien svg{width:16px;height:16px}
.mini-formule--actuelle{background:var(--encre);color:#fff}
.mini-formule--actuelle:hover{background:var(--encre)}
.mini-formule--actuelle .mini-formule__txt{color:rgba(255,255,255,.72)}
.mini-formule--actuelle .mini-formule__lien{color:var(--jaune)}
@media (min-width:860px){.mini-formules{grid-template-columns:repeat(3,1fr)}}

.appel{display:grid;gap:30px;padding:clamp(28px,4.5vw,64px);border-radius:var(--r-xl);background:var(--encre);color:#fff}
.appel .chapo{margin-top:16px}
.appel .contact__tel{margin-top:0}
@media (min-width:1000px){.appel{grid-template-columns:1.1fr .9fr;align-items:center;gap:56px}}

.ecrans{display:grid;gap:14px}
.ecran figcaption{margin-top:10px;font:500 18px/1.2 var(--f-titre)}
@media (min-width:760px){.ecrans{grid-template-columns:1fr 1fr;gap:22px}}

.arbo{display:grid;gap:16px;padding:clamp(22px,3vw,34px);border-radius:var(--r-xl);background:var(--encre);color:#fff}
.arbo__racine,.arbo__noeud{padding:14px 16px;border-radius:var(--r-m);font:500 18px/1.15 var(--f-titre)}
.arbo__racine{background:var(--jaune);color:var(--encre);justify-self:center;text-align:center;min-width:60%}
.arbo small{display:block;margin-top:4px;font:600 12px/1.2 var(--f-texte);letter-spacing:.04em;opacity:.75}
.arbo__branches{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:18px}
.arbo__branches::before{content:"";position:absolute;top:0;left:25%;right:25%;height:18px;border:2px solid rgba(254,183,18,.6);border-bottom:0;border-radius:10px 10px 0 0}
.arbo__noeud{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.arbo figcaption{font-size:13.5px;color:rgba(255,255,255,.65)}

.fiche{display:grid;gap:0;margin-top:28px;border-top:1px solid var(--ligne)}
.fiche div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--ligne);font-size:15px}
.fiche dt{font-weight:700}
.fiche dd{color:var(--gris)}
.fiche a{color:var(--violet);font-weight:700}

.promesse{padding:clamp(28px,4.5vw,64px);border-radius:var(--r-xl);background:var(--sable)}
.promesse .chapo{margin-top:16px;max-width:70ch}

@media (min-width:1100px){.mosaique--3{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(300px,auto)}}
.mosaique--3 .tuile--txt{justify-content:flex-start}

.etapes--detail{margin-top:0}
.etapes--detail .etape::before{grid-row:span 3}

.infos-contact{display:grid;gap:14px;margin-top:28px;list-style:none;padding:0}
.infos-contact li{display:flex;gap:14px;color:rgba(255,255,255,.75);font-size:14.5px}
.infos-contact b{display:block;color:#fff;font-size:16px}
.infos-contact svg{width:22px;height:22px;color:var(--jaune);margin-top:2px;flex:none}
.sous-titre{font:500 21px/1.15 var(--f-titre);margin-bottom:12px}
.puces-claires--marseille li.principal{background:var(--jaune);font-weight:700}
.puces-claires--liens a{text-decoration:none}
.puces-claires--liens li:hover{background:var(--sable-2)}
.lien-detail{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-weight:700;font-size:14.5px;color:var(--violet);text-decoration:none;text-underline-offset:3px}
.lien-detail:hover{text-decoration:underline}
.lien-detail svg{width:16px;height:16px}
.formule--phare .lien-detail{color:var(--jaune)}
.formule .lien-detail+.btn{margin-top:0}
.menu__pages li a{font-size:clamp(17px,1.6vw,19px);padding:10px 0}