/* ==========================================================================
   MES PROJETS — grille, liste et pages projet
   Chaque projet garde sa palette (variables --c1 / --c2 posées par js/projets.js).
   ========================================================================== */

.vue[hidden] { display: none; }
.large { max-width: 1240px; margin: 0 auto; padding: calc(var(--hauteur-entete) + clamp(30px, 6vw, 70px)) var(--marge) 80px; }
.projets-haut { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.projets-haut h1 { font-size: clamp(3rem, 9vw, 7rem); }
.projets-haut .phrase { font-family: var(--serif); font-style: italic; color: var(--bleu); font-size: clamp(1.4rem, 3vw, 2.2rem); margin: .3em 0 0; }

/* ---------- Grille ---------- */
.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.tuile { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; display: block; color: var(--creme); text-decoration: none; isolation: isolate; background: linear-gradient(150deg, var(--c1), var(--c2)); }
.tuile .fond { position: absolute; inset: 0; z-index: -1; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.tuile .fond img { width: 100%; height: 100%; object-fit: cover; }
.tuile::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to top, rgba(46, 32, 25, .78), rgba(46, 32, 25, 0) 55%); }
.tuile:focus-visible .fond { transform: scale(1.04); } @media (hover: hover) and (pointer: fine) { .tuile:hover .fond { transform: scale(1.04); } }
.tuile .etiq { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: .65rem; letter-spacing: .2em; opacity: .55; }
.tuile .tags { position: absolute; top: 14px; left: 16px; display: flex; gap: 6px; flex-wrap: wrap; }
.tuile .tags span { background: color-mix(in srgb, var(--creme) 90%, transparent); color: var(--chocolat); font-size: .7rem; padding: 4px 10px; border-radius: 99px; }
.tuile .nom { position: absolute; left: 18px; bottom: 16px; right: 18px; display: flex; align-items: center; gap: 10px; font-family: var(--titre); text-transform: uppercase; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1; }
.tuile .fleche { display: inline-block; width: 0; overflow: hidden; transition: width .3s; font-family: var(--texte); }
.tuile:focus-visible .fleche { width: 1.1em; } @media (hover: hover) and (pointer: fine) { .tuile:hover .fleche { width: 1.1em; } }

/* ---------- Liste ---------- */

/* ---------- Page projet ---------- */
.barre-projet { max-width: 1240px; margin: 0 auto; padding: calc(var(--hauteur-entete) + 14px) var(--marge) 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.barre-projet .etiquette { font-size: .72rem; letter-spacing: .2em; opacity: .7; }
.hero { position: relative; min-height: clamp(380px, 72vh, 700px); display: flex; align-items: flex-end; color: var(--creme); isolation: isolate; }
.hero .fond-hero { position: absolute; inset: 0; z-index: -1; background: linear-gradient(150deg, var(--c1), var(--c2)); overflow: hidden; }
.hero .fond-hero img, .hero .fond-hero video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; }
.hero .fond-hero img { filter: blur(var(--flou, 0px)); scale: var(--agrandi, 1); }   /* option hero.flou (textes.js) : photo légèrement floue derrière le titre */
.hero .fond-hero.charge::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(46, 32, 25, .72), rgba(46, 32, 25, 0) 48%); }   /* garde le titre lisible sur la photo */
.hero:has(.fond-hero.charge) .legende-visuel { display: none; }
/* haut de page sur fond clair : visuel montré en entier, titre en chocolat dessous */
@media (max-width: 700px) { .hero.hero-ratio { min-height: 600px !important; } }   /* mobile : assez haut pour que le titre ne cache pas le logo de l'image */
.hero-claire { display: block; min-height: 0; color: var(--chocolat); }
.hero-claire .fond-hero { position: relative; inset: auto; z-index: auto; width: 100%; height: min(66.67vw, 70vh); background: #EDE0CB; }
.hero-claire .fond-hero img { object-fit: contain; }   /* image 3:2 : toute la largeur jusqu\u00e0 70 % de la hauteur de l\u00e9cran, puis centr\u00e9e */
.hero-claire .fond-hero.charge::after { display: none; }
.hero.hero-claire h1 { color: var(--chocolat); margin: clamp(22px, 3.5vw, 44px) 0 0; }
.hero-claire:has(.fond-hero.charge) h1 em { color: var(--bleu); }
/* photo cadrée en haut de page, titre dessous (hero.titreDessous) : rien ne passe par-dessus la photo */
.hero-photo .fond-hero { height: min(48vw, 76vh); background: linear-gradient(150deg, var(--c1), var(--c2)); }
.hero-photo .fond-hero img { object-fit: cover; object-position: var(--pos, 50% 50%); }
.tuile.claire { color: var(--chocolat); }
.tuile.claire::before { display: none; }
.hero .legende-visuel { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); }
.hero h1 { color: var(--creme); font-size: clamp(2.8rem, 8vw, 7rem); line-height: .95; margin: 0 0 clamp(26px, 4vw, 50px); }
.hero:has(.fond-hero.charge) h1 em { color: var(--bleu); }   /* chute en bleu quand une photo est chargée (sur le fond de couleur provisoire, elle reste crème pour être lisible) */
.hero h1 em { display: block; color: var(--creme); font-size: 1.05em; line-height: 1.1; margin-top: .05em; }
.pastille-visuel { display: inline-block; background: rgba(46, 32, 25, .6); color: var(--creme); font-size: .68rem; letter-spacing: .12em; padding: 7px 12px; border-radius: 99px; max-width: 90%; text-align: center; line-height: 1.4; }
.hero .pastille-visuel { font-size: .75rem; }
.conteneur { max-width: 1240px; margin: 0 auto; padding: 0 var(--marge); }
.intro { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr); gap: clamp(24px, 5vw, 80px); padding: clamp(36px, 6vw, 80px) 0; }
.intro .accroche { font-size: .72rem; letter-spacing: .18em; opacity: .65; margin-bottom: 14px; }
.intro .lead { font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.5; margin: 0; }
.intro .lead.court { font-family: var(--titre); text-transform: uppercase; font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.06; }
.intro > div:has(.lead.court) { align-self: center; }
.intro .lead.court em { display: block; margin-top: .15em; text-wrap: balance; font-family: var(--serif); text-transform: none; font-size: 1.08em; }   /* la chute passe à la ligne */
/* bande « demande · idée · à retenir » */
.bande3 { background: var(--creme-fonce); padding: clamp(34px, 5vw, 64px) 0; width: 100%; }
.bande3 { position: relative; }
.bande3-grille { width: 100%; box-sizing: border-box; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bande3-case { padding: 0 clamp(16px, 3vw, 44px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.bande3-case + .bande3-case { border-left: 1px solid rgba(46, 32, 25, .16); }
.bande3-icone { height: clamp(86px, 10vw, 128px); width: auto; max-width: none; flex: none; margin-bottom: 14px; filter: drop-shadow(0 6px 6px rgba(46, 32, 25, .22)); transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.bande3-case:nth-child(1) .bande3-icone { transform: rotate(-6deg); }
.bande3-case:nth-child(2) .bande3-icone { transform: rotate(3deg); }
.bande3-case:nth-child(3) .bande3-icone { transform: rotate(-3deg); }
@media (hover: hover) and (pointer: fine) { .bande3-case:hover .bande3-icone { transform: rotate(0) scale(1.08); } }
.bande3-case small { font-family: var(--titre); text-transform: uppercase; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: .02em; margin-bottom: 10px; }
.bande3-case p { margin: 0; font-size: .95rem; line-height: 1.5; max-width: 30ch; }
.bande3-case p em { display: block; margin-top: .35em; font-size: 1.25em; line-height: 1.2; text-wrap: balance; }
@media (max-width: 760px) {
  .bande3-grille { grid-template-columns: 1fr; gap: 34px; }
  .bande3-case + .bande3-case { border-left: 0; border-top: 1px solid rgba(46, 32, 25, .16); padding-top: 30px; }
}
.meta dt { font-size: .62rem; letter-spacing: .18em; opacity: .6; margin-top: 16px; }
.meta dt:first-child { margin-top: 0; }
.meta dd { margin: 4px 0 0; font-size: .85rem; line-height: 1.5; text-transform: uppercase; letter-spacing: .03em; }
.meta dd em { text-transform: none; letter-spacing: 0; font-size: 1.15em; }

/* visuels (bloc de couleur du projet tant que l'image manque) */
.visuel { position: relative; overflow: hidden; display: grid; place-items: center; color: var(--creme); background: linear-gradient(150deg, var(--c1), var(--c2)); text-align: center; }
.visuel img, .visuel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visuel .pastille-visuel { position: relative; z-index: 1; }
.visuel.charge .pastille-visuel { display: none; }
.pleine { aspect-ratio: 16 / 8; }
.pleine.entier { aspect-ratio: 1586 / 992; }
.pleine-entier { margin: clamp(64px, 10vw, 140px) 0 0; }
.pleine-entier.centree { margin: 21px 0 80px; }   /* avec l'espace propre au bloc du dessus : 80 px au-dessus comme en dessous */
.pleine-entier figcaption { margin: 14px 16px 0; text-align: center; font-size: .78rem; letter-spacing: .04em; color: var(--chocolat); }
.vid { aspect-ratio: 16 / 8; margin: clamp(30px, 5vw, 60px) 0; }
.vid .lecture { position: relative; z-index: 1; width: 74px; height: 74px; border-radius: 50%; border: 0; background: rgba(251, 250, 246, .92); color: var(--chocolat); display: grid; place-items: center; font-size: 1.6rem; padding-left: 5px; margin-bottom: 14px; cursor: pointer; }
.vid .contenu-vid { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.vid.charge .contenu-vid { display: none; }
.vid.charge video { cursor: pointer; }
.vid { position: relative; }
/* carte interactive */
.carte-inter { padding: clamp(10px, 3vw, 40px) 0; }
.carte-epoques { margin: 0 auto clamp(20px, 3vw, 36px); max-width: 900px; }
.carte-epoques img { display: block; width: 100%; height: auto; border-radius: 8px; }
.carte-grille { display: flex; flex-direction: column; gap: clamp(18px, 2.5vw, 30px); }
.carte-plan { position: relative; border-radius: 8px; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 10px 26px -12px rgba(46, 32, 25, .45); }
.carte-plan > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.carte-pastille { position: absolute; z-index: 2; width: clamp(24px, 3.1vw, 32px); height: clamp(24px, 3.1vw, 32px); margin: calc(clamp(24px, 3.1vw, 32px) / -2) 0 0 calc(clamp(24px, 3.1vw, 32px) / -2);
  border-radius: 50%; border: 2px solid #fff; background: var(--pc); color: #fff; font-family: var(--titre); font-size: clamp(.8rem, 1.3vw, 1rem); cursor: pointer; display: grid; place-items: center; padding: 0;
  box-shadow: 0 3px 8px rgba(46, 32, 25, .4); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.carte-pastille.on { transform: scale(1.3); z-index: 4; } @media (hover: hover) and (pointer: fine) { .carte-pastille:hover { transform: scale(1.3); z-index: 4; } }
.carte-bulle { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 26px)); background: var(--creme); color: var(--chocolat); border-radius: 10px; padding: 9px 14px; text-align: center; white-space: nowrap; pointer-events: none;
  box-shadow: 0 8px 18px -4px rgba(46, 32, 25, .4); border-bottom: 3px solid var(--pc); line-height: 1.25; }
.carte-bulle.bas { transform: translate(-50%, 26px); }
.carte-bulle p { margin: 4px 0 0; font-size: .78rem; white-space: normal; max-width: 24ch; }
.carte-bulle b { display: block; font-size: .85rem; }
.carte-bulle span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pc); font-weight: 700; }
.carte-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px; align-items: start; }
.carte-ligne { width: 100%; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: center; text-align: left; padding: 9px 12px; border: 0; border-radius: 10px; cursor: pointer; background: transparent; color: var(--chocolat); font: inherit; transition: background .25s; }
.on > .carte-ligne { background: var(--creme-fonce); } @media (hover: hover) and (pointer: fine) { .carte-ligne:hover { background: var(--creme-fonce); } }
.carte-ligne .num { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--pc); color: #fff; font-family: var(--titre); display: grid; place-items: center; }
.carte-ligne .nom { font-weight: 600; font-size: .95rem; }
.carte-ligne .per { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pc); font-weight: 700; }
.carte-detail { margin: 0; padding: 0 12px 0 54px; font-size: .85rem; line-height: 1.5; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s, opacity .4s, padding .4s; }
.on > .carte-detail { max-height: 120px; opacity: 1; padding: 4px 12px 10px 54px; }
@media (max-width: 900px) { .carte-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .carte-liste { grid-template-columns: 1fr; } .carte-bulle { white-space: normal; max-width: 70%; } }
.legende-survol { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 38px 18px 16px; text-align: center; color: var(--creme); font-family: var(--titre); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(.95rem, 1.6vw, 1.2rem); line-height: 1.25;
  background: linear-gradient(to top, rgba(46, 32, 25, .78), rgba(46, 32, 25, 0)); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; pointer-events: none; }
.visuel:focus-within .legende-survol { opacity: 1; transform: none; } @media (hover: hover) and (pointer: fine) { .visuel:hover .legende-survol { opacity: 1; transform: none; } }
@media (hover: none) { .legende-survol { opacity: 1; transform: none; } }
.bouton-son { position: absolute; right: 16px; bottom: 16px; z-index: 2; border: 0; border-radius: 99px; padding: 10px 18px; cursor: pointer; font-family: var(--texte); font-weight: 600; font-size: .72rem; letter-spacing: .12em;
  background: rgba(246, 237, 226, .94); color: var(--chocolat); box-shadow: 0 4px 12px rgba(46, 32, 25, .3); }
@media (hover: hover) and (pointer: fine) { .bouton-son:hover { background: var(--creme); } }
.bouton-lecture { position: absolute; left: 50%; top: 50%; z-index: 2; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 1px solid rgba(246, 237, 226, .55); border-radius: 50%; cursor: pointer;
  background: rgba(246, 237, 226, .22); color: #fff; font-size: 1.5rem; letter-spacing: -.12em; padding: 0 0 0 4px; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: 0 1px 6px rgba(46, 32, 25, .45); opacity: 0; transition: opacity .3s, transform .3s, background .3s; }
.bouton-lecture.en-pause { opacity: 1; padding-left: 7px; letter-spacing: 0; }
.bouton-lecture:focus-visible { opacity: 1; } @media (hover: hover) and (pointer: fine) { .vid:hover .bouton-lecture { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .bouton-lecture:hover { background: rgba(246, 237, 226, .38); transform: scale(1.06); } }
@media (hover: none) { .bouton-lecture:not(.en-pause) { opacity: .5; } }

.bloc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 70px); align-items: center; padding: clamp(40px, 6vw, 80px) 0; }
.bloc.inverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.bloc.inverse .bloc-texte { order: 2; }
.bloc-texte { text-align: center; }
.bloc-image { aspect-ratio: 4 / 5; border-radius: 2px; }
.titre-bloc { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1; margin: 0 0 16px; }
.titre-bloc em { display: block; font-size: 1.05em; line-height: 1.1; margin-top: .05em; }
.titre-bloc.en-ligne em { display: inline; margin-top: 0; }
.bloc-texte p { font-size: .95rem; line-height: 1.7; max-width: 40ch; margin: 0 auto; }
/* Chute en bleu : sur sa propre ligne et plus grande que le texte, pour bien se lire */
.bloc-texte p em, .texte-seul p em, .intro .lead:not(.court) em { display: block; margin-top: .4em; line-height: 1.2; text-wrap: balance; }
.bloc-texte p em { font-size: 1.7em; }
.texte-seul p em { font-size: 1.55em; }
.intro .lead:not(.court) em { font-size: 1.3em; }
.texte-seul { max-width: 760px; margin: 0 auto; text-align: center; padding: clamp(40px, 6vw, 80px) 0; }
.texte-seul p { font-size: 1.05rem; line-height: 1.75; }
.mosaique { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mosaique .visuel { aspect-ratio: 1; }
.mosaique .visuel:nth-child(1), .mosaique .visuel:nth-child(4) { grid-column: span 2; aspect-ratio: auto; min-height: 100%; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.duo .visuel { aspect-ratio: 4 / 3; padding: 10px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.trio .visuel { aspect-ratio: 4 / 5; padding: 10px; }
.telephones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(18px, 4vw, 56px); margin: 12px 0; padding: 18px 0 8px; }
.tel { margin: 0; width: clamp(150px, 24vw, 250px); text-align: center; }
.tel:nth-child(2) { transform: translateY(-22px); }
.tel-cadre { position: relative; background: var(--chocolat); border-radius: 34px; padding: 9px; box-shadow: 0 18px 40px rgba(46, 32, 25, .28); }
.tel-cadre::before, .tel-cadre::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: var(--chocolat); }
.tel-cadre::before { left: -3px; top: 17%; height: 11%; box-shadow: 0 46px 0 var(--chocolat); }
.tel-cadre::after { right: -3px; top: 22%; height: 15%; }
.tel-ecran { position: relative; aspect-ratio: 9 / 19.5; border-radius: 26px; overflow: hidden; background: #fff; display: flex; flex-direction: column; gap: 7px; padding-top: 30px; color: var(--chocolat); }
.tel-media { position: relative; flex: none; aspect-ratio: 4 / 5; }
.tel-media .tel-visuel { position: absolute; inset: 0; padding: 10px; }
.ico { display: inline-flex; width: 17px; height: 17px; }
.ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c1, #F9C2C2); }
.ui-barres { display: grid; gap: 4px; flex: 1; }
.ui-barres i { display: block; height: 5px; border-radius: 3px; background: #D9D4CC; }
.ui-barres .long { width: 70%; }
.ui-barres .court { width: 38%; height: 4px; }
.ui-haut { display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.ui-haut .points { font-size: .8rem; letter-spacing: .1em; color: #9a928a; }
.ui-haut.insta .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 3.500px var(--c2, #CBB38F); }
.tel-ecran > .ui-barres { flex: none; padding: 0 10px; }
.tel-ecran > .ui-barres .long, .tel-ecran > .ui-barres .court { width: 90%; }
.ui-actions { display: flex; align-items: center; gap: 12px; padding: 2px 10px 0; }
.ui-actions .droite { margin-left: auto; display: flex; }
.ui-actions.fb { justify-content: space-around; padding: 6px 10px 0; border-top: 1px solid #ECE7E0; margin-top: 4px; }
.ecran-story { padding-top: 0; gap: 0; background: #111; }
.ecran-story .tel-media { position: absolute; inset: 0; aspect-ratio: auto; }
.ecran-story .tel-media .tel-visuel { padding: 0; }
.ui-story-haut { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 26px 8px 18px; background: linear-gradient(rgba(0, 0, 0, .45), transparent); }
.ui-progres { display: flex; gap: 3px; margin-bottom: 8px; }
.ui-progres i { flex: 1; height: 2.500px; border-radius: 2px; background: rgba(255, 255, 255, .4); }
.ui-progres .fait { background: #fff; }
.ui-ligne-story { display: flex; align-items: center; gap: 7px; }
.ui-ligne-story .avatar { width: 20px; height: 20px; }
.ui-ligne-story .ui-barres i { background: rgba(255, 255, 255, .55); }
.ui-story-bas { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 18px 10px 12px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .5)); }
.ui-champ { flex: 1; height: 24px; border: 1.500px solid rgba(255, 255, 255, .85); border-radius: 99px; }
/* objet décoratif en grand à gauche (ex. la coupe), qui se balance sur lui-même ; le texte est à droite */
.texte-seul.avec-objet { max-width: 920px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(20px, 5vw, 70px); text-align: left; }
.avec-objet .titre-bloc { text-align: left; }
.objet-piste { position: relative; height: clamp(260px, 36vw, 400px); }
.objet-anime { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; transform-origin: 50% 94%; filter: drop-shadow(0 12px 10px rgba(46, 32, 25, .25));
  transform: translateX(-50%) rotate(-8deg); animation: objet-balance 4.8s ease-in-out infinite; }
@keyframes objet-balance { 0%, 100% { transform: translateX(-50%) rotate(-8deg); } 50% { transform: translateX(-50%) rotate(8deg); } }
.avec-objet .titre-bloc { font-size: clamp(3rem, 7vw, 5.4rem); }
.avec-objet .texte-corps p { font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.35; }
.objet-piste { cursor: pointer; }
.eclat { position: absolute; left: 50%; top: 32%; width: var(--s, 20px); pointer-events: none; z-index: 3; opacity: 0;
  animation: eclat var(--t, 1.8s) ease-out forwards; filter: drop-shadow(0 2px 2px rgba(46, 32, 25, .25)); }
.eclat svg { display: block; width: 100%; height: auto; }
@keyframes eclat {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0deg); }
  12%  { opacity: 1; }
  55%  { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(calc(var(--rot) * .6)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * 1.15), calc(-50% + var(--dy) + 70px)) scale(.8) rotate(var(--rot)); }
}
@media (prefers-reduced-motion: reduce) { .eclat { display: none; } }
@media (prefers-reduced-motion: reduce) { .objet-anime { animation: none; transform: translateX(-50%); } }
@media (max-width: 760px) { .texte-seul.avec-objet { grid-template-columns: 1fr; text-align: center; } .avec-objet .titre-bloc { text-align: center; } .objet-piste { height: 240px; } }.bloc-carres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bloc-carres .carre { aspect-ratio: 1; border-radius: 2px; }
.visuel.sans-fond { background: none; overflow: visible; }
.bloc-image.sans-fond { width: 78%; justify-self: center; }
.visuel.sans-fond img { object-fit: contain; filter: drop-shadow(0 12px 14px rgba(46, 32, 25, .25)); }
/* bande de visuels à faire défiler : barre dessous, ou glisser à la souris / au doigt */
.defil-bloc { margin: clamp(24px, 4vw, 48px) 0; }
.defil { --h: clamp(300px, 38vw, 480px); overflow-x: auto; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent); }
.defil::-webkit-scrollbar { display: none; }
.defil.glisse { cursor: grabbing; user-select: none; }
.defil-piste { display: flex; gap: 14px; width: max-content; padding: 0 var(--marge); }
.defil-item { flex: none; height: var(--h); border-radius: 6px; }
.defil-item img { -webkit-user-drag: none; user-select: none; }
.defil-barre { display: block; width: min(560px, calc(100% - 2 * var(--marge))); margin: 22px auto 0; height: 28px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.defil-barre::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: rgba(46, 32, 25, .22); }
.defil-barre::-moz-range-track { height: 4px; border-radius: 99px; background: rgba(46, 32, 25, .22); }
.defil-barre::-webkit-slider-thumb { -webkit-appearance: none; width: 54px; height: 20px; margin-top: -8px; border-radius: 99px; background: var(--bleu); border: 3px solid var(--creme); box-shadow: 0 2px 6px rgba(46, 32, 25, .3); }
.defil-barre::-moz-range-thumb { width: 48px; height: 14px; border-radius: 99px; background: var(--bleu); border: 3px solid var(--creme); box-shadow: 0 2px 6px rgba(46, 32, 25, .3); }
.defil-barre:focus-visible { outline: 2px solid var(--bleu); outline-offset: 4px; border-radius: 99px; }/* galerie : images au complet, rangées de même hauteur */
.galerie { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.galerie-rangee { display: flex; gap: 12px; align-items: flex-start; }
.galerie-visuel { min-width: 0; }
@media (max-width: 640px) { .galerie-rangee { flex-direction: column; } .galerie-visuel { flex: none !important; width: 100%; } }
/* campagne : affiche + téléphones */
.campagne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: clamp(20px, 4vw, 56px); align-items: center; margin: clamp(20px, 4vw, 50px) 0; }
.campagne-affiche { margin: 0; text-align: center; }
.campagne-affiche .visuel { aspect-ratio: 4 / 5; box-shadow: 0 14px 30px -10px rgba(46, 32, 25, .4); }
.campagne-affiche figcaption { margin-top: 14px; font-size: .78rem; letter-spacing: .04em; }
.campagne .telephones { margin: 0; padding: 0; gap: clamp(10px, 2vw, 26px); }
.campagne .tel { width: auto; flex: 1 1 0; min-width: 0; max-width: 210px; }
.maquettes { display: flex; align-items: flex-start; justify-content: center; gap: clamp(8px, 2vw, 24px); }
.maquette { flex: 1 1 0; min-width: 0; max-width: 230px; margin: 0; text-align: center; }
.maquette .visuel { aspect-ratio: 323 / 628; background: none; overflow: visible; }
.maquette .visuel img { object-fit: contain; filter: drop-shadow(0 10px 12px rgba(46, 32, 25, .25)); }
.maquette .visuel:not(.charge) { background: linear-gradient(150deg, var(--c1), var(--c2)); border-radius: 22px; }
.maquette figcaption { margin-top: 10px; font-size: .78rem; letter-spacing: .04em; }
@media (max-width: 760px) { .campagne { grid-template-columns: 1fr; } .campagne-affiche { max-width: 320px; margin: 0 auto; } }
.tel-encoche { position: absolute; top: 15px; left: 50%; width: 30%; height: 11px; border-radius: 99px; background: var(--chocolat); transform: translateX(-50%); z-index: 2; }
.tel figcaption { margin-top: 14px; font-size: .78rem; letter-spacing: .04em; color: var(--chocolat); }
.grille-carres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); max-width: 1040px; margin: 12px auto clamp(56px, 9vw, 120px); }
.grille-carres .visuel { aspect-ratio: 1 / 1; padding: 10px; }

/* curseur avant / après */
.avant-apres { position: relative; aspect-ratio: 16 / 8; overflow: hidden; border-radius: 4px; --x: 50%; }
.avant-apres .couche { position: absolute; inset: 0; display: grid; place-items: center; }
.avant-apres .apres { clip-path: inset(0 0 0 var(--x)); }
.avant-apres .poignee { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1px; background: #fff; display: grid; place-items: center; pointer-events: none; z-index: 3; }
.avant-apres .poignee span { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--chocolat); display: grid; place-items: center; font-weight: 700; }
.avant-apres input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 4; }
.avant-apres .couche.avant .visuel { background: linear-gradient(150deg, #D8D0C2, #A99F8F); }
.avant-apres .visuel { position: absolute; inset: 0; }
.aide { text-align: center; font-size: .75rem; opacity: .7; margin: 10px 0 0; }

/* palette qui se déploie */
/* nuancier : 6 échantillons posés, même largeur que la grille de carrés */
.palette { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; max-width: 640px; margin: clamp(40px, 6vw, 70px) auto clamp(48px, 8vw, 100px); }
.palette .carte { background: #fff; padding: 7px 7px 10px; border-radius: 3px; box-shadow: 0 8px 18px rgba(46, 32, 25, .16); opacity: 0; transform: translateY(26px) rotate(var(--r, 0deg)); transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .5s; }
.palette .carte:nth-child(1) { --r: -3deg; } .palette .carte:nth-child(2) { --r: 2deg; } .palette .carte:nth-child(3) { --r: -1.5deg; }
.palette .carte:nth-child(4) { --r: 2.5deg; } .palette .carte:nth-child(5) { --r: -2deg; } .palette .carte:nth-child(6) { --r: 1.5deg; }
.palette .echantillon { aspect-ratio: 4 / 5; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(46, 32, 25, .08); }
.palette .etiquette { margin-top: 8px; font-size: .55rem; letter-spacing: .08em; line-height: 1.35; color: var(--chocolat); }
.palette .nom, .palette .hex { display: block; }
.palette .hex { font-weight: 600; opacity: .7; margin-top: 2px; }
.palette.go .carte { opacity: 1; transform: rotate(var(--r, 0deg)); }
@media (hover: hover) and (pointer: fine) { .palette.go .carte:hover { transform: translateY(-8px) rotate(0deg); } }
.palette.go .carte:nth-child(2) { transition-delay: .1s; } .palette.go .carte:nth-child(3) { transition-delay: .2s; } .palette.go .carte:nth-child(4) { transition-delay: .3s; } .palette.go .carte:nth-child(5) { transition-delay: .4s; } .palette.go .carte:nth-child(6) { transition-delay: .5s; }
@media (hover: hover) and (pointer: fine) { .palette.go .carte:hover { transition-delay: 0s; } }

/* palette en pastilles rondes : un clic copie le code */
.palette.pastilles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 26px clamp(10px, 2vw, 24px); max-width: 900px; margin-bottom: 14px; }
.palette.pastilles .pastille { justify-self: center; }
.palette.pastilles .pastille { border: 0; background: none; padding: 0; cursor: pointer; text-align: center; color: var(--chocolat); font: inherit; opacity: 0; transform: translateY(40px) scale(.6); transition: transform .7s cubic-bezier(.3, 1.8, .5, 1), opacity .4s; }
.palette.pastilles.go .pastille { opacity: 1; transform: none; }
.palette.pastilles.go .pastille:nth-child(2) { transition-delay: .1s; } .palette.pastilles.go .pastille:nth-child(3) { transition-delay: .2s; } .palette.pastilles.go .pastille:nth-child(4) { transition-delay: .3s; } .palette.pastilles.go .pastille:nth-child(5) { transition-delay: .4s; } .palette.pastilles.go .pastille:nth-child(6) { transition-delay: .5s; }
.pastille .rond { display: block; width: clamp(72px, 10vw, 104px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(46, 32, 25, .1), 0 8px 16px rgba(46, 32, 25, .15); transition: transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.pastille:focus-visible .rond { transform: scale(1.12); } @media (hover: hover) and (pointer: fine) { .pastille:hover .rond { transform: scale(1.12); } }
.pastille:active .rond { transform: scale(.94); }
.palette.pastilles .nom, .palette.pastilles .hex { display: block; font-size: .62rem; letter-spacing: .08em; margin-top: 8px; }
.palette.pastilles .hex { font-weight: 600; opacity: .75; margin-top: 2px; }
.pastille.copie .hex { color: var(--bleu); opacity: 1; }
/* texte à gauche, nuancier à droite : cartes de couleur à cadre blanc rangées en quadrillé (clic = copie du code) */
.texte-seul.avec-logos { max-width: 1040px; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
.avec-logos .declinaisons { width: 100%; margin: 0; }
/* Logos en carré : le carré (--fond) et le logo (--encre, silhouette PNG en masque) changent ensemble quand on choisit une couleur dans la bande */
.declinaisons.carre { --fond: #FFF0AE; --encre: #4B6632; }
.declinaisons.carre .decl-scene { aspect-ratio: 1; border-radius: 10%; overflow: hidden; box-shadow: 0 8px 22px rgba(46, 32, 25, .12); background: var(--fond); transition: background-color .7s ease; }
.declinaisons.carre .decl-visuel { background: var(--encre); border-radius: 0; box-shadow: none; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: opacity .45s, transform .6s cubic-bezier(.3, 1.4, .5, 1), background-color .7s ease; }
.declinaisons.carre .decl-visuel .pastille-visuel, .declinaisons.carre .decl-visuel .legende-survol { display: none; }
/* Bande fine (couleurs qui teintent le logo) */
.palette.bande.fine { height: clamp(78px, 9vw, 104px); margin-top: clamp(28px, 4vw, 48px); margin-bottom: 10px; }
.palette.bande.fine .teinte { justify-content: center; align-items: center; text-align: center; padding: 0 6px; }
.palette.bande.fine .nom, .palette.bande.fine .hex { font-size: .6rem; }
.palette.bande.fine .copier { display: block; margin-top: 5px; font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; opacity: 0; transition: opacity .4s; cursor: pointer; }
.palette.bande.fine .teinte:focus-visible .copier, .palette.bande.fine .copier:focus-visible { opacity: 1; } @media (hover: hover) and (pointer: fine) { .palette.bande.fine .teinte:hover .copier { opacity: 1; } }
.palette.bande.fine .teinte[aria-pressed="true"]::after { content: ""; position: absolute; left: 50%; bottom: 9px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: currentColor; }
@media (hover: none) { .palette.bande.fine .copier { opacity: 1; } }
@media (max-width: 760px) {
  .palette.bande.fine { height: auto; }
  .palette.bande.fine .teinte { flex-direction: row; justify-content: space-between; gap: 8px; padding: 0 16px; height: 52px; }
  .palette.bande.fine .copier { margin: 0; opacity: 1; }
  .palette.bande.fine .teinte[aria-pressed="true"]::after { left: auto; right: 6px; bottom: 50%; margin: 0 0 -3.5px; }
}
.avec-logos .texte-corps p { font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.6; }
.texte-seul.avec-couleurs { max-width: 1000px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.avec-couleurs .texte-corps p { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.7; }
/* Les quatre ours en autocollants : grille 2 × 2, légèrement penchés, nom et distance dessous */
.bloc-ours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px) clamp(14px, 2.4vw, 30px); align-items: start; }
.ours-sticker { margin: 0; text-align: center; transform: rotate(var(--r, 0deg)); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.ours-sticker:nth-child(even) { margin-top: clamp(14px, 2.4vw, 30px); }
.ours-sticker img { display: block; width: 100%; height: auto; filter: drop-shadow(0 7px 10px rgba(46, 32, 25, .2)); -webkit-user-drag: none; user-select: none; }
@media (hover: hover) and (pointer: fine) { .ours-sticker:hover { transform: rotate(0deg) scale(1.05); } }
.ours-legende { margin-top: 12px; }
.ours-legende strong { display: block; font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: clamp(1rem, 1.7vw, 1.3rem); line-height: 1.1; color: var(--chocolat); }
.ours-legende span { display: block; margin-top: 3px; font-size: .78rem; letter-spacing: .06em; color: var(--chocolat); opacity: .75; }
@media (prefers-reduced-motion: reduce) { .ours-sticker { transition: none; } }
/* Ourson à la médaille : il sourit ; au passage de la souris, il fait un clin d'œil (deux images superposées) */
.texte-seul.avec-medaille { max-width: 1040px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.avec-medaille .texte-corps p { font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.6; }
.medaille { position: relative; justify-self: center; width: clamp(170px, 23vw, 270px); aspect-ratio: 347 / 600; cursor: pointer; animation: medaille-souffle 4s ease-in-out infinite; transform-origin: 50% 100%; }
.medaille-img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 12px rgba(46, 32, 25, .22)); -webkit-user-drag: none; user-select: none; }
.medaille-2 { opacity: 0; }
.medaille:active .medaille-2 { opacity: 1; } @media (hover: hover) and (pointer: fine) { .medaille:hover .medaille-2 { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .medaille:hover { animation-play-state: paused; } }
@keyframes medaille-souffle { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg) translateY(-6px); } }
@keyframes medaille-clin { 0%, 68% { opacity: 0; } 69%, 80% { opacity: 1; } 81%, 100% { opacity: 0; } }
@media (hover: none) { .medaille-2 { animation: medaille-clin 4s steps(1, end) infinite; } }   /* sur téléphone : pas de souris, le clin d'œil revient tout seul */
@media (max-width: 760px) { .texte-seul.avec-medaille { grid-template-columns: 1fr; } .medaille { margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .medaille { animation: none; } .medaille-2 { animation: none !important; } }
/* Ours qui marche vers la droite (planche de 4 images : les pattes changent, la boucle traverse le cadre) */
.texte-seul.avec-marche { max-width: 1040px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.avec-marche .texte-corps p { font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.6; }
.marche { --h: clamp(150px, 20vw, 230px); --fw: calc(var(--h) * 1.39); position: relative; height: calc(var(--h) + 34px); overflow: hidden; }
.marche-ours { position: absolute; bottom: 14px; left: 0; width: var(--fw); height: var(--h); animation: marche-avance 14s linear infinite; }
.marche-pas { width: 100%; height: 100%; background-repeat: no-repeat; background-size: calc(var(--n) * 100%) 100%; animation: marche-pas .8s steps(var(--n)) infinite; filter: drop-shadow(0 6px 8px rgba(46, 32, 25, .2)); }
.marche-sol { position: absolute; left: 0; right: 0; bottom: 12px; height: 0; border-top: 2px dashed rgba(46, 32, 25, .25); }
@keyframes marche-avance { from { left: calc(var(--fw) * -1); } to { left: 100%; } }
@keyframes marche-pas { from { background-position: 0 0; } to { background-position: calc(var(--fw) * var(--n) * -1) 0; } }
@media (max-width: 760px) { .texte-seul.avec-marche { grid-template-columns: 1fr; } .marche { margin-top: 10px; } }
@media (prefers-reduced-motion: reduce) { .marche-ours { animation: none; left: calc(50% - var(--fw) / 2); } .marche-pas { animation: none; } }
/* Calendrier du planning éditorial : mois par mois, pastilles par canal, détail du jour dessous */
.calendrier { max-width: 1040px; margin: clamp(48px, 8vw, 110px) auto; text-align: center; }
.cal-carte { margin-top: clamp(20px, 3.5vw, 40px); padding: clamp(14px, 3vw, 36px); border-radius: 20px; background: rgba(255, 255, 255, .55); box-shadow: 0 10px 30px rgba(46, 32, 25, .1), 0 0 0 1px rgba(46, 32, 25, .06); text-align: left; }
.cal-carte { position: relative; }
.cal-deco { position: absolute; height: auto; pointer-events: none; -webkit-user-drag: none; filter: drop-shadow(0 4px 6px rgba(46, 32, 25, .22)); z-index: 2; }
.cal-deco.haut-gauche { width: clamp(70px, 12vw, 130px); top: -14px; left: clamp(10px, 3vw, 40px); transform: rotate(-9deg); }
.cal-deco.haut-droite { width: clamp(70px, 12vw, 130px); top: -16px; right: clamp(10px, 3vw, 40px); transform: rotate(7deg); }
.cal-deco.bas-gauche { width: clamp(44px, 7vw, 84px); bottom: -22px; left: -18px; transform: rotate(-12deg); }
.cal-deco.bas-droite { width: clamp(46px, 7vw, 86px); bottom: -24px; right: -16px; transform: rotate(14deg); }
.cal-deco.milieu-droite { width: clamp(34px, 5vw, 60px); top: 38%; right: -22px; transform: rotate(-10deg); }
.cal-detail { position: relative; }
.cal-detail-sticker { position: absolute; right: 0; top: 10px; width: clamp(54px, 9vw, 96px); height: auto; transform: rotate(7deg); filter: drop-shadow(0 4px 6px rgba(46, 32, 25, .22)); pointer-events: none; -webkit-user-drag: none; }
.cal-detail > * { max-width: calc(100% - clamp(62px, 10vw, 110px)); }
.cal-detail > .cal-detail-sticker { max-width: none; }
@media (max-width: 760px) { .cal-deco.milieu-droite { display: none; } .cal-deco.bas-gauche, .cal-deco.bas-droite { bottom: -14px; } }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cal-mois { margin: 0; flex: 1; text-align: center; font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: clamp(1.8rem, 5vw, 3.4rem); line-height: 1; color: var(--chocolat); }
.cal-fleche { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--bleu); background: none; color: var(--bleu); font: 600 1.1rem/1 var(--texte); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
@media (hover: hover) and (pointer: fine) { .cal-fleche:hover:not(:disabled) { background: var(--bleu); color: var(--creme); transform: translateY(-2px); } }
.cal-fleche:disabled { opacity: .3; cursor: default; }
.cal-filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 16px; }
.cal-filtre { display: inline-flex; align-items: center; gap: 7px; padding: .55em 1em; border-radius: 99px; border: 1.5px solid var(--bleu); background: none; color: var(--bleu); font: 600 .7rem/1 var(--texte); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.cal-filtre[aria-pressed="true"] { background: var(--bleu); color: var(--creme); }
.cal-filtre[aria-pressed="false"] { opacity: .55; }
.cal-pastille { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(46, 32, 25, .55); }
.cal-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid rgba(46, 32, 25, .35); border-left: 1px solid rgba(46, 32, 25, .35); }
.cal-jour-nom { padding: 8px 6px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; border-right: 1px solid rgba(46, 32, 25, .35); border-bottom: 1px solid rgba(46, 32, 25, .35); text-align: left; }
.cal-case { position: relative; min-height: clamp(64px, 11vw, 118px); padding: 6px; border: 0; border-right: 1px solid rgba(46, 32, 25, .35); border-bottom: 1px solid rgba(46, 32, 25, .35); background: transparent; color: var(--chocolat); font: inherit; text-align: left; display: flex; flex-direction: column; gap: 4px; overflow: hidden; cursor: pointer; transition: background .25s, box-shadow .25s; }
.cal-case.vide { cursor: default; }
@media (hover: hover) and (pointer: fine) { .cal-case:not(.vide):hover { box-shadow: inset 0 0 0 2px var(--bleu); } }
.cal-case.choisi { box-shadow: inset 0 0 0 2px var(--bleu); }
.cal-case.ph-rose { background: rgba(249, 194, 194, .45); }
.cal-case.ph-creme { background: var(--creme-fonce); }
.cal-case.ph-nuit { background: var(--chocolat); color: var(--creme); }
.cal-num { font-size: .85rem; font-weight: 600; }
.cal-points { display: flex; flex-wrap: wrap; gap: 3px; }
.cal-libelles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-libelle { font-size: .66rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .9; }
.cal-libelle.plus { font-weight: 700; }
.cal-sticker { position: absolute; right: 3px; top: 3px; width: clamp(20px, 3vw, 34px); height: auto; transform: rotate(8deg); opacity: .95; filter: drop-shadow(0 3px 4px rgba(46, 32, 25, .25)); pointer-events: none; -webkit-user-drag: none; }
.cal-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: .72rem; }
.cal-legende li { display: inline-flex; align-items: center; gap: 7px; }
.cal-legende li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(46, 32, 25, .4); background: transparent; }
.cal-legende .ph-rose::before { background: rgba(249, 194, 194, .7); }
.cal-legende .ph-creme::before { background: var(--creme-fonce); }
.cal-legende .ph-nuit::before { background: var(--chocolat); }
.cal-detail { margin-top: clamp(18px, 3vw, 30px); padding-top: clamp(16px, 2.6vw, 26px); border-top: 1px solid rgba(46, 32, 25, .25); }
.cal-date { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bleu); font-size: clamp(1.4rem, 3vw, 2rem); text-transform: none; }
.cal-date::first-letter { text-transform: uppercase; }
.cal-phase { margin: 4px 0 0; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; opacity: .7; }
.cal-vide { margin: 14px 0 0; opacity: .7; }
.cal-liste { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.cal-evt p { margin: 4px 0 0 20px; font-size: .92rem; line-height: 1.55; }
.cal-evt-titre { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.cal-evt-titre strong { font-size: .98rem; }
.cal-canal { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; opacity: .6; }
@media (max-width: 760px) {
  .cal-libelles { display: none; }
  .cal-case { min-height: 54px; padding: 4px; }
  .cal-num { font-size: .75rem; }
  .cal-jour-nom { padding: 6px 2px; font-size: .56rem; letter-spacing: .04em; text-align: center; }
  .cal-fleche { width: 38px; height: 38px; }
  .cal-pastille { width: 8px; height: 8px; }
}
@media (prefers-reduced-motion: reduce) { .cal-case, .cal-fleche { transition: none; } }
/* Carrousel « Choisis ton ours » : diapos 4:5 façon Instagram, on fait glisser ou on clique les flèches */
.carrousel-ours { margin: clamp(56px, 9vw, 120px) 0; text-align: center; }
.car-piste { --lg: clamp(250px, 32vw, 380px); display: flex; gap: clamp(12px, 2vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 26px calc((100% - var(--lg)) / 2) 30px; margin-top: clamp(16px, 3vw, 30px); cursor: grab; outline-offset: -4px; }
.car-piste::-webkit-scrollbar { display: none; }
.car-piste.glisse { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.car-diapo { flex: none; width: var(--lg); aspect-ratio: 4 / 5; scroll-snap-align: center; border-radius: 14px; padding: 7% 8%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: 0 10px 26px rgba(46, 32, 25, .16); background: var(--rose); color: var(--chocolat); text-align: center; }
.car-diapo[data-ton="creme-fonce"] { background: var(--creme-fonce); }
.car-ours img { width: 58%; height: auto; margin-bottom: 8px; filter: drop-shadow(0 6px 9px rgba(46, 32, 25, .2)); -webkit-user-drag: none; user-select: none; }
.car-nom, .car-titre { font-family: var(--titre); font-weight: 400; text-transform: uppercase; line-height: 1; margin: 0; }
.car-nom { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
.car-titre { font-size: clamp(2.6rem, 6vw, 4.2rem); }
.car-titre em { text-transform: none; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bleu); font-size: .85em; }
.car-dist { margin: 4px 0 0; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; opacity: .8; }
.car-phrase { margin: 14px 0 0; font-family: var(--serif); font-style: italic; color: var(--bleu); font-size: clamp(1.05rem, 1.9vw, 1.35rem); line-height: 1.2; text-wrap: balance; }
.car-texte .car-phrase { font-size: clamp(1.1rem, 2vw, 1.4rem); }
.car-signe { margin: 18px 0 0; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; opacity: .75; }
.car-barre { display: flex; align-items: center; justify-content: center; gap: 18px; }
.car-fleche { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--bleu); background: none; color: var(--bleu); font: 600 1.1rem/1 var(--texte); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
@media (hover: hover) and (pointer: fine) { .car-fleche:hover:not(:disabled) { background: var(--bleu); color: var(--creme); transform: translateY(-2px); } }
.car-fleche:disabled { opacity: .3; cursor: default; }
.car-points { display: flex; gap: 10px; }
.car-point { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1.5px solid var(--bleu); background: none; cursor: pointer; transition: background .25s, transform .25s; }
.car-point[aria-current="true"] { background: var(--bleu); transform: scale(1.25); }
/* Jauge « La tanière se remplit » */
.jauge { max-width: 760px; margin: clamp(56px, 9vw, 110px) auto; text-align: center; }
.jauge-piste { position: relative; height: 22px; margin: clamp(46px, 7vw, 70px) 38px 10px; border-radius: 99px; background: var(--creme-fonce); box-shadow: inset 0 0 0 1px rgba(46, 32, 25, .1); }
.jauge-rempli { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: var(--chocolat); }
.jauge-ours { position: absolute; bottom: 4px; left: 0; width: clamp(64px, 9vw, 92px); height: auto; transform: translateX(-50%) rotate(-5deg); transform-origin: 50% 100%; pointer-events: none; filter: drop-shadow(0 5px 7px rgba(46, 32, 25, .25)); -webkit-user-drag: none; transition: transform .3s; }
.jauge.complet .jauge-ours { transform: translateX(-50%) rotate(4deg) scale(1.12); }
.jauge-curseur { position: absolute; inset: -46px -38px -10px; width: calc(100% + 76px); height: auto; margin: 0; opacity: 0; cursor: grab; }
.jauge-curseur:active { cursor: grabbing; }
.jauge-piste:focus-within { outline: 2px solid var(--bleu); outline-offset: 8px; }
.jauge-dates { display: flex; justify-content: space-between; margin: 0 38px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; opacity: .75; }
.jauge-statut { margin: 22px 0 0; min-height: 1.3em; font-family: var(--serif); font-style: italic; color: var(--bleu); font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.1; }
@media (prefers-reduced-motion: reduce) { .jauge-ours { transition: none; } }
/* Autocollants ronds qui défilent seuls de droite à gauche (lent : le public lit lentement) */
.defilant { overflow: hidden; margin: clamp(40px, 6vw, 80px) 0; padding: 24px 0; }
.defilant-piste { display: flex; gap: clamp(16px, 2.4vw, 32px); width: max-content; animation: defilant-gauche 90s linear infinite; }
.defilant-piste.retour { margin-top: clamp(16px, 2.4vw, 32px); animation-name: defilant-droite; animation-duration: 110s; }
/* le défilement ne s'arrête plus au survol : seul le rond sous la souris s'agrandit */
.defilant-sticker { flex: none; width: clamp(150px, 19vw, 240px); height: auto; aspect-ratio: 1; transform: rotate(var(--r, 0deg)); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 6px 10px rgba(46, 32, 25, .16)); -webkit-user-drag: none; user-select: none; }
@media (hover: hover) and (pointer: fine) { .defilant-sticker:hover { transform: rotate(0deg) scale(1.1); } }
@keyframes defilant-gauche { from { transform: translateX(0); } to { transform: translateX(calc(-50% - clamp(8px, 1.2vw, 16px))); } }
@keyframes defilant-droite { from { transform: translateX(calc(-50% - clamp(8px, 1.2vw, 16px))); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .defilant { overflow-x: auto; } .defilant-piste { animation: none; } }
/* Bande continue : 6 bandes pleine largeur ; au survol, la bande s'élargit et montre son nom et son code */
.palette.bande { display: flex; gap: 0; max-width: none; width: 100%; height: clamp(300px, 44vw, 480px); margin: clamp(48px, 8vw, 100px) 0 14px; }
.palette.bande .teinte { flex: 1 1 0; position: relative; border: 0; padding: 0 clamp(8px, 1.4vw, 20px) clamp(14px, 2vw, 26px); cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; font: inherit; transform-origin: bottom; transform: scaleY(0); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), flex-grow .6s cubic-bezier(.2, .7, .2, 1); }
.palette.bande.go .teinte { transform: none; }
.palette.bande.go .teinte:nth-child(2) { transition-delay: .15s, 0s; } .palette.bande.go .teinte:nth-child(3) { transition-delay: .3s, 0s; } .palette.bande.go .teinte:nth-child(4) { transition-delay: .45s, 0s; } .palette.bande.go .teinte:nth-child(5) { transition-delay: .6s, 0s; } .palette.bande.go .teinte:nth-child(6) { transition-delay: .75s, 0s; }
.palette.bande.go .teinte:focus-visible { flex-grow: 1.7; transition-delay: 0s; } @media (hover: hover) and (pointer: fine) { .palette.bande.go .teinte:hover { flex-grow: 1.7; transition-delay: 0s; } }
.palette.bande .claire { color: var(--chocolat); } .palette.bande .foncee { color: var(--creme); }
.palette.bande .nom, .palette.bande .hex { display: block; font-size: .68rem; letter-spacing: .08em; line-height: 1.4; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.palette.bande .hex { font-weight: 700; }
.palette.bande .teinte:focus-visible .nom, .palette.bande .teinte:focus-visible .hex, .palette.bande .teinte.copie .hex { opacity: 1; transform: none; } @media (hover: hover) and (pointer: fine) { .palette.bande .teinte:hover .nom, .palette.bande .teinte:hover .hex { opacity: 1; transform: none; } }
@media (hover: none) { .palette.bande .nom, .palette.bande .hex { opacity: 1; transform: none; } }
@media (max-width: 760px) {   /* téléphone : les bandes s'empilent, nom à gauche et code à droite */
  .palette.bande { flex-direction: column; height: auto; }
  .palette.bande .teinte { flex-direction: row; justify-content: space-between; align-items: center; flex: none; height: 58px; padding: 0 16px; transform-origin: left; transform: scaleX(0); }
  .palette.bande .nom, .palette.bande .hex { opacity: 1; transform: none; font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) { .palette.bande .teinte { transform: none; transition: none; } }
.palette.nuage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); max-width: none; margin: 0; }
.palette.nuage .pastille { width: 100%; justify-self: stretch; align-self: start; background: #fff; padding: 7px 7px 0; border-radius: 10px; text-align: left; box-shadow: 0 8px 18px rgba(46, 32, 25, .14); transform: translateY(30px); transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .5s; }
.palette.nuage.go .pastille { transform: none; }
.palette.nuage.go .pastille:focus-visible { transform: translateY(-6px); } @media (hover: hover) and (pointer: fine) { .palette.nuage.go .pastille:hover { transform: translateY(-6px); } }
.palette.nuage .pastille:active { transform: scale(.97); }
.palette.nuage .echantillon { display: block; aspect-ratio: 4 / 5; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(46, 32, 25, .08); }
.palette.nuage .etiquette { display: block; padding: 9px 3px 11px; }
.palette.nuage .nom, .palette.nuage .hex { display: block; font-size: .56rem; letter-spacing: .08em; line-height: 1.35; margin-top: 0; }
.palette.nuage .hex { font-weight: 700; opacity: .7; margin-top: 2px; }
.palette.nuage .pastille.copie .hex { color: var(--bleu); opacity: 1; }
@media (max-width: 760px) { .texte-seul.avec-couleurs, .texte-seul.avec-logos { grid-template-columns: 1fr; } .avec-logos .declinaisons { max-width: 420px; margin: 0 auto; } .avec-couleurs .texte-corps p { font-size: 1rem; } .palette.nuage .nom, .palette.nuage .hex { font-size: .5rem; } }
@media (prefers-reduced-motion: reduce) { .palette.nuage .pastille { transform: none; transition: none; } }
/* déclinaisons du logo : une grande scène, des pastilles pour changer */
.declinaisons { max-width: 480px; margin: 12px auto clamp(40px, 7vw, 90px); text-align: center; }
.decl-scene { position: relative; aspect-ratio: 469 / 635; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 28px rgba(46, 32, 25, .16); }
.decl-scene .decl-visuel { position: absolute; inset: 0; opacity: 0; transform: scale(.94) rotate(-1.5deg); transition: opacity .45s, transform .6s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.decl-scene .decl-visuel.on { opacity: 1; transform: none; pointer-events: auto; }
.decl-choix { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.decl-choix button { border: 1.5px solid var(--bleu); background: none; color: var(--bleu); font: 600 .75rem/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; padding: .85em 1.3em; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
@media (hover: hover) and (pointer: fine) { .decl-choix button:hover { transform: translateY(-2px); } }
.decl-choix button[aria-pressed="true"] { background: var(--bleu); color: var(--creme); }

/* illustrations en autocollants */
.stickers { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 3vw, 34px); padding: clamp(24px, 4vw, 50px) 0 6px; }
.sticker { border: 0; padding: 0; background: none; cursor: pointer; width: clamp(120px, 20vw, 190px); transform: rotate(var(--r, 0deg)); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.sticker:nth-child(even) { margin-top: 26px; }
.sticker:focus-visible { transform: rotate(0deg) scale(1.08); animation: gigote .5s ease-in-out; } @media (hover: hover) and (pointer: fine) { .sticker:hover { transform: rotate(0deg) scale(1.08); animation: gigote .5s ease-in-out; } }
.sticker .sticker-visuel { aspect-ratio: 1; border: 6px solid #fff; border-radius: 22px; box-shadow: 0 6px 14px rgba(46, 32, 25, .2), 0 0 0 1px rgba(46, 32, 25, .06); }
@keyframes gigote { 0%, 100% { rotate: 0deg; } 25% { rotate: -5deg; } 75% { rotate: 5deg; } }
.lb-sticker { position: fixed; inset: 0; z-index: 100; background: rgba(46, 32, 25, .72); display: grid; place-items: center; padding: 20px; }
.lb-sticker[hidden] { display: none; }
.lb-carte { background: #fff; border-radius: 16px; padding: 14px 14px 18px; width: min(460px, 100%); text-align: center; animation: surgit .4s cubic-bezier(.3, 1.5, .5, 1); }
.lb-visuel { aspect-ratio: 1; border-radius: 10px; }
.lb-legende { margin: 12px 0 14px; font-family: var(--serif); font-style: italic; color: var(--bleu); font-size: 1.3rem; }
@keyframes surgit { from { transform: scale(.7) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }
.typos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.typos span { border: 1.5px solid var(--chocolat); border-radius: 99px; padding: 8px 14px; font-size: .9rem; opacity: 0; transform: translateY(14px); transition: all .5s; }
.typos.go span { opacity: 1; transform: none; }
.typos.go span:nth-child(2) { transition-delay: .15s; } .typos.go span:nth-child(3) { transition-delay: .3s; } .typos.go span:nth-child(4) { transition-delay: .45s; } .typos.go span:nth-child(5) { transition-delay: .6s; }

/* bande de chiffres (fond rose) */
.chiffres { background: var(--rose); margin-top: clamp(40px, 6vw, 80px); }
.chiffres .conteneur { display: flex; gap: clamp(24px, 6vw, 90px); flex-wrap: wrap; padding-top: clamp(36px, 5vw, 60px); padding-bottom: clamp(36px, 5vw, 60px); }
.chiffres small { display: block; font-size: .62rem; letter-spacing: .18em; opacity: .7; margin-bottom: 8px; }
.chiffres b { font-family: var(--titre); font-weight: 400; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1; color: var(--bleu); }
.chiffres span { display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; opacity: .85; margin-top: 6px; max-width: 26ch; }

/* projet suivant */
.suivant { text-align: center; padding: clamp(50px, 8vw, 100px) 0; }
.suivant h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: 0 0 22px; }
.suivant a { color: inherit; text-decoration: none; display: inline-block; }
.suivant .apercu { width: clamp(160px, 18vw, 220px); aspect-ratio: 3 / 4; margin: 0 auto 12px; position: relative; overflow: hidden; border-radius: 4px; background: linear-gradient(150deg, var(--c1), var(--c2)); display: flex; align-items: flex-end; justify-content: center; padding: 14px; color: var(--creme); font-family: var(--titre); text-transform: uppercase; font-size: 1.3rem; line-height: 1; transition: transform .4s; }
.suivant .apercu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.suivant .apercu.sans-fond { background: none; overflow: visible; }
.suivant .apercu.sans-fond img { object-fit: contain; filter: drop-shadow(0 10px 10px rgba(46, 32, 25, .25)); }
.suivant a:focus-visible .apercu { transform: translateY(-6px) rotate(-1.5deg); } @media (hover: hover) and (pointer: fine) { .suivant a:hover .apercu { transform: translateY(-6px) rotate(-1.5deg); } }
.suivant .nn { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 760px) {
  .grille { grid-template-columns: 1fr; }
  .intro, .bloc, .bloc.inverse { grid-template-columns: 1fr; }
  .bloc.inverse .bloc-texte { order: 0; }
  .mosaique { grid-template-columns: 1fr 1fr; }
  .mosaique .visuel:nth-child(1), .mosaique .visuel:nth-child(4) { aspect-ratio: 1; }
  .trio, .grille-carres { grid-template-columns: 1fr 1fr; }
  .trio.trio-ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }   /* trois visuels qui restent sur une ligne, même sur téléphone */
  .trio-ligne .visuel { padding: 0; }
  .telephones { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; padding: 18px 16px 12px; margin: 12px -16px; }
  .tel { flex: 0 0 58%; scroll-snap-align: center; }
  .tel:nth-child(2) { transform: none; }
  .palette { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
  .palette .etiquette { font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .palette .carte, .typos span { transform: rotate(var(--r, 0deg)); opacity: 1; transition: none; }
  .palette.pastilles .pastille { transform: none; opacity: 1; transition: none; }
  .decl-scene .decl-visuel, .sticker, .lb-carte { transition: none; animation: none; }
  .sticker:hover, .sticker:focus-visible { animation: none; }
  .tuile .fond, .suivant .apercu { transition: none; }
}

/* Téléphones cliquables : le téléphone choisi vient se poser au milieu de la page */
.tel-cliquable { cursor: zoom-in; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .35s; }
.tel-cliquable:focus-visible { transform: translateY(-6px) scale(1.025); outline: none; box-shadow: 0 26px 50px rgba(46, 32, 25, .34); } @media (hover: hover) and (pointer: fine) { .tel-cliquable:hover { transform: translateY(-6px) scale(1.025); outline: none; box-shadow: 0 26px 50px rgba(46, 32, 25, .34); } }
.tel.tel-parti .tel-cadre, .maquette.tel-parti .visuel { visibility: hidden; }
.tel-voile { position: fixed; inset: 0; z-index: 300; background: rgba(46, 32, 25, 0); backdrop-filter: blur(0); cursor: zoom-out; transition: background .6s ease, backdrop-filter .6s ease; }
.tel-voile.on { background: rgba(46, 32, 25, .66); backdrop-filter: blur(7px); }
.tel-zoom { position: fixed; margin: 0 !important; z-index: 301; transform-origin: 0 0; will-change: transform; pointer-events: none; }
.tel-zoom .tel-cadre { box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.tel-zoom-legende { position: absolute; left: 0; right: 0; bottom: 3vh; text-align: center; color: var(--creme); font-family: var(--serif); font-style: italic; font-size: 1.2rem; opacity: 0; transition: opacity .5s ease; }
.tel-voile.on .tel-zoom-legende { opacity: 1; transition-delay: .45s; }
.tel-zoom-fermer { position: absolute; top: calc(var(--hauteur-entete, 72px) + 8px); right: 20px; z-index: 302; border: 1.5px solid var(--creme); background: transparent; color: var(--creme); border-radius: 999px; padding: .55em 1.1em; font: 600 .75rem/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; opacity: 0; transition: opacity .5s ease .4s; }
.tel-voile.on .tel-zoom-fermer { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tel-voile, .tel-zoom-legende, .tel-zoom-fermer { transition: none; } }
@media (max-width: 700px) { .tel-zoom-fermer { top: 10px; right: 10px; } }

/* Titres sur une seule ligne (tous les projets sauf Réveille ton ours) : plus petits, la chute à la suite ; js/projets.js réduit encore la taille si besoin */
.hero h1.titre-ligne { font-size: clamp(2rem, 5.2vw, 4.6rem); }
.hero h1.titre-ligne em { display: inline; font-size: 1em; margin-top: 0; }
.titre-bloc.titre-ligne { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.titre-bloc.titre-ligne em { font-size: 1em; }
.avec-objet .titre-bloc.titre-ligne { font-size: clamp(1.9rem, 3.3vw, 2.8rem); }

/* Titre du projet : une bande de la couleur du projet, collée sous la photo du haut */
.hero .bande-titre { padding: clamp(20px, 3.2vw, 40px) 0; }
.hero.hero-claire .bande-titre h1, .hero.hero-claire .bande-titre h1.titre-ligne { color: var(--texte-bande, #F6EDE2); margin: 0; }
.hero.hero-claire .bande-titre h1 em, .hero-claire:has(.fond-hero.charge) .bande-titre h1 em { color: var(--chute-bande, #F9C2C2); }
.hero .bande-titre h1:not(.titre-ligne) { font-size: clamp(2.2rem, 5.2vw, 4.4rem); }   /* Réveille ton ours : deux lignes, plus petit que sur la photo */

/* Petite note en bas à gauche de la page d'un projet (visuels créés avec l'IA) */
.note-ia { margin: 4px 0 clamp(28px, 4vw, 56px); text-align: left; font-size: .78rem; letter-spacing: .02em; opacity: .7; }

/* ==========================================================================
   ÉCHELLE DE TEXTE UNIQUE — téléphone (≤ 700 px), Mes projets : 12 · 14 · 16 · 20 · 24 · 32 px (voir CLAUDE.md « Stratégie mobile »)
   ========================================================================== */
@media (max-width: 700px) {
  /* 32 px · titres de page */
  .projets-haut h1, .hero .bande-titre h1:not(.titre-ligne) { font-size: 2rem; }
  /* 24 px · intertitres de blocs */
  .titre-bloc, .titre-bloc.titre-ligne, .avec-objet .titre-bloc, .avec-objet .titre-bloc.titre-ligne, .cal-mois, .jauge-statut { font-size: 1.5rem; }
  .titre-bloc em { font-size: 1.05em; }
  /* 20 px · introduction courte, titres de la bande « demande / idée / à retenir » */
  #vue-projet .lead.court, .bande3-case small, .projets-haut .phrase { font-size: 1.25rem; }
  /* 16 px · texte courant */
  #vue-projet p, #vue-projet .meta dd { font-size: 1rem; }
  #vue-projet .lead { font-size: 1rem; }
  /* 14 px · petits textes */
  .legende-survol, .tuile .tags span, .suivant .nn { font-size: .875rem; }
  /* 12 px · étiquettes, légendes, mentions, pastilles, boutons */
  #vue-projet .accroche, #vue-projet .etiquette, #vue-projet dt, #vue-projet figcaption, #vue-projet .note-ia, #vue-projet .aide, #vue-projet .pastille-visuel,
  #vue-projet .bouton, #vue-projet .bouton-son, .tuile .tags span, .cal-jour-nom, .cal-canal, .cal-libelle, .cal-filtre, .cal-phase, .cal-phase p, .cal-num, .points { font-size: .75rem; }
}

/* Téléphone : zones tactiles ≥ 44 px (son, carte, calendrier, déclinaisons) */
@media (max-width: 700px) {
  .bouton-son, .cal-filtre, .decl-choix button { min-height: 44px; }
  .cal-fleche { width: 44px; height: 44px; }
  .carte-pastille::after { content: ""; position: absolute; inset: -10px; }   /* zone tactile invisible autour des numéros de la carte */
}

/* Téléphone (retouches de Marah du 03/11) : pages projet plus compactes ; légendes des photos seulement au toucher */
@media (max-width: 700px) {
  #vue-projet p, #vue-projet .meta dd, #vue-projet .lead { font-size: .9rem; line-height: 1.55; }
  #vue-projet .lead.court { font-size: 1.1rem; }
  .bande3-case small { font-size: 1.05rem; }
  .bande3-case p { font-size: .875rem; }
  .bande3-icone { height: 70px; }
  .projets-haut h1, .hero .bande-titre h1:not(.titre-ligne) { font-size: 1.75rem; }
  .hero h1.titre-ligne { font-size: 1.6rem; }
  .titre-bloc, .titre-bloc.titre-ligne, .avec-objet .titre-bloc, .avec-objet .titre-bloc.titre-ligne { font-size: 1.25rem; }
  .intro { padding: 24px 0; }
  .bloc, .texte-seul { padding: 28px 0; gap: 18px; }
  .bande3 { padding: 26px 0; }

  .legende-survol { opacity: 0; transform: translateY(8px); pointer-events: none; }
  .visuel.legende-on .legende-survol { opacity: 1; transform: none; }
  .visuel:has(> .legende-survol)::after { content: "i"; position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; background: rgba(46, 32, 25, .6); color: var(--creme); font: italic 700 .8rem/22px var(--serif); text-align: center; pointer-events: none; }   /* petit « i » : on peut toucher la photo pour lire sa légende */
  .visuel.legende-on:has(> .legende-survol)::after { display: none; }
}
/* Téléphone : barre du haut d'un projet sur une seule ligne (« ← Tous mes projets » et « Projet n° 02 / 06 ») */
@media (max-width: 700px) {
  .barre-projet { gap: 8px; }
  .barre-projet .bouton { white-space: nowrap; padding-left: 14px; padding-right: 14px; }
  .barre-projet .etiquette { white-space: nowrap; letter-spacing: .1em; text-align: right; }
}
/* Fiche du projet (Projet, Client, Contexte, Services, Mon rôle, Mes outils) sur téléphone : fiche technique compacte, titre à gauche, valeur à droite, filets fins (choix A de Marah) */
@media (max-width: 700px) {
  #vue-projet .meta { display: grid; grid-template-columns: 82px minmax(0, 1fr); column-gap: 0; margin: 6px 0 0; border-bottom: 1px solid color-mix(in srgb, var(--chocolat) 22%, transparent); }
  #vue-projet .meta dt, #vue-projet .meta dd { margin: 0; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--chocolat) 22%, transparent); }
  #vue-projet .meta dt { padding-top: 12px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .65; align-self: start; }
  #vue-projet .meta dd { padding-left: 10px; font-size: .875rem; line-height: 1.45; }
}

/* Fiche du projet (téléphone) : texte encore un peu plus petit */
@media (max-width: 700px) {
  #vue-projet .meta { grid-template-columns: 76px minmax(0, 1fr); }
  #vue-projet .meta dt { font-size: .625rem; }
  #vue-projet .meta dd { font-size: .75rem; line-height: 1.4; letter-spacing: .02em; }
}

/* Vigevano (téléphone) : écrans d'application plus petits, on voit les trois d'un coup d'œil (le troisième dépasse pour inviter à glisser) */
@media (max-width: 700px) {
  .telephones:has(.tel.appli) .tel { flex: 0 0 41%; }
  .telephones:has(.tel.appli) { gap: 14px; }
}

/* Vigevano, « Le buzz » (téléphone) : le téléphone Instagram est plus petit et centré */
@media (max-width: 700px) {
  .bloc.inverse > .visuel.bloc-image.sans-fond { width: 62%; margin-left: auto; margin-right: auto; }
}

/* « ← Tous mes projets » (téléphone) : plus petit, fond bleu, écriture crème (zone tactile de 44 px conservée) */
@media (max-width: 700px) {
  #retour-liste { background: var(--bleu); color: var(--creme); border-color: var(--bleu); font-size: .6875rem; letter-spacing: .08em; padding: 0 14px; min-height: 44px; }
  #retour-liste:hover, #retour-liste:focus-visible { background: var(--bleu); color: var(--creme); }
}

/* « ← Tous mes projets » (téléphone) : bouton encore plus petit (32 px de haut) ; la zone tactile de 44 px est gardée par une marge invisible */
@media (max-width: 700px) {
  #retour-liste { position: relative; min-height: 32px; height: 32px; padding: 0 12px; font-size: .625rem; letter-spacing: .06em; }
  #retour-liste::after { content: ""; position: absolute; inset: -6px -4px; }
}

/* Téléphone isolé d'un projet (WWF « Un geste ponctuel… », Vigevano « Le buzz ») : encore plus petit */
@media (max-width: 700px) {
  .bloc.inverse > .visuel.bloc-image.sans-fond { width: 50%; }
}

@media (max-width: 700px) {
  .bloc.inverse > .visuel.bloc-image.sans-fond { width: 50% !important; }   /* la largeur est aussi posée en ligne par js/projets.js */
}

/* Big Bang Smash (téléphone) : carte de fidélité / papier burger / sacs côte à côte, qu'on fait défiler en glissant ; photo des pains du verdict plus petite */
@media (max-width: 700px) {
  .trio:not(.trio-ligne):has(img[src*="big-bang-smash/"]) { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 12px -16px; padding: 4px 16px 12px; scrollbar-width: none; }
  .trio:not(.trio-ligne):has(img[src*="big-bang-smash/"])::-webkit-scrollbar { display: none; }
  .trio:not(.trio-ligne):has(img[src*="big-bang-smash/"]) .visuel { flex: 0 0 62%; scroll-snap-align: center; }
  .bloc.inverse > .visuel.bloc-image:has(img[src*="big-bang-smash/foodtruck"]) { width: 62%; margin-left: auto; margin-right: auto; }
}

/* Fit Active Mum (téléphone) : carré du logo et boutons de choix plus petits ; derniers visuels côte à côte, à faire défiler */
@media (max-width: 700px) {
  .avec-logos .declinaisons.carre .decl-scene { width: 200px; margin-left: auto; margin-right: auto; }
  .avec-logos .decl-choix { gap: 6px; margin-top: 14px; }
  .avec-logos .decl-choix button { position: relative; min-height: 32px; padding: 0 12px; font-size: .625rem; letter-spacing: .06em; }
  .avec-logos .decl-choix button::after { content: ""; position: absolute; inset: -6px -2px; }
  .trio:not(.trio-ligne):has(img[src*="fit-active-mum/"]) { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 12px -16px; padding: 4px 16px 12px; scrollbar-width: none; }
  .trio:not(.trio-ligne):has(img[src*="fit-active-mum/"])::-webkit-scrollbar { display: none; }
  .trio:not(.trio-ligne):has(img[src*="fit-active-mum/"]) .visuel { flex: 0 0 62%; scroll-snap-align: center; }
}

@media (max-width: 700px) {
  .avec-logos .decl-choix { gap: 5px; flex-wrap: nowrap; }
  .avec-logos .decl-choix button { padding: 0 9px; font-size: .59rem; letter-spacing: .04em; white-space: nowrap; }   /* les 4 boutons tiennent sur une ligne */
}

/* Réveille ton ours (téléphone) : les 3 téléphones plus petits, on en voit deux et demi à la fois */
@media (max-width: 700px) {
  .telephones:has(img[src*="reveille-ton-ours/"]) { gap: 14px; }
  .telephones:has(img[src*="reveille-ton-ours/"]) .tel { flex: 0 0 41%; }
}