/* ==========================================================================
   alors on pense — Communication · feuille de style principale
   Mise en page et typographie relevées dans les wireframes AOP 2026.

   ÉCHELLE TYPOGRAPHIQUE
   Les wireframes sont dessinés sur un plan de travail de 1280 px : 1 pt = 1 px.
   Les corps ci-dessous sont donc les valeurs exactes des maquettes, atteintes
   à 1280 px de large ; au-delà elles ne grandissent plus, en deçà elles
   diminuent proportionnellement (clamp : le coefficient vw vaut corps / 12,8).
   Graisses Raleway : 300 Light · 400 Regular · 500 Medium · 600 SemiBold
                      700 Bold · 800 ExtraBold · 900 Black
   ========================================================================== */

:root {
  --bg: #F1F0EB;
  --white: #FFFFFF;
  --ink: #1A1E21;
  --yellow: #FFD82B;
  --line: #1A1E21;
  --header-h: 116px;
  --pad: clamp(20px, 4vw, 64px);
  --font-logo: 'Questrial', 'Raleway', sans-serif;   /* substitut libre d'ITC Avant Garde */
  --font-main: 'Raleway', sans-serif;

  /* Corps fixes */
  --fs-note: 12px;    /* notes entre parenthèses, filet de copyright */
  --fs-meta: 14px;    /* PROJETS, filtres, légendes de figures, boutons */
  --fs-label: 15px;   /* libellés du formulaire */
  --fs-liste: 16px;   /* listes des formules de partenariat */
  --fs-corps: 20px;   /* texte courant */

  /* Corps adaptatifs — la borne haute est la valeur du wireframe */
  --fs-tag: clamp(19px, 1.875vw, 24px);       /* étiquettes jaunes, chapô */
  --fs-accent: clamp(21px, 2.1875vw, 28px);   /* Print/Digital, accroches en gras */
  --fs-baseline: clamp(24px, 2.8125vw, 36px); /* « Je serais ravie… » */
  --fs-titre: clamp(30px, 4.375vw, 56px);     /* titres de page et de section */
  --fs-num: clamp(40px, 5.625vw, 72px);       /* 01 → 04, titres de chapitre projet */
  --fs-geant: clamp(56px, 9.0625vw, 116px);   /* Pourquoi ? */
  --fs-display: clamp(62px, 11.72vw, 150px);  /* qualité, légales */
  --fs-alors: clamp(84px, 17.97vw, 230px);    /* alors ? */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-main);
  font-weight: 400;
  font-size: var(--fs-corps);
  line-height: 1.2;          /* interlignage des wireframes (120 %) */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

p + p { margin-top: 1.1em; }

/* Notes : entre parenthèses en italique, ou en romain pour les intertitres */
.small-note { font-size: var(--fs-note); font-style: italic; letter-spacing: .02em; }
.small-note a { text-decoration: underline; }
.note-plain { font-size: var(--fs-note); letter-spacing: .02em; }

.legende { font-size: var(--fs-meta); }
.link-btn { text-decoration: underline; font: inherit; }

/* Étiquette surlignée jaune (« Approche globale », téléphone…) */
.tag {
  display: inline-block;
  background: var(--yellow);
  padding: 2px 12px;
  font-weight: 500;
  font-size: var(--fs-tag);
  border-radius: 2px;
}

/* Boutons pilule */
.pill, .pill-small {
  display: inline-block;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 11px 30px;
  font-weight: 700;
  font-size: var(--fs-meta);
  transition: background .25s, color .25s;
}
.pill:hover, .pill-small:hover { background: var(--ink); color: var(--bg); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  z-index: 100;
}

.brand { display: flex; align-items: center; gap: 12px; padding: 0 var(--pad); }
.brand-mark { width: 68px; height: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-logo); font-size: 24px; letter-spacing: .01em; }
.brand-sub { font-weight: 900; font-size: var(--fs-meta); letter-spacing: .02em; }

/* L'accueil commence directement sous la barre fixe */
body.page-home main { padding-top: var(--header-h); }

.header-right { display: flex; align-items: stretch; }

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--line);
  padding: 0 40px;
  font-size: var(--fs-meta);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .25s, color .25s;
}
.cell:hover { background: var(--ink); color: var(--bg); }

.burger-cell { width: 116px; padding: 0; }
.burger-lines { display: flex; flex-direction: column; gap: 8px; width: 34px; }
.burger-lines i { display: block; height: 2px; background: currentColor; }

/* Cellules de filtre : en casse normale et en Light dans les wireframes */
.filter-cells { display: flex; align-items: stretch; }
.filter-cell {
  min-width: clamp(96px, 10vw, 150px);
  padding: 0 20px;
  font-weight: 300;
  font-size: var(--fs-meta);
  letter-spacing: .02em;
  text-transform: none;
}
.filter-cell.is-active { background: var(--ink); color: var(--bg); }

/* ==========================================================================
   Menu plein écran (wireframe 3)
   ========================================================================== */

.menu-overlay { position: fixed; inset: 0; z-index: 200; }
.menu-overlay[hidden] { display: none; }
.menu-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26, 30, 33, .18);
  opacity: 0;
  transition: opacity .3s;
}
.menu-overlay.is-open::before { opacity: 1; }

.menu-panel {
  position: absolute;
  top: var(--header-h);
  left: var(--pad);
  right: var(--pad);
  background: var(--ink);
  color: var(--bg);
  padding: clamp(40px, 7vh, 80px) clamp(24px, 4vw, 60px);
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .3s, transform .35s cubic-bezier(.4, 0, .2, 1);
}
.menu-overlay.is-open .menu-panel { opacity: 1; transform: none; }

.menu-close {
  position: absolute;
  top: clamp(14px, 2vw, 26px);
  right: clamp(14px, 2vw, 26px);
  width: clamp(34px, 3.4vw, 48px);
  height: clamp(34px, 3.4vw, 48px);
  color: var(--bg);
  transition: transform .25s;
}
.menu-close:hover { transform: rotate(90deg); }
.menu-close svg { width: 100%; height: 100%; }

.menu-list { list-style: none; text-align: center; display: flex; flex-direction: column; }
.menu-item {
  display: inline-block;
  font-size: var(--fs-titre);
  font-weight: 400;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .35s, transform .35s, color .2s;
  transition-delay: calc(var(--i) * .06s + .08s);
}
.menu-overlay.is-open .menu-item { opacity: 1; transform: none; }
.menu-item:hover { color: var(--yellow); }
.menu-item.is-current { font-weight: 800; }

/* ==========================================================================
   Accroches « +15 ans » — le bloc entre par la droite et se fige au centre
   ========================================================================== */

.slider-lines {
  padding: clamp(50px, 8vh, 100px) 0 clamp(40px, 6vh, 70px);
  overflow: hidden;
  text-align: center;
}
.slide-track {
  display: inline-flex;   /* largeur = celle du texte, pour caler le point de départ */
  flex-direction: column;
  align-items: center;
  font-size: var(--fs-titre);
  font-weight: 500;
  line-height: 1.2;
  will-change: transform;
}
.slide-item { white-space: nowrap; }
.slider-lines .small-note { margin-top: 22px; }

@media (max-width: 560px) {
  .slide-item { white-space: normal; }
}

/* ==========================================================================
   Bandeau blanc « Fichiers de qualité » et grands titres de page
   ========================================================================== */

.quality { background: var(--white); text-align: center; padding: clamp(60px, 10vh, 120px) var(--pad); }
.quality-title, .big-title { display: flex; flex-direction: column; text-align: center; }
.quality-title { margin: 22px 0 26px; }
.quality-pre, .big-title-pre { font-weight: 500; font-size: var(--fs-titre); line-height: 1.2; }
.quality-word, .big-title-word { font-weight: 300; font-size: var(--fs-display); line-height: 1; }

/* ==========================================================================
   Grille 01 → 04 (accueil, prestations, mentions légales)
   ========================================================================== */

.values-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0 var(--pad); }
.value { padding: clamp(32px, 4.5vw, 64px); position: relative; }
/* Sur très grand écran, la colonne de gauche (01, 03) s'étire jusqu'au bord
   de la page : son texte, calé à gauche, se retrouve loin du filet vertical
   et du bloc 02/04 en face. On l'accroche donc au filet (justify-self: end) :
   sa largeur se resserre sur son contenu et sa marge avec le filet reste
   celle du padding ci-dessus, fixe, quelle que soit la largeur de l'écran. */
.value:nth-child(odd) { justify-self: end; }
.value-num { display: block; font-weight: 500; font-size: var(--fs-num); line-height: 1; }
.value .tag { margin: 16px 0 18px; }
.value p { max-width: 44ch; }
.value .pill { margin-top: 24px; }

/* ==========================================================================
   Print / Digital
   ========================================================================== */

.print-digital {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 var(--pad);
  position: relative;
}
.pd-col { padding: clamp(32px, 4.5vw, 64px); position: relative; }
.pd-title { font-weight: 900; font-size: var(--fs-accent); margin-bottom: 26px; }
.pd-figure {
  /* Pas de fond : digital.png est détouré, les téléphones se posent
     directement sur le crème de la page. La photo print remplit son cadre. */
  margin-bottom: 14px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.pd-figure a { display: block; width: 100%; height: 100%; }
.pd-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.pd-col:hover .pd-figure img { transform: scale(1.04); }

/* ==========================================================================
   Carrousel projets
   ========================================================================== */

.carousel-section { padding: clamp(46px, 7vh, 90px) var(--pad) clamp(50px, 7vh, 90px); }

.carousel-zone { display: flex; align-items: center; gap: clamp(8px, 2vw, 24px); }
.caro-arrow {
  color: var(--yellow);
  font-size: 26px;
  flex: none;
  padding: 10px;
  transition: transform .2s;
  text-shadow: 0 0 1px rgba(26, 30, 33, .5);
}
.caro-arrow:hover { transform: scale(1.3); }

.carousel {
  flex: 1;
  position: relative;
  aspect-ratio: 2 / 1;   /* format des couvertures : aucun cadre, aucune marge */
  overflow: hidden;
}
.caro-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; pointer-events: none; }
.caro-slide.is-active { opacity: 1; pointer-events: auto; }
.caro-slide img { width: 100%; height: 100%; object-fit: cover; }
.caro-cta { text-align: center; margin-top: 24px; }

/* ==========================================================================
   Bandeau jaune « Vous hésitez encore ? »
   ========================================================================== */

.hesitez {
  background: var(--yellow);
  text-align: center;
  padding: clamp(40px, 7vh, 80px) var(--pad) clamp(60px, 10vh, 120px);
}
.hesitez-title { font-weight: 500; font-size: var(--fs-titre); }
.hesitez .small-note { margin-top: 14px; }

/* Avis Google : recopiés dans data/avis.php, affichés sur le bandeau jaune */
.avis {
  display: grid;
  /* colonnes plafonnées : un avis seul ne s'étire pas sur toute la largeur */
  grid-template-columns: repeat(auto-fit, minmax(240px, 360px));
  justify-content: center;
  gap: clamp(20px, 3vw, 44px);
  max-width: 1180px;
  margin: clamp(34px, 5vh, 60px) auto 0;
  text-align: left;
}
.avis-carte { display: flex; flex-direction: column; gap: 14px; }
.avis-note { font-size: 16px; letter-spacing: .12em; line-height: 1; }
.avis-etoile-vide { opacity: .3; }
.avis-texte { position: relative; font-size: var(--fs-liste); line-height: 1.35; }
.avis-texte p + p { margin-top: .8em; }

/* Avis replié : six lignes, puis un fondu vers le jaune du bandeau */
.js .avis-carte:not(.is-open) .avis-texte { max-height: calc(6 * 1.35em); overflow: hidden; }
.js .avis-carte:not(.is-open) .avis-texte::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.4em;
  background: linear-gradient(rgba(255, 216, 43, 0), var(--yellow));
}
/* Avis qui tient dans les six lignes : ni repli, ni fondu */
.js .avis-carte.avis-entier .avis-texte { max-height: none; }
.js .avis-carte.avis-entier .avis-texte::after { content: none; }

.avis-plus {
  align-self: flex-start;
  font-size: var(--fs-meta);
  font-weight: 700;
  text-decoration: underline;
  padding: 0;
}
.avis-texte p:first-child::before { content: '« '; }
.avis-texte p:last-child::after { content: ' »'; }
.avis-auteur { font-weight: 700; font-size: var(--fs-meta); margin-top: auto; }
.avis-date { font-weight: 300; }
.avis-lien { margin-top: clamp(24px, 4vh, 40px); }

/* ==========================================================================
   Section « alors ? » + formulaire (bas de toutes les pages)
   ========================================================================== */

.alors { padding: clamp(40px, 6vh, 80px) var(--pad) clamp(50px, 8vh, 100px); }
.alors-title {
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: var(--fs-alors);
  line-height: .95;
  text-align: center;
  margin-bottom: clamp(24px, 4vh, 50px);
}

.alors-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: start;
}

.alors-baseline {
  font-weight: 400;
  font-size: var(--fs-baseline);
  line-height: 1.2;
  max-width: 11ch;
  margin-bottom: clamp(30px, 5vh, 60px);
}

.alors-socials { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.alors-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  transition: transform .2s;
}
.alors-socials a:hover { transform: translateY(-3px); }
.alors-socials svg { width: 26px; height: 26px; fill: currentColor; }
.soc-behance { font-weight: 800; font-size: 24px; line-height: 1; }

/* Champs : libellé à gauche, filet 1px sous toute la ligne */
.alors-form { display: flex; flex-direction: column; }
.af-field {
  display: grid;
  grid-template-columns: clamp(78px, 8vw, 104px) minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 5px 0;
}
.af-field + .af-field { margin-top: 16px; }
.af-field label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-label); }
.af-caret { color: var(--yellow); font-size: 10px; filter: drop-shadow(0 0 .5px var(--ink)); }
.af-field input,
.af-field textarea {
  font: inherit;
  font-size: var(--fs-label);
  color: var(--ink);
  background: transparent;
  border: 0;
  width: 100%;
  padding: 7px 4px;
  transition: background .25s;
}
.af-field input:focus, .af-field textarea:focus { outline: none; background: rgba(255, 216, 43, .18); }
.af-field-msg { align-items: start; }
.af-field-msg label { padding-top: 7px; }
.af-field-msg textarea { resize: vertical; min-height: 150px; line-height: 1.4; }
.af-field.has-error { border-bottom-width: 2px; }
.field-error { grid-column: 2; font-size: var(--fs-note); font-style: italic; padding-bottom: 4px; }
.field-error::before { content: "↳ "; }

.af-actions { margin-top: clamp(24px, 4vh, 40px); }

/* Pot de miel : hors écran, invisible pour les humains */
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-feedback { border: 1px solid var(--line); padding: 20px 24px; font-size: var(--fs-label); }
.form-error { background: var(--yellow); font-weight: 600; }
.form-ok { display: flex; flex-direction: column; gap: 10px; }
.form-ok-title {
  font-family: var(--font-logo);
  font-size: var(--fs-tag);
  background: var(--yellow);
  align-self: flex-start;
  padding: 2px 12px;
}
.form-ok p + p { margin-top: 0; }

/* ==========================================================================
   Page Prestations (wireframe 5)
   ========================================================================== */

.prestations-main { padding-top: var(--header-h); }

.presta-intro { padding: clamp(46px, 7vh, 86px) var(--pad) clamp(36px, 5vh, 64px); }
.presta-title { font-weight: 500; font-size: var(--fs-titre); line-height: 1.2; margin-bottom: 30px; }
.presta-lead { font-weight: 500; font-size: var(--fs-tag); line-height: 1.25; }

.presta-white { background: var(--white); }

.partenariat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(24px, 5vw, 70px);
  padding: clamp(46px, 7vh, 86px) var(--pad) clamp(40px, 6vh, 70px);
  align-items: start;
}
.partenariat-title { font-weight: 300; font-size: var(--fs-titre); line-height: 1.15; }
.partenariat-claim { font-weight: 900; font-size: var(--fs-accent); line-height: 1.25; }

.pourquoi {
  text-align: center;
  position: relative;
  margin: 0 var(--pad);
  padding: clamp(40px, 6vh, 70px) 0 0;
}
.pourquoi-title { font-weight: 300; font-size: var(--fs-geant); line-height: 1; }
.pourquoi-claim { font-weight: 900; font-size: var(--fs-accent); line-height: 1.25; margin-top: 22px; }

.offres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(46px, 7vh, 80px) var(--pad) 0;
  align-items: start;
}
.offre {
  position: relative;
  border: 1px solid rgba(26, 30, 33, .35);
  border-radius: 22px;
  padding: clamp(22px, 2.2vw, 32px);
  background: var(--bg);
}
.offre-reco { background: var(--white); border-color: var(--ink); }
.offre-badge {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--yellow);
  border-radius: 999px;
  padding: 3px 22px;
  font-weight: 500;
  font-size: var(--fs-tag);
  white-space: nowrap;
}
.offre-prix { text-align: center; font-weight: 600; font-size: clamp(28px, 2.8125vw, 36px); line-height: 1.1; }
.offre-prix span { display: block; font-weight: 400; font-size: var(--fs-meta); }
.offre-rythme {
  text-align: center;
  font-weight: 900;
  font-size: var(--fs-accent);
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
}
.offre-list {
  list-style: none;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: var(--fs-liste);
  line-height: 1.25;
}

.offres-cta { text-align: center; padding: clamp(30px, 5vh, 50px) var(--pad) clamp(50px, 8vh, 90px); }

/* ==========================================================================
   Page Qui suis-je (wireframe 6)
   ========================================================================== */

.qsj-main { padding-top: var(--header-h); }

.qsj-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(28px, 5vw, 76px);
  padding: clamp(46px, 7vh, 86px) var(--pad) clamp(40px, 6vh, 70px);
}
.qsj-title { font-weight: 500; font-size: var(--fs-titre); line-height: 1.15; }
.qsj-text { position: relative; padding-left: clamp(22px, 3vw, 44px); }

.qsj-photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
  position: relative;
  margin: 0 var(--pad);
  padding: clamp(46px, 7vh, 86px) 0;
}
.qsj-note-1  { grid-area: 1 / 1; }
.qsj-photo-1 { grid-area: 1 / 2; }
.qsj-photo-2 { grid-area: 2 / 1; justify-self: end; }
.qsj-note-2  { grid-area: 2 / 2; }
/* Tant que la seconde photo n'a pas été fournie, la note reprend sa place */
.qsj-photos.no-photo2 .qsj-note-2 { grid-area: 2 / 1; }
.qsj-note { max-width: 34ch; }
.qsj-photo { width: clamp(150px, 18.125vw, 232px); max-width: 100%; aspect-ratio: 2 / 3; overflow: hidden; }
.qsj-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Page Contact (wireframe 7)
   ========================================================================== */

.contact-main { padding-top: var(--header-h); }

/* Bandeau blanc aux proportions du wireframe (1280 × 837 pt) */
.contact-hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
  aspect-ratio: 1280 / 837;
  min-height: 440px;
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
}
/* Grande marque « aop » : position et taille relevées sur le wireframe */
.contact-bigmark {
  position: absolute;
  left: 42.47%;      /* 543,6 / 1280 */
  bottom: 4.42%;     /* (1006 − 969) / 837 */
  width: 57.78%;     /* 739,6 / 1280 */
  pointer-events: none;
}
.contact-bigmark img { width: 100%; height: auto; }

.contact-block { position: relative; z-index: 2; max-width: 430px; }
.contact-h1 { font-weight: 900; font-size: clamp(22px, 2.34vw, 30px); margin-bottom: 20px; }
.contact-lead { margin-bottom: clamp(30px, 5vh, 56px); }
.contact-coords { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.contact-coords p + p { margin-top: 0; }
.contact-mail {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 24px;
  background: var(--bg);
  font-style: italic;
  font-size: var(--fs-tag);
  transition: background .25s, color .25s;
}
.contact-mail:hover { background: var(--ink); color: var(--bg); }
.contact-tel {
  border-radius: 999px;
  padding: 6px 22px;
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: clamp(22px, 2.34vw, 30px);
}

/* ==========================================================================
   Page Mentions légales (wireframe 8)
   ========================================================================== */

.ml-main { padding: calc(var(--header-h) + clamp(36px, 6vh, 70px)) var(--pad) clamp(50px, 8vh, 90px); }
.ml-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 70px);
  margin-top: clamp(40px, 7vh, 90px);
}
.ml-col-right {
  position: relative;
  padding-left: clamp(28px, 5vw, 70px);
  padding-top: clamp(50px, 9vh, 130px);
}
.ml-block { margin-bottom: clamp(46px, 8vh, 100px); }
.ml-block:last-child { margin-bottom: 0; }
.ml-block .value-num { margin-bottom: 4px; }
.ml-block .tag { margin: 12px 0 18px; }
.ml-block p { max-width: 42ch; }
.ml-list { list-style: none; }
.ml-list li::before { content: '— '; opacity: .6; }
.ml-list a:hover { text-decoration: underline; }
.ml-tag-statut { margin-top: 36px !important; }

/* ==========================================================================
   Page Projets (wireframe 4)
   ========================================================================== */

.projets-main { padding: calc(var(--header-h) + 26px) var(--pad) 0; }

.table-head { margin-bottom: 26px; }
.th-row { display: grid; align-items: center; position: relative; }
.th-row-1 { grid-template-columns: 1fr; padding-bottom: 9px; }
.th-col { position: relative; }
.th-btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-meta);
  font-weight: 300;
  letter-spacing: .02em;
}
.th-btn.is-set { background: var(--yellow); padding: 0 8px; font-weight: 700; }
.tri { color: var(--yellow); font-size: 11px; filter: drop-shadow(0 0 .5px var(--ink)); transition: transform .25s; }
.th-btn[aria-expanded="true"] .tri { transform: rotate(90deg); }

.th-drop {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  min-width: 230px;
  max-height: 320px;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 4px 4px 0 rgba(26, 30, 33, .12);
  display: none;
  z-index: 50;
  padding-bottom: 6px;
}
.th-drop.is-open { display: block; }
.th-drop-title { font-weight: 700; font-size: var(--fs-meta); padding: 9px 14px 6px; }
.th-drop ul { list-style: none; }
.th-drop li button { display: block; width: 100%; text-align: left; padding: 5px 16px; font-size: var(--fs-note); }
.th-drop li button::before { content: '· '; }
.th-drop li button:hover { background: var(--yellow); }

.filters-active { font-size: var(--fs-meta); margin-bottom: 18px; }
.filters-active .tag { margin-right: 8px; font-size: var(--fs-meta); }
.projects-empty { padding: 40px 0; }

/* Grandes cartes empilées */
.projects-list { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 30px); }
/* Wireframe : la couverture seule, sans cadre ni légende */
.project-card { display: block; overflow: hidden; }
.project-card.is-hidden { display: none; }
.pc-figure { aspect-ratio: 2 / 1; overflow: hidden; }
.pc-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.project-card:hover .pc-figure img { transform: scale(1.03); }

/* ==========================================================================
   Page Projet (wireframe « page projet - mathieu taborcia »)
   ========================================================================== */

.projet-main { padding: calc(var(--header-h) + 22px) var(--pad) 0; }

/* Fiche d'identité : Client en gras, le reste en Light (wireframe) */
.projet-meta .th-row-1 {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: clamp(20px, 5vw, 70px);
  padding-bottom: 8px;
}
.projet-meta .th-row-meta {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 5vw, 70px);
  padding: 8px 0;
}
.projet-meta .th-col { font-weight: 300; font-size: var(--fs-meta); }
.projet-meta .th-label { font-weight: 300; }
.projet-meta .th-value { margin-left: 8px; }
.projet-meta .th-client, .projet-meta .th-client .th-label { font-weight: 700; }

.projet-hero, .pj-figure { border: 1px solid var(--line); background: var(--white); overflow: hidden; }
.projet-hero { margin-top: clamp(24px, 4vh, 44px); }
.projet-hero img, .pj-figure img { width: 100%; height: auto; display: block; }

/* --ar : rapport largeur/hauteur relevé dans le wireframe. Quand il est posé,
   le cadre impose la proportion d'origine et le visuel la remplit. */
.projet-hero[style*="--ar"], .pj-figure[style*="--ar"] { aspect-ratio: var(--ar); }
.projet-hero[style*="--ar"] img, .pj-figure[style*="--ar"] img { height: 100%; object-fit: cover; }

/* Un bloc dont le visuel manque : le texte occupe toute la largeur */
.pj-sans-visuel { grid-template-columns: minmax(0, 1fr); }
.pj-sans-visuel .pj-chapitre-visuel:empty { display: none; }
.pj-sans-visuel .pj-chapitre-texte, .pj-sans-visuel .pj-ti-texte { padding-top: 0; }

/* Repli du bloc Avant/Après tant que les deux logos ne sont pas fournis */
.pj-texte-seul { margin-top: clamp(40px, 7vh, 90px); max-width: 44ch; }

/* Canevas : la page est reproduite aux coordonnées du wireframe (1280 pt de
   large). Chaque élément porte son x / y / largeur d'origine ; tout est
   exprimé en pourcentage, donc la mise en page reste fidèle à toute taille. */
.pj-canvas {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: clamp(24px, 4vh, 44px) auto 0;
  container-type: inline-size;
}
.pj-canvas::before { content: ''; display: block; padding-top: calc(var(--h) / 12.8 * 1%); }

.pj-el { position: absolute; left: calc(var(--x) / 12.8 * 1%); top: calc(var(--y) / var(--h) * 100%); margin: 0; }
/* Regroupe les éléments d'une même ligne du wireframe. Sur grand écran il ne
   produit aucune boîte : chaque élément reste placé à ses coordonnées. */
.pj-rangee { display: contents; }
/* Le y relevé est la ligne de base : on remonte le bloc de son ascendante
   (environ 0,8 em) pour que le texte retombe à sa place dans la maquette. */
.pj-txt { top: calc((var(--y) - var(--t) * 0.8) / var(--h) * 100%); }
.pj-img { width: calc(var(--w) / 12.8 * 1%); aspect-ratio: var(--ar); overflow: hidden; }
/* max-width: none — le visuel déborde volontairement de sa boîte,
   c'est le rognage du wireframe qui décide de la partie visible. */
.pj-img img { position: absolute; display: block; object-fit: fill; max-width: none; }
/* Carrousel dans le canevas : plusieurs visuels dans le cadre du wireframe */
.pj-caro { width: calc(var(--w) / 12.8 * 1%); aspect-ratio: var(--ar); }
.pj-caro-vue { position: relative; width: 100%; height: 100%; overflow: hidden; }
.pj-caro-vis {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s;
}
.pj-caro-vis.is-active { opacity: 1; }
.pj-caro-fl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--yellow);
  font-size: clamp(18px, 2cqw, 26px);
  padding: 10px;
  text-shadow: 0 0 2px rgba(26, 30, 33, .55);
  transition: transform .2s;
  z-index: 2;
}
.pj-caro-fl:hover { transform: translateY(-50%) scale(1.3); }
.pj-caro-prec { left: 0; }
.pj-caro-suiv { right: 0; }

/* Traits de séparation du wireframe : ils se tracent à l'arrivée dans l'écran,
   comme ceux du reste du site. */
/* Le cadre garde sa taille réelle — c'est lui que l'observateur voit — et
   seul le <i> à l'intérieur se déploie. */
.pj-trait { display: block; }
.pj-trait-h { width: calc(var(--d) / 12.8 * 1%); height: 1px; }
.pj-trait-v { width: 1px; height: calc(var(--d) / var(--h) * 100%); }
.pj-trait i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--line);
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.pj-trait-h i { transform: scaleX(0); transform-origin: left center; }
.pj-trait-v i { transform: scaleY(0); transform-origin: center top; }
.pj-trait.is-in i { transform: none; }

.pj-txt {
  font-size: calc(var(--t) / 12.8 * 1cqw);
  line-height: 1.2;
  white-space: nowrap;   /* les retours à la ligne du wireframe sont explicites */
}

.pj-suivant { text-align: right; padding: clamp(30px, 5vh, 50px) 0 clamp(40px, 7vh, 80px); }

/* Projet sans page détaillée : présentation courte */
.projet-simple {
  margin-top: clamp(24px, 4vh, 44px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 30px);
}
.projet-simple-desc { max-width: 60ch; }

/* ==========================================================================
   Footer — filet jaune de bas de page
   ========================================================================== */

.site-footer { background: var(--yellow); }
.footer-legal { text-align: center; padding: 10px var(--pad); font-size: var(--fs-note); }
.footer-legal a { text-decoration: underline; }


/* ==========================================================================
   Filets qui se tracent au scroll
   ========================================================================== */

/* Les filets de séparation ne sont plus des bordures mais des pseudo-éléments :
   ils peuvent ainsi être « dessinés » à l'arrivée dans l'écran. */
.print-digital::before, .print-digital::after,
.pourquoi::before,
.qsj-photos::before,
.table-head .th-row::after,
.projet-meta .th-row::after,
.pj-aa-legende::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.print-digital::before, .pourquoi::before, .qsj-photos::before, .pj-aa-legende::before { top: 0; }
.print-digital::after, .table-head .th-row::after, .projet-meta .th-row::after { bottom: 0; }
/* le filet du bas se trace en sens inverse : les deux partent du même bord */
.print-digital::after { transform-origin: right center; }

.print-digital.is-in::before, .print-digital.is-in::after,
.pourquoi.is-in::before,
.qsj-photos.is-in::before,
.table-head .th-row.is-in::after,
.projet-meta .th-row.is-in::after,
.pj-aa-legende.is-in::before { transform: scaleX(1); }

/* Filets verticaux : même tracé, de haut en bas */
.value:nth-child(odd)::after,
.pd-col:first-child::after,
.qsj-text::before,
.ml-col-right::before,
.pj-aa-col:first-child::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.value:nth-child(odd)::after,
.pd-col:first-child::after,
.pj-aa-col:first-child::after { right: 0; }
.qsj-text::before, .ml-col-right::before { left: 0; }

.value:nth-child(odd).is-in::after,
.pd-col:first-child.is-in::after,
.qsj-text.is-in::before,
.ml-col-right.is-in::before,
.pj-aa-col:first-child.is-in::after { transform: scaleY(1); }

/* ==========================================================================
   Apparitions au scroll
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s, transform .7s; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .pj-trait i { transform: none; transition: none; }
  .print-digital::before, .print-digital::after, .pourquoi::before, .qsj-photos::before,
  .table-head .th-row::after, .projet-meta .th-row::after, .pj-aa-legende::before,
  .value:nth-child(odd)::after, .pd-col:first-child::after, .qsj-text::before,
  .ml-col-right::before, .pj-aa-col:first-child::after { transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .offres { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

@media (max-width: 900px) {
  .values-grid, .print-digital, .partenariat, .qsj-intro, .ml-grid, .alors-grid,
  /* En dessous de 900 px, le canevas s'empile dans l'ordre de lecture */
  .pj-canvas { max-width: none; container-type: normal; }
  .pj-canvas::before { display: none; }
  /* Les deux colonnes de ces grilles s'empilent : sans ça, elles restaient
     à deux colonnes de moins de 200 px sur mobile — texte qui déborde sur
     01→04, formulaire de contact illisible (champs de 85 px de large),
     colonnes du "Qui suis-je" et des mentions légales entrelacées.
     Les ajustements internes (qsj-text, ml-col-right, af-field…) étaient
     déjà prêts un peu plus bas : il ne manquait que cet interrupteur. */
  .values-grid, .qsj-intro, .partenariat, .ml-grid, .alors-grid { grid-template-columns: 1fr; }
  .value:nth-child(odd) { justify-self: stretch; }
  /* Le retrait latéral des blocs 01→04 est fait pour deux colonnes : sur un
     téléphone il ne laissait que 267 px de texte utile sur 375. On le retire
     sur les côtés, la gouttière de page suffit ; on garde l'espace vertical. */
  .value { padding-left: 0; padding-right: 0; }
  .pj-el { position: static; margin-bottom: clamp(16px, 3vw, 30px); }
  /* Le visuel est en position absolue DANS son cadre. En repassant .pj-el en
     static, le cadre cesse d'être un repère : l'image se calait alors sur le
     canevas entier et s'étirait sur toute la hauteur de la page. On redonne
     donc un repère au cadre — mais en neutralisant left/top, sinon le cadre
     reprend la coordonnée x du wireframe et sort de l'écran. */
  .pj-img, .pj-caro { position: relative; left: auto; top: auto; }
  .pj-img { width: 100%; }
  /* Le canevas empilé devient une simple suite de blocs pleine largeur…
     sauf les éléments d'une même ligne du wireframe (logos avant / après,
     numéro et titre, libellés Avant / Après), qui restent côte à côte :
     sinon les libellés se détachent du visuel qu'ils désignent. */
  .pj-el { width: 100%; }
  /* flex-wrap : un couple qui ne tient pas sur la largeur (un numéro suivi
     d'un grand titre) passe à la ligne au lieu de sortir de l'écran. */
  .pj-rangee { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 14px; }
  /* Un élément qui a une part de largeur occupe sa colonne ; un texte sans
     part (un numéro et son titre) garde sa largeur naturelle. */
  .pj-rangee > .pj-rang { width: auto; }
  .pj-rangee > .pj-rang-part { width: calc(var(--part) * (100% - 14px)); }
  /* Options des données : masquer un élément, ou poser un fond blanc sous un
     logo transparent qui, sur grand écran, repose sur un visuel placé dessous. */
  .pj-sans-mobile { display: none; }
  .pj-fond-blanc { background: var(--white); padding: 14px; }
  .pj-trait { display: none; }   /* en pile, les traits n'ont plus de sens */
  .pj-caro { width: 100%; }

  .pj-txt {
    white-space: normal;
    font-size: clamp(15px, calc(var(--t) / 12.8 * 2.6vw), calc(var(--t) * 1px));
  }
  /* Les retours à la ligne de la maquette sont calculés pour une colonne de
     500 pt : gardés tels quels, ils laissent des lignes orphelines (« seul »,
     « à faire. ») et le texte n'occupe pas la largeur de l'écran. On les
     neutralise, le texte se recompose tout seul. */
  .pj-txt br { display: none; }
  .projet-meta .th-row-1, .projet-meta .th-row-meta { grid-template-columns: 1fr; gap: 4px; }

  .value:nth-child(odd)::after, .pd-col:first-child::after,
  .qsj-text::before, .ml-col-right::before, .pj-aa-col:first-child::after { display: none; }
  .pd-col:first-child { border-bottom: 1px solid var(--line); }

  .qsj-text { padding-left: 0; }
  .qsj-photos { grid-template-columns: 1fr; }
  .qsj-note-1, .qsj-photo-1, .qsj-photo-2, .qsj-note-2 { grid-area: auto; justify-self: start; }
  .ml-col-right { padding-left: 0; padding-top: 0; }

  .alors-baseline { max-width: none; }
  .af-field { grid-template-columns: 74px minmax(0, 1fr); }

  /* En dessous de 900 px, la marque repasse en filigrane derrière le texte */
  .contact-hero { aspect-ratio: auto; min-height: 0; padding: clamp(50px, 9vh, 110px) var(--pad); }
  .contact-bigmark { left: auto; right: -30vw; bottom: auto; top: 50%; transform: translateY(-50%); width: 120vw; opacity: .1; }
  .contact-block { max-width: none; }
  .br-wf { display: none; }   /* les retours du wireframe ne valent qu'en pleine largeur */

  .filter-cells { display: none; }   /* les filtres reviennent dans le menu sur mobile */
  .brand-text { display: none; }
  .cell { padding: 0 18px; }
  .burger-cell { width: 80px; }
  /* Couvertures de la page projets : sur mobile le cadre 3/2 rognait un
     quart de la largeur d'une couverture 2:1. On laisse la couverture
     donner sa propre hauteur — elle apparaît entière, sans déformation. */
  .pc-figure { aspect-ratio: auto; }
  .pc-figure img { height: auto; display: block; }
}

@media (max-width: 620px) {
  .menu-panel { left: 0; right: 0; top: var(--header-h); bottom: 0; }
  .menu-list { justify-content: center; height: 100%; }
}