/* ============================================
   fhree.fr : feuille de style commune (v3)
   Sobre, aéré, touches de couleur
   ============================================ */

:root {
  --cream:  #f9f3e0;
  --paper:  #fdfaf0;
  --forest: #004d38; /*#18503d;*/
  --ink:    #1d2b26;
  --muted:  #5d6b65;
  --line:   rgba(18, 74, 57, .15);

  --yellow: #f3c969; /*#f0c868*/
  --orange: #f29a63; /*#f29d65;*/
  --coral:  #db6b5c; /*#db6c5d;*/
  --blue:   #4f6f99;

  --radius: 10px;
  --max-width: 1040px;

  --font-title: 'Fraunces', Georgia, serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--forest); text-underline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--forest);
}

h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.2rem; }
h3 { font-size: 1.1rem; margin-bottom: .4rem; }

.container {
  width: min(100% - 3rem, var(--max-width));
  margin-inline: auto;
}

section { padding: 3rem 0; }

/* Petit surtitre au-dessus des titres */
.eyebrow {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--muted);
  margin-bottom: 1rem;
}

/* Motif : les trois points du logo */
.dots {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}
.dots i:nth-child(1) { background: var(--yellow); }
.dots i:nth-child(2) { background: var(--orange); }
.dots i:nth-child(3) { background: var(--coral); }

/* ---------- Header ---------- */
.site-header {
  background: rgba(249, 243, 224, .92);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  gap: 1rem;
  position: relative; /* ancre du menu déroulant */
}
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  overflow: hidden;            /* masque ce qui dépasse après rotation */
  height: 52px;                /* = la hauteur de l'image */
  padding-left: 52px;    /* espace pour la rotation */
  margin-left: -52px;    /* annule le décalage visuel au repos */
}

.logo img {
  height: 52px;
  width: auto;
  transform-origin: top left;  /* pivot : coin haut-gauche */
  transition: transform .6s cubic-bezier(.6, 0, .3, 1);
}

.logo:hover img,
.logo:focus-visible img {
  transform: rotate(90deg);    /* vers le bas, sens horaire */
}
/* .logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 52px; width: auto; }

@keyframes logo-bounce {                     /****** ANIMATION HOVER *********/
/*  0%   { transform: translateY(0); }
  40%  { transform: translateY(-6px) rotate(-3deg); }
  70%  { transform: translateY(1px) rotate(1deg); }
  100% { transform: translateY(0); }
}

.logo:hover img,
.logo:focus-visible img {
  animation: logo-bounce 0.5s ease;
} */

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.main-nav a {
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}

.main-nav a:hover { color: var(--forest); }

.main-nav a.active {
  color: var(--forest);
  border-bottom-color: var(--orange);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Icônes réseaux sociaux */
.socials {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.socials a {
  display: flex;
  opacity: .8;
  transition: opacity .2s;
}
.socials a:hover,
.socials a:focus-visible { opacity: 1; }

/* Burger : caché en desktop */
.burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--forest);
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: flex; }
  .header-right { gap: 1rem; }

  /* Le nav sort du flux et devient un panneau sous le header */
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
  }
  .main-nav.open {
    max-height: 420px;
    padding: 1rem 1.5rem 1.5rem;
  }
  .main-nav ul {
    flex-direction: column;
    gap: 0;
  }
  .main-nav li + li { border-top: 1px solid var(--line); }
  .main-nav a {
    display: block;
    padding: .9rem 0;
    border-bottom: 0;
  }
  .main-nav a.active { color: var(--orange); }
}

@media (max-width: 480px) {
  .header-right { gap: .5rem; }
  .socials { gap: .5rem; }
  .logo img { height: 44px; }
}
/************************* PAGE ANGLAIS *************************/
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.7rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s, color 0.2s;
}

.lang-switch:hover,
.lang-switch:focus-visible {
  background: #df6b5c;
}

.lang-switch:hover,
.lang-switch:focus-visible {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
/* ---------- Hero ---------- */
.collage { padding: 2rem 0 3rem; }

.hero-img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: 0% 45%;
  margin-bottom: 4rem;
}

/* Grille 12 colonnes : photos et textes s'imbriquent */
.collage-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;          /* unité de hauteur : tout se cale dessus */
  gap: 1.25rem;
  margin-top: 1.25rem;
  align-items: center;
}

.tile { width: 100%; }

.tile-img {
  height: 100%;
  object-fit: cover;
}

.tile-text { padding: 0 .5rem; }
.tile-text p { margin-bottom: 1.25rem; }
.tile-text h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }

/* Placement (colonne / ligne) : c'est ici que tu "déplaces" les éléments */
.tile-title { grid-column: 1 / 6;   grid-row: 1 / 4; }
.p1         { grid-column: 6 / 9;   grid-row: 1 / 4; }
.p2         { grid-column: 8 / 13;  grid-row: 3 / 5; }
.p3         { grid-column: 1 / 4;   grid-row: 4 / 8; }

.tile-intro { grid-column: 4 / 9;   grid-row: 4 / 8; }
.p4         { grid-column: 9 / 13;  grid-row: 5 / 8; }

.p5         { grid-column: 1 / 6;   grid-row: 9 / 12; }
.p6         { grid-column: 6 / 13;  grid-row: 8 / 12; }

/* Tablette */
@media (max-width: 900px) {
  .collage-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;      /* les lignes s'adaptent au contenu */
    gap: 1rem;
    align-items: stretch;
  }


  .tile-title, .tile-intro,
  .p1, .p2, .p3, .p4, .p5, .p6 {
    grid-row: auto;
    grid-column: auto;
  }

  .tile-title, .tile-intro { grid-column: 1 / -1; }

  .tile-img {
    grid-column: span 3;
    height: auto;
    aspect-ratio: 4 / 3;       /* chaque photo garde une hauteur définie */
  }
}

/* Mobile */
@media (max-width: 600px) {
  .collage-grid {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
  .tile-img { grid-column: span 1; aspect-ratio: 3 / 2; }
  .tile-text { padding: .5rem 0; }
}

/* ---------- Bandeau ---------- */
.band {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  padding: 3.5rem 0;
}

.band-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--forest);
  transition: background .2s, color .2s;
}

/* Nouveau bouton clair "Contact" */
.btn-light {
  background: #fff;
  color: var(--forest);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.btn-light:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.btn-primary { background: var(--cream); color: var(--forest); }
.btn-primary:hover { background: var(--coral); color: #fff; border-color: var(--coral);}

.btn-secondary { background: transparent; color: var(--forest); }
.btn-secondary:hover { background: var(--forest); color: var(--cream); }

.btn img {
  display: block;
  height: 1.4em;
  width:auto;
}

.btn:has(img) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}


/* --------------------- PROJET ------------------------------- */
.page-projet {
  background: var(--cream);
  color: var(--ink);
}

/* --- Titre de page --- */
.projet-hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 1rem 2rem;
}

.projet-hero__inner {
  max-width: 34em;
}

.projet-hero__inner p {
  margin: 1.5rem 0 1.5rem;
  line-height: 1.7;
  text-align: justify;
}

.projet-hero h1 {
  font-family: var(--font-title);
  font-weight: 400;
}

/* --- Sections de contenu --- */
.projet-section {
  padding: 3rem 1rem;
}

.projet-section--alt {
  background: var(--paper);
}

.projet-section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.projet-section__inner--inverse .projet-section__texte {
  order: 2;
}

.projet-section__num {
  display: block;
  font-family: var(--font-title);
  color: var(--coral);
  margin-bottom: 0.5rem;
}

.projet-section h2 {
  font-family: var(--font-title);
  font-weight: 400;
  color: var(--forest);
  margin-bottom: 1rem;
}

.projet-section p {
  line-height: 1.7;
  margin-bottom: 1rem;
}

.projet-section__visuel {
  margin: 0;
}

.projet-section__visuel img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Section carte --- */
.projet-carte {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0rem 0rem 4rem;
}

.projet-carte h2 {
  font-family: var(--font-title);
  font-weight: 400;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Mobile */
@media (max-width: 768px) {
  .projet-section__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .projet-section__inner--inverse .projet-section__texte {
    order: 0;
  }
}

/* --- Carte --- */
.carte {
  background: var(--blue);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
}

.carte svg {
  display: block;
  width: 100%;
  height: auto;
}

.carte figcaption {
  padding: 0.75rem 1rem;
  color: var(--paper);
  font-size: 0.9rem;
  text-align: center;
}

/* Tracé pointillé animé */
.carte__route {
  fill:  none;
  stroke: var(--yellow);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2 10;
  animation: route-defile 1.5s linear infinite;
}

@keyframes route-defile {
  to { stroke-dashoffset: -24; }
}

/* Points */
.carte__dot { stroke: var(--paper); stroke-width: 3; }
.carte__dot--depart  { fill: var(--forest); }
.carte__dot--arrivee { fill: var(--coral); }

.carte__pulse {
  fill: var(--forest);
  opacity: 0.35;
  transform-origin: inherit;
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  from { transform: scale(0.6); opacity: 0.5; }
  to   { transform: scale(2);   opacity: 0; }
}

.carte__label {
  fill: var(--yellow);
  font-size: 16px;
  font-weight: 600;
}

/* Point d'interrogation */
.carte__question circle {
  fill: var(--yellow);
  stroke: var(--paper);
  stroke-width: 3;
}

.carte__question text {
  fill: var(--forest);
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 700;
}

/* Respect des préférences d'animation réduite */
@media (prefers-reduced-motion: reduce) {
  .carte__route, .carte__pulse { animation: none; }
}

/* ------------------------------------------------------------ */

/* --------------------- EQUIPE ------------------------------- */
:root {
  --couleur-fond: #6a8aa5;   /* à remplacer par la couleur de ton logo */
  --couleur-accent: #f2e600; /* idem */
  --couleur-texte: #ffffff;
}

.page-equipe {
  background: var(--cream);
  color: var(--forest);
  padding: 2rem 1rem 4rem;
}

.page-equipe h1 {
  max-width: 1000px;
  margin: 0 auto 2rem;
}

.equipe-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3rem;
  align-items: start;
}

/* --- Portraits en pile décalée --- */
.equipe-portraits {
  position: relative;
  min-height: 560px;
}

.portrait {
  position: absolute;
  margin: 0;
}

.portrait img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.portrait figcaption {
  color: var(--forest);
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0.5rem 0;
}

.portrait--baptiste      { top: 0;     left: 0;   width: 48%; z-index: 1; }
.portrait--hugues        { top: 50px;  right: 0;  width: 48%; z-index: 2; }
.portrait--pierre-louis  { top: 250px; left: 24%; width: 48%; z-index: 3; }

/* --- Texte --- */
.equipe-texte p {
  margin: 0 0 1.5rem;
  line-height: 1.7;
  text-align: justify;
}

.equipe-groupe {
  position: relative;
  margin: 2rem 0 2rem;
}

.equipe-groupe img {
  display: block;
  width: 90%;
  height: auto;
}

.equipe-groupe figcaption {
  position: absolute;
  right: 10.5rem;
  bottom: 17rem;
  color: var(--coral);
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* --- Sans oublier le vélo --- */
.equipe-velo {
 max-width: var(--max-width);
 margin: 0 auto;
 padding: 3rem 1rem 4rem;
}

.equipe-velo__inner {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 3rem;
 align-items: center;
}

.equipe-velo__visuel {
 margin: 0;
}

.equipe-velo__texte p {
  margin: 0 0 1.5rem;
  line-height: 1.7;
  text-align: justify;
}

.equipe-velo__visuel img {
 display: block;
 width: 100%;
 height: auto;
 border-radius: var(--radius);
}

.equipe-velo h2 {
 font-family: var(--font-title);
 font-weight: 400;
 color: var(--forest);
 margin-bottom: 1rem;
}

.equipe-velo p {
 line-height: 1.7;
}

@media (max-width: 768px) {
 .equipe-velo__inner {
   grid-template-columns: 1fr;
   gap: 1.5rem;
 }
}
/* --- Mobile : on empile tout proprement --- */
@media (max-width: 768px) {
  .equipe-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .equipe-portraits {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  .portrait {
    position: static;
    width: 100%;
  }

  .equipe-groupe img {
    width: 100%;
  }
}
/* ---------------------------------------------------------- */
/* ---------- Page Matériel « bientôt disponible » ---------- */
.page-soon {
  padding: 3rem 0 4rem;
  text-align: center;
}

.soon-photo {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  overflow: hidden;
}

.soon-photo img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.page-soon h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 1rem;
}

.page-soon .lead {
  max-width: 480px;
  margin: 0 auto;
}

/*---------------------- NOUS SOUTENIR ---------------------------------*/
.soutenir-img {
  width: 100%;
  max-width: 900px;
  margin: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: 0 40%;
  display: block;
}

.support {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 1.5rem;
  text-align: center;
}

.support h1 {
  margin-bottom: 1rem;
}

.support__text {
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.btn-instagram {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  background: #1a1a1a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s;
}

.btn-instagram:hover {
  opacity: 0.8;
}
/*----------------------------------------------------------------------*/

/*---------------------- FORMULAIRE CONTACT -------------------------------*/
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.contact-form { max-width: 640px; display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.field { display: grid; gap: .35rem; }
.field[hidden] { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

.field label { font-weight: 600; }
.optional { font-weight: 400; opacity: .6; font-size: .9em; }

.field input, .field select, .field textarea {
  font: inherit; padding: .7rem .9rem;
  border: 1px solid #ccc; border-radius: 8px; background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid currentColor; outline-offset: 2px;
}

.field-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.field-check input { margin-top: .25rem; }

.form-success { padding: 1rem; border-radius: 8px; background: #e6f6ea; }
.form-errors  { padding: 1rem 1.25rem; border-radius: 8px; background: #fdeaea; }
.form-errors ul { margin: 0; padding-left: 1.1rem; }

.contact-legal {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: 1rem;
}

/*----------------------------------------------------------*/
/* ---------- Appel à l'action ---------- */
.cta {
  text-align: center;
  padding: 5rem 0;
}
.cta h2 { margin-bottom: 1.5rem; }
.cta .dots { margin-bottom: 1.5rem; }

/*--------------------------CONFIDENTIALITE ET MENTIONS LEGALES -----------------*/
.page-legal {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 1rem;
  line-height: 1.7;
}

.page-legal h1 {
  margin-bottom: 0.5rem;
}

.page-legal h2 {
  font-size: 1.2rem;
  margin: 2rem 0 0.5rem;
}

.legal-update {
  font-size: 0.85rem;
  opacity: 0.7;
}
/*----------------------------------------------------------*/

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0;
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
}
.site-footer p { margin: 0; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .logo {
    padding-left: 0;
    margin-left: 0;
  }
  .logo:hover img,
  .logo:focus-visible img {
    transform: none;
}
@media (max-width: 800px) {
  section { padding: 2rem 0; }
  .collage { padding: 1.5rem 0 2rem; }
  .hero-img { aspect-ratio: 4 / 3; margin-bottom: 2rem; }
  .grid-3, .team-grid { grid-template-columns: 1fr; gap: 2rem; }

}