/* L’Ère du Chien — thème sur mesure (reprise fidèle du site de Marine Sanna, sans Divi).
   Couleurs du site d’origine ; sur les surfaces cuivre, le texte passe en brun foncé, et le vert est un peu plus soutenu,
   pour que tout se lise bien (contraste). Polices hébergées sur le site : Lato (texte), Roboto Flex (titres, boutons),
   Lobster (accents manuscrits). Aucune ressource externe, aucun JavaScript nécessaire. */

/* ---------- Polices ---------- */
@font-face { font-family: "Lato"; src: url(../polices/lato-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url(../polices/lato-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url(../polices/lato-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url(../polices/lato-700-italic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Flex"; src: url(../polices/roboto-flex.woff2) format("woff2"); font-weight: 300 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "Lobster"; src: url(../polices/lobster.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Couleurs et mesures ---------- */
:root {
  --creme: #faf4f1;
  --blanc: #fff;
  --texte: #444241;
  --titre: #444241;
  --sombre: #232220;
  --noir: #141312;
  --cuivre: #cf8d62;
  --cuivre-clair: #d79c64;
  --cuivre-texte: #a05f37;      /* cuivre lisible sur fond clair (petits textes) */
  --cuivre-titre: #b06a3f;      /* cuivre des grands sous-titres sur fond clair */
  --sur-cuivre: #2b211c;        /* texte posé sur le cuivre */
  --peche: #f3e2d4;
  --peche-fonce: #e5bf9b;
  --tilleul: #d2ea8e;
  --vert: #3f8526;
  --vert-logo: #4c9c2e;
  --brun: #5b4a45;
  --gris: #5f5d5b;
  --ligne: rgba(68, 66, 65, .14);
  --rayon: 16px;
  --ombre: 0 6px 24px rgba(35, 34, 32, .09);
  --hv: clamp(40px, 7.7vw, 150px); /* hauteur des bords courbes (comme sur le site d'origine : 7,7 % de la largeur) */
  --titres: "Roboto Flex", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --manuscrit: "Lobster", "Brush Script MT", cursive;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--blanc); color: var(--texte); font: 400 1.0625rem/1.65 "Lato", "Helvetica Neue", Arial, sans-serif; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
p, ul, ol, blockquote, figure { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
h1, h2, h3, h4 { font-family: var(--titres); color: var(--titre); line-height: 1.2; margin: 0 0 .5em; font-weight: 600; letter-spacing: .005em; }
strong { font-weight: 700; }
blockquote { border-left: 2px solid var(--cuivre); padding: .1em 0 .1em 1em; font-style: italic; }
blockquote p { margin: 0; }
:focus-visible { outline: 3px solid var(--vert-logo); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--sombre); color: #fff; padding: .6em 1em; border-radius: 8px; }
.evitement:focus { top: 1rem; }
.cadre { width: min(66rem, 100% - 2.5rem); margin-inline: auto; }
.etroit { width: min(46rem, 100% - 2.5rem); }

/* ---------- Boutons (choix du 29 octobre 2026 : « l'encre et la trace ») ----------
   Plein : une pilule ; au survol, une encre plus sombre la remplit de gauche à droite et, dans la bulle, la flèche
   cède la place à une empreinte de patte. Contour (gris) : un trait fin ; au survol, des empreintes trottent vers la
   flèche. Texte en minuscules, une seconde ligne facultative qui rassure (durée, lieu, prix). */
.btn { --bb: var(--cuivre); --bt: var(--sur-cuivre); --encre: #3b312f; --encre-t: #fff; --bulle: var(--sur-cuivre); --bulle-t: #fff; --bulle-survol: var(--cuivre); --bulle-survol-t: var(--sur-cuivre);
  position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: space-between; gap: .9em;
  min-height: 3.1rem; padding: .4rem .4rem .4rem 1.35rem; border-radius: 999px; background: var(--bb); color: var(--bt);
  text-decoration: none; text-align: left; font: 600 1rem/1.15 var(--titres); letter-spacing: .005em;
  box-shadow: 0 8px 20px rgba(35, 34, 32, .12); transition: color .35s ease, box-shadow .3s ease, transform .2s ease; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--encre); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.6, 0, .2, 1); }
.btn:hover { color: var(--encre-t); box-shadow: 0 12px 26px rgba(35, 34, 32, .2); }
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }
.btn-txt { display: flex; flex-direction: column; gap: .2em; }
.btn-txt small { font: italic 400 .85rem/1.15 "Lato", sans-serif; opacity: .85; }
.bulle { position: relative; flex: none; width: 2.35rem; height: 2.35rem; border-radius: 50%; overflow: hidden; background: var(--bulle); color: var(--bulle-t); transition: background .35s, color .35s; }
.bulle::before, .bulle::after { content: ""; position: absolute; inset: 0; margin: auto; background: currentColor; transition: transform .4s cubic-bezier(.6, 0, .2, 1); }
.bulle::before { width: 1.05rem; height: 1.05rem; -webkit-mask: url(../img/fleche.svg) center/contain no-repeat; mask: url(../img/fleche.svg) center/contain no-repeat; }
.bulle::after { width: 1.15rem; height: 1.15rem; -webkit-mask: url(../img/patte.svg) center/contain no-repeat; mask: url(../img/patte.svg) center/contain no-repeat; transform: translateX(-2.6rem) rotate(-14deg); }
.btn-appel .bulle::before { -webkit-mask-image: url(../img/tel.svg); mask-image: url(../img/tel.svg); }
.btn:hover .bulle { background: var(--bulle-survol); color: var(--bulle-survol-t); }
.btn:hover .bulle::before { transform: translateX(2.6rem); }
.btn:hover .bulle::after { transform: rotate(-14deg); }
.btn-cuivre { --bb: var(--cuivre); --bt: var(--sur-cuivre); }
.btn-vert { --bb: var(--vert); --bt: #fff; --bulle: #fff; --bulle-t: var(--vert); --encre: #2c5e1b; }
.btn-tilleul { --bb: var(--tilleul); --bt: var(--sur-cuivre); --encre: var(--creme); --encre-t: var(--sur-cuivre); --bulle-survol: var(--vert); --bulle-survol-t: #fff; }
.btn-clair { --bb: #fff; --bt: var(--sur-cuivre); --bulle: var(--cuivre); --bulle-t: var(--sur-cuivre); --bulle-survol: #fff; --bulle-survol-t: var(--sur-cuivre); }
.btn-brun { --bb: var(--brun); --bt: #fff; --bulle: var(--cuivre); --bulle-t: var(--sur-cuivre); --encre: var(--sombre); }
/* contour */
.btn-gris { --c: var(--contour, #3b312f); background: transparent; color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); padding: .4rem 1.35rem; min-height: 3.1rem; }
.btn-gris::before { background: var(--contour-fond, rgba(207, 141, 98, .14)); transform: none; opacity: 0; transition: opacity .3s; }
.btn-gris:hover { color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); }
.btn-gris:hover::before { transform: none; opacity: 1; }
.btn-fl { flex: none; width: 1.05rem; height: 1.05rem; background: currentColor; -webkit-mask: url(../img/fleche.svg) center/contain no-repeat; mask: url(../img/fleche.svg) center/contain no-repeat; transition: transform .3s; }
.btn-appel .btn-fl { -webkit-mask-image: url(../img/tel.svg); mask-image: url(../img/tel.svg); }
.btn-gris:hover .btn-fl { transform: translateX(4px); }
.pas { position: absolute; inset: 0; pointer-events: none; }
.pas i { position: absolute; bottom: 2px; width: 12px; height: 12px; opacity: 0; background: var(--patte, var(--cuivre-texte)); -webkit-mask: url(../img/patte.svg) center/contain no-repeat; mask: url(../img/patte.svg) center/contain no-repeat; transform: scale(.4) rotate(90deg); }
.pas i:nth-child(1) { left: 16%; } .pas i:nth-child(2) { left: 34%; bottom: 7px; } .pas i:nth-child(3) { left: 52%; } .pas i:nth-child(4) { left: 70%; bottom: 7px; }
@media (prefers-reduced-motion: no-preference) {
  .btn-gris:hover .pas i { animation: pas 1.4s ease-out both; }
  .btn-gris:hover .pas i:nth-child(2) { animation-delay: .18s; } .btn-gris:hover .pas i:nth-child(3) { animation-delay: .36s; } .btn-gris:hover .pas i:nth-child(4) { animation-delay: .54s; }
}
@keyframes pas { 0% { opacity: 0; transform: scale(.4) rotate(90deg); } 25% { opacity: .75; transform: scale(.8) rotate(90deg); } 75% { opacity: .5; } 100% { opacity: 0; transform: scale(.8) rotate(90deg); } }
/* sur les fonds sombres et colorés, le contour est blanc */
.bandeau, .f-sombre, .pied, .menu nav, .encart-cuivre, .annonce, .auteur-carte { --contour: #fff; --contour-fond: rgba(255, 255, 255, .1); --patte: var(--tilleul); }
.bandeau-peche { --contour: var(--sur-cuivre); --contour-fond: rgba(255, 255, 255, .35); --patte: var(--cuivre-texte); }
.boutons { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin: 1.6rem 0 0; }
.boutons-fin { justify-content: center; margin-top: 2.6rem; }
.ico-tel { width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: url(../img/tel.svg) center/contain no-repeat; mask: url(../img/tel.svg) center/contain no-repeat; flex: none; }
.ico-lettre { width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: url(../img/lettre.svg) center/contain no-repeat; mask: url(../img/lettre.svg) center/contain no-repeat; flex: none; }
/* lien discret, écrit à la main, souligné d'un trait qui se dessine */
.ecrit { position: relative; display: inline-block; font: 400 1.3rem/1.2 var(--manuscrit); color: var(--vert); text-decoration: none; padding-bottom: .45rem; }
.ecrit::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--cuivre); transform: scaleX(.25); transform-origin: left; transition: transform .5s ease; }
.ecrit:hover::after { transform: scaleX(1); }

/* ---------- Annonce, petite barre et en-tête ---------- */
.annonce { background: #3b312f; color: #fff; font: 500 .95rem/1.35 "Lato", sans-serif; }
.annonce p { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem .8rem; margin-block: 0; min-height: 2.6rem; padding-block: .45rem; text-align: center; }
.annonce a { color: var(--tilleul); font-weight: 700; text-underline-offset: 4px; }
.annonce-importante { background: var(--cuivre); color: var(--sur-cuivre); }
.annonce-importante a { color: var(--sur-cuivre); }
.annonce-patte { width: 1.1rem; height: 1.1rem; background: var(--tilleul); -webkit-mask: url(../img/patte.svg) center/contain no-repeat; mask: url(../img/patte.svg) center/contain no-repeat; transform: rotate(-14deg); }
.annonce-importante .annonce-patte { background: var(--sur-cuivre); }
.barre { background: var(--creme); font: 700 .8125rem/1 "Lato", sans-serif; letter-spacing: .03em; }
.barre .cadre { display: flex; justify-content: flex-end; align-items: center; gap: .4rem 1.4rem; min-height: 2.4rem; flex-wrap: wrap; padding-block: .3rem; }
.barre a { text-decoration: none; color: var(--texte); }
.barre a:hover, .barre a[aria-current] { color: var(--vert); }
.barre-tel { display: inline-flex; align-items: center; gap: .4em; }
.barre-contact { background: var(--brun); color: #fff !important; padding: .55em 1.3em; border-radius: 999px; text-transform: uppercase; letter-spacing: .08em; }
.barre-contact:hover { background: var(--sombre); }
.entete { background: rgba(255, 255, 255, .96); position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 0 var(--ligne); }
/* flou derrière le menu, seulement sur grand écran : sur téléphone, il enfermerait le panneau du menu (position fixe) */
@media (min-width: 62em) { @supports (backdrop-filter: blur(8px)) { .entete { background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); } } }
.entete .cadre { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; min-height: 5rem; }
.logo img { width: auto; height: 4rem; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; gap: .2rem; align-items: center; }
.nav > ul > li > a { display: inline-flex; align-items: center; gap: .35em; text-decoration: none; font: 500 1rem/1.2 var(--titres); letter-spacing: .02em; color: var(--texte); padding: .7rem .85rem; border-radius: 999px; transition: background .2s, color .2s; }
.nav > ul > li > a:hover { background: var(--creme); }
.nav a[aria-current], .nav a.dedans { color: var(--cuivre-texte); background: var(--creme); }
.fleche { width: .45em; height: .45em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-25%); }
.a-sous { position: static; }
/* panneau « Mes prestations » : quatre vignettes illustrées */
.nav .sous { position: absolute; left: 0; right: 0; top: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
  padding: 1.4rem 1.25rem 1.8rem; padding-inline: max(1.25rem, calc((100% - 66rem) / 2)); background: #fff; box-shadow: 0 24px 40px rgba(35, 34, 32, .12); border-top: 1px solid var(--ligne);
  visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; }
.a-sous:hover .sous, .a-sous:focus-within .sous { visibility: visible; opacity: 1; transform: none; }
.sous a { display: flex; flex-direction: column; gap: .5rem; padding: .7rem; border-radius: 18px; text-decoration: none; color: var(--texte); transition: background .2s; }
.sous a:hover, .sous a[aria-current] { background: var(--creme); }
.sous img { width: 100%; height: 7.5rem; object-fit: cover; object-position: 92% 40% !important; border-radius: 12px; }
.sous strong { font: 700 1.05rem/1.2 var(--titres); color: var(--sur-cuivre); }
.sous span { font-size: .9rem; color: var(--gris); }
.entete-actions { display: flex; align-items: center; gap: .7rem; }
.entete-actions .btn { min-height: 2.8rem; font-size: .95rem; padding-block: .3rem; }
.entete-actions .btn .bulle { width: 2.1rem; height: 2.1rem; }
.rond-tel { width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--creme); color: #3b312f; transition: background .2s; }
.rond-tel:hover { background: var(--peche); }
/* menu du téléphone : un grand panneau sombre */
.menu { display: none; }
.menu summary { position: relative; z-index: 2; list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .6em; padding: .7em 1.1em; border-radius: 999px; background: var(--creme); font: 700 .85rem/1 var(--titres); letter-spacing: .08em; text-transform: uppercase; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { position: fixed; top: .9rem; right: 1.25rem; background: rgba(255, 255, 255, .14); color: #fff; }
.burger { display: grid; gap: 3px; width: 18px; }
.burger i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.menu[open] .burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu[open] .burger i:nth-child(2) { opacity: 0; }
.menu[open] .burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.menu nav { position: fixed; inset: 0; z-index: 1; overflow-y: auto; background: var(--sur-cuivre); color: #fff; padding: 1.1rem 1.4rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.menu-logo { width: 6.5rem; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu-liens > li > a { display: block; padding: .3rem 0; text-decoration: none; font: 700 1.6rem/1.35 var(--titres); color: #fff; }
.menu-liens > li > a[aria-current] { color: var(--tilleul); }
.menu-groupe { display: block; margin: .9rem 0 .5rem; font: 700 .75rem/1 var(--titres); letter-spacing: .12em; text-transform: uppercase; color: var(--cuivre-clair); }
.menu-vignettes { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .6rem !important; }
.menu-vignettes a { display: flex; flex-direction: column; gap: .45rem; padding: .45rem; border-radius: 16px; background: rgba(255, 255, 255, .08); text-decoration: none; color: #fff; font: 600 .95rem/1.2 var(--titres); }
.menu-vignettes a[aria-current] { box-shadow: inset 0 0 0 2px var(--tilleul); }
.menu-vignettes img { width: 100%; height: 4.6rem; object-fit: cover; object-position: 92% 40% !important; border-radius: 10px; }
.menu-vignettes span { padding: 0 .25rem .2rem; }
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: auto 0 0; padding-top: 1rem; }
.menu-actions .btn { justify-content: center; white-space: nowrap; padding-left: 1rem; }
.menu-actions .btn-gris { justify-content: center; }
/* barre « Appeler / Écrire » en bas de l'écran du téléphone */
.barre-bas { display: none; }
@media (max-width: 61.99em) {
  .nav, .entete-actions { display: none; }
  .menu { display: block; }
  .barre .cadre > a:not(.barre-tel):not(.barre-contact) { display: none; }
  .barre .cadre { justify-content: space-between; }
  .logo img { height: 3rem; }
  .entete .cadre { min-height: 4.2rem; }
  .barre-bas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; position: fixed; left: .75rem; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); z-index: 25;
    padding: .45rem; border-radius: 20px; background: var(--sur-cuivre); box-shadow: 0 14px 30px rgba(35, 34, 32, .35); }
  .barre-bas a { display: flex; justify-content: center; align-items: center; gap: .5rem; min-height: 3.1rem; border-radius: 14px; text-decoration: none; font: 700 1rem/1 var(--titres); }
  .bb-appeler { background: var(--cuivre); color: var(--sur-cuivre); }
  .bb-ecrire { background: rgba(255, 255, 255, .1); color: #fff; }
  body { padding-bottom: 5.2rem; }
}

/* ---------- Sections et bords courbes ---------- */
.sec { position: relative; background: var(--fond, #fff); padding-block: clamp(3.5rem, 7vw, 6rem); }
.f-creme { --fond: var(--creme); }
.f-blanc { --fond: #fff; }
.f-peche { --fond: var(--peche-fonce); }
.f-sombre { --fond: var(--sombre); color: #ecebe9; }
.f-sombre h2, .f-sombre h3 { color: #fff; }
.vague { padding-top: clamp(2.8rem, 5.5vw, 4.6rem); }
.vague::before { content: ""; position: absolute; left: 0; right: 0; top: calc(1px - var(--hv)); height: var(--hv); background: var(--fond);
  -webkit-mask: url(../img/vague.svg) center / 100% 100% no-repeat; mask: url(../img/vague.svg) center / 100% 100% no-repeat; pointer-events: none; }
/* comme sur le site d'origine : les fonds crème montent vers la droite, les fonds blanc et sombre vers la gauche */
.f-sombre.vague::before, .f-blanc.vague::before { -webkit-mask-image: url(../img/vague-gauche.svg); mask-image: url(../img/vague-gauche.svg); }
.formulaire + .zone.vague::before { -webkit-mask-image: url(../img/vague.svg); mask-image: url(../img/vague.svg); }
.sec:has(+ .sec.vague) { padding-bottom: calc(clamp(3.5rem, 7vw, 6rem) + var(--hv) * .5); }
.sec + .sec:not(.vague) { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* Têtes de partie : titre en capitales, sous-titre cuivre (tilleul sur fond sombre), filet */
.tete { text-align: center; margin: 0 auto 2.6rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--ligne); }
.f-sombre .tete { border-color: rgba(255, 255, 255, .14); }
.tete h2 { font-size: clamp(1.45rem, 1.1rem + 1.3vw, 1.85rem); text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.sous-titre { font: 500 clamp(1.15rem, 1rem + .7vw, 1.4rem)/1.3 var(--titres); color: var(--cuivre-titre); margin: .35rem 0 0; }
.f-sombre .sous-titre { color: var(--tilleul); }
.sous-titre-gris { color: var(--gris); }
.tete-simple { border: 0; padding: 0; margin-bottom: 2.2rem; }
.tete-simple h2 { text-transform: none; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); }
.surtitre { font: 400 1.15rem/1.2 var(--manuscrit); color: var(--vert); margin: 0 0 .15rem; letter-spacing: .01em; }
.f-sombre .surtitre { color: var(--tilleul); }
.manuscrit { font: 400 1.5rem/1.2 var(--manuscrit); color: var(--cuivre-texte); text-transform: none; letter-spacing: .01em; margin: 1.2rem 0 .2rem; }
.intro { text-align: center; max-width: 52rem; margin: -1rem auto 2.4rem; }
.intro-droite { font-size: 1rem; }
.illustration { display: grid; justify-items: center; margin-bottom: 1.4rem; }
.illustration img { grid-area: 1 / 1; width: min(25rem, 75vw); }

/* Tête « photo » (Photographie) : une grande photo aux coins arrondis, le titre écrit dessus à gauche ; la photo est
   calée à droite, pour garder la signature de Marine en bas à droite. */
.tete-photo { position: relative; overflow: hidden; border: 0; border-radius: clamp(20px, 3vw, 36px); min-height: clamp(15rem, 34vw, 29rem); display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1.5rem, 5vw, 4.5rem); isolation: isolate; text-align: left; box-shadow: 0 30px 70px rgba(35, 34, 32, .22); margin-bottom: clamp(2.5rem, 5vw, 3.6rem); }
.tete-photo .tete-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; z-index: -2; }
.tete-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 19, 18, .8), rgba(20, 19, 18, .35) 45%, rgba(20, 19, 18, 0) 72%); }
.tete-photo h2 { color: #fff; text-transform: none; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.3rem); font-weight: 700; letter-spacing: 0; max-width: 14ch; }
.tete-photo .sous-titre { color: var(--tilleul); font-size: clamp(1.15rem, 1rem + .9vw, 1.55rem); }

/* ---------- Bandeau du haut de page ---------- */
.bandeau { --bf: var(--sombre); --bt: #fff; --bs: var(--cuivre-clair); position: relative; background: var(--bf); color: var(--bt); overflow: hidden; isolation: isolate; }
.bandeau-nuit { --bf: #12130e; }
.bandeau-brun { --bf: #3b312f; }
.bandeau-brique { --bf: #804c3e; --bs: #f0c08f; }
.bandeau-ocre { --bf: #8f6b44; --bs: #ffe0b8; }
.bandeau-peche { --bf: #ffdaa3; --bt: var(--texte); --bs: #9c5a37; }
.bandeau-texte { position: relative; padding-block: clamp(2.2rem, 4vw, 3.4rem) clamp(2.4rem, 5vw, 4.4rem); }
.bandeau h1 { color: var(--bt); font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.35rem); font-weight: 600; margin: 0; text-wrap: balance; }
.bandeau-sous { font: 500 clamp(1.1rem, 1rem + .6vw, 1.35rem)/1.3 var(--titres); color: var(--bs); margin: .4rem 0 0; }
.bandeau-accroche { font-style: italic; font-size: 1.15rem; margin: 1.5rem 0 .2rem; }
.bandeau-intro { margin-top: 1rem; }
.bandeau-intro p { margin-bottom: .6em; text-wrap: pretty; }
.bandeau .boutons { margin-top: 1.8rem; }
.bandeau-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 56em) {
  .bandeau.avec-photo { min-height: clamp(26rem, 35vw, 48rem); display: flex; align-items: center; }
  .bandeau.avec-photo .bandeau-photo { position: absolute; inset: 0; z-index: -1; }
  /* la photo n'est jamais rognée en haut ni en bas, quelle que soit la taille de l'écran : elle occupe toute la hauteur
     du bandeau (35 % de la largeur), calée à droite ; à gauche, sous le texte, son fond se fond dans la couleur du bandeau
     (celle du fond de la photo). Seule la partie gauche, sans sujet, peut sortir du cadre sur un écran étroit. */
  .bandeau.avec-photo .bandeau-photo { overflow: hidden; }
  .bandeau.avec-photo .bandeau-photo img { position: absolute; top: 0; right: 0; width: auto; height: 100%; max-width: none;
    object-fit: initial; }
  .bandeau.avec-photo .bandeau-photo img:not(.trait) { -webkit-mask: linear-gradient(90deg, transparent, #000 30%); mask: linear-gradient(90deg, transparent, #000 30%); }
  .bandeau.avec-photo .bandeau-texte { padding-bottom: calc(clamp(2.4rem, 5vw, 4.4rem) + var(--hv)); }
  .bandeau.avec-photo .bandeau-texte > * { max-width: min(40rem, 54%); }
  .bandeau-ocre .bandeau-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40, 26, 12, .22), rgba(40, 26, 12, 0) 55%); }
  /* bas du bandeau : la courbe est haute à gauche, sous le texte, et descend vers la droite, pour ne jamais passer
     sur le sujet de la photo, calée à droite (choix de Matthieu du 29 octobre 2026, inverse du site d'origine) */
  .bandeau.avec-photo + .sec.vague::before { -webkit-mask-image: url(../img/vague-gauche.svg); mask-image: url(../img/vague-gauche.svg); }
}
@media (max-width: 55.99em) {
  .bandeau.avec-photo { display: flex; flex-direction: column-reverse; }
  .bandeau.avec-photo .bandeau-photo { height: clamp(15rem, 62vw, 26rem); }
  .bandeau.avec-photo .bandeau-photo { position: relative; }
  .bandeau.avec-photo .bandeau-photo img { position: absolute; inset: 0; }
  .bandeau.avec-photo .bandeau-photo img:not(.trait) { -webkit-mask: linear-gradient(180deg, transparent, #000 22%); mask: linear-gradient(180deg, transparent, #000 22%); }
  .bandeau.avec-photo .bandeau-texte { padding-bottom: .5rem; }
}
/* Grand écran : la présence du site d'origine (logo, menu, titres et boutons du bandeau plus grands) */
@media (min-width: 62em) {
  .barre { font-size: .875rem; }
  .entete .cadre { min-height: 5.6rem; }
  .logo img { height: 4.6rem; }
  .bandeau h1 { font-size: clamp(2.1rem, 1.2rem + 1.3vw, 2.5rem); font-weight: 700; }
  .bandeau-sous { font-size: 1.5rem; }
  .bandeau-accroche { font-size: 1.4rem; margin-top: 1.8rem; }
  .bandeau-intro { font-size: 1.15rem; }
  .bandeau .boutons { margin-top: 2.2rem; gap: 1.2rem; }
  .bandeau .btn { font-size: 1.08rem; min-height: 3.5rem; }
  /* boutons, cartes et colonnes à la taille du site d'origine */
  .carte-corps { padding: 2rem 1.6rem .8rem; font-size: 1rem; }
  .carte h3 { font-size: 1.3rem; }
  .carte-pied { font-size: 1rem; padding: 1.2rem 1.6rem 1.4rem; }
  .colonne-texte { font-size: 1.06rem; }
  .etiquette h3 { font-size: 1.3rem; }
  .etiquette p { font-size: 1.02rem; }
  .bloc-texte, .encart { font-size: 1.03rem; }
  .prestations p, .prestations blockquote { font-size: 1.02rem; }
}
/* « forêt » : dégradé vert, illustration de sapins et du chien qui hurle, liseré tilleul */
.bandeau-foret { --bf: linear-gradient(160deg, #c0de8d 0%, #7fb383 32%, #3e897a 68%, #0a6773 100%); --bs: var(--tilleul); background: var(--bf); text-align: center; border-bottom: 5px solid var(--tilleul); }
img.bandeau-foret { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 82%; object-fit: cover; object-position: center bottom; opacity: .22; z-index: -1; border: 0; }
.bandeau-foret .bandeau-texte { padding-block: clamp(1.6rem, 3vw, 2.4rem) clamp(1.8rem, 3.4vw, 2.6rem); max-width: 50rem; }
.bandeau-foret h1 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.05rem); text-shadow: 0 1px 12px rgba(10, 60, 60, .35); }
.bandeau-sur { font: italic 400 1.1rem/1.3 "Lato", sans-serif; color: var(--tilleul); margin: 0 0 .35rem; }
.bandeau-sur a { text-decoration: none; }
.bandeau-sur a:hover { text-decoration: underline; }
.bandeau-meta { margin: .5rem 0 0; color: var(--tilleul); font-size: .95rem; }
.bandeau-meta a { color: inherit; }
.bandeau-foret .bandeau-intro { color: #fff; }
.bandeau-foret .boutons { justify-content: center; }
.bandeau-foret + .sec { padding-top: clamp(3rem, 6vw, 4.5rem); }

/* ---------- Accueil ---------- */
.accueil-deux { display: grid; gap: 2.5rem; align-items: start; }
.arrondie { border-radius: 22px; width: 100%; object-fit: cover; }
.presentation .metier { font-weight: 700; margin-bottom: .4em; }
.presentation p { font-size: 1rem; }
/* « Mes missions » : une carte claire, chaque mission sur sa ligne avec une empreinte, sa phrase en gras en titre */
.missions { background: #fff; color: var(--texte); border-radius: 26px; padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 2.4rem); box-shadow: 0 20px 44px rgba(35, 34, 32, .1); }
.missions h2 { color: var(--sur-cuivre); text-transform: none; font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); font-weight: 700; margin-bottom: 1.2rem; }
.missions .surtitre { color: var(--cuivre-texte); font-size: 1.25rem; }
.missions ul { list-style: none; padding: 0; margin: 0; }
.missions li { position: relative; padding: .95rem 0 .95rem 3rem; border-top: 1px solid var(--ligne); font-size: .97rem; line-height: 1.5; color: #5a524d; }
.missions li:first-child { border-top: 0; padding-top: .3rem; }
.missions li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--peche); }
.missions li:first-child::before { top: .3rem; }
.missions li::after { content: ""; position: absolute; left: .55rem; top: 1.5rem; width: 1rem; height: 1rem; background: var(--cuivre-texte); -webkit-mask: url(../img/patte.svg) center/contain no-repeat; mask: url(../img/patte.svg) center/contain no-repeat; transform: rotate(-14deg); }
.missions li:first-child::after { top: .85rem; }
.missions li > strong:first-child { font: 700 1.04rem/1.3 var(--titres); color: var(--sur-cuivre); }
.missions .surtitre:not(:first-child) { margin-top: 1.6rem; }
.missions-autre { font: 600 1.2rem/1.3 var(--titres); margin: 0; color: var(--sur-cuivre); }
.missions .boutons { justify-content: flex-start; }
/* présentation de Marine : photo plus grande, nom manuscrit, premier paragraphe en accroche */
.presentation .arrondie { aspect-ratio: 4 / 3.3; border-radius: 26px; box-shadow: 0 24px 50px rgba(35, 34, 32, .16); }
.presentation .manuscrit { font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); margin-top: 1.6rem; }
.presentation .metier { font: 600 .8rem/1.3 var(--titres); letter-spacing: .12em; text-transform: uppercase; color: var(--cuivre-texte); margin-bottom: 1rem; }
.presentation p { font-size: 1.02rem; }
.presentation .metier + p { font: 500 clamp(1.12rem, 1rem + .4vw, 1.3rem)/1.5 var(--titres); color: var(--sur-cuivre); }
@media (min-width: 56em) { .accueil-deux { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }

/* la photo du chien couché se montre SOUS les cartes (sa tête ne doit jamais être cachée) : la section garde en bas
   la place de la photo, posée au-dessus de la vague de la section suivante */
.approche-accueil { overflow: hidden; }
.sec.vague.f-blanc.approche-accueil { padding-bottom: calc(66vw + var(--hv) * .4); }
.approche-fond { position: absolute; left: 0; right: 0; bottom: calc(var(--hv) * .4); height: 100vw; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
.approche-fond img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(.9); opacity: .6; }
.approche-fond::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .4) 22%, rgba(255, 255, 255, 0) 45%); }
@media (min-width: 48em) {
  .sec.vague.f-blanc.approche-accueil { padding-bottom: calc(24vw + var(--hv) * .4); }
  .approche-fond { height: auto; aspect-ratio: 2500 / 1087; }
}
.approche-accueil .cadre { position: relative; z-index: 1; }
/* les trois piliers : cartes claires posées sur la photo en noir et blanc, chacune avec son pictogramme */
.piliers { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; }
.piliers > li { background: rgba(255, 255, 255, .86); border-radius: 22px; padding: 1.5rem 1.4rem 1.4rem; box-shadow: 0 14px 34px rgba(35, 34, 32, .08); }
@supports (backdrop-filter: blur(6px)) { .piliers > li { background: rgba(255, 255, 255, .72); backdrop-filter: blur(6px); } }
.piliers > li::before { content: ""; display: block; width: 3rem; height: 3rem; margin-bottom: .9rem; border-radius: 16px; background: var(--peche) center / 1.6rem no-repeat; }
.piliers > li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a05f37' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.5-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.5-9 9-9 9z'/%3E%3C/svg%3E"); }
.piliers > li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a05f37' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='12' r='5'/%3E%3Ccircle cx='15' cy='12' r='5'/%3E%3C/svg%3E"); }
.piliers > li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a05f37' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E"); }
.piliers h3 { font-size: 1.45rem; color: var(--sur-cuivre); margin-bottom: .5rem; }
.piliers p { font-size: 1.04rem; line-height: 1.6; margin: 0; }
@media (min-width: 48em) { .piliers { grid-template-columns: repeat(3, 1fr); } }
.approche-accueil .boutons { justify-content: center; }

.prestations { list-style: none; padding: 0; margin: 0; display: grid; gap: 3.5rem 4rem; }
.prestations > li { display: flex; flex-direction: column; }
.prestations h3 { text-transform: uppercase; text-align: center; font-size: 1.2rem; letter-spacing: .03em; margin-bottom: .25rem; }
.prestations .mots { text-align: center; color: var(--tilleul); margin-bottom: 1.4rem; }
.prestations blockquote { border-color: var(--tilleul); font-style: normal; font-size: .97rem; margin-bottom: 1.2rem; }
.prestations p { font-size: .97rem; }
.prestations .accroche { text-align: center; color: var(--tilleul); font-weight: 700; font-size: 1.05rem; margin-top: auto; padding-top: .4rem; }
.prestations .boutons { justify-content: center; margin-top: .6rem; }
@media (min-width: 48em) { .prestations { grid-template-columns: 1fr 1fr; } }

/* Accueil, « Mes prestations » : une liste numérotée, éditoriale ; à côté, la photo de la prestation survolée */
.prest { display: grid; gap: 2rem; align-items: start; }
.prest-liste { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.prest-liste li { border-top: 1px solid rgba(255, 255, 255, .14); }
.prest-liste li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.prest-lien { position: relative; display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: .4rem 1.2rem; align-items: start; padding: 1.5rem .4rem 1.6rem;
  text-decoration: none; color: #d8d4cf; transition: background .35s, padding .35s; border-radius: 18px; }
.prest-num { font: 800 2.4rem/1 var(--titres); color: transparent; -webkit-text-stroke: 1.2px var(--tilleul); transition: color .35s; padding-top: .15rem; }
.prest-corps { display: flex; flex-direction: column; gap: .35rem; }
.prest-mots { font: 700 .72rem/1.3 var(--titres); letter-spacing: .12em; text-transform: uppercase; color: var(--cuivre-clair); }
.prest-titre { margin: 0; font: 700 clamp(1.35rem, 1.1rem + 1vw, 1.75rem)/1.15 var(--titres); color: #fff; letter-spacing: 0; }
.prest-resume { font-size: .98rem; line-height: 1.55; max-width: 34rem; }
.prest-resume strong { color: #fff; }
.prest-accroche { display: block; margin-top: .35rem; font: 600 1rem/1.2 var(--titres); color: var(--tilleul); }
.prest-fl { display: inline-block; vertical-align: -.12em; margin-left: .45rem; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: url(../img/fleche.svg) center/contain no-repeat; mask: url(../img/fleche.svg) center/contain no-repeat; transition: transform .3s; }
.prest-vignette { grid-area: img; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; margin-bottom: .6rem; }
@media (max-width: 55.99em) {
  .prest-lien { grid-template-columns: 2.6rem minmax(0, 1fr); grid-template-areas: "img img" "num corps"; gap: .3rem .8rem; }
  .prest-num { grid-area: num; font-size: 1.9rem; }
  .prest-corps { grid-area: corps; }
}
.prest-lien:hover, .prest-lien:focus-visible { background: rgba(255, 255, 255, .05); padding-left: .9rem; }
.prest-lien:hover .prest-num, .prest-lien:focus-visible .prest-num { color: var(--tilleul); }
.prest-lien:hover .prest-fl, .prest-lien:focus-visible .prest-fl { transform: translateX(6px); }
.prest-visuel { display: none; }
@media (min-width: 56em) {
  .prest { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .prest-visuel { display: block; position: sticky; top: 7rem; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: #111; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
  .prest-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .6s ease, transform 1.6s ease; }
  .prest-img:first-child { opacity: 1; transform: scale(1); }
  .prest:has(.prest-liste li:hover, .prest-liste li:focus-within) .prest-img:first-child { opacity: 0; transform: scale(1.08); }
  .prest:has(.prest-liste li:nth-child(1):is(:hover, :focus-within)) .prest-img:nth-child(1),
  .prest:has(.prest-liste li:nth-child(2):is(:hover, :focus-within)) .prest-img:nth-child(2),
  .prest:has(.prest-liste li:nth-child(3):is(:hover, :focus-within)) .prest-img:nth-child(3),
  .prest:has(.prest-liste li:nth-child(4):is(:hover, :focus-within)) .prest-img:nth-child(4) { opacity: 1; transform: scale(1); }
  .prest-vignette { display: none; }
  .prest-lien { grid-template-columns: 4.6rem minmax(0, 1fr); padding-block: 1.7rem 1.8rem; }
  .prest-num { font-size: 3rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .prest-liste li { opacity: 0; translate: 0 18px; transition: opacity .7s ease calc(var(--i) * .12s), translate .7s ease calc(var(--i) * .12s); }
  .js .prest-liste.vu li { opacity: 1; translate: 0 0; }
}

/* ---------- Parties des pages de prestation ---------- */
.bloc { margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.bloc:last-of-type { margin-bottom: 0; }
.bloc h3 { font-size: 1.35rem; color: var(--brun); }
.f-sombre .bloc h3 { color: #fff; }
.bloc-texte { font-size: 1rem; }
.bloc-cote { display: grid; gap: 1.6rem; align-content: start; }
@media (min-width: 56em) {
  .bloc-deux { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3.5rem; align-items: start; }
}
/* Bloc « à la une » (texte + encart + photo) : grand texte dont chaque paragraphe s'éclaire en passant dans l'écran ;
   à côté, la photo (léger zoom arrière au défilement) et l'encart posé à cheval sur elle, qui restent en place. */
.bloc-riche .bloc-texte { font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); line-height: 1.65; }
.bloc-riche .bloc-texte > p { margin-bottom: 1.2em; }
.bloc-riche .bloc-texte > p:first-of-type { font: 500 clamp(1.3rem, 1.05rem + 1vw, 1.75rem)/1.4 var(--titres); color: var(--sur-cuivre); letter-spacing: -.005em; }
.bloc-riche .bloc-texte > p:first-of-type strong { color: var(--cuivre-texte); }
.bloc-riche .bloc-cote { gap: 0; }
.bloc-riche .photo { border-radius: 26px; overflow: hidden; box-shadow: 0 24px 50px rgba(35, 34, 32, .16); }
.bloc-riche .photo img { border-radius: 0; aspect-ratio: 4 / 3.2; object-fit: cover; }
.bloc-riche .photo figcaption { display: none; }
.bloc-riche .encart { position: relative; box-shadow: 0 18px 40px rgba(35, 34, 32, .14); }
.bloc-riche .photo + .encart { margin: -3.5rem 1.2rem 0; }
.bloc-riche .photo:only-child figcaption { display: block; }
.f-sombre .bloc-riche .bloc-texte > p:first-of-type { color: #fff; }
.f-sombre .bloc-riche .bloc-texte > p:first-of-type strong { color: var(--tilleul); }
@media (min-width: 56em) {
  .bloc-riche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5.5rem); }
  .bloc-riche .bloc-texte { padding-block: 1rem 3rem; }
  .bloc-riche .bloc-texte > p { margin-bottom: 1.3em; }
  .bloc-riche .bloc-cote { position: sticky; top: 7rem; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bloc-riche .bloc-texte > p, .bloc-riche .bloc-texte > ul, .bloc-riche .bloc-texte > blockquote { animation: eclaire linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .bloc-riche .photo img { animation: recule linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes eclaire { from { opacity: .18; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes recule { from { scale: 1.18; } to { scale: 1; } }
.f-sombre .bloc-texte blockquote { border-color: var(--tilleul); }
.note { background: var(--peche); color: var(--texte); border-radius: 12px; padding: 1.1rem 1.3rem; margin-top: 1.4rem; font-size: .95rem; }
.note-titre, .encart-titre { font: 400 1.2rem/1.2 var(--manuscrit); color: var(--cuivre-texte); margin-bottom: .5rem; }
.note ul { padding-left: 1.1em; margin-bottom: 0; }
.note p:last-child { margin-bottom: 0; }
.encart { border-radius: var(--rayon); padding: clamp(1.4rem, 3vw, 1.9rem); font-size: .97rem; }
.encart-peche { background: var(--peche); color: var(--texte); }
.encart-cuivre { background: var(--cuivre); color: var(--sur-cuivre); }
.encart-cuivre .encart-titre { font-family: var(--titres); font-style: italic; font-weight: 700; color: var(--sur-cuivre); font-size: 1.3rem; }
.encart-cuivre blockquote { border-color: var(--sur-cuivre); }
.encart blockquote { margin-block: 1em; }
.encart > :last-child { margin-bottom: 0; }
.encart .boutons { justify-content: center; }
.photo { margin: 0; }
.photo img { border-radius: var(--rayon); width: 100%; }
.photo figcaption { text-align: center; font-style: italic; color: var(--cuivre-texte); margin-top: .7rem; }

.cartes-titre { font: 600 1.35rem/1.3 var(--titres); color: var(--cuivre-titre); margin: clamp(3rem, 6vw, 4.5rem) 0 1.6rem; padding-bottom: .9rem; border-bottom: 1px solid var(--ligne); }
.cartes-intro { margin-bottom: 1.6rem; }
/* cartes (choix du 29 octobre 2026 : numéro et photo) */
.cartes { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
.carte { background: #fff; color: var(--texte); border-radius: 24px; box-shadow: 0 14px 34px rgba(35, 34, 32, .08); overflow: hidden; display: flex; flex-direction: column; transition: translate .25s ease, box-shadow .25s ease; }
.carte:hover { translate: 0 -4px; box-shadow: 0 22px 44px rgba(35, 34, 32, .14); }
.carte-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.carte-corps { padding: 1.6rem 1.6rem .8rem; font-size: .97rem; flex: 1; }
.carte-num { display: block; font: 800 2.2rem/1 var(--titres); color: var(--cuivre); margin-bottom: .7rem; letter-spacing: -.01em; }
.carte h3 { font-size: 1.25rem; color: var(--sur-cuivre); }
.carte-corps ul { padding-left: 1.1em; }
.carte-pied { margin: 0 .9rem .9rem; padding: 1rem 1.15rem; border-radius: 16px; background: var(--peche); color: #5a3a24; font: italic 400 .95rem/1.5 "Lato", sans-serif; }
@media (min-width: 40em) { .cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .cartes.n3, .cartes.n4 { grid-template-columns: repeat(3, 1fr); } }

.colonnes { display: grid; gap: 3rem 3.5rem; }
.colonne-tete { position: relative; margin-bottom: 3.6rem; }
.colonne-tete img { border-radius: var(--rayon); width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.etiquette { position: absolute; left: 8%; right: 8%; bottom: -2.2rem; background: var(--tilleul); color: var(--texte); border-radius: 10px; text-align: center; padding: .7rem 1rem .8rem; }
.etiquette h3 { color: var(--texte) !important; text-transform: uppercase; font-size: 1.15rem; margin: 0; letter-spacing: .03em; }
.etiquette p { margin: .1rem 0 0; font-style: italic; font-size: .95rem; }
.colonne-texte { font-size: 1rem; padding-inline: clamp(0rem, 3vw, 2rem); }
.f-sombre .colonne-texte > p:first-child strong { color: var(--tilleul); }
.colonne-texte ul { list-style: none; padding: 0; }
.colonne-texte li { padding-left: 1rem; text-indent: -1rem; margin-bottom: .35em; }
@media (min-width: 48em) { .colonnes { grid-template-columns: 1fr 1fr; } }

/* galerie : les photos gardent leur format (pas de recadrage) ; à huit photos (Photographie), une grande vedette */
.galerie { list-style: none; padding: 0; margin: 2.6rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.galerie li { position: relative; aspect-ratio: 49 / 34; }
.galerie a { display: block; height: 100%; border-radius: 16px; overflow: hidden; background: #111; cursor: zoom-in; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.galerie a:hover img, .galerie a:focus-visible img { transform: scale(1.05); }
.galerie-legende { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.1rem .9rem; color: #fff; font-size: .9rem; line-height: 1.35; text-align: left;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6)); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.galerie a:hover .galerie-legende, .galerie a:focus-visible .galerie-legende { opacity: 1; transform: none; }
@media (min-width: 48em) {
  .galerie { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  /* mosaïque (5 photos ou plus, theme/gabarits/_fonctions.php : forme_mosaique) : par groupe de huit, une grande photo
     et deux à côté, trois en rangée, deux plus larges ; un groupe sur deux en miroir ; le dernier groupe, incomplet,
     garde des rangées pleines */
  .galerie.mosaique { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: dense; gap: 1.4rem; margin-top: 3.4rem; }
  .galerie.mosaique li { grid-column: span 2; }
  .galerie.mosaique li.g { grid-column: span 4; grid-row: span 2; aspect-ratio: auto; }
  .galerie.mosaique li.g.d { grid-column: 3 / span 4; }
  .galerie.mosaique li.m { grid-column: span 3; }
  .galerie.mosaique li.l { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .galerie.mosaique a { border-radius: 22px; }
}
/* sur téléphone (deux colonnes), une dernière photo seule prend toute la largeur */
@media (max-width: 47.99em) {
  .galerie.mosaique li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* la photo en grand (theme/js/site.js) */
.visionneuse { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.visionneuse::backdrop { background: rgba(12, 11, 10, .95); }
.visionneuse[open] { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.visionneuse figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.visionneuse img { max-width: min(70rem, 82vw); max-height: 80vh; width: auto; height: auto; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.visionneuse img { transition: opacity .25s; }
.visionneuse img.charge { opacity: 0; }
.visionneuse figcaption { color: #cfc9c4; font-size: .95rem; text-align: center; }
.visionneuse button { flex: none; width: 3.2rem; height: 3.2rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; display: grid; place-items: center; }
.visionneuse button:hover { background: rgba(255, 255, 255, .26); }
.visionneuse button::before { content: ""; width: 1.2rem; height: 1.2rem; background: currentColor; -webkit-mask: url(../img/fleche.svg) center/contain no-repeat; mask: url(../img/fleche.svg) center/contain no-repeat; }
.visionneuse .v-prec::before { transform: scaleX(-1); }
.visionneuse .v-fermer { position: fixed; top: 1rem; right: 1rem; }
.visionneuse .v-fermer::before { -webkit-mask: none; mask: none; width: 1.1rem; height: 1.1rem; background: linear-gradient(45deg, transparent 45%, currentColor 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, currentColor 45% 55%, transparent 55%); }
@media (max-width: 40em) { .visionneuse[open] { flex-wrap: wrap; align-content: center; } .visionneuse figure { order: -1; width: 100%; } .visionneuse img { max-width: 94vw; } }
/* Visionneuse « portfolio » (galerie de la page Photographie) : la photo en grand, à côté son numéro, la série, la
   légende et l'appel à réserver ; en bas, la bande des photos. Entrée douce à chaque photo. */
.visionneuse.portfolio[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0; align-items: stretch; justify-content: stretch; }
.portfolio .v-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; padding: clamp(1rem, 3vw, 2.5rem) clamp(4.5rem, 7vw, 6.5rem) 1rem; min-height: 0; }
.portfolio .v-photo { margin: 0; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.portfolio .v-photo img { max-width: 100%; max-height: min(78vh, 100%); border-radius: 6px; box-shadow: 0 40px 90px rgba(0, 0, 0, .6); }
.portfolio .v-texte { color: #d8d4cf; display: flex; flex-direction: column; gap: .9rem; }
.portfolio .v-num { margin: 0; display: flex; align-items: baseline; gap: .35rem; }
.portfolio .v-n { font: 800 clamp(3.2rem, 2rem + 3vw, 5rem)/1 var(--titres); color: transparent; -webkit-text-stroke: 1.5px var(--tilleul); letter-spacing: -.02em; }
.portfolio .v-total { font: 600 1rem/1 var(--titres); color: #8f8a85; }
.portfolio .v-serie { margin: 0; font: 700 .75rem/1.4 var(--titres); letter-spacing: .14em; text-transform: uppercase; color: var(--cuivre-clair); }
.portfolio .v-legende { margin: 0; font: 600 clamp(1.25rem, 1rem + .9vw, 1.65rem)/1.3 var(--titres); color: #fff; text-wrap: balance; }
.portfolio .v-sig { margin: .4rem 0 .4rem; display: flex; align-items: center; gap: .7rem; font: 400 1.35rem/1 var(--manuscrit); color: var(--tilleul); }
.portfolio .v-sig::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .6; }
.portfolio .v-cta { align-self: flex-start; margin-top: .4rem; }
.portfolio .v-bande { display: flex; gap: .5rem; overflow-x: auto; padding: .8rem clamp(1rem, 4vw, 3rem) 1.2rem; scrollbar-width: thin; justify-content: safe center; }
.visionneuse .v-vignette { flex: none; width: auto; height: auto; padding: 0; border-radius: 8px; background: none; overflow: hidden; opacity: .4; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .25s, outline-color .25s; display: block; }
.visionneuse .v-vignette::before { display: none; }
.visionneuse .v-vignette img { display: block; width: 4.6rem; height: 3.2rem; object-fit: cover; }
.visionneuse .v-vignette:hover { opacity: .8; background: none; }
.visionneuse .v-vignette[aria-current] { opacity: 1; outline-color: var(--tilleul); }
.visionneuse.portfolio::backdrop { background: #0d0c0b; }
.portfolio .v-prec, .portfolio .v-suiv { position: fixed; top: 45%; }
.portfolio .v-prec { left: clamp(.6rem, 2vw, 1.5rem); }
.portfolio .v-suiv { right: clamp(.6rem, 2vw, 1.5rem); }
@media (prefers-reduced-motion: no-preference) {
  .portfolio.arrive .v-photo img { animation: photo-entre .7s cubic-bezier(.2, .7, .2, 1) both; }
  .portfolio.arrive .v-texte > * { animation: texte-entre .6s ease both; }
  .portfolio.arrive .v-texte > :nth-child(2) { animation-delay: .08s; } .portfolio.arrive .v-texte > :nth-child(3) { animation-delay: .16s; }
  .portfolio.arrive .v-texte > :nth-child(4) { animation-delay: .24s; } .portfolio.arrive .v-texte > :nth-child(5) { animation-delay: .32s; }
}
@keyframes photo-entre { from { opacity: 0; transform: translateX(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes texte-entre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 56em) {
  .portfolio .v-scene { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; padding: 3.8rem 1rem .5rem; gap: 1.1rem; }
  .portfolio .v-photo { height: auto; }
  .portfolio .v-photo img { max-height: 52vh; }
  .portfolio .v-texte { gap: .5rem; }
  .portfolio .v-n { font-size: 2.6rem; }
  .portfolio .v-sig { display: none; }
  .portfolio .v-cta { margin-top: .3rem; min-height: 2.8rem; }
  .portfolio .v-prec, .portfolio .v-suiv { top: 33vh; width: 2.6rem; height: 2.6rem; background: rgba(0, 0, 0, .5); }
}

/* ---------- Derniers articles et cartes d’article ---------- */
.derniers .tete-simple { text-align: center; }
.derniers .boutons { justify-content: center; margin-top: 2.6rem; }
.grille-articles { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.6rem; }
@media (min-width: 40em) { .grille-articles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .derniers .grille-articles { grid-template-columns: repeat(3, 1fr); } }
.carte-article { position: relative; background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; display: flex; flex-direction: column; transition: translate .25s ease, box-shadow .25s ease; }
.carte-article:hover { translate: 0 -3px; box-shadow: 0 12px 30px rgba(35, 34, 32, .14); }
.ca-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ca-corps { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.ca-cat { font: 700 .75rem/1.2 var(--titres); font-stretch: 80%; letter-spacing: .1em; text-transform: uppercase; color: var(--vert); margin-bottom: .45rem; }
.carte-article h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.carte-article h3 a { text-decoration: none; }
.carte-article h3 a::after { content: ""; position: absolute; inset: 0; }
.carte-article h3 a:focus-visible { outline: 0; }
.carte-article:focus-within { outline: 3px solid var(--vert-logo); outline-offset: 3px; }
.ca-date { font-size: .85rem; color: var(--gris); margin-bottom: .6rem; }
.ca-chapo { font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ca-lire { margin: auto 0 0; padding-top: .4rem; font: 700 .8rem/1 var(--titres); font-stretch: 80%; letter-spacing: .09em; text-transform: uppercase; color: var(--cuivre-texte); }
.ca-lire::after { content: " →"; }

/* ---------- Zone d’intervention ---------- */
.zone-deux { display: grid; gap: 2rem; align-items: center; }
.zone-carte { margin: 0; }
.zone-carte img { width: min(36rem, 100%); margin-inline: auto; }
.zone-infos { display: grid; gap: 1.4rem; }
.zone-communes { background: #fff; border: 0; border-radius: 22px; padding: 1.4rem 1.4rem 1.5rem; font-size: .93rem; box-shadow: 0 14px 34px rgba(35, 34, 32, .08); }
.zone-communes h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.zone-communes p:last-child { margin: 0; }
.communes { list-style: none; padding: 0; margin: .2rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.communes li { padding: .38rem .75rem; border-radius: 999px; background: #f2f8e6; color: #3b4a2f; font-size: .86rem; line-height: 1.2; }
.communes li.commune-forte { background: var(--vert); color: #fff; font-weight: 700; }
.zone-appel { background: var(--vert); color: #fff; border-radius: var(--rayon); padding: 1.5rem 1.4rem; text-align: center; }
.zone-appel p:last-child { margin: 0; }
@media (min-width: 56em) { .zone-deux { grid-template-columns: 1.35fr 1fr; gap: 3rem; } }

/* ---------- Prochains rendez-vous (Activités collectives) ---------- */
.rdv { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 56em) { .rdv { grid-template-columns: 1fr 1fr; } }
.rdv li { display: flex; align-items: center; gap: 1.1rem; background: #fff; border-radius: 22px; padding: 1rem 1.1rem; box-shadow: 0 12px 30px rgba(35, 34, 32, .08); }
.rdv-date { flex: none; width: 4.4rem; height: 4.4rem; border-radius: 18px; background: var(--tilleul); color: var(--sur-cuivre); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; font: 600 .85rem/1 var(--titres); text-transform: uppercase; letter-spacing: .05em; }
.rdv-date strong { font-size: 1.7rem; letter-spacing: 0; }
.rdv-texte { flex: 1; min-width: 0; }
.rdv-texte h3 { font-size: 1.12rem; margin: 0 0 .2rem; }
.rdv-texte h3 a { text-decoration: none; color: var(--sur-cuivre); }
.rdv-texte h3 a:hover { text-decoration: underline; }
.rdv-texte p { margin: 0; font-size: .93rem; color: var(--gris); }
.rdv-reserver { flex: none; padding: .7rem 1.1rem; border-radius: 999px; background: var(--cuivre); color: var(--sur-cuivre); text-decoration: none; font: 600 .95rem/1 var(--titres); transition: background .25s, color .25s; }
.rdv-reserver:hover { background: #3b312f; color: #fff; }

/* ---------- Tarifs ---------- */
.tarifs-titre { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.65rem); padding-bottom: .9rem; border-bottom: 1px solid var(--ligne); margin-bottom: 2rem; }
.formules { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.formules > li { flex: 1 1 100%; }
@media (min-width: 40em) { .formules > li { flex: 0 1 calc((100% - 1.4rem) / 2); } }
@media (min-width: 62em) { .formules > li { flex: 0 1 calc((100% - 2.8rem) / 3); } }
.formule { background: #fff; border-radius: 26px; box-shadow: 0 14px 34px rgba(35, 34, 32, .08); display: flex; flex-direction: column; padding: 1.7rem 1.6rem 1.5rem; scroll-margin-top: 7rem; transition: translate .25s, box-shadow .25s; }
.formule:hover { translate: 0 -4px; box-shadow: 0 22px 44px rgba(35, 34, 32, .14); }
.formule h3 { font: 700 1.25rem/1.25 var(--titres); color: var(--sur-cuivre); margin: 0 0 .9rem; }
.prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .45rem; padding: 0 0 1.1rem; border-bottom: 1px solid var(--ligne); margin: 0; }
.prix strong { font: 800 2.6rem/1 var(--titres); color: var(--sur-cuivre); letter-spacing: -.01em; }
.renvoi { font: 700 1rem/1 var(--titres); text-decoration: none; color: var(--sur-cuivre); align-self: flex-start; }
.unite { color: var(--vert); font-size: .98rem; font-weight: 700; }
.details { list-style: none; padding: 1.1rem 0 0; margin: 0 0 1.3rem; font-size: .98rem; flex: 1; display: grid; gap: .6rem; align-content: start; }
.details li { padding-left: 2rem; position: relative; line-height: 1.4; }
.details li::before { content: ""; position: absolute; left: 0; top: -.05em; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: #eef7d6; }
.details li::after { content: ""; position: absolute; left: .33rem; top: .28em; width: .8rem; height: .8rem; background: var(--vert); -webkit-mask: url(../img/patte.svg) center/contain no-repeat; mask: url(../img/patte.svg) center/contain no-repeat; transform: rotate(-14deg); }
.formule .boutons { margin: 0; }
.formule .boutons .btn { width: 100%; }
.formule-encart { display: flex; flex-direction: column; justify-content: center; }
.formule-encart.encart-peche { background: transparent; border-left: 3px solid var(--vert-logo); border-radius: 0; padding-block: .4rem; }
.formule-encart.encart-peche blockquote { border: 0; padding: 0; font-style: normal; }
.formule-encart .boutons { flex-direction: column; align-items: center; }
.onglets-cadre { display: flex; justify-content: center; padding-top: clamp(2rem, 4vw, 3rem); }
.onglets { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .3rem; padding: .35rem; border-radius: 999px; background: #fff; box-shadow: 0 10px 26px rgba(35, 34, 32, .08); }
.onglets button { border: 0; cursor: pointer; padding: .85rem 1.4rem; border-radius: 999px; background: transparent; color: #3b312f; font: 600 1rem/1 var(--titres); transition: background .2s, color .2s; }
.onglets button:hover { background: var(--creme); }
.onglets button[aria-selected="true"] { background: #3b312f; color: #fff; }
.tarifs-onglets section.tarifs { padding-top: 2.2rem; }
.tarifs-onglets section.tarifs:not([hidden]) .formule { animation: arrive-formule .4s ease backwards; }
@keyframes arrive-formule { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.tarifs-note { text-align: center; font-style: italic; font-size: .9rem; margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--ligne); }

/* ---------- Contact ---------- */
.contact-deux { display: grid; gap: 1.6rem; align-items: start; }
.formulaire-boite { background: var(--peche); border-radius: 26px; padding: clamp(1.4rem, 4vw, 2.4rem); }
.formulaire-boite h2 { text-align: left; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); margin-bottom: 1.2rem; color: var(--sur-cuivre); }
.contact-qui { background: var(--sombre); color: #d8d4cf; border-radius: 26px; overflow: hidden; box-shadow: 0 24px 50px rgba(35, 34, 32, .18); }
.contact-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.contact-qui-texte { padding: 1.4rem 1.5rem 1.7rem; }
.contact-signe { margin: 0; font: 400 2rem/1 var(--manuscrit); color: var(--cuivre-clair); }
.contact-metier { margin: .5rem 0 1.2rem; font-size: .92rem; color: #b9b4ae; }
.contact-points { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; font-size: .95rem; line-height: 1.45; }
.contact-points li { position: relative; padding-left: 1.6rem; }
.contact-points li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1rem; height: 1rem; background: var(--tilleul); -webkit-mask: url(../img/patte.svg) center/contain no-repeat; mask: url(../img/patte.svg) center/contain no-repeat; transform: rotate(-14deg); }
.contact-points a { color: #fff; text-underline-offset: 3px; }
@media (min-width: 56em) {
  .contact-deux { grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr); gap: 2.4rem; }
  .contact-qui { position: sticky; top: 7rem; }
  .contact-photo { aspect-ratio: 4 / 4.4; }
}
form.contact { background: #fff; border-radius: 12px; padding: clamp(1.2rem, 3vw, 2rem); display: grid; gap: .2rem 1.2rem; }
.contact-champ { margin: 0 0 .9rem; display: grid; gap: .3rem; }
.contact-champ label { font-weight: 700; font-size: .95rem; }
.contact-facultatif { font-weight: 400; color: var(--gris); font-size: .88rem; }
.contact input[type=text], .contact input[type=email], .contact input[type=tel], .contact select, .contact textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--texte); background: var(--creme); border: 1px solid #d9cdc6; border-radius: 8px; padding: .7rem .85rem; }
.contact input:focus, .contact select:focus, .contact textarea:focus { outline: 2px solid var(--vert-logo); outline-offset: 1px; background: #fff; }
.contact textarea { min-height: 9rem; resize: vertical; }
.contact-accord { font-size: .92rem; margin: .4rem 0 1rem; }
.contact-accord input { width: 1.1rem; height: 1.1rem; vertical-align: -.15em; accent-color: var(--vert); }
.contact-accord a { display: inline-block; margin-left: .3rem; color: var(--cuivre-texte); }
.contact button { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: .9em; min-height: 3.1rem;
  padding: .4rem .4rem .4rem 1.5rem; font: 600 1.05rem/1.2 var(--titres); background: var(--cuivre); color: var(--sur-cuivre); border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 8px 20px rgba(35, 34, 32, .12); transition: color .35s; }
.contact button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #3b312f; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.6, 0, .2, 1); }
.contact button::after { content: ""; flex: none; width: 2.35rem; height: 2.35rem; border-radius: 50%; background: var(--sur-cuivre) center / 1.05rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); transition: background-color .35s, transform .35s; }
.contact button:hover { color: #fff; }
.contact button:hover::before { transform: scaleX(1); }
.contact button:hover::after { background-color: var(--cuivre); transform: translateX(3px); }
@media (min-width: 40em) {
  form.contact { grid-template-columns: 1fr 1fr; }
  .contact > p:has(#contact-message), .contact-accord, .contact > p:last-child, .contact > p:has(select[name=sujet]) { grid-column: 1 / -1; }
}
.contact-retour { padding-block: clamp(3rem, 8vw, 6rem); width: min(46rem, 100% - 2.5rem); margin-inline: auto; text-align: center; }
.contact-retour h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }

/* ---------- Liens utiles ---------- */
.collegues { display: grid; gap: 1.6rem; align-items: stretch; }
.collegues ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.6rem; }
.collegue { background: #fff; border-radius: 26px; box-shadow: 0 14px 34px rgba(35, 34, 32, .08); padding: 2rem 1.6rem 1.8rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.collegue-logo { width: 11rem; height: 11rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; margin-bottom: 1.2rem; background: #fff; box-shadow: 0 0 0 1px var(--ligne), 0 10px 24px rgba(35, 34, 32, .08); }
.collegue-logo img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.18); }
.collegue h3 { font-size: 1.3rem; margin-bottom: .25rem; color: var(--sur-cuivre); }
.collegue-nom { color: var(--vert); font-weight: 700; margin-bottom: .3rem; }
.collegue-metier { font-style: italic; font-size: .95rem; }
.collegue .boutons { justify-content: center; margin-top: auto; padding-top: .8rem; }
.collegues-photo { border-radius: 26px; overflow: hidden; min-height: 18rem; }
.collegues-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
@media (min-width: 40em) { .collegues ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62em) { .collegues.avec-photo { grid-template-columns: 2fr 1fr; } }

/* ---------- Pages de texte ---------- */
.texte-long h2 { font-size: 1.4rem; margin-top: 2rem; }
.texte-long h3 { font-size: 1.15rem; margin-top: 1.4rem; }
.texte-long a { color: var(--cuivre-texte); }
.maj { color: var(--gris); font-style: italic; }
/* Page introuvable : une piste d'empreintes qui traverse la page puis s'arrête, et un point d'interrogation */
.perdu { position: relative; overflow: hidden; background: var(--creme); padding-block: clamp(4rem, 9vw, 7rem) clamp(4rem, 8vw, 6rem); text-align: center; }
.perdu-piste { position: absolute; left: 0; right: 0; top: clamp(1.5rem, 4vw, 3rem); height: 4rem; pointer-events: none; }
.perdu-piste i { position: absolute; top: 0; width: 1.4rem; height: 1.4rem; background: var(--cuivre); opacity: .45; -webkit-mask: url(../img/patte.svg) center/contain no-repeat; mask: url(../img/patte.svg) center/contain no-repeat; transform: rotate(90deg); }
.perdu-piste i:nth-child(odd) { top: 1.6rem; }
.perdu-piste i:nth-child(1) { left: 6%; } .perdu-piste i:nth-child(2) { left: 13%; } .perdu-piste i:nth-child(3) { left: 20%; }
.perdu-piste i:nth-child(4) { left: 27%; } .perdu-piste i:nth-child(5) { left: 34%; } .perdu-piste i:nth-child(6) { left: 41%; }
.perdu-piste i:nth-child(7) { left: 47%; transform: rotate(60deg); } .perdu-piste i:nth-child(8) { left: 51%; top: .6rem; transform: rotate(20deg); }
.perdu-piste i:nth-child(9) { left: 53%; top: 2rem; transform: rotate(150deg); }
.perdu-truffe { position: absolute; left: 57%; top: .4rem; font: 400 2.6rem/1 var(--manuscrit); color: var(--cuivre-texte); }
.perdu-code { margin: 0; font: 800 clamp(5rem, 3rem + 10vw, 10rem)/1 var(--titres); color: transparent; -webkit-text-stroke: 2px var(--cuivre); letter-spacing: -.02em; }
.perdu h1 { margin: .4rem 0 1rem; font: 400 clamp(2rem, 1.5rem + 2vw, 3rem)/1.15 var(--manuscrit); color: var(--sur-cuivre); }
.perdu-intro { max-width: 36rem; margin: 0 auto; font-size: 1.1rem; }
.perdu .boutons { justify-content: center; }
.perdu-pistes { margin-top: 2.6rem; }
.perdu-pistes p { font: 700 .78rem/1 var(--titres); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: .9rem; }
.perdu-pistes ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.perdu-pistes a { display: inline-block; padding: .55rem 1rem; border-radius: 999px; background: #fff; color: #3b312f; text-decoration: none; font: 600 .95rem/1 var(--titres); box-shadow: inset 0 0 0 1.5px #e3d5cb; }
.perdu-pistes a:hover { box-shadow: inset 0 0 0 1.5px var(--cuivre); }
@media (prefers-reduced-motion: no-preference) {
  .perdu-piste i { animation: pas-perdu .5s ease-out both; }
  .perdu-piste i:nth-child(2) { animation-delay: .25s; } .perdu-piste i:nth-child(3) { animation-delay: .5s; } .perdu-piste i:nth-child(4) { animation-delay: .75s; }
  .perdu-piste i:nth-child(5) { animation-delay: 1s; } .perdu-piste i:nth-child(6) { animation-delay: 1.25s; } .perdu-piste i:nth-child(7) { animation-delay: 1.6s; }
  .perdu-piste i:nth-child(8) { animation-delay: 1.95s; } .perdu-piste i:nth-child(9) { animation-delay: 2.3s; }
  .perdu-truffe { animation: truffe .6s 2.8s cubic-bezier(.3, 1.6, .5, 1) both; }
}
@keyframes pas-perdu { from { opacity: 0; scale: .5; } to { opacity: .45; scale: 1; } }
@keyframes truffe { from { opacity: 0; translate: 0 10px; rotate: -20deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@media (max-width: 40em) { .perdu-piste { opacity: .7; } }

/* ---------- Pied de page ---------- */
.pied { background: var(--sombre); color: #d8d6d3; position: relative; }
.pied-haut { display: grid; gap: 2.4rem; padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; }
.pied-marque { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.pied-marque img { width: 11rem; }
.pied-col h2 { font: 500 .95rem/1.2 var(--titres); letter-spacing: .1em; text-transform: uppercase; color: #a9a6a3; margin: .4rem 0 1rem; }
.pied-col ul { list-style: none; padding: 0; margin: 0; }
.pied-col li { margin-bottom: .45rem; padding-left: 1.1rem; position: relative; }
.pied-col li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border: 1.5px solid var(--tilleul); border-radius: 50%; }
.pied-col a { color: var(--tilleul); text-decoration: none; font-weight: 700; font-size: .95rem; }
.pied-col a:hover { text-decoration: underline; }
.pied-actions { display: flex; flex-direction: column; gap: .9rem; align-items: stretch; }
.pied-actions .btn { white-space: nowrap; }
.reseaux { display: flex; gap: .8rem; justify-content: center; margin: .4rem 0 0; }
.reseau { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center; }
.reseau::before { content: ""; width: 1.25rem; height: 1.25rem; background: var(--tilleul); }
.reseau-facebook::before { -webkit-mask: url(../img/facebook.svg) center/contain no-repeat; mask: url(../img/facebook.svg) center/contain no-repeat; }
.reseau-instagram::before { -webkit-mask: url(../img/instagram.svg) center/contain no-repeat; mask: url(../img/instagram.svg) center/contain no-repeat; }
.reseau:hover { background: rgba(255, 255, 255, .2); }
.pied-bas { background: var(--noir); text-align: center; font-size: .85rem; padding: 1.2rem 1.25rem 1.4rem; color: #bdbab6; }
.pied-bas p { margin: .2rem 0; }
.pied-bas a { color: #e6e4e1; text-decoration: none; }
.pied-bas a:hover { text-decoration: underline; }
@media (min-width: 40em) { .pied-haut { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62em) { .pied-haut { grid-template-columns: 1.1fr 1fr 1.1fr 1fr; align-items: start; } }

/* ---------- Traits de la graphiste qui se dessinent ----------
   Chaque image a son calque « trait » posé exactement dessus ; un masque conique le révèle en tournant autour de la
   forme (centre --cx/--cy, départ --depart). Sans animation (refusée, ou navigateur trop ancien) : le trait est là. */
@property --a { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
img.trait { pointer-events: none; -webkit-mask: conic-gradient(from var(--depart, 0deg) at var(--cx, 50%) var(--cy, 50%), #000 var(--a), transparent 0); mask: conic-gradient(from var(--depart, 0deg) at var(--cx, 50%) var(--cy, 50%), #000 var(--a), transparent 0); }
@media (prefers-reduced-motion: no-preference) {
  img.trait { animation: trace var(--duree, 3s) linear .5s both; }
  .js img.trait-defile { animation: none; --a: 0deg; }
  .js img.trait-defile.vu { animation: trace var(--duree, 3s) linear .15s both; }
}
@keyframes trace { from { --a: 0deg; } to { --a: 360deg; } }

/* ---------- Apparitions douces (seulement si le navigateur sait les lier au défilement, et si on ne les a pas refusées) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .carte, .carte-article, .colonne, .prestations > li, .piliers > li, .formule, .collegue, .encart, .galerie li, .missions, .presentation, .zone-infos > * {
      animation: apparait linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@keyframes apparait { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }