/* ===============================================================
   OVMI — blocs propres au dossier institutionnel
   Complète style.css (le template) sans le modifier.
   =============================================================== */
:root{
  --bleu:#1f4e79;          /* bleu du logo OVMI */
  --vert-logo:#5a8f3d;     /* vert du logo OVMI */
}

/* --- En-tête : logo composé + contact --------------------------- */
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:56px;height:56px;object-fit:contain}
.logo-texte{display:flex;flex-direction:column;line-height:1.15}
.logo-texte strong{font-size:22px;font-weight:700;letter-spacing:.04em;color:var(--bleu)}
.logo-texte span{font-size:10.5px;letter-spacing:.02em;color:var(--texte-doux);
                 text-transform:uppercase}
.entete-contact{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;
  font-size:15px;color:var(--texte);white-space:nowrap;
}
.entete-contact svg{width:18px;height:18px;color:var(--vert-fonce)}
.entete-contact:hover{color:var(--vert-fonce)}
.entete-cta{padding:10px 18px;font-size:14px}
.dispo p{max-width:230px;white-space:normal;font-size:13.5px;line-height:18px}

/* --- Hero : le logo tient lieu de visuel ------------------------- */
.hero-droite{justify-content:center;align-items:center}
.hero-logo{margin:0;display:flex;align-items:center;justify-content:center;
           width:100%;padding:24px}
.hero-logo img{width:100%;max-width:392px;height:auto;object-fit:contain}
.hero-destinataire{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:15px;line-height:24px;color:var(--texte-doux);
}
.barre-v{width:2px;height:16px;background:var(--filet);flex:0 0 auto}
.hero-titre{max-width:15ch}

/* --- Sommaire du dossier ---------------------------------------- */
.section-sommaire{padding-top:0;padding-bottom:0}
.sommaire{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;
  padding:20px;background:var(--beige-clair);border-radius:18px;
}
.sommaire a{
  display:flex;align-items:center;gap:12px;height:100%;padding:16px;
  background:var(--blanc);border-radius:12px;
  font-size:14.5px;line-height:20px;letter-spacing:-.01em;color:var(--texte);
  transition:transform .25s ease,color .25s ease;
}
.sommaire a:hover{transform:translateY(-3px);color:var(--vert-fonce)}
.sommaire .num{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:28px;height:28px;border-radius:50%;
  background:var(--vert-fonce);color:var(--blanc);font-size:14px;font-weight:500;
}

/* --- Numéro de partie dans l'en-tête de section ------------------ */
.numero-partie{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--vert-fonce);color:var(--blanc);
  font-family:var(--titre);font-size:22px;font-weight:400;
}

/* --- Listes à puces --------------------------------------------- */
.liste-puces{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.liste-puces li{
  position:relative;padding-left:26px;
  font-size:15px;line-height:24px;letter-spacing:-.02em;color:var(--texte);
}
.liste-puces li::before{
  content:"";position:absolute;left:0;top:9px;
  width:8px;height:8px;border-radius:50%;background:var(--vert-fonce);
}
.carte-service .haut p{color:var(--texte-doux)}

/* --- Deux textes côte à côte ------------------------------------ */
.deux-textes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.deux-textes article{
  padding:32px;background:var(--beige-clair);border-radius:18px;
  box-shadow:inset 3px 3px 47px 5px rgba(255,255,255,.62);
}
.deux-textes h3{
  margin-bottom:12px;font-family:var(--titre);font-size:26px;font-weight:300;
  line-height:1.2;letter-spacing:-.02em;color:var(--noir);
}
.deux-textes p{font-size:15px;line-height:24px;letter-spacing:-.02em;color:var(--texte)}

/* --- Phrase de conclusion du chapitre 1, en fin de section comme dans le dossier --- */
.conclusion{
  width:100%;max-width:840px;margin-inline:auto;padding:32px 40px;text-align:center;
  background:var(--blanc);border-radius:18px;
  font-family:var(--titre);font-size:26px;font-weight:300;line-height:1.35;
  letter-spacing:-.02em;color:var(--noir);
}
.conclusion strong{display:block;margin-top:8px;font-weight:400;color:var(--vert-fonce)}
@media (max-width:640px){.conclusion{padding:22px;font-size:20px}}

/* --- Formulaire de contact --------------------------------------- */
.bloc-formulaire{
  padding:40px;background:var(--beige-clair);border-radius:18px;
  box-shadow:inset 3px 3px 47px 5px rgba(255,255,255,.62);
}
.formulaire-intro h3{
  margin-bottom:8px;font-family:var(--titre);font-size:28px;font-weight:300;
  line-height:1.2;letter-spacing:-.02em;color:var(--noir);
}
.formulaire-intro p{font-size:16px;line-height:26px;letter-spacing:-.02em;color:var(--texte)}
.formulaire{display:flex;flex-direction:column;gap:20px;margin-top:28px}
.champs-deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.champ{display:flex;flex-direction:column;gap:8px}
.champ label,.champ-profil legend{
  font-family:var(--label);font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--texte);
}
.obligatoire{color:var(--vert-fonce)}
.facultatif{color:var(--texte-doux);font-weight:400}
.champ input,.champ textarea{
  width:100%;padding:14px 16px;font-family:var(--corps);font-size:16px;line-height:24px;
  color:var(--noir);background:var(--blanc);border:1px solid var(--filet);border-radius:var(--rayon);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.champ textarea{resize:vertical;min-height:140px}
.champ input:focus-visible,.champ textarea:focus-visible{
  outline:none;border-color:var(--vert-fonce);box-shadow:0 0 0 3px rgba(14,58,39,.15);
}
.champ-profil{display:flex;flex-wrap:wrap;align-items:center;gap:12px;border:0;padding:0;margin:0}
.champ-profil legend{float:left;width:100%;margin-bottom:10px}
.champ-profil label{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;cursor:pointer;
  font-size:15px;color:var(--texte);background:var(--blanc);
  border:1px solid var(--filet);border-radius:99px;transition:border-color .2s ease;
}
.champ-profil label:has(input:checked){border-color:var(--vert-fonce);color:var(--noir)}
.champ-profil label:focus-within{outline:2px solid var(--vert-fonce);outline-offset:2px}
.champ-profil input{accent-color:var(--vert-fonce)}
.champ-case{display:flex;align-items:flex-start;gap:12px}
.champ-case input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--vert-fonce)}
.champ-case label{font-size:15px;line-height:24px;color:var(--texte);cursor:pointer}
.form-bas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.form-note{font-size:14px;line-height:22px;color:var(--texte-doux)}
.form-note a{color:var(--vert-fonce);text-decoration:underline;text-underline-offset:3px}
/* Piège à robots : invisible à l'écran, jamais rempli par un humain */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Message de retour après envoi */
.form-retour{
  margin-top:24px;padding:16px 20px;border-radius:var(--rayon);
  font-size:16px;line-height:25px;color:var(--noir);
  background:var(--vert-clair);border:1px solid rgba(14,58,39,.25);
}
.form-retour.erreur{background:#fdeceb;border-color:rgba(176,0,32,.25)}

@media (max-width:640px){
  .bloc-formulaire{padding:24px}
  .champs-deux{grid-template-columns:minmax(0,1fr)}
  .formulaire-intro h3{font-size:24px}
  .form-bas .btn{width:100%;justify-content:center}
}

/* --- Schéma de la démarche -------------------------------------- */
.schema{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:32px;background:var(--beige-clair);border-radius:18px;
}
.schema-col{display:flex;flex-direction:column;gap:12px}
.schema-bloc{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  background:var(--blanc);border-radius:12px;
}
.schema-label{font-size:13px;font-weight:500;letter-spacing:.04em;
              text-transform:uppercase;color:var(--vert-fonce)}
.schema-valeur{font-size:15px;line-height:20px;color:var(--texte)}
.schema-fleche{color:var(--texte-doux);font-size:18px}
.schema-fleche.grande{font-size:24px;color:var(--vert-fonce)}
.schema-etape{
  padding:18px 22px;background:var(--blanc);border-radius:12px;
  font-size:15px;line-height:22px;color:var(--texte);text-align:center;max-width:180px;
}
.schema-etape.final{background:var(--vert-fonce);color:var(--blanc)}

/* --- Sous-titre de bloc ------------------------------------------ */
.sous-titre-bloc{
  font-family:var(--titre);font-size:32px;font-weight:300;line-height:1.15;
  letter-spacing:-.03em;color:var(--noir);text-align:center;
}
.objectifs .sous-titre-bloc{text-align:left}

/* --- Grille des thèmes observés + garanties ---------------------- */
.grille-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grille-garanties{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.theme,.garantie{
  display:flex;flex-direction:column;gap:12px;padding:28px;
  background:var(--beige-clair);border-radius:18px;
  box-shadow:inset 3px 3px 47px 5px rgba(255,255,255,.62);
}
.theme-icone{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;padding:14px;margin-bottom:4px;
  background:var(--beige);border-radius:10px;color:var(--vert-fonce);
}
.theme-icone svg{width:28px;height:28px}
.theme h4{
  font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--vert-fonce);
}
.theme p,.garantie p{font-size:16px;line-height:25px;letter-spacing:-.02em;color:var(--texte)}
.garantie h4{font-size:20px;font-weight:500;letter-spacing:-.02em;color:var(--noir)}

/* --- Encarts ------------------------------------------------------ */
.puce-titre{
  display:inline-flex;align-self:flex-start;padding:6px 16px;border-radius:99px;
  background:var(--vert-fonce);color:var(--blanc);
  font-family:var(--label);font-size:13px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;
}
.encart-ambition{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:28px;background:var(--blanc);border-radius:18px;
}
.encart-ambition p{font-family:var(--titre);font-size:24px;font-weight:300;
                   line-height:1.3;letter-spacing:-.02em;color:var(--noir)}
.encart{text-align:left;align-items:flex-start;gap:14px}
.encart p{font-size:16px;line-height:26px;letter-spacing:-.02em;color:var(--texte)}

/* --- Objectifs ---------------------------------------------------- */
.objectifs{display:flex;flex-direction:column;gap:20px}
.liste-objectifs{counter-reset:obj;display:flex;flex-direction:column;gap:12px}
.liste-objectifs li{
  counter-increment:obj;position:relative;padding:18px 20px 18px 62px;
  background:var(--beige-clair);border-radius:12px;
  font-size:15px;line-height:24px;letter-spacing:-.02em;color:var(--texte);
}
.liste-objectifs li::before{
  content:counter(obj);position:absolute;left:20px;top:18px;
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--vert-fonce);color:var(--blanc);font-size:13px;font-weight:500;
}

/* --- Les cinq visites -------------------------------------------- */
.etapes-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.etapes-5 .etape{align-items:flex-start;text-align:left;gap:16px;padding:24px;height:100%}
.etapes-5 .etape .num{font-size:44px;line-height:1;color:var(--vert-fonce)}
.etapes-5 .etape h3{font-size:18px;line-height:26px}
.etapes-5 .etape p{font-size:14.5px;line-height:23px}

/* --- Actions proposées à la commune ------------------------------ */
.bloc-actions{display:flex;flex-direction:column;gap:24px}
.bloc-actions .chapeau{font-size:17px;line-height:28px;letter-spacing:-.02em;color:var(--texte)}
.grille-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.action{
  display:flex;gap:20px;padding:28px;background:var(--beige-clair);border-radius:18px;
  box-shadow:inset 3px 3px 47px 5px rgba(255,255,255,.62);
}
.action .num{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:50%;
  background:var(--vert-fonce);color:var(--blanc);font-size:17px;font-weight:500;
}
.action h4{margin-bottom:8px;font-size:18px;font-weight:500;line-height:26px;color:var(--noir)}
.action > div > p{margin-bottom:10px;font-size:15px;line-height:24px;color:var(--texte)}
.action .liste-puces{margin-top:0}
.note{font-size:13px;line-height:21px;color:var(--texte-doux)}

/* --- Contact ------------------------------------------------------ */
.deux-colonnes-contact{align-items:stretch}
.bloc-transmission{display:flex;flex-direction:column;gap:24px;justify-content:center}
.citation-finale{
  padding:32px;background:var(--beige-clair);border-left:3px solid var(--vert-fonce);
  border-radius:0 18px 18px 0;
  font-family:var(--titre);font-size:23px;font-weight:300;line-height:1.35;
  letter-spacing:-.02em;color:var(--noir);
}
.carte-contact{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:36px;background:var(--beige-clair);border-radius:18px;font-style:normal;
  box-shadow:inset 3px 3px 47px 5px rgba(255,255,255,.62);
}
.contact-logo{width:72px;height:72px;object-fit:contain;margin-bottom:8px}
.contact-nom{font-family:var(--titre);font-size:30px;font-weight:400;
             line-height:1.2;color:var(--noir)}
.contact-role{font-size:15px;line-height:23px;color:var(--texte-doux);max-width:34ch}
.contact-liste{display:flex;flex-direction:column;gap:14px;margin:20px 0 24px}
.contact-liste li{display:flex;align-items:flex-start;gap:12px;
                  font-size:15px;line-height:23px;color:var(--texte)}
.contact-liste svg{width:20px;height:20px;flex:0 0 auto;margin-top:2px;color:var(--vert-fonce)}
.contact-liste a:hover{color:var(--vert-fonce);text-decoration:underline}
.contact-btn{align-self:flex-start}

/* --- Pied de page ------------------------------------------------- */
.pied-logo{width:96px;height:96px;max-width:96px;object-fit:contain}
.pied-signature{
  font-family:var(--titre);font-size:28px;font-weight:300;line-height:1.25;
  letter-spacing:-.02em;color:var(--noir);
}
.pied-bas{flex-direction:column;gap:6px}
.pied-bas p{font-size:14px;line-height:22px;color:var(--texte-doux)}
.pied-inner{min-height:0;gap:32px}

/* ===============================================================
   ADAPTATION AUX ÉCRANS
   =============================================================== */
@media (max-width:1024px){
  .sommaire{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grille-themes,.grille-garanties,.etapes-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deux-textes,.grille-actions{grid-template-columns:minmax(0,1fr)}
  .hero-logo{padding:0}
  .entete-cta{display:none}
}

@media (max-width:720px){
  .logo img{width:44px;height:44px}
  .logo-texte strong{font-size:18px}
  .logo-texte span{font-size:9px}
  .entete-contact,.dispo{display:none}
  .sommaire{grid-template-columns:minmax(0,1fr);padding:12px}
  .grille-themes,.grille-garanties,.etapes-5{grid-template-columns:minmax(0,1fr)}
  .schema{flex-direction:column;padding:20px}
  .schema-fleche.grande{transform:rotate(90deg)}
  .schema-etape{max-width:none;width:100%}
  .sous-titre-bloc{font-size:26px}
  .citation-finale{padding:22px;font-size:19px}
  .carte-contact{padding:24px}
  .contact-nom{font-size:25px}
  .encart-ambition p{font-size:20px}
  .pied-signature{font-size:22px}
  .deux-textes article,.theme,.garantie,.action{padding:20px}
  /* le badge du hero est long : on le laisse passer a la ligne */
  .hero-gauche .puce{white-space:normal;text-align:left;line-height:1.35;
                     font-size:12px;letter-spacing:.04em;padding:8px 14px}
  .hero-titre{max-width:none}
}