/* =========================================================================
   FEUILLE DE STYLE PARTAGÉE — Formulaires « En grande forme »
   -------------------------------------------------------------------------
   Ce fichier est mutualisé entre tous les formulaires de l'organisme.
   Pour modifier la charte graphique, change les variables CSS dans :root.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. POLICES (Google Fonts)
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;700;800&display=swap');

/* -------------------------------------------------------------------------
   2. VARIABLES — palette de couleurs, typographie, espacements
   ------------------------------------------------------------------------- */
:root {
  /* Couleurs principales — palette « désert / sable » */
  --couleur-primaire: #B8732F;          /* Sable chaud — boutons, accents */
  --couleur-primaire-fonce: #7C4A1E;    /* Sable profond — survols, en-tête */
  --couleur-primaire-clair: #FBEFDC;    /* Crème pâle — fonds d'encadré */
  --couleur-accent: #C53030;            /* Rouge terracotta (drapeau) */
  --couleur-accent-clair: #FDE2E2;      /* Rouge très pâle */

  /* Texte */
  --couleur-texte: #44403C;             /* Brun foncé chaud — corps de texte */
  --couleur-texte-secondaire: #78716C;  /* Taupe — aides, descriptions */
  --couleur-texte-clair: #FFFFFF;       /* Blanc — sur fonds colorés */

  /* Fonds et bordures */
  --couleur-fond: #FAF5EC;              /* Crème désert — fond de page */
  --couleur-carte: #FFFFFF;             /* Fond des sections (blanc cassé) */
  --couleur-bordure: #E7DBC6;           /* Sable clair — bordures de champs */
  --couleur-bordure-active: var(--couleur-primaire);

  /* Messages (adaptés à la palette chaude) */
  --couleur-succes: #65A30D;            /* Vert olive — compatible désert */
  --couleur-succes-fond: #ECFCCB;
  --couleur-erreur: #B91C1C;
  --couleur-erreur-fond: #FDE2E2;

  /* Typographie */
  --police-titre: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --police-corps: 'Inter', system-ui, -apple-system, sans-serif;

  /* Espacements (échelle cohérente) */
  --espace-xs: 0.25rem;
  --espace-sm: 0.5rem;
  --espace-md: 1rem;
  --espace-lg: 1.5rem;
  --espace-xl: 2rem;
  --espace-2xl: 3rem;

  /* Arrondis */
  --rayon-sm: 6px;
  --rayon-md: 10px;
  --rayon-lg: 16px;

  /* Ombres */
  --ombre-douce: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
  --ombre-moyenne: 0 4px 12px rgba(15, 23, 42, 0.08);
  --ombre-focus: 0 0 0 3px rgba(184, 115, 47, 0.30);

  /* Transitions */
  --transition: 0.2s ease;
}

/* -------------------------------------------------------------------------
   3. RÉINITIALISATION ET BASE
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* compense l'en-tête sticky pour les ancres */
}

body {
  margin: 0;
  font-family: var(--police-corps);
  font-size: 16px;
  line-height: 1.6;
  color: var(--couleur-texte);
  background-color: var(--couleur-fond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--espace-md);
}

a {
  color: var(--couleur-primaire);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover,
a:focus {
  color: var(--couleur-primaire-fonce);
}

/* -------------------------------------------------------------------------
   4. EN-TÊTE
   ------------------------------------------------------------------------- */
.entete {
  /* Dégradé évoquant un horizon désertique au soleil couchant */
  background: linear-gradient(135deg, #E89F66 0%, var(--couleur-primaire) 45%, var(--couleur-primaire-fonce) 100%);
  color: var(--couleur-texte-clair);
  padding: var(--espace-xl) var(--espace-md);
  box-shadow: var(--ombre-moyenne);
}

.entete-conteneur {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-lg);
}

.entete-logo {
  background: var(--couleur-carte);
  padding: var(--espace-sm);
  border-radius: var(--rayon-md);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}

.entete-logo:hover,
.entete-logo:focus-visible {
  transform: scale(1.04);
  box-shadow: var(--ombre-moyenne);
  outline: none;
}

.entete-logo:focus-visible {
  box-shadow: 0 0 0 3px var(--couleur-accent);
}

.entete-logo img {
  display: block;
  height: 110px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  border-radius: var(--rayon-sm);
}

.entete-titres {
  flex: 1;
  min-width: 250px;
}

.entete h1 {
  margin: 0 0 var(--espace-xs);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--couleur-texte-clair);
}

.entete .sous-titre {
  margin: 0;
  font-size: 1.05rem;
  opacity: 0.95;
}

/* -------------------------------------------------------------------------
   5. BARRE DE PROGRESSION (suit le défilement)
   ------------------------------------------------------------------------- */
.barre-progression {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 4px;
  background: var(--couleur-bordure);
}

.barre-progression-remplie {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--couleur-primaire), var(--couleur-accent));
  transition: width 0.1s linear;
}

/* -------------------------------------------------------------------------
   6. MISE EN PAGE PRINCIPALE — sommaire + formulaire
   ------------------------------------------------------------------------- */
.mise-en-page {
  max-width: 1100px;
  margin: var(--espace-xl) auto;
  padding: 0 var(--espace-md);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--espace-xl);
  align-items: start;
}

@media (max-width: 900px) {
  .mise-en-page {
    grid-template-columns: 1fr;
  }
}

/* Sommaire latéral */
.sommaire {
  position: sticky;
  top: 20px;
  background: var(--couleur-carte);
  padding: var(--espace-lg);
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-douce);
  border: 1px solid var(--couleur-bordure);
}

.sommaire-titre {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--couleur-texte-secondaire);
  margin: 0 0 var(--espace-md);
}

.sommaire ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: section;
}

.sommaire li {
  counter-increment: section;
  margin: 0;
}

.sommaire a {
  display: flex;
  gap: var(--espace-sm);
  padding: var(--espace-sm) 0;
  font-size: 0.92rem;
  color: var(--couleur-texte);
  text-decoration: none;
  border-radius: var(--rayon-sm);
  transition: color var(--transition);
}

.sommaire a::before {
  content: counter(section);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire-fonce);
  font-weight: 700;
  font-size: 0.8rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sommaire a:hover,
.sommaire a:focus {
  color: var(--couleur-primaire-fonce);
}

@media (max-width: 900px) {
  .sommaire {
    position: static;
    margin-bottom: var(--espace-md);
  }
}

/* -------------------------------------------------------------------------
   7. ENCADRÉ « OBJECTIFS »
   ------------------------------------------------------------------------- */
.encadre-objectifs {
  background: var(--couleur-primaire-clair);
  border-left: 4px solid var(--couleur-primaire);
  padding: var(--espace-lg);
  border-radius: var(--rayon-md);
  margin-bottom: var(--espace-xl);
}

.encadre-objectifs h2 {
  margin: 0 0 var(--espace-sm);
  font-size: 1.15rem;
  color: var(--couleur-primaire-fonce);
}

.encadre-objectifs p {
  margin: 0;
  color: var(--couleur-texte);
}

/* -------------------------------------------------------------------------
   8. SECTIONS (fieldsets)
   ------------------------------------------------------------------------- */
.section {
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-lg);
  padding: var(--espace-xl);
  margin: 0 0 var(--espace-lg);
  box-shadow: var(--ombre-douce);
  scroll-margin-top: 90px;
}

.section legend {
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--couleur-primaire-fonce);
  padding: 0 var(--espace-md) 0 0;
  margin-bottom: var(--espace-md);
}

/* -------------------------------------------------------------------------
   9. QUESTIONS ET CHAMPS
   ------------------------------------------------------------------------- */
.question {
  margin-bottom: var(--espace-lg);
}

.question:last-child {
  margin-bottom: 0;
}

.question > label,
.question .intitule {
  display: block;
  font-weight: 600;
  margin-bottom: var(--espace-sm);
  color: var(--couleur-texte);
}

.aide {
  display: block;
  font-size: 0.9rem;
  color: var(--couleur-texte-secondaire);
  margin-top: var(--espace-xs);
}

/* Astérisque pour les champs obligatoires */
.oblig {
  color: var(--couleur-accent);
  font-weight: 700;
  margin-left: 2px;
}

/* Champs texte, tel, date, textarea */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-family: var(--police-corps);
  font-size: 1rem;
  color: var(--couleur-texte);
  background: var(--couleur-carte);
  border: 1.5px solid var(--couleur-bordure);
  border-radius: var(--rayon-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

textarea {
  min-height: 90px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--couleur-bordure-active);
  box-shadow: var(--ombre-focus);
}

input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
  border-color: var(--couleur-erreur);
}

/* -------------------------------------------------------------------------
   10. RADIOS ET CHECKBOXES (apparence personnalisée)
   ------------------------------------------------------------------------- */
.options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-sm);
  margin-top: var(--espace-xs);
}

.options.colonnes {
  flex-direction: column;
}

.option {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-sm);
  padding: 0.55rem 0.9rem;
  background: var(--couleur-fond);
  border: 1.5px solid var(--couleur-bordure);
  border-radius: var(--rayon-sm);
  cursor: pointer;
  transition: all var(--transition);
  font-size: 0.95rem;
  user-select: none;
}

.option:hover {
  border-color: var(--couleur-primaire);
  background: var(--couleur-primaire-clair);
}

.option input[type="radio"],
.option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--couleur-primaire);
  cursor: pointer;
  margin: 0;
}

/* Option sélectionnée (s'applique au label parent via :has) */
.option:has(input:checked) {
  border-color: var(--couleur-primaire);
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire-fonce);
  font-weight: 600;
}

.option:has(input:focus-visible) {
  box-shadow: var(--ombre-focus);
}

/* Champ texte « Autre : précisez » sous un groupe d'options */
.precision-autre {
  margin-top: var(--espace-sm);
  max-width: 400px;
}

/* -------------------------------------------------------------------------
   11. BLOC RGPD
   ------------------------------------------------------------------------- */
.rgpd {
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-lg);
  padding: var(--espace-xl);
  margin: var(--espace-lg) 0;
  box-shadow: var(--ombre-douce);
}

.rgpd h2 {
  font-size: 1.15rem;
  color: var(--couleur-primaire-fonce);
  margin: 0 0 var(--espace-md);
}

.rgpd-consentement {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-sm);
  padding: var(--espace-md);
  background: var(--couleur-primaire-clair);
  border-radius: var(--rayon-md);
  margin-bottom: var(--espace-md);
  cursor: pointer;
}

.rgpd-consentement input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--couleur-primaire);
  cursor: pointer;
  flex-shrink: 0;
}

.rgpd-mention {
  font-size: 0.88rem;
  color: var(--couleur-texte-secondaire);
  line-height: 1.5;
}

.rgpd-mention p {
  margin: 0 0 var(--espace-sm);
}

/* -------------------------------------------------------------------------
   12. BOUTONS D'ACTION
   ------------------------------------------------------------------------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-md);
  justify-content: center;
  margin: var(--espace-xl) 0;
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-sm);
  padding: 0.85rem 1.75rem;
  font-family: var(--police-titre);
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: var(--rayon-sm);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.bouton-primaire {
  background: var(--couleur-primaire);
  color: var(--couleur-texte-clair);
  box-shadow: var(--ombre-moyenne);
}

.bouton-primaire:hover,
.bouton-primaire:focus {
  background: var(--couleur-primaire-fonce);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(184, 115, 47, 0.35);
}

.bouton-secondaire {
  background: var(--couleur-carte);
  color: var(--couleur-primaire-fonce);
  border: 2px solid var(--couleur-primaire);
}

.bouton-secondaire:hover,
.bouton-secondaire:focus {
  background: var(--couleur-primaire-clair);
}

.bouton:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   13. MESSAGES DE RETOUR (succès / erreur)
   ------------------------------------------------------------------------- */
.message {
  padding: var(--espace-md) var(--espace-lg);
  border-radius: var(--rayon-md);
  margin: var(--espace-lg) 0;
  font-weight: 500;
  text-align: center;
  animation: apparition 0.3s ease;
}

.message-succes {
  background: var(--couleur-succes-fond);
  color: var(--couleur-succes);
  border-left: 4px solid var(--couleur-succes);
}

.message-erreur {
  background: var(--couleur-erreur-fond);
  color: var(--couleur-erreur);
  border-left: 4px solid var(--couleur-erreur);
}

@keyframes apparition {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Message d'erreur sous un champ */
.erreur-champ {
  display: block;
  color: var(--couleur-erreur);
  font-size: 0.88rem;
  margin-top: var(--espace-xs);
  font-weight: 500;
}

.question.invalide input,
.question.invalide textarea,
.question.invalide select {
  border-color: var(--couleur-erreur);
}

/* -------------------------------------------------------------------------
   14. PIED DE PAGE
   ------------------------------------------------------------------------- */
.pied {
  background: var(--couleur-texte);
  color: var(--couleur-texte-clair);
  padding: var(--espace-xl) var(--espace-md);
  text-align: center;
  margin-top: var(--espace-2xl);
}

.pied a {
  color: var(--couleur-primaire-clair);
}

.pied p {
  margin: var(--espace-xs) 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* -------------------------------------------------------------------------
   15. PAGE POLITIQUE DE CONFIDENTIALITÉ
   ------------------------------------------------------------------------- */
.page-contenu {
  max-width: 800px;
  margin: var(--espace-xl) auto;
  padding: var(--espace-xl);
  background: var(--couleur-carte);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-douce);
}

.page-contenu h1 {
  color: var(--couleur-primaire-fonce);
  font-size: 1.75rem;
  margin-bottom: var(--espace-lg);
}

.page-contenu h2 {
  color: var(--couleur-primaire-fonce);
  font-size: 1.25rem;
  margin-top: var(--espace-xl);
  margin-bottom: var(--espace-sm);
}

.page-contenu .retour {
  display: inline-block;
  margin-bottom: var(--espace-lg);
}

/* -------------------------------------------------------------------------
   15bis. PORTAIL D'ACCUEIL — cartes vers les formulaires
   ------------------------------------------------------------------------- */
.portail {
  max-width: 1100px;
  margin: var(--espace-xl) auto;
  padding: 0 var(--espace-md);
}

.portail-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--espace-xl);
}

.portail-intro h2 {
  color: var(--couleur-primaire-fonce);
  font-size: 1.6rem;
  margin: 0 0 var(--espace-sm);
}

.portail-intro p {
  color: var(--couleur-texte-secondaire);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}

/* Grille responsive de cartes — 3 col. ordinateur, 2 tablette, 1 mobile */
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--espace-lg);
  margin-bottom: var(--espace-2xl);
}

/* Carte cliquable (lien stylé en bloc) */
.carte {
  display: flex;
  flex-direction: column;
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-lg);
  padding: var(--espace-xl);
  text-decoration: none;
  color: var(--couleur-texte);
  box-shadow: var(--ombre-douce);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}

/* Liseré coloré qui apparaît en haut au survol */
.carte::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--couleur-primaire), var(--couleur-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.carte:hover,
.carte:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--ombre-moyenne);
  border-color: var(--couleur-primaire);
  outline: none;
}

.carte:hover::before,
.carte:focus-visible::before {
  transform: scaleX(1);
}

.carte-icone {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--couleur-primaire-clair);
  border-radius: var(--rayon-md);
  font-size: 1.85rem;
  margin-bottom: var(--espace-md);
  transition: background var(--transition);
}

.carte:hover .carte-icone {
  background: var(--couleur-primaire);
}

.carte-titre {
  font-family: var(--police-titre);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--couleur-primaire-fonce);
  margin: 0 0 var(--espace-sm);
}

.carte-description {
  color: var(--couleur-texte-secondaire);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 var(--espace-md);
  flex-grow: 1;
}

.carte-action {
  color: var(--couleur-primaire-fonce);
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
}

.carte:hover .carte-action {
  gap: 0.7rem;
}

/* Étiquette « Bientôt disponible » pour les formulaires non encore créés */
.carte-badge {
  position: absolute;
  top: var(--espace-md);
  right: var(--espace-md);
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire-fonce);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Variante pour cartes désactivées (formulaires à venir) */
.carte.indisponible {
  opacity: 0.7;
  cursor: not-allowed;
}

.carte.indisponible:hover {
  transform: none;
  box-shadow: var(--ombre-douce);
  border-color: var(--couleur-bordure);
}

.carte.indisponible:hover::before {
  transform: scaleX(0);
}

.carte.indisponible:hover .carte-icone {
  background: var(--couleur-primaire-clair);
}

/* -------------------------------------------------------------------------
   15ter. PAGE « BIENTÔT DISPONIBLE »
   ------------------------------------------------------------------------- */
.bientot {
  max-width: 620px;
  margin: var(--espace-2xl) auto;
  padding: 0 var(--espace-md);
}

.bientot-carte {
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-lg);
  padding: var(--espace-2xl) var(--espace-xl);
  text-align: center;
  box-shadow: var(--ombre-douce);
  position: relative;
  overflow: hidden;
}

/* Liseré coloré en haut, comme sur les cartes du portail */
.bientot-carte::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--couleur-primaire), var(--couleur-accent));
}

.bientot-icone {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: var(--espace-md);
  display: inline-block;
  animation: pendule 3s ease-in-out infinite;
}

@keyframes pendule {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}

.bientot-carte h2 {
  color: var(--couleur-primaire-fonce);
  font-size: 1.6rem;
  margin: 0 0 var(--espace-md);
}

.bientot-nom {
  font-size: 1.15rem;
  color: var(--couleur-primaire);
  font-weight: 700;
  margin: 0 0 var(--espace-lg);
  font-style: italic;
}

.bientot-carte p {
  color: var(--couleur-texte-secondaire);
  line-height: 1.7;
  margin: 0 0 var(--espace-md);
}

.bientot-retour {
  margin-top: var(--espace-lg);
  text-decoration: none;
}

/* -------------------------------------------------------------------------
   16. ADAPTATIONS RESPONSIVES
   ------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .section {
    padding: var(--espace-lg) var(--espace-md);
  }

  .entete {
    padding: var(--espace-lg) var(--espace-md);
  }

  .actions {
    flex-direction: column;
  }

  .bouton {
    width: 100%;
    justify-content: center;
  }
}

/* -------------------------------------------------------------------------
   17. PRÉFÉRENCE « RÉDUCTION DES ANIMATIONS »
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}