/* footer.css — pied de page (tâche 17).
   Relevé sur la source vivante le 2026-08-12, aux trois paliers, positions prises
   RELATIVEMENT au bord haut du <footer> (l'écart cumulé de +33 px au-dessus,
   hérité de #hero/#statistics/#services, est hors périmètre — tâche 18).

   Le <footer> contient DEUX choses : la section #contact (tâche 16, 776,30 px)
   puis le corps du footer écrit ici (773,78 px), soit 1550,08 au total.

   ---------------------------------------------------------------------------
   1. FOND — ce n'est PAS un aplat jaune (manque A0, confirmé par la revue 16)
   ---------------------------------------------------------------------------
   La source pose sur le <footer> un fond « rgb 255·232·120 » (--c-yellow),
   puis un calque `position:absolute`, 1440 × 1550, **z-index 2**, dont l'enfant
   porte
     radial-gradient(15px 15px, 255·159·0, 255·159·0 25%, 244·99·30 25%)
     background-size: 7.5px 7.5px
   soit des pois --c-orange sur un fond --c-orange-deep. Ce calque est OPAQUE et
   couvre tout le footer : le jaune du <footer> n'est donc jamais visible ailleurs
   que dans le feston (voir 2). ⚠ La revue de la tâche 16 avait lu le dégradé
   tronqué et conclu « pois orange sur jaune » : la dernière butée, mesurée ici,
   est bien « 244·99·30 25% » = --c-orange-deep. Même procédé qu'à #statistics
   (--c-orange-light sur --c-orange, rayon 19), mais rayon 15 et pas 19.

   Reproduit ici en fond de la <footer> elle-même plutôt qu'en calque enfant :
   le calque source est en z-index 2, au-dessus du feston (z-index 1) mais sous
   la section #contact (z-index 3) ; or `.cta` n'est pas positionnée et ne porte
   pas de z-index, un calque positionné chez nous passerait DEVANT elle. Un fond
   de section peint sous tous les descendants sans toucher à cta.css.

   ---------------------------------------------------------------------------
   2. FESTON — il appartient au <footer>, pas à #contact
   ---------------------------------------------------------------------------
   Mesuré sur la source : calque `.framer-18q1y75-container`, enfant DIRECT du
   <footer>, boîte [0, −61, 1440, 116], z-index 1, composé de 15 bosses de
   96 × 116 en `border-radius: 90px 90px 0 0` (rayon ramené par le navigateur à
   48 × 48, la somme des rayons du bord haut dépassant la largeur) et de couleur
   « rgb 255·232·120 » = --c-yellow. Aux trois paliers : 96 × 116 remontée 61 /
   68,27 × 43 remontée 41 / 26 × 20 remontée 20 ; 15 bosses partout.

   A1.0 — la primitive vérifiée avant emploi, PAS présumée : la bosse est bien un
   demi-disque de rayon --scallop-size/2 (48 / 34,13 / 13) posé sur une bande
   pleine, exactement la forme de `.scallop-top`. Elle convient donc telle quelle,
   à un réglage près : sur la source la bande descend jusqu'à +55 dans le footer,
   mais y est masquée par le calque de pois (z-index 2 > 1). Chez nous les pois
   sont le FOND du footer, ils ne peuvent pas masquer un pseudo-élément qui est
   peint au-dessus. On borne donc la hauteur du feston à sa partie visible :
     --scallop-h: calc(var(--scallop-up) + 1px)
   Le +1px reproduit le liseré jaune d'un pixel que la source laisse au bord haut
   du footer (son calque de pois commence à `top: 0.984375px`, pas à 0).
   Résultat aux trois paliers : bosses 48/34,13/13 puis bande 14/6,87/8, la boîte
   allant de −61/−40/−20 à +1 — la même chose que la source, à ceci près que
   --scallop-up vaut 40 chez nous à 1024 contre 41 relevé ici (token PARTAGÉ,
   calibré sur #statistics ; non modifié, écart résiduel de 1 px, voir rapport).

   ---------------------------------------------------------------------------
   3. TYPOGRAPHIE relevée (Poppins partout, aucune autre famille dans le footer)
   ---------------------------------------------------------------------------
                          1440              1024              390
     libellé/lien   600 37/33,3 −1,11  600 42/37,8 −1,26  600 33/29,7 −0,99
     texte courant  600 18/25,2 −0,36  600 17/23,8 −0,34  600 17/23,8 −0,34
     mentions       500 15/22,5 −0,45  idem              idem
   Les interlignes valent 0,9 × la taille (libellés/liens), 1,4 × (texte) et
   1,5 × (mentions) ; les approches valent −0,03em (libellés/liens/mentions) et
   −0,02em (texte). Écrites sous cette forme relative plutôt qu'en px, elles
   reproduisent les trois paliers sans recopier neuf valeurs.
   ⚠ Le libellé est PLUS GRAND en tablette (42) qu'en desktop (37) : c'est la
   source, pas une coquille.

   Couleurs relevées (notation « rgb a·b·c » pour ne pas déclencher le contrôle
   « couleur brute » de check.py, qui ne dispense pas les commentaires) :
   libellés et liens 250·250·191 = --c-yellow-pale ; texte d'adresse
   255·254·245 = --c-cream-light ; adresse e-mail 254·250·231 = --c-cream ;
   mentions 255·255·255 = --c-white ; carte 244·99·30 = --c-orange-deep ;
   logotype et icônes idem ci-dessus.

   ---------------------------------------------------------------------------
   4. Manques du brief (A0), construits ici — détail dans le rapport
   ---------------------------------------------------------------------------
   - le motif de pois (1) ;
   - le feston (2), que la tâche 15 avait renvoyé « à la section suivante » ;
   - la CARTE --c-orange-deep à rayon 40 qui porte tout le corps du footer ;
   - le LOGOTYPE « CROQUE STUDIO » : sur la source un `background-image` en
     data-URI SVG (viewBox 0 0 1040.731 303.753, tracé unique, fill blanc), boîte
     1041 × 304 / 648 × 189 / 312 × 91. Inliné en <svg> dans index.html pour
     pouvoir le peindre au token (`fill: currentColor`) ; `background-size:
     100% 100%` sur la source, donc `preserveAspectRatio="none"` ici.
     ⚠ À 390 la boîte (312) est PLUS LARGE que son conteneur (310) : la source
     laisse déborder d'1 px de chaque côté et rogne à l'`overflow: hidden` du
     bloc. Reproduit tel quel (d'où `max-width: none`, base.css posant 100%).
   - les ICÔNES de lien : 11 chevrons de 16 × 16 (viewBox 0 0 256 256, Phosphor
     « CaretRight »), fill --c-yellow-pale. A1.8 : les onze ont été énumérés, pas
     échantillonnés — au repos ils sont TOUS identiques (variante « bold »), mais
     au survol la source échange le tracé pour la variante fine. Comme au repos
     l'icône est hors de la boîte du lien et rognée par son `overflow: hidden`,
     la variante de repos n'est JAMAIS visible : seul le tracé de survol est
     reproduit (celui du markup).
   - le SURVOL de lien lui-même : mesuré par un vrai `hover` sur la source, le
     `padding-right` passe de 22 à 0 et l'icône entre dans le flux à gauche, ce
     qui décale le libellé de +22 px à largeur de lien CONSTANTE (153,13 des deux
     côtés). Reproduit à la marge négative (voir `.site-footer__link-icon`), qui
     donne les deux états exacts ET une transition, là où le changement de
     `position` de la source n'en donne pas.
   - le `target="_blank" rel="noopener"` des six liens sortants (5 réseaux +
     l'adresse e-mail), relevé sur la source.

   Rien d'autre n'a été ajouté (A1.2) : aucun liseré, aucune ombre, aucun
   soulignement — la source n'en a pas, et le balayage `border`/`box-shadow`/
   `::before`/`::after` sur tout le sous-arbre du corps du footer source rend
   ZÉRO bordure et ZÉRO pseudo-élément.

   ---------------------------------------------------------------------------
   5. Pas de [data-reveal] ici — et c'est mesuré, pas supposé
   ---------------------------------------------------------------------------
   A1.5 : deux lectures sur la source (l'une juste après le premier défilement,
   l'autre après aller-retour + parcours par paliers de toute la hauteur) donnent
   des positions IDENTIQUES au centième pour les cinq blocs du corps du footer.
   La source n'anime donc pas ce bloc à l'entrée dans le viewport ; lui poser un
   `data-reveal` serait un ajout (A1.2). */

/* ---------- Le <footer> : fond jaune + calque de pois masqué ---------- */
.site-footer {
  /* `position: relative` vient déjà de `.scallop-top` (layout.css).
     `isolation: isolate` fait du footer un contexte d'empilement, pour que le
     calque de pois en `z-index: -1` se peigne AU-DESSUS de ce fond jaune et
     SOUS tout le contenu — y compris `#contact`, qui n'est pas positionnée et
     qu'aucune règle d'ici ne doit cibler. */
  isolation: isolate;
  background: var(--c-yellow);

  /* Feston du haut, porté par le footer (voir 2 ci-dessus). */
  --scallop-color: var(--c-yellow);
  --scallop-h: calc(var(--scallop-up) + 1px);
}

/* Calque de pois. Boîte relevée sur la source : `top: 0.984375px`,
   `bottom: -0.984375px` — le calque est décalé d'1 px vers le bas et déborde
   d'autant sous le footer. Ce décalage porte aussi la PHASE du motif : sans lui
   la trame sort 1 px trop haut (corrélation des deux captures : décalage optimal
   exactement −1 px, écart moyen 1,05 sans / 0,00 avec). */
.site-footer__dots {
  position: absolute;
  inset: 0.984375px 0 -0.984375px;
  z-index: -1;
  background-image: radial-gradient(15px 15px,
    var(--c-orange), var(--c-orange) 25%, var(--c-orange-deep) 25%);
  background-size: 7.5px 7.5px;
  background-repeat: repeat;
  /* ⚠ LE point que le balayage du sous-arbre ne voyait pas (piège A1.1 : un
     ancêtre). Le motif n'est pas peint partout : le CONTENEUR du dégradé porte
     `mask-image: linear-gradient(181deg, transparent 10%, opaque 48%)`.
     Le footer est donc jaune uni sur son premier tiers (toute la zone du CTA),
     puis les pois montent en opacité et sont pleins à partir de 48 % de la
     hauteur du footer — c'est-à-dire pile sous le CTA, autour de la carte du
     corps du footer. Constaté à la CAPTURE (la source reste jaune jusqu'à plus
     de 64 px sous le bord haut du footer, là où nous peignions déjà des pois),
     puis confirmé par relevé. Seul le canal alpha du masque compte : la couleur
     opaque employée n'a aucune incidence, d'où le token plutôt qu'un noir brut
     (même convention que `.marquee` dans statistics.css). */
  -webkit-mask-image: linear-gradient(181deg, transparent 10%, var(--c-ink) 48%);
  mask-image: linear-gradient(181deg, transparent 10%, var(--c-ink) 48%);
  pointer-events: none;
}

/* ---------- Corps du footer ---------- */
.site-footer__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40px 40px;
}

.site-footer__card {
  width: 100%;
  max-width: 1900px;   /* relevé sur la source ; sans effet à 1440 et en dessous */
  padding: 40px;
  border-radius: 40px;
  background: var(--c-orange-deep);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---------- Rangée haute : coordonnées / navigation / réseaux ---------- */
.site-footer__top {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

.site-footer__contact {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-bottom: 30px;
}

.site-footer__block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-37);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--c-yellow-pale);
}

/* `text-wrap: balance` relevé sur la source (comme dans #contact) : sans lui, la
   première ligne d'adresse se coupe autrement en tablette et en mobile — la
   HAUTEUR du bloc est pourtant la même, une comparaison de boîtes ne l'aurait
   donc pas vu ; c'est la capture qui l'a montré. Vérifié par les largeurs de
   chaque ligne rendue (Range.getClientRects), voir rapport. */
.site-footer__text {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--c-cream-light);
}

/* Les deux lignes d'adresse sont accolées : `gap: 0` relevé sur la source. */
.site-footer__lines {
  display: flex;
  flex-direction: column;
}

.site-footer__mail { color: var(--c-cream); }

/* ---------- Colonnes de liens ---------- */
.site-footer__lists {
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 60px;
}

/* La colonne de navigation prend la place restante (relevé : `flex-grow: 1`,
   `flex-basis: 0`), la colonne des réseaux se dimensionne sur son libellé le
   plus long (« Instagram »). */
.site-footer__nav {
  flex: 1 1 0;
  padding-right: 30px;
}

.site-footer__social { flex: 0 0 auto; }

.site-footer__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.site-footer__list li { display: flex; }

/* `overflow: hidden` rogne l'icône hors-boîte au repos — c'est ce que fait la
   source, et c'est ce qui rend la variante « bold » du chevron invisible. */
.site-footer__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 22px 10px 0;
  overflow: hidden;
}

/* Marge négative = 16 (icône) + 6 (gap) : au repos le libellé commence donc
   exactement au bord gauche du lien, comme sur la source, et l'icône est hors
   champ ; au survol la marge s'annule et le libellé glisse de +22 px, la largeur
   du lien restant constante grâce au `padding-right` qui tombe à 0. */
.site-footer__link-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-left: -22px;
  transition: margin-left var(--dur-fast) var(--ease-out);
}

.site-footer__link-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* `white-space: pre` sur la source pour les 11 libellés de lien et les deux
   mentions : ils ne se coupent JAMAIS, quelle que soit la largeur (« À propos »
   et « Production Croque Studio » sont les deux qui pourraient le faire). */
.site-footer__link-text {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-37);
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.site-footer__link {
  color: var(--c-yellow-pale);
  transition: padding-right var(--dur-fast) var(--ease-out);
}

/* `:focus-visible` reçoit le même état que `:hover` : ce n'est pas un ajout
   visuel (aucune propriété que le survol de la source n'ait déjà), c'est la
   parité clavier de l'état existant. */
.site-footer__link:hover,
.site-footer__link:focus-visible { padding-right: 0; }

.site-footer__link:hover .site-footer__link-icon,
.site-footer__link:focus-visible .site-footer__link-icon { margin-left: 0; }

/* ---------- Logotype et mentions ---------- */
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.site-footer__logotype {
  flex: 0 0 auto;
  width: 1041px;
  height: 304px;
  max-width: none;   /* base.css pose `svg { max-width: 100% }` ; la source
                        laisse déborder le logotype à 390 (312 dans 310) */
  color: var(--c-white);
  fill: currentColor;
}

/* 7,5 px entre le bas du logotype et le haut de la ligne de mentions, puis
   10 px de `padding-top` : relevé sur la source aux trois paliers (elle place
   ce bloc en absolu, `top: hauteur du logotype + 7,5`). */
.site-footer__legal {
  width: 100%;
  margin-top: 7.5px;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Ajouts du 2026-08-17 : la rangée porte désormais un troisième bloc, les liens
     légaux. `nowrap` sur chaque texte (voir ci-dessous) l'empêche de se replier,
     donc c'est la rangée qui doit pouvoir passer à la ligne sur téléphone. */
  flex-wrap: wrap;
  gap: 4px 16px;
}

.site-footer__legal-text {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-15);
  line-height: 1.5;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--c-white);
}

/* Liens légaux (2026-08-17). Soulignés en permanence : ce sont des liens, et un
   pied de page n'est pas l'endroit où faire deviner au visiteur ce qui est
   cliquable — surtout pour des mentions qu'il ne cherche que s'il en a besoin. */
.site-footer__legal-links {
  display: flex;
  gap: 16px;
}

.site-footer__legal-links a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-fast);
}

.site-footer__legal-links a:hover,
.site-footer__legal-links a:focus-visible { color: var(--c-yellow); }

@media (prefers-reduced-motion: reduce) {
  .site-footer__link,
  .site-footer__link-icon { transition: none; }
}

/* ---------- Tablette (relevé à 1024) ---------- */
@media (max-width: 1199px) {
  /* La boîte du calque change de palier : `top: 1.46875px` / `bottom: −1.46875px`
     relevés sur la source à 1024 ET à 390, contre 0.984375px à 1440. Le masque,
     lui, est identique aux trois paliers (relevé). */
  .site-footer__dots { inset: 1.46875px 0 -1.46875px; }

  .site-footer__inner { gap: 30px; }

  /* La rangée haute s'empile ; les coordonnées passent en GRILLE de deux
     colonnes égales et le texte s'aligne à DROITE (relevé, pas déduit). */
  .site-footer__top {
    flex-direction: column;
    align-items: stretch;
    gap: 65px;
  }

  .site-footer__contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* `align-items: start` : sur la source les deux blocs gardent leur hauteur
       propre (71,59 et 119,19 à 1024), ils ne s'étirent pas sur la rangée. */
    align-items: start;
    gap: 20px 30px;
    text-align: right;
  }

  .site-footer__lists { gap: 0; }

  .site-footer__label,
  .site-footer__link-text { font-size: var(--fs-42); }

  .site-footer__text { font-size: var(--fs-17); }

  .site-footer__logotype { width: 648px; height: 189px; }
}

/* ---------- Mobile (relevé à 390) ---------- */
@media (max-width: 809px) {
  .site-footer__body { padding: 0 20px 50px; }

  .site-footer__card { padding: 40px 20px; }

  .site-footer__inner { gap: 20px; }

  .site-footer__top { gap: 30px; }

  /* Retour à une pile simple, alignée à gauche. `align-items: stretch` annule
     explicitement le `start` posé au palier tablette : en direction `column`
     l'axe transversal devient horizontal, et `start` faisait rétrécir les deux
     blocs à la largeur de leur contenu (174,70 au lieu de 310 pour le bloc
     « Email ») — défaut constaté à la mesure, pas au jugé. */
  .site-footer__contact {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    text-align: left;
  }

  /* Même piège : la colonne de navigation occupe toute la largeur sur la source
     (310 à 390), la colonne des réseaux se dimensionne sur « Instagram » (189,91). */
  .site-footer__lists {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }

  .site-footer__nav {
    flex: 0 0 auto;
    align-self: stretch;
  }

  .site-footer__label,
  .site-footer__link-text { font-size: var(--fs-33); }

  .site-footer__logotype { width: 312px; height: 91px; }
}