/* =========================================================
   Marie d’Antoni, céramiste
   Feuille de style unique du site.
   Couleurs, polices et espacements se règlent dans :root.
   Après toute modification, augmenter le numéro ?v=N
   dans les pages (style.css?v=N) pour éviter le cache.
   ========================================================= */

:root {
  /* Couleurs (palette du 08/10 d'après la photo de Marie :
     le marron de sa robe et le beige de ses poteries, sans vert) */
  --porcelaine: #F6F2EA;   /* fond principal : beige des poteries, très clair */
  --biscuit: #E8DFCE;      /* fond des sections alternées : beige des poteries */
  --craie: #DDD3BF;        /* fonds d'encarts, cadres vides */
  --gres: #8C8470;         /* gris chaud, éléments décoratifs */
  --encre: #2E2225;        /* texte principal et pied de page : marron de la robe */
  --encre-douce: #5A4D4F;  /* texte secondaire */
  --olive: #8C7663;        /* brun-taupe, pour les grands éléments (« Céramiste », traits). Le nom est resté de la version olive */
  --terre: #4A3438;        /* accent : boutons, liens, petits titres. Marron de la robe, un peu éclairci */
  --terre-fonce: #2E2225;  /* survol des boutons : marron de la robe */
  --terre-claire: #DDD3BF; /* accent sur fond sombre (pied de page) : beige des poteries */
  --celadon: #CFC3AE;      /* beige grisé doux */
  --ligne: rgba(46, 34, 37, .14);

  /* Polices (chargées depuis Google Fonts dans chaque page) */
  --sans: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: var(--sans);   /* titres : même police que le texte (demande de Marie, 08/10). Avant : "EB Garamond" */

  /* Mise en page */
  --largeur: 1200px;
  --gouttiere: clamp(16px, 4vw, 48px);
  --section: clamp(72px, 10vw, 136px);
  --entete: 76px;
  --douceur: cubic-bezier(.2, .6, .2, 1);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete) + 16px);
}

body {
  margin: 0;
  background: var(--porcelaine);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  color: var(--encre);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.5rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); }

p { margin: 0 0 1.1em; }

:focus-visible { outline: 2px solid var(--terre); outline-offset: 3px; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.surtitre {
  display: inline-block;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terre);
  margin: 0 0 1.1rem;
}

.chapo {
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  color: var(--encre-douce);
  max-width: 36em;
}

/* Infos manquantes, visibles pour les repérer facilement */
.a-completer {
  color: var(--terre-fonce);
  background: rgba(74, 52, 56, .09);
  border-radius: 3px;
  padding: 0 .3em;
}

.aller-au-contenu {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 100;
  background: var(--encre);
  color: var(--porcelaine);
  padding: .6em 1em;
  border-radius: 4px;
  text-decoration: none;
}
.aller-au-contenu:focus { top: 12px; }

/* ---------- En-tête et menu ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 242, 234, .95);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s ease;
}
.entete.defile { border-bottom-color: var(--ligne); }

.entete-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--entete);
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  color: var(--encre);
  white-space: nowrap;
}

/* Logos de Marie : monogramme MD à gauche, CASA à droite */
.marque-logo { width: auto; height: 46px; }
.entete-casa { flex-shrink: 0; }
.entete-casa img { width: auto; height: 24px; }
@media (min-width: 761px) { .menu { margin-left: auto; } }
@media (max-width: 960px) { .entete-casa { display: none; } }
.titre-logo img { width: clamp(170px, 22vw, 250px); height: auto; margin-top: .2em; }

.menu ul {
  display: flex;
  gap: clamp(22px, 3.2vw, 48px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  position: relative;
  display: inline-block;
  padding: .4em 0;
  font-size: .95rem;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--encre);
  transition: color .3s ease;
}
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .15em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--douceur);
}
.menu a:hover::after,
.menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--terre); }

.menu-bouton { display: none; }

@media (max-width: 760px) {
  .js .menu-bouton {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .menu-bouton span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--encre);
    transition: transform .3s ease;
  }
  .menu-bouton[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .menu-bouton[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

  .js .menu {
    position: absolute;
    top: var(--entete);
    left: 0;
    right: 0;
    background: var(--porcelaine);
    border-bottom: 1px solid var(--ligne);
    padding: 4px var(--gouttiere) 24px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    max-height: calc(100vh - var(--entete));
    max-height: calc(100dvh - var(--entete));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .js .menu-ouvert .menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .js .menu ul { flex-direction: column; gap: 0; }
  .js .menu li + li { border-top: 1px solid var(--ligne); }
  .js .menu a {
    display: block;
    padding: 14px 0;
    font-family: var(--serif);
    font-size: 1.5rem;
    letter-spacing: 0;
  }
  .js .menu a::after { display: none; }
  .js .menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }

  html:not(.js) .entete-inner { height: auto; flex-wrap: wrap; padding-block: 16px; }
  html:not(.js) .menu ul { gap: 18px; }
}

/* ---------- Boutons et liens ---------- */

.boutons { display: flex; flex-wrap: wrap; gap: 12px; }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .95em 1.75em;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.2;
  text-decoration: none;
  color: var(--porcelaine);
  background: var(--terre);
  border: 1px solid var(--terre);
  border-radius: 999px;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.bouton:hover { background: var(--terre-fonce); border-color: var(--terre-fonce); }

.bouton--contour {
  color: var(--encre);
  background: transparent;
  border-color: rgba(46, 34, 37, .35);
}
.bouton--contour:hover { color: var(--porcelaine); background: var(--encre); border-color: var(--encre); }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--terre);
  text-decoration: none;
  border-bottom: 1px solid rgba(74, 52, 56, .35);
  padding-bottom: 2px;
  transition: border-color .3s ease, gap .3s ease;
}
.lien-fleche::after { content: "→"; content: "→" / ""; }

/* ---------- Cadres photo (et emplacements « Photo à venir ») ----------
   Pour mettre une vraie photo : remplacer le <span class="a-venir">…</span>
   par <img src="img/ma-photo.jpg" alt="Description"> en gardant le cadre.
   La photo doit avoir le même format que le cadre (4:5, 4:3, 3:2). */

.cadre {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--craie);
  border-radius: 2px;
}
.cadre--4x5 { aspect-ratio: 4 / 5; }
.cadre--4x3 { aspect-ratio: 4 / 3; }
.cadre--3x2 { aspect-ratio: 3 / 2; }
.cadre--1x1 { aspect-ratio: 1 / 1; }

.cadre > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--douceur);
}

.a-venir {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(46, 34, 37, .8);
}
.a-venir img {
  width: min(40%, 160px);
  height: auto;
  transition: transform 1.4s var(--douceur);
}

/* Tons d'émail pour les emplacements provisoires */
.ton-terre   { background: radial-gradient(120% 95% at 28% 16%, #EDE4D6 0%, #D9C9B2 52%, #C2AD92 100%); }
.ton-gres    { background: radial-gradient(120% 95% at 72% 18%, #F0EBE0 0%, #E2D9C7 55%, #D2C6AF 100%); }
.ton-celadon { background: radial-gradient(120% 95% at 30% 18%, #ECE6DC 0%, #DCD2C2 55%, #C9BCA7 100%); }
.ton-craie   { background: radial-gradient(120% 95% at 50% 12%, #F5F1E8 0%, #E9E2D4 60%, #DCD3C1 100%); }
.ton-nuit    { background: radial-gradient(120% 95% at 34% 18%, #574549 0%, #3E2F33 55%, #2E2225 100%); }
.ton-nuit .a-venir { color: rgba(246, 242, 234, .7); }
.ton-nuit .a-venir img { filter: invert(1); opacity: .75; }

/* ---------- Sections ---------- */

.section { padding-block: var(--section); }
.section--biscuit { background: var(--biscuit); }
.section--colle { padding-top: 0; }

.section-tete {
  max-width: 44em;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section-tete h2:last-child,
.section-tete p:last-child { margin-bottom: 0; }
.section-tete p:not(.surtitre) { color: var(--encre-douce); }

.duo {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(36px, 6vw, 104px);
  align-items: center;
}
.duo--inverse > :first-child { order: 2; }
.texte { max-width: 34em; }
.texte p:not(.surtitre) { color: var(--encre-douce); }
.texte .boutons { margin-top: 1.8rem; }

/* À propos : blocs texte / photo qui alternent */
.apropos .duo + .duo { margin-top: clamp(64px, 9vw, 128px); }

@media (max-width: 700px) {
  .duo { grid-template-columns: 1fr; }
  .duo--inverse > :first-child { order: 0; }
}

/* ---------- Accueil ---------- */

.accueil-hero { padding-block: clamp(28px, 5vw, 64px) var(--section); }
.accueil-hero .conteneur {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 104px);
  align-items: center;
}

.hero-texte h1 {
  font-size: clamp(2.9rem, 6.4vw, 5.3rem);
  line-height: 1.02;
  margin-bottom: .45em;
}
.hero-texte h1 .metier {
  display: block;
  margin-top: .4em;
  font-size: .44em;
  font-style: italic;
  font-weight: 400;
  color: var(--olive);
}
.hero-texte h1 .metier::before {
  content: "";
  display: inline-block;
  width: 1.7em;
  height: 1px;
  margin-right: .55em;
  vertical-align: middle;
  background: currentColor;
}
.hero-texte .chapo { margin-bottom: 2.2rem; }

@media (max-width: 700px) {
  .accueil-hero .conteneur { grid-template-columns: 1fr; }
}

.grille-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px);
}
@media (max-width: 860px) {
  .grille-3 { grid-template-columns: 1fr; gap: 48px; }
}

.item { display: block; text-decoration: none; color: inherit; }
.item .cadre { margin-bottom: 24px; }
.item h3 { margin-bottom: .35em; }
.item p { color: var(--encre-douce); margin-bottom: 1em; }
.item:hover .cadre > img,
.item:hover .a-venir img { transform: scale(1.035); }
.item:hover .lien-fleche { border-color: var(--terre); gap: .75em; }

/* ---------- En-tête des pages intérieures ---------- */

.entete-page { padding-block: clamp(48px, 8vw, 112px) clamp(48px, 6vw, 80px); }
.entete-page h1 { margin-bottom: .4em; }
.entete-page .chapo { margin-bottom: 0; }
.entete-page .chapo + .chapo { margin-top: 1em; }
.entete-page .boutons { margin-top: 2rem; }

/* ---------- Étapes (présentation, rendez-vous) ---------- */

.etapes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 44px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.etapes--3 { grid-template-columns: repeat(3, 1fr); }
.etape { border-top: 1px solid var(--ligne); padding-top: 22px; }
.etape-num {
  display: block;
  margin-bottom: .5em;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--terre);
}
.etape h3 { font-size: 1.4rem; margin-bottom: .4em; }
.etape p { margin: 0; font-size: 1rem; color: var(--encre-douce); }

@media (max-width: 960px) { .etapes { grid-template-columns: repeat(2, 1fr); } .etapes--3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .etapes--3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .etapes { grid-template-columns: 1fr; } }

/* ---------- Rendez-vous ---------- */

.carte {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  background: var(--porcelaine);
  border: 1px solid var(--ligne);
  border-radius: 2px;
}
.carte-forme { width: 56px; height: auto; margin-bottom: 20px; }
.carte h3 { margin-bottom: .45em; }
.carte p { color: var(--encre-douce); }
.carte .carte-renvoi { margin-top: -.4em; font-size: .95rem; }
.carte dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--ligne);
  font-size: .95rem;
}
.carte dt { color: var(--encre-douce); }
.carte dd { margin: 0; }

/* Ateliers : cartes sur deux colonnes, infos (tarif, durée) en haut de la carte */
.grille-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 3vw, 44px);
  align-items: start;
}
@media (max-width: 860px) { .grille-2 { grid-template-columns: 1fr; gap: 32px; } }
.carte .carte-infos { margin: 0 0 1.3em; padding: 12px 0; border-bottom: 1px solid var(--ligne); }
.carte .cadre { margin: .2em 0 1.2em; }
/* Ateliers : photos des deux premières cartes alignées en bas (cartes de même hauteur) */
.grille-2--photos-alignees { align-items: stretch; }
.grille-2--photos-alignees .carte > .cadre:last-child { margin: auto 0 0; }

.coordonnees {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px clamp(24px, 4vw, 56px);
  margin: 0;
}
.coordonnees div { border-top: 1px solid var(--ligne); padding-top: 18px; }
.coordonnees dt {
  margin-bottom: .4em;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.coordonnees dd { margin: 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.35; }
.coordonnees dd .a-completer { font-family: var(--sans); font-size: .95rem; }
.coordonnees-note { display: block; margin-top: .5em; font-family: var(--sans); font-size: .95rem; line-height: 1.5; color: var(--encre-douce); }

@media (max-width: 760px) { .coordonnees { grid-template-columns: 1fr; } }

/* ---------- Boutique ---------- */

.grille-boutique {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 4vw, 56px) clamp(16px, 2.6vw, 36px);
}
@media (max-width: 860px) { .grille-boutique { grid-template-columns: repeat(2, 1fr); } }

.piece .cadre { margin-bottom: 18px; }
.piece h2 { font-size: clamp(1.2rem, 1.8vw, 1.42rem); margin-bottom: .25em; }
.piece-meta { margin-bottom: .55em; font-size: .92rem; line-height: 1.55; color: var(--encre-douce); }
.piece-prix {
  margin: 0;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terre);
}

.encart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  margin-top: clamp(56px, 8vw, 96px);
  padding: clamp(28px, 4vw, 48px);
  background: var(--biscuit);
  border-radius: 2px;
}
.encart h2 { font-size: clamp(1.5rem, 2.8vw, 1.95rem); margin-bottom: .25em; }
.encart p { margin: 0; color: var(--encre-douce); max-width: 32em; }
.section--biscuit .encart { background: var(--porcelaine); border: 1px solid var(--ligne); }

/* ---------- Ateliers en entreprise ---------- */

.points { list-style: none; margin: 0; padding: 0; }
.points li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-top: 1px solid var(--ligne);
  color: var(--encre-douce);
}
.points li:last-child { border-bottom: 1px solid var(--ligne); }
.points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.45em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--terre);
  opacity: .8;
}
.points strong { color: var(--encre); font-weight: 600; }

.faq { max-width: 52em; border-top: 1px solid var(--ligne); }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary {
  position: relative;
  display: block;
  padding: 20px 44px 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.18rem, 2vw, 1.35rem);
  line-height: 1.3;
  color: var(--encre);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  content: "+" / "";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--terre);
  transition: transform .3s var(--douceur);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--terre-fonce); }
.faq summary:focus-visible { outline: 2px solid var(--terre); outline-offset: 4px; }
.faq details p { margin: 0 0 22px; max-width: 44em; color: var(--encre-douce); }

.bandeau-entreprises {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px clamp(32px, 5vw, 72px);
}
.bandeau-entreprises h2 { margin-bottom: .3em; }
.bandeau-entreprises p:not(.surtitre) { margin: 0; color: var(--encre-douce); max-width: 36em; }
.bandeau-entreprises p:not(.surtitre) + p { margin-top: .9em; }
@media (max-width: 760px) { .bandeau-entreprises { grid-template-columns: 1fr; } .bandeau-entreprises .bouton { justify-self: start; } }

.essentiel { margin-top: clamp(40px, 6vw, 64px); }
@media (max-width: 760px) {
  .essentiel { grid-template-columns: 1fr 1fr; gap: 22px 20px; }
  .essentiel dd { font-size: 1.1rem; }
}
.lien-suite { margin: 1.6rem 0 0; }

/* ---------- Mentions légales ---------- */

.texte-legal { max-width: 46em; }
.texte-legal h2 { font-size: clamp(1.5rem, 2.8vw, 1.85rem); margin-top: 1.8em; }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p, .texte-legal li { color: var(--encre-douce); }
.texte-legal ul { padding-left: 1.2em; margin: 0 0 1.1em; }

/* ---------- Pied de page ---------- */

.pied {
  background: var(--encre);
  color: rgba(246, 242, 234, .78);
  padding-top: clamp(56px, 8vw, 96px);
  font-size: .95rem;
}
.pied-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
}
.pied .marque { color: var(--porcelaine); font-size: 1.8rem; }
.pied .marque-logo { height: 60px; }
.pied-metier {
  margin: .5em 0 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--terre-claire);
}
.pied-titre {
  margin: 0 0 16px;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, .55);
}
.pied ul { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pied a { color: var(--porcelaine); text-decoration: none; }
.pied a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pied :focus-visible { outline-color: var(--terre-claire); }
.pied .a-completer { color: #E6DCCB; background: rgba(221, 211, 191, .16); white-space: nowrap; }

.pied-bas { margin-top: clamp(48px, 6vw, 72px); border-top: 1px solid rgba(246, 242, 234, .12); }
.pied-bas .conteneur {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 22px;
  font-size: .85rem;
}
.pied-bas p { margin: 0; }

@media (max-width: 760px) {
  .pied-inner { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
}

/* ---------- Page 404 ---------- */

.page-404 { min-height: 55vh; display: flex; align-items: center; }

/* ---------- Animations discrètes ----------
   Fondu léger au chargement (haut de page) et au défilement (.reveal).
   Désactivées si le visiteur a demandé moins d'animations. */

@keyframes apparition {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .apparition { animation: apparition 1.1s var(--douceur) both; }
  .apparition--2 { animation-delay: .15s; }
  .apparition--3 { animation-delay: .3s; }

  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .9s var(--douceur), transform .9s var(--douceur);
    transition-delay: calc(var(--d, 0) * 100ms);
  }
  .js .reveal.visible { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}