/* =====================================================================
   LOJONA STUDIO - feuille propre a l'accueil
   Hero, prestations, realisations, a propos, contact.
   ===================================================================== */

.section {
  --marge-section: clamp(3rem, 7vw, 6rem);
  position: relative;
  padding-block: var(--marge-section);
  /* Une ancre amene le titre de la section juste sous l'en-tete, et non la
     marge qui le precede : le bloc entier tient alors a l'ecran. */
  scroll-margin-top: calc(-1 * var(--marge-section));
}

.chapeau {
  max-width: 44rem;
  margin: 1rem auto 0;
  font-size: 1.1rem;
  line-height: 1.2;
  text-align: center;
}

.chapeau-large {
  max-width: 40rem;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Le hero occupe tout l'ecran d'arrivee, plus la hauteur de la vague qui
     le suit : la ligne rouge n'apparait qu'au premier defilement. */
  min-height: calc(100vh + clamp(2.5rem, 6vw, 5.5rem) + 1rem);
  min-height: calc(100svh + clamp(2.5rem, 6vw, 5.5rem) + 1rem);
  margin-top: -6rem;
  padding-top: 7.5rem;
}

.hero-grille {
  display: grid;
  flex: 1;
  align-items: end;
  gap: 1rem;
}

.hero-texte {
  padding-block: clamp(2rem, 6vw, 6rem) 0;
}

.hero-titre {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 0.35rem;
}

.surtitre {
  grid-column: 2;
  margin-bottom: 0.6rem;
  color: var(--texte-bleu);
  font-size: clamp(1.1rem, 1.4vw, 1.6rem);
  text-transform: uppercase;
  line-height: 1.2;
}

.hero-etoile-titre {
  grid-column: 1;
  width: clamp(2rem, 3.5vw, 4.25rem);
  height: clamp(2rem, 3.5vw, 4.25rem);
  max-width: none;
  margin-top: 0.35em;
}

.hero-accroche {
  grid-column: 2;
  color: var(--texte-orange);
  font-size: clamp(2.3rem, 5vw, 6rem);
  line-height: 0.95;
  overflow-wrap: anywhere;
}

.hero-intro {
  max-width: 36rem;
  margin: 1.5rem 0 0 clamp(2.35rem, 3.9vw, 4.6rem);
  font-size: clamp(1rem, 1.1vw, 1.2rem);
}

.hero-intro + .groupe-boutons {
  margin: 1.25rem 0 0 clamp(2.35rem, 3.9vw, 4.6rem);
}

/* Troisieme element a apparaitre dans le hero, apres l'intro et les boutons. */
.hero-rassurance.apparition {
  animation-delay: 0.3s;
}

.hero-rassurance {
  margin: 1.25rem 0 0 clamp(2.35rem, 3.9vw, 4.6rem);
  color: var(--rouge);
  font-family: var(--police-titre);
  font-size: 1rem;
}

.hero-visuel {
  position: relative;
  justify-self: center;
  width: min(100%, 26rem);
}

.hero-photo {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-etoile-grande {
  position: absolute;
  z-index: 2;
  bottom: 18%;
  left: -8%;
  width: clamp(4rem, 7vw, 8.5rem);
  height: clamp(4rem, 7vw, 8.5rem);
}

.hero-bulle-1 {
  background: var(--rose);
  top: -9rem;
  left: -7rem;
  width: clamp(14rem, 27vw, 32rem);
  aspect-ratio: 1;
}

.hero-bulle-2 {
  background: var(--bleu);
  bottom: 12%;
  left: 5%;
  width: clamp(5rem, 11.5vw, 14rem);
  aspect-ratio: 1.08;
}

.hero-bulle-3 {
  background: var(--orange);
  top: 2%;
  right: -12%;
  width: 72%;
  aspect-ratio: 1;
}

@media (min-width: 64em) {
  .hero-grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
    min-height: 54rem;
    padding-left: clamp(2rem, 11vw, 13rem);
  }

  .hero-texte {
    position: relative;
    z-index: 2;
    align-self: start;
    padding-top: clamp(4rem, 8vw, 8rem);
  }

  /* Le titre deborde volontairement sur la colonne de la photo, comme sur
     la maquette : trois lignes a toutes les largeurs de bureau. */
  .hero-accroche {
    width: 8.1em;
  }

  .hero-visuel {
    justify-self: end;
    width: min(100%, 40rem);
    margin-right: -2rem;
  }

  .hero-etoile-grande {
    bottom: 26%;
    left: -12%;
  }

  .hero-bulle-1 {
    top: -12rem;
  }

  .hero-texte {
    margin-right: -8rem;
  }
}

/* Grands ecrans : la photo sort de la zone vers la droite, comme sur la
   maquette, pour laisser le titre respirer. */
@media (min-width: 100em) {
  .hero-visuel {
    margin-right: -12rem;
  }
}

/* ---------------------------------------------------------------- prestations */
.grille-prestations {
  display: grid;
  gap: 1.75rem;
  margin-top: 2rem;
}

.carte-prestation {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem 2rem 2.25rem;
  border: var(--trait) solid var(--teinte);
  border-radius: var(--rayon-carte);
  background: var(--sable);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.carte-prestation:hover {
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: 0 14px 0 -4px var(--teinte);
}

/* Chaque carte prend tour a tour une couleur de la palette. */
.carte-prestation:nth-child(4n+1) {
  --teinte: var(--rose);
  --teinte-texte: var(--texte-rose);
}

.carte-prestation:nth-child(4n+2) {
  --teinte: var(--bleu);
  --teinte-texte: var(--texte-bleu);
}

.carte-prestation:nth-child(4n+3) {
  --teinte: var(--orange);
  --teinte-texte: var(--texte-orange);
}

.carte-prestation:nth-child(4n) {
  --teinte: var(--rouge);
  --teinte-texte: var(--rouge);
}

.carte-icone {
  width: 3rem;
  height: 3rem;
  color: var(--teinte);
  stroke-width: 1.6;
}

.carte-titre {
  margin-top: 1.25rem;
  color: var(--teinte-texte);
  font-size: clamp(1.6rem, 2.2vw, 2.25rem);
}

.carte-texte {
  margin-top: 1rem;
  font-size: 1.15rem;
  line-height: 1.1;
}

.badge {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  padding: 0.55rem 1.3rem;
  border: 1px solid var(--gris);
  border-radius: 999px;
  font-size: 0.95rem;
  line-height: 1.2;
}

.lien-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  margin-top: 0.75rem;
  color: var(--gris);
  font-family: var(--police-titre);
  font-size: 1.35rem;
  text-decoration: none;
}

.lien-action-chevron {
  width: 1.2rem;
  height: 1.2rem;
  transition: transform 0.25s ease;
}

.lien-action:hover {
  color: var(--rouge);
}

.lien-action:hover .lien-action-chevron {
  transform: translateX(4px);
}

.bandeau-mesure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2.75rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--gris);
  border-radius: 2rem;
  text-align: center;
}

.bandeau-mesure-texte {
  font-family: var(--police-titre);
  font-size: 1rem;
  line-height: 1.3;
}

.prestations-bulle-1 {
  background: var(--rose);
  top: 10%;
  right: -9rem;
  width: clamp(12rem, 27vw, 32rem);
  aspect-ratio: 1;
}

.prestations-bulle-2 {
  background: var(--orange);
  bottom: -6%;
  left: -11rem;
  width: clamp(14rem, 30vw, 36rem);
  aspect-ratio: 0.9;
}

@media (min-width: 48em) {
  .grille-prestations {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.25rem;
  }

  .bandeau-mesure {
    flex-direction: row;
    justify-content: space-between;
    padding: 0.5rem 0.5rem 0.5rem 1.4rem;
    border-radius: 999px;
    text-align: left;
  }

  .bandeau-mesure .bouton {
    flex-shrink: 0;
  }
}

/* ---------------------------------------------------------------- realisations */
.carte-chantier {
  max-width: 54rem;
  margin: 3rem auto 0;
  padding: 3rem clamp(1.25rem, 5vw, 5rem);
  border: var(--trait) solid var(--orange);
  border-radius: 2rem;
  text-align: center;
}

.carte-chantier-titre {
  color: var(--rouge);
  font-size: clamp(1.6rem, 2vw, 2rem);
}

.carte-chantier-texte {
  margin-top: 1.5rem;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  line-height: 1.5;
}

/* Galerie : bande horizontale a defilement aimante. La hauteur des photos
   suit celle de l'ecran pour que toute la section reste visible. */
.galerie {
  position: relative;
  margin-top: clamp(1.5rem, 4vh, 3rem);
}

.galerie-liste {
  display: flex;
  justify-content: safe center;
  gap: clamp(1rem, 2vw, 2rem);
  padding: 1rem 0.5rem 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--orange) transparent;
}

.galerie-liste:focus-visible {
  outline-offset: 0;
}

.galerie-element {
  flex-shrink: 0;
  scroll-snap-align: center;
}

.galerie-lien {
  display: block;
  overflow: hidden;
  border: var(--trait) solid var(--teinte);
  border-radius: 1.5rem;
  transform: rotate(var(--inclinaison));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.galerie-lien:hover,
.galerie-lien:focus-visible {
  box-shadow: 0 12px 0 -4px var(--teinte);
  transform: rotate(0deg) translateY(-6px);
}

.galerie-element:nth-child(4n+1) {
  --teinte: var(--rose);
  --inclinaison: -1.5deg;
}

.galerie-element:nth-child(4n+2) {
  --teinte: var(--bleu);
  --inclinaison: 1deg;
}

.galerie-element:nth-child(4n+3) {
  --teinte: var(--orange);
  --inclinaison: -0.8deg;
}

.galerie-element:nth-child(4n) {
  --teinte: var(--rouge);
  --inclinaison: 1.4deg;
}

.galerie-image {
  width: auto;
  max-width: min(78vw, 40rem);
  height: clamp(14rem, 44vh, 26rem);
  object-fit: cover;
}

.galerie-legende {
  max-width: 20rem;
  margin-top: 0.75rem;
  font-family: var(--police-titre);
  font-size: 1.1rem;
  line-height: 1.2;
}

.galerie-categorie {
  display: block;
  font-family: var(--police-texte);
  font-size: 0.9rem;
}

.galerie-commandes {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.galerie-commandes[hidden] {
  display: none;
}

.galerie-bouton {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: var(--trait) solid var(--orange);
  border-radius: 50%;
  background: transparent;
  color: var(--rouge);
  cursor: pointer;
  transition: transform 0.25s ease;
}

.galerie-bouton:hover {
  transform: scale(1.08);
}

.galerie-bouton .icone {
  width: 1.4rem;
  height: 1.4rem;
}

.galerie-precedent {
  transform: rotate(180deg);
}

/* Visionneuse : dialogue natif, fermeture par Echap, par le bouton ou en
   cliquant a cote de la photo. */
.visionneuse {
  max-width: min(94vw, 90rem);
  max-height: 92vh;
  padding: 0;
  border: var(--trait) solid var(--orange);
  border-radius: 1.5rem;
  background: var(--sable);
  overflow: hidden;
}

.visionneuse::backdrop {
  background: rgb(94 106 115 / 0.85);
}

.visionneuse-cadre img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 6px);
  width: auto;
  height: auto;
}

.visionneuse-fermer {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sable);
  color: var(--rouge);
  cursor: pointer;
}

.visionneuse-fermer .icone {
  width: 1.4rem;
  height: 1.4rem;
}

.realisations-bulle-1 {
  background: var(--bleu);
  top: 12%;
  right: -3rem;
  width: clamp(12rem, 28vw, 33rem);
  aspect-ratio: 1.05;
}

.realisations-bulle-2 {
  background: var(--rose);
  bottom: 4%;
  left: -8rem;
  width: clamp(12rem, 23vw, 28rem);
  aspect-ratio: 0.95;
}

/* ---------------------------------------------------------------- a propos
   Carnet de photographe : portrait colle et penche, maintenu par un
   morceau de scotch rose, texte libre a cote, atouts en trois cartes.
   Couleurs de la palette uniquement ; les tailles suivent la hauteur de
   l'ecran pour que tout le bloc reste visible. */
.apropos-grille {
  display: grid;
  justify-items: center;
  gap: 3rem;
  margin-top: clamp(1.25rem, 3.5vh, 2.5rem);
}

.apropos-portrait {
  position: relative;
  transform: rotate(-3deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.apropos-portrait:hover {
  transform: rotate(0deg) scale(1.02);
}

.apropos-cadre {
  height: min(24rem, 48vh, 110vw);
  aspect-ratio: 0.83;
  padding-top: 1.5rem;
  overflow: hidden;
  border: var(--trait) solid var(--orange);
  border-radius: 1.75rem;
  background: var(--bleu);
}

.apropos-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.apropos-scotch {
  position: absolute;
  z-index: 1;
  top: -0.9rem;
  left: 50%;
  width: 7rem;
  height: 1.8rem;
  background: var(--rose);
  opacity: 0.9;
  transform: translateX(-50%) rotate(5deg);
}

.apropos-etoile {
  position: absolute;
  z-index: 1;
  top: 1.25rem;
  right: -1.4rem;
  width: 3rem;
  height: 3rem;
  color: var(--rouge);
}

.apropos-etiquette {
  position: absolute;
  z-index: 1;
  bottom: -1.1rem;
  left: 50%;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background: var(--rouge);
  color: var(--sable);
  font-family: var(--police-titre);
  font-size: 1rem;
  white-space: nowrap;
  transform: translateX(-50%) rotate(3deg);
}

.apropos-titre {
  color: var(--rouge);
  font-size: clamp(2rem, min(3.2vw, 5.6vh), 3.25rem);
  line-height: 1;
}

.apropos-titre-nom {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--police-texte);
  font-size: 0.62em;
  font-weight: 400;
}

.apropos-paragraphe {
  max-width: 38rem;
  margin-top: clamp(0.6rem, 1.8vh, 1rem);
  font-size: clamp(1rem, min(1.2vw, 2.3vh), 1.2rem);
  line-height: 1.45;
}

.apropos-citation {
  max-width: 36rem;
  margin: clamp(0.9rem, 2.6vh, 1.5rem) 0 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 4px solid var(--orange);
  color: var(--rouge);
  font-family: var(--police-titre);
  font-size: clamp(1.15rem, min(1.4vw, 2.7vh), 1.45rem);
  line-height: 1.25;
}

.atouts {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4.5vh, 3rem);
}

.atout {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.9rem;
  padding: clamp(0.9rem, 2.2vh, 1.4rem) 1.25rem;
  border: var(--trait) solid var(--teinte);
  border-radius: 1.5rem;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.atout:hover {
  box-shadow: 0 10px 0 -4px var(--teinte);
  transform: translateY(-4px) rotate(-0.5deg);
}

.atout:nth-child(3n+1) {
  --teinte: var(--rose);
}

.atout:nth-child(3n+2) {
  --teinte: var(--bleu);
}

.atout:nth-child(3n) {
  --teinte: var(--orange);
}

.atout-pastille {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--teinte);
  color: var(--rouge);
}

.atout-pastille .icone {
  width: 1.3rem;
  height: 1.3rem;
}

.atout-titre {
  color: var(--rouge);
  font-size: clamp(1.1rem, 1.3vw, 1.3rem);
}

.atout-texte {
  grid-column: 1 / -1;
  margin-top: clamp(0.4rem, 1.2vh, 0.75rem);
  font-size: clamp(0.9rem, min(1vw, 2vh), 1rem);
  line-height: 1.35;
}

.apropos-bulle-1 {
  background: var(--bleu);
  top: 10%;
  right: -6rem;
  width: clamp(8rem, 16vw, 18rem);
  aspect-ratio: 1;
}

.apropos-bulle-2 {
  background: var(--orange);
  top: 6%;
  left: -5rem;
  width: clamp(6rem, 11vw, 12rem);
  aspect-ratio: 1;
}

@media (min-width: 48em) {
  .atouts {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }

  .atout {
    align-content: start;
  }
}

@media (min-width: 64em) {
  .apropos-grille {
    grid-template-columns: auto minmax(0, 38rem);
    justify-content: center;
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
  }

  .apropos-grille .apropos-texte {
    justify-self: start;
  }
}

/* Portables : meme dessin, un peu plus serre. */
@media (min-width: 64em) and (max-height: 50em) {
  .apropos-grille {
    margin-top: 0.75rem;
  }

  .apropos-cadre {
    height: 40vh;
  }

  .atouts {
    margin-top: 1.6rem;
  }

  .atout {
    padding: 0.7rem 1rem;
  }

  .atout-pastille {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* ---------------------------------------------------------------- faq
   Questions depliables, encadrees tour a tour de rose, bleu et orange
   comme les atouts. Deux colonnes sur ordinateur : toutes les questions
   fermees tiennent a l'ecran. */
.faq-liste {
  display: grid;
  align-items: start;
  gap: clamp(0.75rem, 1.8vh, 1.1rem) 1.5rem;
  max-width: 72rem;
  margin: clamp(1.25rem, 3.5vh, 2.5rem) auto 0;
}

.faq-question {
  border: var(--trait) solid var(--teinte);
  border-radius: 1.5rem;
  transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq-question:hover,
.faq-question[open] {
  box-shadow: 0 10px 0 -4px var(--teinte);
}

.faq-question:nth-child(3n+1) {
  --teinte: var(--rose);
}

.faq-question:nth-child(3n+2) {
  --teinte: var(--bleu);
}

.faq-question:nth-child(3n) {
  --teinte: var(--orange);
}

.faq-intitule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding: clamp(0.8rem, 2vh, 1.1rem) 1.25rem;
  color: var(--rouge);
  font-family: var(--police-titre);
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
}

.faq-intitule::-webkit-details-marker {
  display: none;
}

.faq-intitule:focus-visible {
  border-radius: 1.3rem;
  outline-offset: -3px;
}

/* Signe plus dessine en CSS, qui pivote en croix a l'ouverture. */
.faq-signe {
  position: relative;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--teinte);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq-signe::before,
.faq-signe::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.9rem;
  height: 3px;
  border-radius: 2px;
  background: var(--rouge);
  transform: translate(-50%, -50%);
}

.faq-signe::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-question[open] .faq-signe {
  transform: rotate(135deg);
}

.faq-reponse {
  padding: 0 1.25rem clamp(0.9rem, 2.2vh, 1.25rem);
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  line-height: 1.45;
}

.faq-bulle-1 {
  background: var(--rose);
  top: 8%;
  left: -6rem;
  width: clamp(8rem, 14vw, 16rem);
  aspect-ratio: 1;
}

.faq-bulle-2 {
  background: var(--bleu);
  right: -4rem;
  bottom: 10%;
  width: clamp(5rem, 9vw, 10rem);
  aspect-ratio: 1;
}

@media (min-width: 64em) {
  .faq-liste {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------------------------------------------------------------- contact
   Deux cartes sur le fond sable, simplement encadrees d'orange : aucune
   couleur hors palette. Les couleurs vives ne servent que d'accents
   (pastilles, bouton).
   Seule la hauteur du champ message suit la hauteur de l'ecran. */
.section-contact {
  padding-bottom: clamp(4rem, 9vw, 9rem);
}

.contact-grille {
  display: grid;
  gap: 2rem;
  margin-top: clamp(1.5rem, 4vh, 3rem);
}

.contact-accroche,
.carte-formulaire {
  padding: clamp(1.5rem, 4vh, 2.75rem) clamp(1.25rem, 3vw, 3rem);
  border: var(--trait) solid var(--orange);
  border-radius: 2rem;
}

.accroche-titre {
  max-width: 11em;
  color: var(--rouge);
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 1;
}

.accroche-texte {
  max-width: 28rem;
  margin-top: clamp(0.75rem, 2.4vh, 1.4rem);
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.4;
}

.coordonnees {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: clamp(1.25rem, 3.5vh, 2.25rem);
}

.coordonnees-ligne {
  --teinte: var(--orange);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 1.25rem 0.35rem 0.35rem;
  border: 2px solid var(--teinte);
  border-radius: 999px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.coordonnees-email {
  --teinte: var(--rose);
}

.coordonnees-instagram {
  --teinte: var(--bleu);
}

.coordonnees-ligne:hover {
  transform: translateX(6px) rotate(-1deg);
}

.coordonnees-pastille {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--teinte);
  color: var(--sable);
}

.coordonnees-pastille .icone {
  width: 1.3rem;
  height: 1.3rem;
}

.coordonnees-lien {
  color: var(--gris);
  font-family: var(--police-titre);
  font-size: clamp(1.1rem, 1.3vw, 1.35rem);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.coordonnees-lien:hover {
  color: var(--rouge);
}

.formulaire-titre {
  color: var(--rouge);
  font-size: clamp(1.5rem, 1.8vw, 2rem);
}

.formulaire-intro {
  margin-top: 0.3rem;
  font-size: 1rem;
}

.annonce-envoi {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--rouge);
  border-radius: 1rem;
  color: var(--rouge);
}

.formulaire {
  display: grid;
  gap: clamp(0.6rem, 1.7vh, 1.1rem);
  margin-top: clamp(1rem, 2.4vh, 1.6rem);
}

.formulaire-rangee {
  display: grid;
  gap: 0.6rem;
}

.champ-groupe {
  display: grid;
  gap: 0.45rem;
}

.etiquette {
  color: var(--gris);
  font-family: var(--police-titre);
  font-size: 1.1rem;
  line-height: 1;
}

.champ {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.1rem;
  border: 0;
  border-bottom: 2px solid var(--gris);
  border-radius: 0;
  background: transparent;
  color: var(--gris);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.champ::placeholder {
  color: var(--gris);
  opacity: 1;
}

/* Le contour de focus est remplace par un soulignement rouge epaissi,
   aussi visible, mieux accorde aux champs soulignes. */
.champ:focus-visible {
  border-color: var(--rouge);
  outline: none;
  box-shadow: 0 2px 0 var(--rouge);
}

.champ[aria-invalid="true"] {
  border-color: var(--rouge);
}

/* Liste au meme dessin que les autres champs : la fleche native est
   remplacee par un chevron discret, dessine en SVG dans la feuille. */
.champ-liste {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e6a73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 0.9rem center;
  background-repeat: no-repeat;
  background-size: 1.1rem;
  cursor: pointer;
  appearance: none;
}

.champ-message {
  height: clamp(6rem, 100vh - 48rem, 12rem);
  min-height: 6rem;
  margin-top: 0.3rem;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--gris);
  border-radius: 0.9rem;
  resize: vertical;
}

.erreur-champ {
  color: var(--rouge);
  font-family: var(--police-titre);
  font-size: 1rem;
}

.consentement {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

/* Case pleine grise de la maquette ; cochee, elle passe au rouge avec une
   coche sable, un changement de forme et pas seulement de couleur. */
.case {
  display: block;
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.1rem 0 0;
  border-radius: 0.2rem;
  background: var(--gris) center / 0.8rem no-repeat;
  cursor: pointer;
  appearance: none;
}

.case:checked {
  background-color: var(--rouge);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7e7c1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.case[aria-invalid="true"] {
  outline: 2px solid var(--rouge);
  outline-offset: 2px;
}

.consentement-texte {
  font-size: clamp(0.85rem, 0.9vw, 1rem);
  line-height: 1.05;
  cursor: pointer;
}

.formulaire-envoi {
  margin-top: clamp(0.5rem, 2.4vh, 1.75rem);
}

.formulaire-envoi .bouton {
  min-width: 12.5rem;
  min-height: clamp(3rem, 6.4vh, 3.75rem);
  font-size: 1.05rem;
}

.pot-de-miel {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-bulle-1 {
  background: var(--bleu);
  top: 12%;
  left: -5rem;
  width: clamp(6rem, 10vw, 11rem);
  aspect-ratio: 1;
}

.contact-bulle-2 {
  background: var(--orange);
  top: -1.5rem;
  right: -2.5rem;
  width: clamp(5rem, 8.5vw, 10rem);
  aspect-ratio: 1.1;
}

.contact-bulle-3 {
  background: var(--rose);
  bottom: -7rem;
  left: -7rem;
  width: clamp(9rem, 16vw, 18rem);
  aspect-ratio: 1;
}

@media (min-width: 40em) {
  .formulaire-rangee {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.5rem, 3vw, 3.25rem);
  }
}

@media (min-width: 64em) {
  .section-contact .zone {
    max-width: 82rem;
  }

  .contact-grille {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: stretch;
    gap: clamp(1.5rem, 2.5vw, 3rem);
  }

  .contact-bulle-2 {
    top: 3%;
    right: 3%;
  }
}

/* Portables : memes elements, espacements resserres pour que le bouton
   d'envoi reste visible sous l'en-tete. */
@media (min-width: 64em) and (max-height: 50em) {
  .contact-grille {
    margin-top: 1rem;
  }

  .carte-formulaire {
    padding-block: 1.5rem 1.25rem;
  }

  .formulaire {
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  .consentement {
    margin-top: 0;
  }

  .formulaire-envoi {
    margin-top: 0.25rem;
  }

  .champ-message {
    height: clamp(6rem, 100vh - 40rem, 10rem);
  }
}

@media (min-width: 64em) and (max-height: 44em) {
  .champ-message {
    min-height: 4.5rem;
    height: 4.5rem;
  }

  .carte-formulaire {
    padding-block: 1.1rem 1rem;
  }
}

/* =====================================================================
   Ordinateur : chaque section tient entiere a l'ecran
   Les tailles suivent la hauteur de la fenetre (vh) pour que titre, cartes
   et bouton d'action soient visibles ensemble sous l'en-tete colle, sans
   avoir a defiler a l'interieur d'un bloc. Le hero n'est pas concerne.
   ===================================================================== */
@media (min-width: 64em) {
  .section {
    --marge-section: clamp(2.5rem, 7vh, 4.5rem);
  }

  .titre-section {
    font-size: clamp(2rem, 5.2vh, 3rem);
  }

  .chapeau {
    margin-top: 0.5rem;
  }

  /* ---- prestations ---- */
  .grille-prestations {
    margin-top: clamp(1rem, 3vh, 1.75rem);
    gap: clamp(1rem, 2.6vh, 1.75rem) 2.5rem;
  }

  .carte-prestation {
    padding: clamp(1rem, 2.6vh, 1.6rem) 1.75rem;
  }

  .carte-icone {
    width: clamp(2rem, 4.4vh, 2.6rem);
    height: clamp(2rem, 4.4vh, 2.6rem);
  }

  .carte-titre {
    margin-top: clamp(0.4rem, 1.4vh, 0.9rem);
    font-size: clamp(1.45rem, 3.7vh, 2.1rem);
  }

  .carte-texte {
    margin-top: 0.5rem;
    font-size: 1.05rem;
  }

  .lien-action {
    margin-top: 0.25rem;
    font-size: 1.25rem;
  }

  .badge {
    top: 0.9rem;
    padding: 0.4rem 1.1rem;
    font-size: 0.9rem;
  }

  .bandeau-mesure {
    margin-top: clamp(1rem, 3vh, 2rem);
  }
}

/* Ecrans bas (portables) : les quatre prestations passent sur une seule
   rangee, seule facon de garder tout le bloc visible sans defiler. */
@media (min-width: 64em) and (max-height: 54em) {
  .grille-prestations {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }

  .zone-etroite {
    max-width: 80rem;
  }

  .carte-prestation {
    padding-inline: 1.25rem;
    padding-top: 3.4rem;
  }

  .badge {
    top: 0.75rem;
    right: auto;
    left: 1.25rem;
    padding: 0.3rem 0.9rem;
  }

  .carte-titre {
    font-size: clamp(1.3rem, 3.4vh, 1.7rem);
  }

  .carte-texte {
    font-size: 1rem;
  }
}