/* La Cuisine des 6 Saveurs — 6saveurs.fr */

:root {
  --creme: #FBF4E9;
  --creme-carte: #FFFBF3;
  --beige: #F6EBD9;
  --terre: #A83F0C;
  --terre-fonce: #7A2D06;
  --brun: #33241A;
  --brun-texte: #493526;
  --brun-clair: #8A6640;
  --filet: #E4D3BB;
  --filet-photo: #DCC7A9;
  --filet-moyen: #C9B294;
  --serif: Bitter, Georgia, "Times New Roman", serif;
  --sans: Karla, system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1140px;
  --marge: clamp(16px, 4vw, 28px);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--brun);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

/* Les images portent des attributs width/height dans le HTML : ils evitent
   les sauts de mise en page au chargement, mais ils posent aussi une hauteur
   fixe en CSS. Or une hauteur fixe rend « aspect-ratio » sans effet.
   On libere donc la hauteur par defaut ; les regles qui ont besoin d'une
   hauteur precise (logos, vignettes) la redefinissent et l'emportent. */
img { height: auto; }

a { color: var(--terre); text-decoration: none; }
a:hover { color: var(--terre-fonce); }

h1, h2, h3 { font-family: var(--serif); margin: 0; }

::selection { background: #F0D9B8; }

section[id] { scroll-margin-top: 130px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--marge); padding-right: var(--marge); }

.eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brun-clair);
}

.note { font-size: 14px; color: var(--brun-clair); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-radius: 2px;
  font-size: 15.5px;
  font-weight: 600;
  min-height: 48px;
}
.btn--plein { background: var(--terre); color: #FFF8ED; }
.btn--plein:hover { background: var(--terre-fonce); color: #FFF8ED; }
.btn--ligne { border: 1.5px solid var(--filet-moyen); color: var(--brun); }
.btn--ligne:hover { border-color: var(--terre); color: var(--terre); }
.btn--petit { padding: 11px 16px; font-size: 14.5px; min-height: 44px; }

.lien-tel { display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid #E0C7A9; }
.lien-souligne { border-bottom: 1px solid #E0C7A9; }

/* ---------- En-tête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 244, 233, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filet);
  box-shadow: 0 1px 3px rgba(51, 36, 26, 0.06), 0 6px 18px rgba(51, 36, 26, 0.05);
}
.entete__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-top: 10px;
  padding-bottom: 6px;
}
.entete__logo { width: 46px; height: 46px; display: block; flex: none; }
.entete__nom { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.entete__nom strong { font-family: var(--serif); font-weight: 700; font-size: 15px; }
.entete__nom span { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brun-clair); }
.entete__tel { margin-left: auto; flex: none; }
.entete__accueil { display: block; flex: none; line-height: 0; }
.entete__accueil:hover { opacity: 0.82; }
.nav { width: 100%; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; font-weight: 500; padding-bottom: 4px; }

/* Sur mobile les quatre entrees demandent 389px pour 358 disponibles :
   « Contact » passait a la ligne et l'en-tete collant gagnait 40px de
   hauteur. On resserre, et on defile horizontalement plutot que de
   retourner a la ligne sur les tres petits ecrans. */
@media (max-width: 700px) {
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    font-size: 12.5px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
  padding-top: clamp(40px, 7vw, 80px);
  padding-bottom: clamp(36px, 5vw, 60px);
}
.hero h1 {
  font-weight: 700;
  font-size: clamp(32px, 6vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero__intro {
  margin: 22px 0 0;
  font-size: clamp(16px, 2vw, 18.5px);
  line-height: 1.6;
  color: var(--brun-texte);
  max-width: 46ch;
  text-wrap: pretty;
}
.hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__menu {
  display: block;
  width: 88%;
  margin: 0 auto;
  padding: 0;
  border: 1px solid var(--filet-photo);
  background: var(--creme-carte);
  box-shadow: 0 2px 0 var(--filet);
  font: inherit;
  line-height: 0;
  cursor: pointer;
}
.hero__menu:hover { border-color: var(--terre); }
.hero__menu img { display: block; width: 100%; height: auto; }

/* ---------- Engagements ---------- */

.engagements { border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); background: var(--beige); }
.engagements__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 46%), 1fr));
  gap: 14px;
  padding-top: clamp(30px, 4vw, 48px);
  padding-bottom: clamp(30px, 4vw, 48px);
}

.carte {
  background: var(--creme-carte);
  border: 1px solid var(--filet);
  padding: 22px 22px 24px;
  min-width: 0;
}
.carte__titre { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.carte__titre svg { flex: none; }
/* Sans min-width:0 ni coupure, un mot long comme « méditerranéenne »
   deborde de la carte et pousse l'icone hors de l'ecran. */
.carte__titre h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.carte p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--brun-texte); }

/* Ce bloc doit rester APRES les regles .carte ci-dessus : a specificite
   egale, c'est la derniere declaration qui l'emporte. Place avant, son
   align-items etait silencieusement ecrase par celui de .carte__titre. */
@media (max-width: 700px) {
  /* minmax(0, 1fr) et non 1fr : « 1fr » garde un minimum egal au contenu,
     donc un mot long empeche la colonne de retrecir et fait deborder
     toute la grille hors de l'ecran. */
  .engagements__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte { padding: 18px 16px 20px; }
  /* L'icone passe au-dessus du titre : cote a cote, il ne resterait
     qu'une soixantaine de pixels au texte, qui se couperait n'importe ou. */
  .carte__titre { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* width:100% est indispensable : « overflow-wrap: break-word » autorise
     la coupure a l'affichage mais ne reduit pas la largeur minimale
     intrinseque, donc sans largeur imposee le titre reste calee sur le
     mot le plus long et sort de la carte. */
  .carte__titre h3 { font-size: 17px; width: 100%; }
}

/* ---------- Prestations ---------- */

.prestations { border-top: 1px solid var(--filet); background: var(--creme); }
.prestations__inner { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }
.prestations__intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
  margin-bottom: clamp(30px, 4vw, 46px);
}
.prestations__intro h2 { font-weight: 700; font-size: clamp(27px, 4vw, 40px); line-height: 1.1; max-width: 26ch; }
.prestations__intro p {
  margin: 18px 0 24px;
  font-size: clamp(15.5px, 1.8vw, 17px);
  line-height: 1.65;
  color: var(--brun-texte);
  max-width: 48ch;
  text-wrap: pretty;
}
.occasions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.occasions li {
  border: 1px solid var(--filet-photo);
  background: var(--creme-carte);
  padding: 10px 15px;
  font-family: var(--serif);
  font-size: 16px;
}
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.service {
  background: var(--creme-carte);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--terre);
  padding: clamp(22px, 3vw, 30px) clamp(20px, 2.5vw, 26px) clamp(26px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.service:hover { background: #FFF6E6; }
.service__titre { display: flex; align-items: center; gap: 12px; }
.service__titre h3 { font-weight: 600; font-size: clamp(18px, 2.2vw, 20px); line-height: 1.25; }
.service p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--brun-texte); }
.prestations__pied {
  margin: clamp(28px, 4vw, 40px) 0 0;
  font-size: clamp(15.5px, 1.9vw, 16.5px);
  line-height: 1.6;
  color: var(--brun-texte);
}

/* ---------- Franck & Steph ---------- */

.nous { border-top: 1px solid var(--filet); background: var(--beige); }
.nous__inner {
  padding-top: clamp(48px, 7vw, 92px);
  padding-bottom: clamp(48px, 7vw, 92px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}
.nous h2 { font-weight: 700; font-size: clamp(27px, 4vw, 40px); line-height: 1.1; text-wrap: balance; }
.nous__texte {
  margin-top: 22px;
  display: grid;
  gap: 16px;
  font-size: clamp(16px, 2vw, 17.5px);
  line-height: 1.68;
  color: var(--brun-texte);
  max-width: 54ch;
}
.nous__texte p { margin: 0; text-wrap: pretty; }
.nous__photos { display: grid; gap: 14px; }
.nous__photos img { display: block; width: 100%; object-fit: cover; border: 1px solid var(--filet-photo); }
/* Cadrage paysage 3:2 de la maquette : la photo source est un portrait,
   la bande retenue est calee sur 30% de la hauteur pour garder les
   visages au centre et la paella en bas. */
.nous__photos > img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%; }
.nous__vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nous__vignettes img { aspect-ratio: 1; }
.nous__vignettes img:first-child { object-position: 50% 26%; }

/* ---------- Galerie ---------- */

.galerie { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }
.galerie__cadre { position: relative; }

/* Grille flex : 4 photos par ligne sur grand ecran.
   --gouttiere sert au calcul de la largeur des elements. */
.galerie__grid {
  --gouttiere: 14px;
  --colonnes: 4;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gouttiere);
}
.galerie__item {
  flex: 0 0 calc((100% - (var(--colonnes) - 1) * var(--gouttiere)) / var(--colonnes));
  max-width: calc((100% - (var(--colonnes) - 1) * var(--gouttiere)) / var(--colonnes));
  display: block;
  padding: 6px;
  margin: 0;
  border: 1px solid var(--filet-photo);
  background: var(--creme-carte);
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}
.galerie__item:hover { border-color: var(--terre); }
.galerie__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galerie__aide { margin: 14px 0 0; font-size: 13.5px; color: var(--brun-clair); }

/* Fleches et points : uniquement en mode carousel (voir media query) */
.galerie__fleche { display: none; }
.galerie__points { display: none; }

/* Ecrans intermediaires : 3 photos par ligne */
@media (max-width: 980px) {
  .galerie__grid { --colonnes: 3; }
}

@media (max-width: 700px) {
  /* Sous 700px la grille devient un carousel : defilement horizontal,
     une photo a la fois, avec fleches, points et balayage tactile.
     flex-wrap: nowrap est indispensable ici, sinon les photos reviennent
     a la ligne au lieu de defiler. */
  .galerie__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .galerie__grid::-webkit-scrollbar { display: none; }
  .galerie__item { flex: 0 0 82%; max-width: 82%; scroll-snap-align: center; }

  .galerie__fleche {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 42px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--filet-moyen);
    border-radius: 2px;
    background: rgba(255, 251, 243, 0.94);
    color: var(--brun);
    font-family: var(--sans);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(51, 36, 26, 0.14);
  }
  .galerie__fleche[hidden] { display: none; }
  .galerie__fleche:hover { border-color: var(--terre); color: var(--terre); }
  .galerie__fleche--prec { left: 2px; }
  .galerie__fleche--suiv { right: 2px; }

  .galerie__points {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }
  .galerie__points[hidden] { display: none; }
  .galerie__points button {
    width: 22px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: var(--filet-moyen);
    cursor: pointer;
  }
  .galerie__points button[aria-selected="true"] { background: var(--terre); }
}

@media (prefers-reduced-motion: reduce) {
  .galerie__grid { scroll-behavior: auto; }
}

/* ---------- Modale photo ---------- */

.modale {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(35, 24, 16, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Marges calees sur les commandes : le bouton de fermeture en haut,
     le compteur en bas, les fleches sur les cotes. Tout l'espace restant
     est laisse a la photo. */
  padding: 58px clamp(56px, 7vw, 88px) 50px;
}
.modale[hidden] { display: none; }
/* Image seule (le menu de la semaine) : ni fleches ni compteur, donc
   pas besoin de reserver les marges laterales. La photo prend toute
   la hauteur disponible. */
.modale--seule { padding: 52px clamp(12px, 3vw, 40px) 20px; }
.modale--seule .modale__prec,
.modale--seule .modale__suiv,
.modale--seule .modale__compteur { display: none; }
.modale img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.modale button {
  position: absolute;
  border: 1px solid rgba(247, 238, 224, 0.35);
  background: transparent;
  color: #F7EEE0;
  line-height: 1;
  cursor: pointer;
  border-radius: 2px;
  font-family: var(--sans);
}
.modale button:hover { background: rgba(247, 238, 224, 0.12); }
.modale__fermer { top: clamp(10px, 3vw, 26px); right: clamp(10px, 3vw, 26px); width: 46px; height: 46px; font-size: 22px; }
.modale__prec, .modale__suiv { top: 50%; transform: translateY(-50%); width: 48px; height: 60px; font-size: 24px; }
.modale__prec { left: clamp(6px, 2vw, 26px); }
.modale__suiv { right: clamp(6px, 2vw, 26px); }
.modale__compteur {
  position: absolute;
  bottom: clamp(10px, 3vw, 26px);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: #D3C0AC;
}

/* ---------- Avis ---------- */

.avis { border-top: 1px solid var(--filet); background: var(--creme); }
.avis__inner { padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(48px, 7vw, 84px); }
.avis__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: clamp(26px, 4vw, 40px);
}
.avis__tete h2 { font-weight: 700; font-size: clamp(27px, 4vw, 40px); line-height: 1.1; }
.avis__note {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--filet);
  background: var(--creme-carte);
  padding: 16px 22px;
}
.avis__note img { display: block; flex: none; }
.avis__chiffre { font-family: var(--serif); font-size: 38px; font-weight: 700; line-height: 1; color: var(--terre); }
.avis__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.avis__carte {
  margin: 0;
  background: var(--creme-carte);
  border: 1px solid var(--filet);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.etoiles { font-size: 15px; letter-spacing: 0.12em; color: var(--terre); }
.avis__carte blockquote { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.5; }
.avis__carte figcaption { margin-top: auto; font-size: 14px; color: var(--brun-clair); }
.avis__lien { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- Contact ---------- */

.contact { border-top: 1px solid var(--filet); background: var(--beige); }
.contact__inner {
  padding-top: clamp(44px, 6vw, 84px);
  padding-bottom: clamp(44px, 6vw, 84px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 4vw, 48px);
}
.contact__tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.contact__mail {
  font-family: var(--serif);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 600;
  overflow-wrap: anywhere;
  hyphens: none;
}
.contact__ville {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--terre);
}
.contact p:last-child { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--brun-texte); }

.contact__horaires {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 16px;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--brun-texte);
}
.contact__horaires dt { color: var(--brun-clair); }
.contact__horaires dd { margin: 0; font-family: var(--serif); }

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

.pied { background: var(--brun); color: #D3C0AC; }
.pied__inner {
  padding-top: clamp(32px, 4vw, 44px);
  padding-bottom: clamp(32px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 24px;
}
.pied__logo { width: 224px; height: 224px; flex: none; }
.pied__ident { font-size: 14.5px; line-height: 1.6; min-width: 0; }
.pied__ident strong { display: block; font-family: var(--serif); font-weight: 400; color: #F7EEE0; font-size: 16px; }
.pied__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pied a { color: #EFA967; }
.pied a:hover { color: #FFD3A8; }
.pied__liens { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 14.5px; }
.pied__liens a { display: inline-flex; align-items: center; gap: 7px; }
.pied__liens svg { flex: none; }

@media (max-width: 560px) {
  .pied__logo { width: 150px; height: 150px; }
  .pied__liens { margin-left: 0; }
}

/* ---------- Pages de texte (mentions legales) ---------- */

.texte { border-top: 1px solid var(--filet); background: var(--creme); }
.texte__inner {
  padding-top: clamp(40px, 6vw, 76px);
  padding-bottom: clamp(48px, 7vw, 88px);
  max-width: 760px;
}
.texte h1 {
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.texte h2 {
  font-weight: 600;
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.25;
  margin: clamp(30px, 4vw, 44px) 0 12px;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--filet);
}
.texte h2:first-of-type { border-top: 0; padding-top: 0; }
.texte p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--brun-texte); }
.texte p:last-child { margin-bottom: 0; }
.texte a { border-bottom: 1px solid #E0C7A9; }

.texte__liste { list-style: none; margin: 0 0 14px; padding: 0; }
.texte__liste li {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 4px 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--filet);
  font-size: 15.5px;
  line-height: 1.5;
}
.texte__liste li:first-child { border-top: 1px solid var(--filet); }
.texte__liste dt, .texte__liste .cle { color: var(--brun-clair); }
.texte__liste .valeur { color: var(--brun-texte); }

/* Contenus restant a renseigner : volontairement visibles pour ne pas
   passer inapercus une fois le site en ligne. */
.acompleter {
  display: inline-block;
  background: #FCEDEB;
  color: #A32014;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 2px;
}

/* ---------- Portrait du chef ---------- */

.portrait {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  padding-top: clamp(36px, 6vw, 76px);
  padding-bottom: clamp(36px, 5vw, 60px);
}
.portrait__photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--filet-photo);
  background: var(--creme-carte);
  box-shadow: 0 2px 0 var(--filet);
}
.portrait h1 {
  font-weight: 700;
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.portrait__chapo {
  margin: 20px 0 0;
  font-size: clamp(16px, 2vw, 18.5px);
  line-height: 1.6;
  color: var(--brun-texte);
  max-width: 46ch;
  text-wrap: pretty;
}
.portrait__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

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

.texte__retour { margin-top: clamp(34px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 620px) {
  .texte__liste li { grid-template-columns: 1fr; gap: 2px; }
  .texte__liste .cle { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
}