/* Color Caramelo : une seule page, v6 (caramel brillant, motion doux) */
:root{--fond:#f6e4cf;--sable:#f6e4cf;--creme:#fff7ee;--chocolat:#2a160b;--texte-2:#6a4a33;--caramel:#c47630;--caramel-profond:#8a4517;--caramel-or:#e3a35f;--brillance:#ffd9a8;--caramel-brillant:linear-gradient(160deg,#f0b673 0%,#d68e45 48%,#c47630 100%);--bouton:#a85a22;--ease:cubic-bezier(.2,.7,.2,1);--titre:"Libre Caslon Display",Georgia,serif;--ital:"Libre Caslon Text",Georgia,serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--chocolat);font:400 17px/1.7 Figtree,system-ui,sans-serif}
img{display:block;max-width:100%;height:auto}
p{margin:0 0 1em}
a{color:var(--caramel-profond);transition:color .2s}
a:hover{color:var(--chocolat)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
em{font-family:var(--ital);font-style:italic}
h1,h2,h3{font-family:var(--titre);font-weight:400;margin:0}
h2{font-size:clamp(30px,3.4vw,46px);line-height:1.15;color:var(--caramel-profond);margin-bottom:32px}
/* sous-titres (Mon parcours, prestations, « Andréa – … ») : même caramel foncé que les titres de section (choix de Gary, 11/11) */
h3{font-size:24px;line-height:1.25;margin-bottom:8px;color:var(--caramel-profond)}
.intro-titre{color:var(--caramel-profond)}
.w{width:min(1100px,100% - 40px);margin-inline:auto}
.bloc{padding:64px 0}
:is(.presentation,.bloc)+.bloc{padding-top:24px}
.sable{background:var(--sable)}
.sable h2{color:var(--caramel-profond)}

/* Surfaces : un seul fond sable partout (choix d'Andréa : la couleur du bloc Prestations sur tout le site) */
.presentation,.fonce{position:relative;isolation:isolate;background:var(--fond);color:var(--chocolat)}
.presentation>.w,.fonce>.w{position:relative;z-index:1}

/* 1. Ouverture : le nom, puis le portrait en grand, bord à bord, sans coins arrondis (choix d'Andréa, 11/11) */
.ouverture{position:relative;z-index:1;width:calc(100% + 40px);aspect-ratio:4/5;margin:0 -20px 40px;overflow:hidden}
.ouverture img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}

/* 3. Navigation collante */
.nav{position:sticky;top:0;z-index:5;display:flex;justify-content:space-around;background:var(--fond);border-bottom:1px solid rgba(42,22,11,.12)}
.nav a{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:44px;padding:0 6px;font-size:14px;font-weight:500;text-decoration:none}
section[id]{scroll-margin-top:44px}

/* 2. Présentation */
.presentation{text-align:center;padding:32px 0 64px}
/* logo d'Andréa (envoyé le 12/11), détouré : fond transparent */
.logo{margin:0 0 18px}
.logo img{display:block;width:clamp(150px,14vw,190px);height:auto;margin:0 auto}
/* « transformée. » : italique de la police du titre (l'italique Libre Caslon Text paraissait en gras), couleur des titres de section */
h1 em{color:var(--caramel-profond);font-family:var(--titre);font-style:italic}
/* une seule ligne : la taille suit la largeur de l'écran (le texte fait ~27 fois sa taille de police) */
.metier{font-size:min(15px,calc((100vw - 48px) / 27));letter-spacing:.04em;white-space:nowrap;margin:0 0 10px}
.lieux{font:400 15px/1.3 var(--titre);letter-spacing:.1em;text-transform:uppercase;margin:0 0 28px}
/* même taille que les titres de section (h2) */
h1{font-size:clamp(30px,3.4vw,46px);line-height:1.15;margin-bottom:24px}
.intro{max-width:640px}
.presentation .intro{margin:0 auto 32px}
.intro p:last-child{margin-bottom:0}
.intro-titre{font:400 24px/1.3 var(--titre);margin-bottom:12px}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;min-height:48px;padding:0 32px;border-radius:100px;background:var(--bouton);color:#fff;font-weight:600;text-decoration:none;transition:background-color .25s}
.btn:hover{background:#8f4a1a;color:#fff}
.presentation .btn,.fonce .btn{background:var(--chocolat);color:var(--creme)}
.presentation .btn:hover,.fonce .btn:hover{background:#3d2112;color:var(--creme)}
.btn:focus-visible{outline-color:var(--chocolat)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);transform:translateX(-130%);pointer-events:none}

/* 4. Histoire */
.duo{display:grid;gap:24px;margin-bottom:48px}
.duo:last-child{margin-bottom:0}
.duo figure{margin:0}
.duo img{width:100%}
.duo p:last-child{margin-bottom:0}
.duo h3{margin-bottom:16px}

/* 5. Prestations */
.trois{display:grid;gap:40px}
.presta{border-top:2px solid var(--caramel);padding-top:20px}
.presta{display:flex;flex-direction:column}
.presta p{color:var(--chocolat);margin:0}
/* tarifs d'Andréa (11/11) : en bas de chaque carte, alignés sur une même ligne en grand écran */
.presta .prix{margin-top:auto;padding-top:14px;color:var(--caramel-profond);font-weight:500}
.nb{white-space:nowrap}
.signature{max-width:720px;margin:56px 0 0;font:400 24px/1.4 var(--titre)}

/* 6. Réalisations */
.galerie{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.vignette{display:block;width:100%;aspect-ratio:4/5;padding:0;border:0;background:#ecd5ba;cursor:zoom-in;overflow:hidden}
.vignette img{width:100%;height:100%;object-fit:cover;transition:filter .35s ease}
.insta{margin:32px 0 0}

/* 6 bis. Avis Google (demande d'Andréa, 11/11) : note dans l'ouverture + trois avis cités mot pour mot */
.etoiles{color:var(--caramel);letter-spacing:.1em;font-family:system-ui,sans-serif;white-space:nowrap}
.note-google{display:block;width:max-content;max-width:100%;margin:18px auto 0;font-size:15px;font-weight:500;color:var(--chocolat);text-decoration:none}
.note-google .etoiles{margin-right:4px}
.note-google:hover{color:var(--caramel-profond)}
.note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:-8px 0 40px}
.note-chiffre{font:400 56px/1 var(--titre);color:var(--chocolat)}
.note .etoiles{font-size:24px}
.note-total{font-weight:500}
.avis-liste{display:grid;gap:40px}
.avis-carte{display:flex;flex-direction:column;margin:0;border-top:2px solid var(--caramel);padding-top:20px}
.avis-carte blockquote{margin:12px 0 16px}
.avis-carte blockquote p{margin:0} /* même police que le texte du site (Figtree), demande de Gary 12/11 */
.avis-carte blockquote p+p{margin-top:.75em}
.avis-carte figcaption{margin-top:auto;font-size:15px;font-weight:500;color:var(--caramel-profond)}

/* 7. Contact */
.lignes{margin:40px 0}
.ligne{display:block;min-height:72px;padding:20px 0;border-top:1px solid rgba(42,22,11,.32);color:var(--chocolat);text-decoration:none}
.lignes>:last-child{border-bottom:1px solid rgba(42,22,11,.32)}
.ligne small{display:block;font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--chocolat)}
.ligne span{font:400 24px/1.3 var(--titre);overflow-wrap:anywhere}
.ligne p{margin:0}
.ligne p+p{margin-top:6px}
.horaires{margin:0}

/* 8. Pied de page */
.pied{background:var(--chocolat);color:var(--creme);padding:40px 0;font-size:15px}
.pied p{margin:0 0 8px}
.pied a{color:var(--brillance);margin-right:20px}
.pied a:hover{color:var(--creme)}

/* Visionneuse */
.visionneuse{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:56px 12px 12px;background:rgba(42,22,11,.94);color:var(--creme);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.visionneuse.open{opacity:1;visibility:visible}
.visionneuse figure{margin:0;text-align:center}
.visionneuse img{width:auto;max-height:calc(100svh - 230px);margin:0 auto}
.visionneuse figcaption{max-width:640px;margin:10px auto 0;font-size:14px;line-height:1.5;color:var(--brillance)}
.visionneuse button{width:48px;height:48px;padding:0;border:1px solid var(--caramel-or);border-radius:100px;background:none;color:var(--creme);font-size:30px;line-height:1;cursor:pointer;transition:color .2s,border-color .2s}
.visionneuse button:hover{color:var(--brillance)}
.fermer{position:absolute;top:12px;right:12px}
.fermer::before{content:"\00d7"}
.prec::before{content:"\2039"}
.suiv::before{content:"\203a"}
.fleches{display:flex;gap:24px}

/* Pages légales */
.entete{padding:18px 0;border-bottom:1px solid rgba(42,22,11,.12)}
.entete a{font:400 28px/1 var(--titre);color:var(--chocolat);text-decoration:none}
.entete em{color:var(--caramel-profond)}
.page{width:min(720px,100% - 40px);margin:0 auto;padding:48px 0 72px}
.page h1{font-size:clamp(34px,5vw,56px);margin-bottom:16px}
.page h2{margin:48px 0 16px}
.page .sur{margin:0 0 8px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-2)}
.page .chapo{color:var(--texte-2)}
.page article,.page dl>div{border-top:1px solid var(--caramel);padding:16px 0}
.page dl{margin:0}
.page dt{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-2)}
.page dd{margin:0}
.page .petit{font-size:14px;color:var(--texte-2)}


/* Reflet de lumière qui glisse sur le caramel (transform seulement) */
@supports (overflow:clip){
  .presentation,.fonce{overflow-x:clip}
}
@keyframes reflet{from{transform:translateX(-110%) skewX(-18deg)}to{transform:translateX(210%) skewX(-18deg)}}

/* Titre : les lignes (créées par script.js) montent derrière un masque */
.tl{display:block;clip-path:inset(-.12em -.1em)}
.tl-i{display:block}

@keyframes arrivee{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes monte{from{opacity:0;transform:translateY(24px)}}

/* Mouvement : seulement si l'utilisateur ne demande pas de le réduire ; sans JavaScript, tout est visible */
@media (prefers-reduced-motion:no-preference){
  .ouverture img{animation:arrivee 2.2s ease-out both}
  .tl-i{transform:translateY(125%)}
  .vu .tl-i{transform:none;transition:transform .9s var(--ease) calc(var(--i,0)*.12s)}
  html.js :is(main h2,.presta,.avis-carte,.ligne,.galerie li){opacity:0;transform:translateY(24px)}
  html.js :is(main h2,.presta,.avis-carte,.ligne,.galerie li).vu{opacity:1;transform:none;animation:monte .8s var(--ease) var(--d,0ms) backwards}
}
@media print{
  html.js :is(main h2,.presta,.avis-carte,.ligne,.galerie li){opacity:1!important;transform:none!important}
}

@media (hover:hover) and (pointer:fine){
  .btn:hover::after{transform:translateX(130%);transition:transform .8s var(--ease)}
  .vignette:hover img{filter:brightness(1.05)}
  a.ligne:hover span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
}

@media (min-width:900px){
  .bloc,.presentation{padding:96px 0}
  :is(.presentation,.bloc)+.bloc{padding-top:32px}
  /* grand écran : la photo occupe toute la moitié gauche, du menu jusqu'en bas */
  .presentation{padding:0}
  .presentation .w{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(40px,1fr) repeat(7,auto) minmax(40px,1fr);min-height:calc(100svh - 44px);text-align:left}
  .presentation .w>*{grid-column:2;margin-left:clamp(48px,6vw,96px);margin-right:40px;max-width:580px}
  .presentation .ouverture{grid-column:1;grid-row:1/-1;width:100%;max-width:none;min-height:560px;aspect-ratio:auto;margin:0}
  .presentation .ouverture img{position:absolute;inset:0;object-position:50% 22%}
  .presentation+.bloc{padding-top:96px}
  .presentation .logo{grid-row:2}
  .presentation .logo img{margin:0}
  .presentation .metier{grid-row:3}
  .presentation .lieux{grid-row:4;font-size:16px}
  .presentation h1{grid-row:5}
  .presentation .intro{grid-row:6;margin-top:0;margin-bottom:32px}
  .presentation .btn{grid-row:7;justify-self:start}
  .presentation .note-google{grid-row:8;justify-self:start}
  .avis-liste{grid-template-columns:repeat(3,1fr);gap:48px}
  .nav{justify-content:center}
  .nav a{flex:none;padding:0 28px;font-size:16px}
  .duo{grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:80px}
  .duo:nth-of-type(even) figure{order:2}
  .trois{grid-template-columns:repeat(2,1fr);gap:56px 48px}
  .galerie{grid-template-columns:repeat(4,1fr);gap:12px}
  .ligne{display:flex;align-items:baseline;gap:32px}
  .ligne small{flex:0 0 140px}
  .pied .w{display:flex;justify-content:space-between;gap:24px}
  .pied p{margin:0}
  .visionneuse img{max-height:calc(100svh - 190px)}
  .page dl>div{display:grid;grid-template-columns:160px 1fr;gap:24px}
}
/* 8 prestations : 4 colonnes sur grand écran (2 rangées pleines) */
@media (min-width:1100px){
  .trois{grid-template-columns:repeat(4,1fr);gap:56px 32px}
  .presta h3{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}