/* ==========================================================================
   LA GRAINETERIE DU PETIT ZOO : feuille de styles
   --------------------------------------------------------------------------
   Direction artistique
   - La palette est tirée du logo de la boutique : le vert olive et le bleu
     du poisson sont les couleurs réelles de la maison. Le bleu sert d'accent,
     ce qui distingue le site des habillages beige/terracotta habituels.
   - La mise en page reprend l'objet lui-même : une devanture. Bandeau-enseigne
     peint en haut, vitrine qui déborde au bord de l'écran, puis la mention
     pratique, comme sur la porte d'un commerce.
   - La page est organisée par rayons : une section par rayon, puis une
     galerie et les coordonnées.
   - Les photos sont en tuiles de même format, en rangées toujours pleines :
     aucun vide en bout de ligne. Les rythmes, eux, varient d'une section à
     l'autre, pour que la page n'ait pas l'air d'un gabarit.

   SOMMAIRE
   00. Polices auto-hébergées
   01. Jetons de design
   02. Base
   03. Utilitaires
   04. Boutons
   05. Enseigne (en-tête) et navigation
   06. Devanture (accueil)
   07. Les rayons
   08. Le conseil
   09. Les aquariums
   10. En boutique (galerie)
   11. Nous trouver : plaque et carte
   12. Pied de page
   13. Mouvement
   14. Responsive
   15. Préférences utilisateur et impression
   ========================================================================== */


/* ==========================================================================
   00. POLICES : hébergées sur le site, pas chez Google
   --------------------------------------------------------------------------
   Aucune donnée de vos visiteurs n'est transmise à un tiers au chargement
   de la page : les fichiers sont dans le dossier polices/.

   Ce sont des polices variables : un seul fichier couvre toutes les
   graisses, d'où le « font-weight » indiqué sous forme d'intervalle.

   Chaque police est déclarée deux fois, pour deux jeux de caractères.
   Grâce à « unicode-range », le navigateur ne télécharge le second
   (latin-ext) que si la page contient réellement un de ses caractères.

   Licence : SIL Open Font License 1.1 pour les deux familles.
   Le texte complet est dans polices/LICENCE-OFL.txt, comme l'exige
   la licence. Ne pas le supprimer lors de la mise en ligne.
   ========================================================================== */

/* Ordre voulu : latin-ext AVANT latin. Les deux plages se recouvrent
   (le « œ », entre autres), et pour un caractère couvert par deux
   déclarations, le navigateur prend la dernière. Dans l'ordre inverse,
   le seul « œ » de « cœur » dans le titre faisait télécharger 52 Ko de
   plus au premier affichage, alors que la police latin le contient. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("polices/bricolage-grotesque-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("polices/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("polices/libre-franklin-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("polices/libre-franklin-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   01. JETONS DE DESIGN
   ========================================================================== */
:root {
  /* Les trois couleurs du logo sont celles du fichier vectoriel
     sources/logo.ai. Les variantes « -encre » et « -clair » en dérivent,
     assombries ou éclaircies pour atteindre le contraste requis. */
  --encre:        #1B2620;   /* texte : un vert très sombre, pas un gris   */
  --papier:       #F4F0E4;   /* écru                                       */
  --papier-fonce: #EAE3D1;   /* écru soutenu, sections alternées           */
  --vert:         #2E4A3A;   /* vert enseigne                              */
  --vert-fonce:   #21362A;   /* sections sombres, pied de page             */
  --olive:        #A4BF40;   /* vert de la feuille du logo                 */
  --olive-clair:  #BFD16A;   /* même vert, lisible sur fond sombre         */
  --bleu:         #6C9AD2;   /* bleu du poisson du logo                    */
  --bleu-profond: #15334F;   /* eau profonde : fond de la section aquariums*/
  --bleu-clair:   #8FC0EC;   /* eau claire : lisible sur le bleu profond   */
  --bleu-encre:   #2F6BAE;   /* même bleu, lisible en texte sur écru       */
  --brun:         #877023;   /* brun de la terre du logo (aplats, teintes) */
  --brun-encre:   #6E6120;   /* même brun, assombri pour rester lisible    */
  --trait:        #D7CEB6;   /* filets et bordures                         */
  --doux:         #5C5745;   /* texte secondaire                           */

  /* Deux familles nettement distinctes, avec secours système */
  --titre: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --texte: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rayons : différenciés selon le rôle, et non appliqués uniformément.
     Images plein cadre 14px, cartes 14px, boutons 8px, vitrine asymétrique. */
  --r-bouton: 8px;
  --r-carte: 14px;

  /* Ombres portées volontairement très basses */
  --ombre: 0 18px 40px -30px rgba(27, 38, 32, .55);

  --large: 1200px;
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --enseigne-h: 78px;

  --ease: cubic-bezier(.2, .6, .35, 1);
}


/* ==========================================================================
   02. BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: clamp(1rem, .97rem + .16vw, 1.0625rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--titre);
  margin: 0 0 .55em;
  text-wrap: balance;
}

h1 {
  font-weight: 800;
  font-size: clamp(2.7rem, 1.4rem + 5.4vw, 5.4rem);
  line-height: .95;
  letter-spacing: -.038em;
}

h2 {
  font-weight: 800;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.03em;
}

h3 {
  font-weight: 600;
  font-size: clamp(1.1rem, 1.03rem + .34vw, 1.28rem);
  line-height: 1.25;
  letter-spacing: -.012em;
}

p { margin: 0 0 1.05em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }

sup { font-size: .58em; vertical-align: .48em; }

a { color: inherit; }

img { display: block; max-width: 100%; height: auto; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Sélection de texte dans le bleu du logo, en version « encre » : le bleu
   d'origine est trop clair sous du texte blanc (2,9:1). */
::selection { background: var(--bleu-encre); color: #fff; }

:focus-visible {
  outline: 3px solid var(--bleu-encre);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Sur les fonds sombres, l'anneau de focus passe au vert clair du logo */
.enseigne :focus-visible,
.etape--conseil :focus-visible,
.pied :focus-visible { outline-color: var(--olive-clair); }


/* ==========================================================================
   03. UTILITAIRES
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: 300;
  padding: .7rem 1.1rem;
  background: var(--vert);
  color: var(--papier);
  border-radius: var(--r-bouton);
  font-weight: 500;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Icônes au trait : une seule règle pour tout le site */
.ico,
.carte__attente svg {
  width: 1.1em; height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   04. BOUTONS
   ========================================================================== */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-bouton);
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}

.bouton--plein {
  background: var(--vert);
  border-color: var(--vert);
  color: var(--papier);
}
.bouton--plein:hover:not(:disabled) {
  background: var(--vert-fonce);
  border-color: var(--vert-fonce);
  transform: translateY(-1px);
}

.bouton--trait {
  background: transparent;
  border-color: rgba(46, 74, 58, .4);
  color: var(--vert);
}
.bouton--trait:hover:not(:disabled) {
  background: rgba(46, 74, 58, .07);
  border-color: var(--vert);
  transform: translateY(-1px);
}

.bouton--large { width: 100%; }
.bouton:active:not(:disabled) { transform: none; }

/* Bouton désactivé : aucun effet au survol, et le curseur le dit.
   Un bouton qui réagit alors qu'il ne fait rien laisse croire à une
   panne plutôt qu'à une indisponibilité. */
.bouton:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}


/* Sur fond sombre, le bouton plein vert disparaîtrait : celui-ci s'inverse. */
.bouton--clair {
  background: var(--papier);
  color: var(--vert-fonce);
  border-color: var(--papier);
}
.bouton--clair:hover { background: #fff; border-color: #fff; }


/* ==========================================================================
   05. ENSEIGNE (EN-TÊTE) ET NAVIGATION
   --------------------------------------------------------------------------
   Bandeau plein, peint : c'est l'enseigne au-dessus de la devanture.
   ========================================================================== */
.enseigne {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--vert);
  color: var(--papier);
  transition: box-shadow .3s var(--ease);
}
.enseigne.est-defile { box-shadow: 0 10px 30px -22px rgba(27, 38, 32, .9); }

.enseigne__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--enseigne-h);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
}
.marque__poisson {
  width: 44px;
  transition: transform .4s var(--ease);
}
.marque:hover .marque__poisson { transform: rotate(-6deg) scale(1.06); }

.marque__nom {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.04;
  letter-spacing: -.02em;
}

.menu {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.menu__liste {
  display: flex;
  align-items: center;
  gap: 1.55rem;
}
.menu__lien {
  position: relative;
  display: block;
  padding: .3rem 0;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  color: rgba(244, 240, 228, .86);
  transition: color .25s var(--ease);
}
.menu__lien::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--olive-clair);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.menu__lien:hover { color: var(--papier); }
.menu__lien:hover::after { transform: scaleX(1); }

/* Section en cours de lecture (attribut posé par script.js) */
.menu__lien[aria-current="true"] { color: var(--olive-clair); }
.menu__lien[aria-current="true"]::after { transform: scaleX(1); }

.menu__tel {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  text-decoration: none;
  color: rgba(244, 240, 228, .86);
}
.menu__tel:hover { color: var(--papier); }

.burger {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid rgba(244, 240, 228, .3);
  border-radius: var(--r-bouton);
  background: transparent;
  color: var(--papier);
  cursor: pointer;
  transition: background-color .25s var(--ease);
}
.burger:hover { background: rgba(244, 240, 228, .1); }

.burger__traits {
  display: grid;
  gap: 5px;
  width: 20px;
  margin-inline: auto;
}
.burger__traits span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] .burger__traits span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__traits span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__traits span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ==========================================================================
   06. DEVANTURE (ACCUEIL)
   ========================================================================== */
.devanture {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(84vh, 740px);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  background-color: var(--papier);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Bandeau des bacs
   --------------------------------------------------------------------------
   Ce qui distingue la boutique n'apparaissait qu'à mi-page. Cette bande
   met l'eau, et le chiffre, dès le premier écran, et fait la transition
   vers la suite de la page.
   -------------------------------------------------------------------------- */
.bandeau-bacs {
  background-color: var(--bleu-profond);
  color: var(--bleu-clair);
  font-size: .95rem;
}
.bandeau-bacs p {
  margin: 0;
  max-width: none;
  padding-block: .9rem;
}
.bandeau-bacs strong {
  color: var(--papier);
  font-family: var(--titre);
  font-weight: 800;
}

/* 46vw et non 52 : la gouttière vaut 4vw et la vitrine occupe la moitié
   droite, si bien que 52vw amenait la dernière ligne du chapeau juste
   sous l'image. Il faut de l'air entre les deux, pas un contact. */
.devanture__texte { max-width: min(37rem, 46vw); }

.devanture__titre { margin-bottom: 1.5rem; }
.devanture__titre .ligne { display: block; }

.devanture__chapeau {
  font-size: clamp(1.02rem, .98rem + .35vw, 1.16rem);
  color: var(--doux);
  max-width: 44ch;
}

.devanture__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 2rem;
}

.devanture__depuis { color: var(--brun-encre); }

.devanture__mention {
  margin-top: 2.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--trait);
  max-width: 34ch;
  font-size: .9rem;
  color: var(--brun-encre);
}

/* La vitrine déborde jusqu'au bord de l'écran : angles vifs à l'extérieur,
   arrondis côté intérieur. C'est une fenêtre, pas une carte. */
.vitrine {
  position: absolute;
  background: var(--papier-fonce);   /* repli si l'image ne charge pas */
  inset: 0 0 0 auto;
  /* Pourcentage et non vw : vw compte la barre de défilement, que la
     mise en page n'a pas à sa disposition. La vitrine débordait donc
     vers la gauche de la largeur de cette barre. */
  width: 44%;
  margin: 0;
  overflow: hidden;
  border-radius: 26px 0 0 26px;
}
.vitrine img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le haut de la photo porte l'enseigne et le store : quand l'écran
     oblige à couper, on coupe plutôt le trottoir. */
  object-position: 50% 30%;
}


/* ==========================================================================
   07. LES RAYONS
   --------------------------------------------------------------------------
   Une section par rayon. Les respirations restent volontairement inégales
   d'une section à l'autre : l'alternance de fonds et de hauteurs évite
   l'effet de bandeaux empilés au cordeau.
   ========================================================================== */
.etape { padding-block: var(--section-y); }

/* Chaque étape a sa respiration propre : l'irrégularité est le sujet. */
.etape--boutique  { background-color: var(--papier);      padding-block: clamp(4rem, 8vw, 7rem) clamp(3.5rem, 7vw, 6rem); }
.etape--conseil   { background-color: var(--vert-fonce);  color: rgba(244, 240, 228, .82);
                    padding-block: clamp(4rem, 8vw, 7rem); }
.etape--chiens    { background-color: var(--papier);      padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); }
.etape--rongeurs  { background-color: var(--papier-fonce); padding-block: clamp(4rem, 8vw, 7rem) clamp(3.5rem, 7vw, 6rem); }
.etape--galerie   { background-color: var(--papier);      padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); }
.etape--trouver   { background-color: var(--papier-fonce); padding-block: clamp(4rem, 8vw, 7rem); }

/* La section des aquariums passe sous l'eau : c'est la couleur du poisson
   du logo, et c'est ce que la boutique a de singulier. Elle devient donc
   l'endroit le plus mémorable de la page, au lieu d'un écru de plus. */
.etape--aquariums {
  background-color: var(--bleu-profond);
  color: rgba(244, 240, 228, .8);
  padding-block: clamp(5rem, 10vw, 9rem) clamp(4rem, 8vw, 7rem);
}
.etape--aquariums h2 { color: var(--papier); }
/* Les marques de chaque rayon, en fin de texte. */
.etape--aquariums .etape__marques { color: var(--bleu-clair); }
.etape--aquariums .bacs__texte p,
.etape--aquariums .bacs__legende { color: rgba(244, 240, 228, .75); }
.etape--aquariums :focus-visible { outline-color: var(--bleu-clair); }

/* Fond des photos sous l'eau : un bleu un peu plus clair que la section,
   visible le temps que la photo se charge. */
.bacs__vues figure,
.etape--aquariums .tuiles figure {
  background-color: #21415F;   /* repli : résultat du mélange ci-dessous */
  background-color: color-mix(in srgb, var(--bleu-clair) 10%, var(--bleu-profond));
}

/* --------------------------------------------------------------------------
   Trois précisions du rayon aquariums
   --------------------------------------------------------------------------
   Trois colonnes séparées par un filet, comme les rubriques d'un carnet.
   Le filet est plus lisible qu'une carte : sous l'eau, trois encadrés
   feraient trois boîtes flottantes.
   -------------------------------------------------------------------------- */
.bacs__details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.8rem, 4vw, 2.6rem);
  border-top: 1px solid rgba(143, 192, 236, .22);
}

.bacs__details h3 {
  margin: 0 0 .5rem;
  font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem);
  color: var(--bleu-clair);
}
.bacs__details p {
  margin: 0;
  font-size: .95rem;
  color: rgba(244, 240, 228, .75);
}

/* --------------------------------------------------------------------------
   Grain
   --------------------------------------------------------------------------
   Un bruit très faible sur les fonds clairs. Sans lui, les aplats font
   « écran » ; avec, ils font « papier ». Le motif se répète, pèse 9 Ko et
   est servi depuis le site, et non en URI data: que la CSP bloquerait.
   -------------------------------------------------------------------------- */
.devanture,
.etape--boutique,
.etape--chiens,
.etape--rongeurs,
.etape--galerie,
.etape--trouver {
  background-image: url("images/grain.png");
  background-repeat: repeat;
}

.etape__titre { margin-bottom: clamp(2rem, 4vw, 3.2rem); }

/* Deux colonnes déséquilibrées : texte à gauche, image plus petite à droite */
.etape__corps {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
}
.etape__texte p { color: var(--doux); }

/* Sans colonne image à côté, le texte doit être bridé lui-même :
   au-delà d'une soixantaine de signes, l'œil perd la ligne suivante. */
.etape__texte--seul { max-width: 46rem; }

.etape__marques {
  margin-top: 1.4rem;
  font-size: .9rem;
  color: var(--brun-encre);
}

/* --- Cadres photo ---------------------------------------------------------
   Une inclinaison d'un degré suffit : on la remarque à peine, mais la page
   cesse d'avoir l'air posée à l'équerre par une machine.
   -------------------------------------------------------------------------- */
.cadre {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-carte);
  background-color: var(--papier-fonce);
  /* L'ombre donne aux cadres inclinés l'air d'être posés. */
  box-shadow: var(--ombre);
}
.cadre img {
  width: 100%;
  object-fit: cover;
}

.cadre--penche { transform: rotate(-1.1deg); }


/* --------------------------------------------------------------------------
   Tuiles : une rangée de photos de même format, sur toute la largeur.
   Chaque photo est recadrée par le navigateur au format de la tuile, et
   chaque rangée est pleine : pas de trou en bout de ligne ni en bas.
   -------------------------------------------------------------------------- */
.tuiles {
  display: grid;
  gap: clamp(.6rem, 1.2vw, .9rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.tuiles--3 { grid-template-columns: repeat(3, 1fr); }
.tuiles--4 { grid-template-columns: repeat(4, 1fr); }

.tuiles figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-carte);
  background-color: var(--papier-fonce);
}
.tuiles img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Rongeurs : la photo des trois animaux est très large. Elle prend deux
   parts de la rangée et fixe la hauteur ; les deux autres s'alignent. */
.tuiles--rongeurs { grid-template-columns: 2fr 1fr 1fr; }
.tuiles--rongeurs figure:first-child img { aspect-ratio: 656 / 238; }
.tuiles--rongeurs figure:not(:first-child) { position: relative; }
.tuiles--rongeurs figure:not(:first-child) img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }


/* ==========================================================================
   08. LE CONSEIL
   --------------------------------------------------------------------------
   Deux colonnes : le propos à gauche, les exemples à droite. Les exemples
   comptent autant que le propos, parce qu'ils prouvent au lieu d'affirmer.
   ========================================================================== */
.etape--conseil h2,
.etape--conseil h3 { color: var(--papier); }

.conseil {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.conseil__texte p { color: rgba(244, 240, 228, .78); }

/* La phrase qui résume, sans guillemets ni signature : ce n'est pas une
   citation, c'est ce que la boutique revendique. */
.accroche {
  margin: 1.8rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(244, 240, 228, .22);
  font-family: var(--titre);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -.015em;
  max-width: 24ch;
}
.etape--conseil .accroche { color: var(--papier); }

/* Les exemples : un filet par ligne plutôt que des puces, pour que la
   liste ait l'air d'un sommaire et non d'un argumentaire. */
.conseil__exemples h3 {
  margin: 0 0 1.1rem;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
}
.conseil__exemples ul {
  display: grid;
  gap: .75rem;
}
.conseil__exemples li {
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(244, 240, 228, .14);
  font-size: .95rem;
  color: rgba(244, 240, 228, .78);
}
.conseil__exemples li:last-child { border-bottom: 0; }

.conseil__note {
  margin-top: 1.4rem;
  font-size: .92rem;
  color: rgba(244, 240, 228, .7);
}


/* --------------------------------------------------------------------------
   Avis Google
   --------------------------------------------------------------------------
   La note est traitée comme le nombre de bacs : un chiffre, en grand, à
   côté de son explication. Elle prouve ce que la section affirme, donc
   elle se place à la fin plutôt qu'au début.
   -------------------------------------------------------------------------- */
.avis {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(244, 240, 228, .22);
}

.avis__note {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin: 0;
  font-family: var(--titre);
  color: var(--papier);
}
.avis__note strong {
  font-weight: 800;
  font-size: clamp(3rem, 2rem + 5vw, 5rem);
  line-height: .85;
  letter-spacing: -.05em;
}
.avis__note span { font-size: 1rem; font-weight: 600; }

.avis__nombre {
  margin: .5rem 0 0;
  font-size: .9rem;
  line-height: 1.35;
  color: var(--olive-clair);
}

.avis__texte p { color: rgba(244, 240, 228, .78); }
.avis__texte .bouton { margin-top: 1.1rem; }

.avis__mention {
  margin-top: 1.1rem;
  font-size: .82rem;
  line-height: 1.5;
  color: rgba(244, 240, 228, .6);
}


/* ==========================================================================
   09. LES AQUARIUMS
   ========================================================================== */
.bacs {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(1.5rem, 5vw, 4.5rem);
}

/* Trente-deux : le chiffre qu'aucun modèle n'invente. Traité comme une
   image, pas comme du texte courant. */
.bacs__compte { align-self: start; }

.bacs__nombre {
  margin: 0;
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(5rem, 3rem + 11vw, 12rem);
  line-height: .8;
  letter-spacing: -.06em;
  color: var(--bleu-clair);
}
.bacs__legende {
  margin: .6rem 0 0;
  max-width: 16ch;
  font-size: .92rem;
  color: var(--doux);
}
.bacs__texte { padding-top: clamp(.5rem, 2vw, 1.5rem); }
.bacs__texte p { color: var(--doux); }

/* Le mur de bacs et le matériel sur une même rangée : le mur prend deux
   parts et fixe la hauteur, le matériel s'y aligne. La rangée de poissons
   suit, au même écart, pour former un seul ensemble. */
.bacs__vues {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(.6rem, 1.2vw, .9rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.bacs__vues figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-carte);
}
.bacs__vues img { width: 100%; object-fit: cover; }
.bacs__vues figure:first-child img { aspect-ratio: 16 / 9; }
/* Sortie du flux : sans cela, la photo du matériel, en portrait,
   agrandissait la rangée et laissait un vide sous le mur de bacs. */
.bacs__vues figure:last-child { position: relative; }
.bacs__vues figure:last-child img { position: absolute; inset: 0; height: 100%; }
.bacs__vues + .tuiles { margin-top: clamp(.6rem, 1.2vw, .9rem); }


/* ==========================================================================
   10. EN BOUTIQUE (galerie)
   --------------------------------------------------------------------------
   Colonnes : accepte n'importe quel nombre de photos et conserve les
   proportions d'origine, ce qui évite l'effet « grille de vignettes ».
   ========================================================================== */
.galerie__titre { margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }

.galerie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, 1.2vw, .9rem);
}
.galerie figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-carte);
}
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galerie figcaption {
  padding: .55rem .15rem 0;
  font-size: .85rem;
  color: var(--doux);
}



/* ==========================================================================
   11. NOUS TROUVER
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: stretch;
}

.plaque,
.carte {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
}
.plaque { padding: clamp(1.5rem, 3vw, 2.2rem); }

.plaque__titre {
  padding-bottom: 1.1rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--trait);
}

.plaque__avis { margin: .9rem 0 0; font-size: .92rem; }

.plaque__infos { margin: 0 0 1.8rem; display: grid; gap: 1.2rem; }
.plaque__infos dt {
  margin-bottom: .15rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--brun-encre);
}
.plaque__infos dd { margin: 0; color: var(--doux); }
/* Les liens de contact prennent le bleu du logo : c'est le seul endroit
   où il apparaît en aplat, et il signale une action (appeler, écrire). */
.plaque__infos a {
  color: var(--bleu-encre);
  text-decoration: none;
  font-weight: 500;
}
.plaque__infos a:hover { text-decoration: underline; }

/* --- Emplacement réservé à la carte --- */
.carte {
  overflow: hidden;
  min-height: 380px;
  padding: 10px;
  background: var(--papier-fonce);
}
.carte__attente {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .25rem;
  height: 100%;
  min-height: 360px;
  padding: 2rem;
  text-align: center;
  border: 2px dashed var(--trait);
  border-radius: 10px;
  color: var(--doux);
}
.carte__attente svg {
  width: 32px; height: 32px;
  margin-bottom: .5rem;
  color: var(--olive);
}
.carte__titre {
  margin: 0;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--encre);
}
.carte__aide { margin: 0; max-width: 34ch; font-size: .9rem; }
.carte__bouton { margin-top: 1.2rem; }

/* Carte chargée après consentement */
.carte__cadre {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Cibles tactiles
   --------------------------------------------------------------------------
   Le WCAG 2.2 AA demande 24 px de côté au minimum pour un élément
   interactif. Les liens de liste n'atteignaient que 16 à 19 px de haut :
   lisibles, mais difficiles à viser au pouce.

   On agrandit la zone cliquable par du remplissage vertical, sans toucher
   à la taille du texte : l'apparence bouge à peine, la cible double.
   -------------------------------------------------------------------------- */
.pied__col ul a,
.pied__bas a,
.plaque__infos a,
.menu__tel {
  display: inline-block;
  padding-block: .32rem;
}
/* Le remplissage ajouté écarte les lignes : on resserre d'autant */
.pied__col ul { gap: .2rem; }


/* ==========================================================================
   11b. PAGES DE TEXTE (confidentialité, conditions générales)
   --------------------------------------------------------------------------
   Deux pages sans photo, où seule compte la lisibilité. Une seule colonne
   étroite : au-delà d'une certaine largeur, l'œil perd la ligne suivante.
   ========================================================================== */
.page-texte {
  background-color: var(--papier);
  background-image: url("images/grain.png");
  background-repeat: repeat;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 9vw, 7rem);
}

.page-texte__corps { max-width: 48rem; }

.page-texte__retour {
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  font-size: .9rem;
}

.page-texte h1 { margin-bottom: 1.2rem; }

.page-texte__chapeau {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem);
  color: var(--doux);
  margin-bottom: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(1.5rem, 4vw, 2.2rem);
  border-bottom: 1px solid var(--trait);
}

/* Le titre reste attaché à son paragraphe : l'espace au-dessus est large,
   celui au-dessous est court. */
.page-texte h2 {
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
  margin-top: clamp(2.2rem, 5vw, 3rem);
  margin-bottom: .6rem;
}

.page-texte p { color: var(--doux); }

.page-texte__liste {
  list-style: disc;
  margin: .8rem 0 0;
  padding-left: 1.3rem;
  color: var(--doux);
}
.page-texte__liste li { margin-bottom: .5rem; }
.page-texte__liste li::marker { color: var(--brun-encre); }

.page-texte__date {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--trait);
  font-size: .88rem;
}

.page-texte__voisin { margin-top: .4rem; font-size: .9rem; }

/* Les deux pages d'information, listées sous les mentions légales. */
.pied__legal { margin: .9rem 0 0; display: grid; gap: .35rem; font-size: .9rem; }


/* ==========================================================================
   11c. PAGE D'ERREUR (404)
   --------------------------------------------------------------------------
   Une page d'erreur doit faire deux choses : dire ce qui s'est passé sans
   jargon, et proposer où aller. Le numéro est traité comme un motif, en
   arrière-plan du titre, parce qu'il ne veut rien dire pour un visiteur.
   ========================================================================== */
.erreur {
  background-color: var(--papier);
  background-image: url("images/grain.png");
  background-repeat: repeat;
  padding-block: clamp(4rem, 10vw, 8rem) clamp(5rem, 11vw, 9rem);
}

.erreur__corps { max-width: 42rem; }

/* Contraste volontairement très faible, et c'est assumé : ce nombre est
   un motif de fond, pas une information. Il porte aria-hidden, et le titre
   dit la même chose en toutes lettres juste en dessous. Le rendre lisible
   le mettrait en concurrence avec le titre, qui est ce qu'il faut lire. */
.erreur__code {
  margin: 0 0 -.35em;
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(6rem, 4rem + 14vw, 14rem);
  line-height: .8;
  letter-spacing: -.06em;
  color: var(--papier-fonce);
}

.erreur h1 { position: relative; }

.erreur__chapeau {
  margin-top: 1.2rem;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem);
  color: var(--doux);
}

.erreur__liens {
  display: grid;
  gap: 0;
  margin-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--trait);
}
.erreur__liens li { border-bottom: 1px solid var(--trait); }
.erreur__liens a {
  display: block;
  padding: .85rem .2rem;
  font-family: var(--titre);
  font-weight: 600;
  text-decoration: none;
}
.erreur__liens a:hover,
.erreur__liens a:focus-visible { text-decoration: underline; }

.erreur__secours {
  margin-top: clamp(1.8rem, 4vw, 2.5rem);
  font-size: .95rem;
  color: var(--doux);
}


/* ==========================================================================
   12. PIED DE PAGE
   ========================================================================== */
.pied {
  background: var(--vert-fonce);
  color: rgba(244, 240, 228, .72);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  font-size: .93rem;
}

.pied__grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  padding-bottom: 3rem;
}

/* Le logo est posé sur une plaque claire : il reste lisible sur le vert */
.pied__logo {
  width: 170px;
  margin-bottom: 1.2rem;
  padding: .9rem 1.1rem;
  background: var(--papier);
  border-radius: var(--r-carte);
}
.pied__baseline { margin: 0; font-size: .88rem; }

.pied__reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  margin-top: 1rem;
}

.pied__col h2 {
  margin: 0 0 1rem;
  font-family: var(--texte);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--olive-clair);
}
.pied__col ul { display: grid; gap: .5rem; }
.pied__col a { text-decoration: none; transition: color .25s var(--ease); }
.pied__col a:hover { color: var(--papier); text-decoration: underline; }

.legal { margin-bottom: 1.2rem; }
.legal summary {
  cursor: pointer;
  padding: .4rem 0;
  list-style: none;
  transition: color .25s var(--ease);
}
.legal summary::-webkit-details-marker { display: none; }
.legal summary::before {
  content: "+";
  display: inline-block;
  width: 1.1em;
  color: var(--olive-clair);
}
.legal[open] summary::before { content: "–"; }
.legal summary:hover { color: var(--papier); }
.legal__corps { padding: .7rem 0 .2rem; font-size: .84rem; line-height: 1.55; }
.legal__corps p { margin-bottom: .55rem; }
.legal__corps strong { color: rgba(244, 240, 228, .92); }

.pied__credit { font-size: .82rem; color: rgba(244, 240, 228, .55); }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem;
  padding-block: 1.4rem;
  border-top: 1px solid rgba(244, 240, 228, .14);
  font-size: .85rem;
}
.pied__bas p { margin: 0; max-width: none; }
/* .6 et non .5 : à .5, le contraste tombait à 4,07, sous le minimum de
   4,5 exigé pour un texte de cette taille. */
.pied__auteur { color: rgba(244, 240, 228, .6); }

.pied__bas a { text-decoration: none; }
.pied__bas a:hover { color: var(--papier); }


/* ==========================================================================
   13. MOUVEMENT
   --------------------------------------------------------------------------
   Un seul moment orchestré : l'ouverture de la devanture au chargement.
   Ailleurs, une apparition sobre par bloc, en opacité surtout.
   ========================================================================== */
@keyframes monte {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* La vitrine s'ouvre de gauche à droite, comme un rideau que l'on tire */
@keyframes ouvre {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}

.js .devanture__titre .ligne,
.js .devanture__chapeau,
.js .devanture__actions,
.js .devanture__mention { animation: monte .7s var(--ease) backwards; }

.js .devanture__titre .ligne:nth-child(1) { animation-delay: .06s; }
.js .devanture__titre .ligne:nth-child(2) { animation-delay: .14s; }
.js .devanture__titre .ligne:nth-child(3) { animation-delay: .22s; }
.js .devanture__chapeau  { animation-delay: .34s; }
.js .devanture__actions  { animation-delay: .42s; }
.js .devanture__mention  { animation-delay: .5s; }

.js .vitrine { animation: ouvre .95s var(--ease) .1s backwards; }

/* Apparition au défilement, appliquée aux blocs et non à chaque élément */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.est-visible { opacity: 1; transform: none; }


/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

/* --- Bureau étroit ---
   Le seuil est passé de 1080 à 1200 px avec la sixième entrée de menu :
   en dessous, le numéro ne laissait plus que 24 px entre le logo et les
   liens. Il reste joignable par la fiche « Nous trouver ». ----------- */
@media (max-width: 1200px) {
  .menu { gap: 1.2rem; }
  .menu__liste { gap: 1.1rem; }
  .menu__tel { display: none; }
}

/* --- Les colonnes déséquilibrées se remettent d'aplomb --- */
@media (max-width: 1000px) {
  .contact { grid-template-columns: 1fr; }
  .etape__corps { grid-template-columns: 1fr; }
  .conseil { grid-template-columns: 1fr; }
  .avis { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
  .bacs { grid-template-columns: 1fr; gap: 1.5rem; }
  .bacs__details { grid-template-columns: 1fr 1fr; }
  .bacs__texte { padding-top: 0; }
  .bacs__legende { max-width: none; }
}

/* --- Tablette : menu burger, une colonne ---
   Le seuil est à 1000 px et non 900 : avec six entrées, la barre de
   navigation toucherait le logo avant cette largeur. ----------------- */
@media (max-width: 1000px) {

  .burger { display: block; }

  /* Le panneau se cale sur l'enseigne (déjà positionnée en sticky) et non
     sur son contenu : il occupe pile la largeur de l'écran, sans déborder. */
  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    padding: .8rem var(--gouttiere) 1.4rem;
    background: var(--vert-fonce);
    box-shadow: 0 22px 36px -26px rgba(27, 38, 32, .95);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease),
                visibility .3s var(--ease);
  }
  .menu.est-ouvert { opacity: 1; visibility: visible; transform: none; }

  .menu__liste { display: grid; gap: 0; }
  .menu__liste li { border-bottom: 1px solid rgba(244, 240, 228, .14); }
  .menu__lien { padding: .9rem .2rem; font-size: 1.05rem; }
  .menu__lien::after { display: none; }

  .menu__tel { display: inline-flex; margin-top: 1.1rem; }

  /* Devanture : la vitrine repasse dans le flux, sous le texte */
  .devanture {
    display: block;
    min-height: 0;
    padding-bottom: 0;
  }
  .devanture__texte { max-width: none; }
  .vitrine {
    position: static;
    width: auto;
    margin-top: clamp(2.5rem, 6vw, 3.5rem);
    height: min(58vh, 420px);
    border-radius: var(--r-carte) var(--r-carte) 0 0;
  }



  .pied__grille { grid-template-columns: 1fr 1fr; }
}

/* --- Mobile --- */
@media (max-width: 620px) {

  .marque__poisson { width: 38px; }
  .marque__nom { font-size: .92rem; }

  .devanture__actions .bouton { width: 100%; }

  /* Sur un écran étroit, l'inclinaison des photos ne se lit plus comme un
     parti pris mais comme un défaut d'affichage, donc on la retire. */
  .cadre--penche { transform: none; }

  /* Une seule colonne, sauf pour les poissons qui restent par deux.
     Chaque photo reprend alors son propre format. */
  .tuiles--3,
  .tuiles--rongeurs,
  .bacs__vues { grid-template-columns: 1fr; }
  .tuiles--4 { grid-template-columns: repeat(2, 1fr); }
  .tuiles--rongeurs figure:not(:first-child) img,
  .bacs__vues figure:last-child img { position: static; height: auto; aspect-ratio: 4 / 3; }

  .bacs__details { grid-template-columns: 1fr; gap: 1.6rem; }

  .galerie { grid-template-columns: repeat(2, 1fr); }

  .pied__grille { grid-template-columns: 1fr; }
  .pied__bas { justify-content: center; text-align: center; }
}


/* ==========================================================================
   15. PRÉFÉRENCES UTILISATEUR ET IMPRESSION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .enseigne, .carte, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .etape { padding-block: 1.5rem; }
  .tuiles figure, .bacs__vues figure, .plaque, .bacs, .conseil__exemples li { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}