/* ==========================================================================
   Synodos — feuille du site (pages /, /services, /mentions-legales, /confidentialite)

   Alignée sur la carte (/carte, /en) : même papier, même encre, même brun,
   mêmes fontes, même matière. Le site est la suite de la carte, pas un
   voisin. Les valeurs viennent des variables de la carte, à l'identique.

   Deux registres, comme sur la carte : le papier, et la nuit tiède de la
   fenêtre. Un seul bloc de nuit par page.
   ========================================================================== */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

:root{
  color-scheme:light;

  /* le papier de la carte, à l'identique */
  --papier:#f1efe9;
  --papier-2:#eae7df;
  --papier-3:#e2ded4;        /* filets */
  --grege:#cfc9bf;           /* puces, filets secondaires */

  /* l'encre de la carte */
  --encre:#575147;           /* texte — 6,8:1 */
  --encre-60:rgba(87,81,71,.62);
  --encre-40:rgba(87,81,71,.42);
  --gris:#6F6559;            /* texte secondaire — 5,0:1 */

  /* le brun de la carte */
  --brun:#a5876a;            /* filets, marques, point de la conjonction */
  --brun-fonce:#8d6f52;      /* bordures, survols */
  --brun-encre:#775E45;      /* liens et bouton — 5,3:1 */

  /* la nuit de la fenêtre : le registre sombre de la carte */
  --nuit:#1F1913;
  --nuit-2:#282019;
  --nuit-filet:#3D3227;
  --creme:#F3ECDE;
  --creme-60:rgba(243,236,222,.72);
  --or-pale:#D9B98C;         /* l'accent de la fenêtre — 9,3:1 sur la nuit */

  --lumiere:rgba(255,255,255,.92);
  --ease:cubic-bezier(.2,.8,.25,1);
  --mesure:64ch;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:1.0625rem;line-height:1.72;color:var(--encre);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
}
/* Pas d'overflow-x:hidden sur body : il en ferait le conteneur de défilement,
   ce qui neutralise window.scrollTo, scroll-margin-top et donc tous les liens
   d'ancre — à commencer par le CTA « Démarrer un projet » → /#projet. */

/* le papier RÉEL de la planche de charte — le même fichier que la carte */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 60%),
    radial-gradient(110% 90% at 50% 115%,rgba(151,142,126,.14) 0%,rgba(151,142,126,0) 55%),
    url('papier-v3.jpg') center/cover no-repeat,
    var(--papier);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .92 0 0 0 0 .89 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Trame ===================================================== */

.enveloppe{width:100%;max-width:1080px;margin-inline:auto;padding-inline:clamp(20px,5vw,48px);}
.mesure{max-width:var(--mesure);}
.section{padding-block:clamp(52px,8vw,96px);}
.section + .section{border-top:1px solid var(--papier-3);}

/* ===== Typographie =============================================== */

h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;line-height:1.08;color:var(--encre);}
h1{font-size:clamp(2.3rem,5.6vw,3.5rem);letter-spacing:-.005em;}
h2{font-size:clamp(1.7rem,3.4vw,2.35rem);}
h3{font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.2;}

p{max-width:var(--mesure);}
p + p{margin-top:1.05em;}

.chapo{font-size:1.1875rem;line-height:1.68;color:var(--encre);}
.secondaire{color:var(--gris);}
.petit{font-size:.9375rem;line-height:1.66;}

.etiquette{
  font-size:.6875rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--brun-encre);display:block;
}
.serif-italique{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;}

a{color:var(--brun-encre);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(119,94,69,.34);
  transition:text-decoration-color .18s var(--ease),color .18s var(--ease);}
a:hover{text-decoration-color:currentColor;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brun-fonce);outline-offset:3px;border-radius:2px;
}

ul{list-style:none;}

/* ===== La conjonction — deux chemins qui se rejoignent =============
   Le nom de la maison, en un signe. Ouverture de page, puis séparateur.
   ================================================================== */

.conjonction{display:block;width:180px;height:22px;overflow:visible;}
.conjonction path{fill:none;stroke:var(--grege);stroke-width:1.1;}
.conjonction circle{fill:var(--brun);}

@media (prefers-reduced-motion: no-preference){
  .conjonction--anime path{stroke-dasharray:120;stroke-dashoffset:120;animation:tracer 1.1s var(--ease) .15s forwards;}
  .conjonction--anime circle{transform:scale(0);transform-box:fill-box;transform-origin:center;
    animation:poser .4s var(--ease) 1.05s forwards;}
}
@keyframes tracer{to{stroke-dashoffset:0;}}
@keyframes poser{to{transform:scale(1);}}

/* ===== Le poinçon — une sorte de casse par métier ==================
   La tuile gaufrée de la carte, à l'identique, avec une lettre à la
   place du monogramme. Décorative : le vrai titre est en encre à côté.
   ================================================================== */

.poincon{
  width:60px;height:60px;flex:0 0 60px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:1.9rem;
  background:linear-gradient(160deg,#f6f4ef 0%,var(--papier) 55%,#ece9e1 100%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:10px 14px 24px -16px rgba(74,68,58,.52),2px 4px 7px -3px rgba(74,68,58,.24),
             inset 0 1px 0 rgba(255,255,255,.9);
  color:var(--papier);
  text-shadow:0 -1.5px 1px rgba(66,60,52,.44),0 1.8px 1px rgba(255,255,255,.95);
  user-select:none;
}

/* ===== En-tête ==================================================== */

.entete{
  position:sticky;top:0;z-index:20;
  background:rgba(241,239,233,.9);
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--papier-3);
}
.entete-rang{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:62px;flex-wrap:wrap;
}
.marque{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:1.02rem;
  letter-spacing:.28em;margin-right:-.28em;color:var(--encre);text-decoration:none;
}
.marque:hover{color:var(--brun-encre);}
.marque .s{
  width:15px;height:29px;background:currentColor;
  -webkit-mask:url('s-mono.svg') center/contain no-repeat;mask:url('s-mono.svg') center/contain no-repeat;
}
.entete nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);}
.entete nav a:not(.bouton){
  font-size:.9375rem;color:var(--encre);text-decoration:none;padding-block:6px;
  border-bottom:1px solid transparent;white-space:nowrap;
}
.entete .bouton{white-space:nowrap;}
.entete nav a:not(.bouton):hover,.entete nav a[aria-current]{border-bottom-color:var(--brun);}
.entete nav a[aria-current]{color:var(--brun-encre);}

@media (max-width:600px){
  .entete-rang{min-height:56px;padding-block:8px;}
  .entete nav{width:100%;order:3;gap:18px;padding-top:8px;border-top:1px solid var(--papier-3);}
  .entete nav .bouton{margin-left:auto;}
}

/* ===== Boutons ====================================================
   Le secondaire reprend le verre givré de la carte. Le principal est
   plein — un site a besoin d'une action qui se voit.
   ================================================================== */

.bouton{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 22px;min-height:52px;border-radius:18px;border:1px solid var(--brun-encre);
  background:var(--brun-encre);color:var(--papier);
  font-size:.875rem;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;
  font-family:inherit;
  box-shadow:0 14px 26px -18px rgba(74,58,40,.85),0 2px 4px rgba(74,68,58,.12);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.bouton:hover{background:#67503A;border-color:#67503A;
  box-shadow:0 18px 30px -18px rgba(74,58,40,.9);transform:translateY(-1px);}
.bouton:active{transform:translateY(0);}
.bouton svg{width:17px;height:17px;flex:0 0 17px;}

.bouton--fantome{
  color:var(--encre);border:1px solid rgba(255,255,255,.85);
  background:linear-gradient(165deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.1) 45%,rgba(233,229,220,.22) 100%);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);backdrop-filter:blur(20px) saturate(1.25);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -10px 20px -14px rgba(120,110,95,.35),
             0 16px 32px -20px rgba(74,68,58,.65),0 2px 4px rgba(74,68,58,.1);
}
.bouton--fantome:hover{background:linear-gradient(165deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.16) 45%,rgba(233,229,220,.3) 100%);
  color:var(--brun-encre);transform:translateY(-1px);}

.nuit .bouton{background:var(--or-pale);border-color:var(--or-pale);color:#241C13;
  box-shadow:0 14px 26px -18px rgba(0,0,0,.9);}
.nuit .bouton:hover{background:#E5C89E;border-color:#E5C89E;}
.nuit .bouton--fantome{background:rgba(243,236,222,.05);color:var(--creme);
  border-color:var(--nuit-filet);-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(217,185,140,.12);}
.nuit .bouton--fantome:hover{background:rgba(243,236,222,.1);border-color:var(--or-pale);color:var(--creme);}

.bouton[disabled],.bouton[disabled]:hover{
  background:var(--papier-2);border-color:var(--papier-3);color:var(--grege);
  cursor:not-allowed;box-shadow:none;transform:none;
}

/* ===== Bloc de nuit — un seul par page ============================
   La fenêtre de la carte, dépliée sur toute la largeur.
   ================================================================== */

.nuit{
  background:
    radial-gradient(120% 135% at 50% 15%,#2A2219 0%,#221B14 55%,var(--nuit) 100%);
  color:var(--creme);
  border-block:1px solid var(--nuit-filet);
  position:relative;
}
.nuit::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.45;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='.32'/%3E%3C/svg%3E");
}
.nuit > *{position:relative;z-index:1;}
.nuit h1,.nuit h2,.nuit h3{color:var(--creme);
  text-shadow:0 1px 6px rgba(15,11,7,.5);}
.nuit .etiquette{color:var(--or-pale);}
.nuit .secondaire{color:rgba(243,236,222,.72);}
.nuit p{text-shadow:0 1px 5px rgba(15,11,7,.4);}
.nuit a{color:var(--or-pale);text-decoration-color:rgba(217,185,140,.4);}
.nuit .conjonction path{stroke:var(--nuit-filet);}
.nuit .conjonction circle{fill:var(--or-pale);}
.nuit em,.nuit .serif-italique{color:var(--or-pale);}

/* ===== Hero ======================================================= */

.hero{padding-block:clamp(56px,10vw,116px) clamp(44px,7vw,84px);}
.hero h1{max-width:18ch;}
.hero .chapo{margin-top:22px;}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
.hero .conjonction{margin-bottom:26px;}
.hero + .section{padding-top:clamp(26px,4vw,48px);}

/* ===== Verticales — teasers (accueil) ============================= */

.grille-verticales{
  display:grid;gap:1px;background:var(--papier-3);border:1px solid var(--papier-3);
  border-radius:18px;overflow:hidden;margin-top:34px;
  /* quatre métiers : deux colonnes, deux rangs pleins — auto-fit laissait une case vide */
  grid-template-columns:1fr;
  box-shadow:0 18px 36px -26px rgba(74,68,58,.5);
}
@media (min-width:660px){ .grille-verticales{grid-template-columns:1fr 1fr;} }
.verticale{
  background:#F6F4EF;padding:26px 24px 22px;
  display:flex;flex-direction:column;gap:12px;
  text-decoration:none;color:inherit;transition:background .2s var(--ease);
}
.verticale:hover{background:#FBFAF7;}
.verticale h3{color:var(--encre);}
.verticale p{font-size:.9688rem;line-height:1.66;color:var(--gris);max-width:none;flex:1;}
.verticale .fleche{
  font-size:.8125rem;font-weight:500;color:var(--brun-encre);display:inline-flex;align-items:center;gap:7px;
}
.verticale:hover .fleche span{transform:translateX(3px);}
.verticale .fleche span{display:inline-block;transition:transform .2s var(--ease);}

/* ===== Sections de /services ====================================== */

.metier,[id]{scroll-margin-top:86px;}
/* sur mobile l'en-tête passe sur deux rangs : le saut d'ancre doit suivre */
@media (max-width:600px){ .metier,[id]{scroll-margin-top:124px;} }
.metier + .metier{margin-top:clamp(48px,7vw,84px);padding-top:clamp(48px,7vw,84px);border-top:1px solid var(--papier-3);}
.metier-tete{display:flex;gap:20px;align-items:flex-start;}
.metier-tete h2{margin-top:4px;}
.metier .chapo{margin-top:16px;}

.metier-corps{display:grid;gap:clamp(24px,4vw,44px);margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));}
.bloc-titre{
  font-size:.6875rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--brun-encre);
  padding-bottom:9px;margin-bottom:14px;border-bottom:1px solid var(--papier-3);
}
.liste-inclut li{
  position:relative;padding-left:19px;font-size:.9688rem;line-height:1.6;color:var(--encre);
}
.liste-inclut li + li{margin-top:9px;}
.liste-inclut li::before{
  content:'';position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--brun);
}
.differencie p:not(.bloc-titre){font-size:.9688rem;line-height:1.72;}

.preuve{
  margin-top:26px;padding:20px 22px;border-radius:16px;
  background:rgba(246,244,239,.66);
  border:1px solid rgba(255,255,255,.8);border-left:2px solid var(--brun);
  box-shadow:0 14px 28px -22px rgba(74,68,58,.5),inset 0 1px 0 rgba(255,255,255,.85);
}
.preuve .etiquette{margin-bottom:7px;}
.preuve p{font-size:.9688rem;line-height:1.68;max-width:none;}
.preuve a{font-weight:500;}

.ne-fait-pas{
  margin-top:18px;font-size:.9375rem;color:var(--gris);
  display:flex;gap:10px;align-items:baseline;
}
.ne-fait-pas::before{content:'—';color:var(--grege);flex:0 0 auto;}

/* ===== Preuve sociale ============================================= */

.clients{
  display:grid;gap:14px;margin-top:34px;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
}
.client{
  display:block;padding:20px 20px 18px;border-radius:16px;text-decoration:none;
  background:rgba(243,236,222,.05);border:1px solid var(--nuit-filet);color:var(--creme);
  transition:border-color .2s var(--ease),transform .2s var(--ease),background .2s var(--ease);
}
a.client:hover{border-color:var(--or-pale);background:rgba(243,236,222,.09);transform:translateY(-2px);}
/* .nuit a (0,1,1) l'emportait sur .client (0,1,0) : le nom vire à l'or par accident.
   On le pose explicitement — c'est joli, autant que ce soit voulu. */
a.client{text-decoration:none;}
.nuit a.client .nom{color:var(--or-pale);}
.client .nom{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3rem;font-weight:600;display:block;line-height:1.2;}
.client .quoi{font-size:.8438rem;line-height:1.55;color:rgba(243,236,222,.72);margin-top:6px;display:block;}
.client .voir{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--or-pale);
  margin-top:12px;display:inline-flex;align-items:center;gap:6px;}
.client--sans-lien{cursor:default;}

/* ===== Formulaire ================================================= */

.formulaire{max-width:560px;margin-top:30px;}
.champ{margin-bottom:15px;}
.champ label{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brun-fonce);margin-bottom:7px;}
.champ input,.champ select,.champ textarea{
  width:100%;font-family:inherit;font-size:1rem;color:var(--encre);
  background:rgba(255,255,255,.55);border:1px solid var(--papier-3);border-radius:12px;padding:11px 13px;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.champ textarea{resize:vertical;min-height:110px;line-height:1.6;}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--brun);background:rgba(255,255,255,.85);}
.champ select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236F6559' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
.pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

.consentement{
  display:flex;gap:11px;align-items:flex-start;margin:20px 0 18px;
  font-size:.875rem;line-height:1.6;color:var(--gris);
}
.consentement input[type=checkbox]{
  flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:var(--brun-encre);cursor:pointer;
}
.consentement label{cursor:pointer;}

.erreur{display:none;margin-top:14px;font-size:.875rem;color:#8F3A20;}
.merci{display:none;}
.merci .grand{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.75rem;font-weight:600;}
.merci p{margin-top:10px;color:var(--gris);}

/* ===== Pages légales ============================================== */

.legal{padding-block:clamp(44px,7vw,80px);}
.legal h1{margin-bottom:14px;}
.legal section{margin-top:clamp(32px,5vw,48px);}
.legal h2{font-size:clamp(1.35rem,2.6vw,1.7rem);padding-bottom:11px;border-bottom:1px solid var(--papier-3);margin-bottom:18px;}
.legal p,.legal li{font-size:1rem;line-height:1.75;}
.legal ul{margin-top:12px;max-width:var(--mesure);}
.legal ul li{position:relative;padding-left:19px;}
.legal ul li + li{margin-top:8px;}
.legal ul li::before{content:'';position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--grege);}
.legal .defs{margin-top:14px;max-width:var(--mesure);}
.legal .defs div{display:flex;flex-wrap:wrap;gap:4px 12px;padding:9px 0;border-bottom:1px solid var(--papier-3);}
.legal .defs dt{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);
  flex:0 0 220px;padding-top:3px;}
.legal .defs dd{flex:1 1 240px;font-size:1rem;}
.legal .acompleter{
  background:rgba(165,135,106,.18);color:var(--brun-encre);font-weight:500;
  padding:1px 5px;border-radius:5px;white-space:nowrap;font-size:.9375rem;letter-spacing:.01em;
}
@media (max-width:560px){ .legal .defs dt{flex:1 1 100%;} }

/* ===== Pied ======================================================= */

.pied{border-top:1px solid var(--papier-3);padding-block:clamp(40px,6vw,64px) 26px;}
.pied-cols{display:grid;gap:clamp(26px,4vw,44px);grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.pied .marque{font-size:.95rem;}
.pied .devise{margin-top:12px;font-size:.9375rem;color:var(--gris);}
.pied h2{font-size:.6875rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--brun-encre);font-family:'Inter',system-ui,sans-serif;margin-bottom:13px;}
.pied li + li{margin-top:9px;}
.pied li a{font-size:.9375rem;font-weight:500;color:var(--encre);text-decoration:none;
  border-bottom:1px solid transparent;}
.pied .coord a{font-size:.9375rem;font-weight:500;color:var(--brun-encre);text-decoration:none;
  border-bottom:1px solid transparent;}
.pied li a:hover,.pied .coord a:hover{border-bottom-color:var(--brun);color:var(--brun-encre);}
.pied-bas{
  margin-top:clamp(30px,4vw,44px);padding-top:20px;border-top:1px solid var(--papier-3);
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  font-size:.8125rem;color:var(--gris);
}
.pied-bas a{color:var(--gris);text-decoration:none;border-bottom:1px solid var(--papier-3);}
.pied-bas a:hover{color:var(--brun-encre);border-bottom-color:var(--brun);}
.pied-bas .sep{color:var(--grege);}

/* ===== Entrée en scène ============================================ */

@media (prefers-reduced-motion: no-preference){
  .monte{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
  .monte.vu{opacity:1;transform:none;}
}