/* © 2026 MARLITHA — una caro (una-caro.org). Tous droits réservés. Reproduction non autorisée. */
/* =====================================================================
   annonce.css — L'ANNONCE D'UNE FICHE D'ANNUAIRE (sa page /annuaire/<ville>/<identifiant>, rendue par api/annonce.php).
   CHANTIER 255 (LOT A) : réécrite bloc par bloc d'après le gabarit validé par Éric (Html\gabarit-annonce-partenaire.html), LES DEUX HABILLAGES :
     1. le bandeau : 230 px (180 au téléphone), la photo recadrée sans déformation, un voile du bas vers le haut, en bas à gauche l'étiquette, le nom en
        grand (2 rem, police des titres) et « nature · type · ville » ; sans photo, le losange d'or avec l'initiale, sur fond lin ;
     2. la colonne du texte : Qui nous sommes · Comment ça se passe (puces dorées) · Pour qui ; chaque titre en police des titres, 1,12 rem ;
     3. la colonne de 290 px : l'encadré lin des coordonnées, le bouton plein, le bouton creux, la phrase en petit et en gris ;
     4. en pleine largeur dessous : le plan (l'adresse dessous) et, à côté, « Y venir » ou la zone couverte.
   Un bloc vide ne paraît pas ; la page se recompose (.an-corps-simple : une colonne ; .an-bas-seul : le plan, ou l'encadré, seul sur la largeur).
   Les couleurs viennent des variables de la page (annuaire.html) ; les rayons ont leur repli pour le traditionnel (les cinq rayons sont du moderne).
   ===================================================================== */
.an-page{padding:26px 0 46px}
.an-annonce{max-width:880px;margin:0 auto;background:var(--parchemin,#FFFFFF);border:1px solid var(--trait,#E2D5BB);border-radius:var(--r-grand,20px);overflow:hidden;
  box-shadow:0 2px 18px rgba(40,30,10,.07)}

/* 1. le bandeau */
.an-haut{position:relative;height:230px;overflow:hidden;background:#232B36}
.an-haut img{display:block;width:100%;height:100%;object-fit:cover}
.an-voile{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,10,.82) 0%,rgba(20,16,10,.35) 45%,rgba(20,16,10,.05) 100%)}
.an-dedans{position:absolute;left:0;right:0;bottom:0;padding:20px 28px 18px}
.an-eti{display:inline-block;font-size:14px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:#FCFAF6;background:#7E5C18;border-radius:var(--r-pilule,4px);padding:2px 10px;margin-bottom:9px}
.an-annonce h1.an-nom,.an-nom{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:2rem;line-height:1.1;margin:0 0 6px;color:#FFFBF3;text-shadow:0 1px 14px rgba(0,0,0,.5);overflow-wrap:anywhere}
.an-ligne{margin:0;color:#EADFC8;font-size:16px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.an-ligne b{color:#F3D18B;font-weight:600}
/* sans photo : le losange d'or et l'initiale, sur fond lin ; le texte passe en encre */
.an-haut-sans{background:var(--lin,#F2ECE1)}
.an-losange{position:absolute;right:46px;top:50%;width:104px;height:104px;margin-top:-52px;border:2px solid var(--nous,#A87B23);transform:rotate(45deg);display:grid;place-items:center;opacity:.9}
.an-losange span{transform:rotate(-45deg);font-family:'Marcellus',Georgia,serif;font-size:2.6rem;line-height:1;color:var(--or-petit,#7E5C18)}
.an-haut-sans .an-nom{color:var(--encre,#1F2833);text-shadow:none}
.an-haut-sans .an-ligne{color:var(--encre-doux,#4A5563);text-shadow:none}
.an-haut-sans .an-ligne b{color:var(--or-petit,#7E5C18)}
.an-haut-sans .an-dedans{right:180px}

/* 2. et 3. le corps : le texte à gauche, les coordonnées à droite (290 px) */
.an-corps{display:grid;grid-template-columns:minmax(0,1fr) 290px;align-items:start}
.an-corps-simple{grid-template-columns:minmax(0,1fr)}
.an-corps-simple .an-droite{padding:28px;max-width:420px}
.an-gauche{padding:28px;min-width:0}
.an-droite{padding:28px 28px 20px 0;min-width:0}
.an-annonce h2{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:1.12rem;margin:0 0 10px;color:var(--encre,#1F2833)}
.an-gauche p{font-size:17px;line-height:1.68;margin:0 0 16px;color:var(--encre,#1F2833)}
.an-gauche h2 + p,.an-gauche h2 + ul{margin-top:0}
.an-gauche p + h2,.an-gauche ul + h2{margin-top:6px}
.an-puces{list-style:none;margin:0 0 16px;padding:0}
.an-puces li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.55;margin:0 0 8px;color:var(--encre,#1F2833)}
.an-puces i{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--nous,#A87B23);margin-top:9px}
.an-infos{border:1px solid var(--trait,#E2D5BB);border-radius:var(--r-champ,14px);padding:16px;background:var(--lin,#F2ECE1);margin:0 0 16px}
/* l'intitulé AU-DESSUS de sa valeur : dans 290 px, une adresse électronique tient sur sa ligne au lieu de se casser */
.an-infos dl{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin:0;font-size:15px}
.an-infos dt{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-doux,#4A5563);font-weight:600}
.an-infos dt ~ dt{margin-top:9px}
.an-infos dd{margin:0;overflow-wrap:break-word;word-break:normal;color:var(--encre,#1F2833)}
.an-infos a{color:var(--or-petit,#7E5C18);text-decoration:none;border-bottom:1px solid currentColor}
.an-btn{display:block;text-align:center;border-radius:var(--r-pilule,4px);padding:13px 22px;min-height:44px;box-sizing:border-box;font-weight:700;font-size:16px;text-decoration:none;margin:0 0 9px;
  background:linear-gradient(180deg,#916B21 0%,#815C18 18%,#755417 55%,#654812 100%);background-color:#85601A;color:#FCFAF6}
.an-btn.an-creux{background:transparent;color:var(--or-petit,#7E5C18);border:1.5px solid var(--or-petit,#7E5C18)}
.an-note{font-size:14px;color:var(--encre-doux,#4A5563);line-height:1.5;margin:12px 0 0;text-align:center}
.an-note a{color:inherit}

/* 4. en pleine largeur dessous : le plan et, à côté, « Y venir » ou la zone */
.an-bas{padding:4px 28px 28px;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px;align-items:start}
.an-bas-seul{grid-template-columns:minmax(0,1fr)}
.an-cote{display:flex;flex-direction:column;gap:14px;min-width:0}
.an-plan{border:1px solid var(--trait,#E2D5BB);border-radius:var(--r-champ,14px);overflow:hidden;background:var(--lin,#F2ECE1)}
.an-plan iframe{display:block;width:100%;height:240px;border:0}
.an-plan-sans{padding:4px 0}
.an-adr{margin:0;padding:11px 14px;font-size:15px;font-style:italic;color:var(--encre,#1F2833);border-top:1px solid var(--trait,#E2D5BB)}
.an-plan-sans .an-adr{border-top:0}
.an-adr a{color:var(--or-petit,#7E5C18)}
.an-acces{border:1px solid var(--trait,#E2D5BB);border-radius:var(--r-champ,14px);padding:16px 18px;background:var(--lin,#F2ECE1)}
.an-acces h2{margin:0 0 8px}
.an-acces h2 ~ h2{margin-top:14px}
.an-acces p{font-size:15px;line-height:1.6;margin:0 0 7px;color:var(--encre,#1F2833)}
.an-acces p:last-child{margin:0}
.an-acces b{color:var(--or-petit,#7E5C18);font-size:14px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:1px}

/* CHANTIER 256 — LES DEUX HABILLAGES.
   (A3) « Photo d'illustration », en bas à droite de la photo, petit, lisible sur le voile sombre ; le texte du bandeau lui laisse sa place.
   (C1) le bloc d'une fiche pas encore complétée ; (D) les deux blocs pleine largeur d'une fiche pauvre : les trois chemins, et les quatre cartes voisines
   (au format exact de la liste : commun.css, « CHANTIER 255 (LOT B) »). */
.an-illu{position:absolute;right:14px;bottom:12px;z-index:1;font-size:14px;line-height:1.3;color:#F4EEE2;background:rgba(20,16,10,.55);border-radius:var(--r-pilule,4px);padding:2px 10px}
.an-haut-illu .an-dedans{padding-right:190px}
.an-incomplete{border:1px dashed var(--trait,#E2D5BB);border-radius:var(--r-champ,14px);padding:16px 18px;background:var(--lin,#F2ECE1);margin:4px 0 0}
.an-gauche .an-incomplete p{font-size:16px;margin:0 0 12px}
.an-incomplete .uc-boutons{margin:0}
.an-incomplete .an-btn{display:inline-block;margin:0;max-width:none}
.an-incomplete a:not(.an-btn){color:var(--or-petit,#7E5C18)}
.an-plein{padding:4px 28px 28px}
.an-chemins{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.an-chemins li{border:1px solid var(--trait,#E2D5BB);border-radius:var(--r-champ,14px);padding:14px 16px;background:var(--lin,#F2ECE1);display:flex;flex-direction:column;gap:6px;min-width:0}
.an-chemins a{font-weight:700;font-size:16px;color:var(--or-petit,#7E5C18);text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start}
.an-chemins span{font-size:15px;line-height:1.55;color:var(--encre,#1F2833)}
.an-voisins .ann-liste{margin:0}
html body :is(#uc-poids, .an-annonce) .an-chemins li,html body :is(#uc-poids, .an-annonce) .an-incomplete{border-width:1px !important}
html body :is(#uc-poids, .an-annonce) .an-incomplete{border-style:dashed !important;border-color:var(--trait,#E2D5BB) !important}
html body :is(#uc-poids, .an-annonce) .an-chemins li{border-style:solid !important;border-color:var(--trait,#E2D5BB) !important}

/* le moderne : la police des titres du moderne (Karla 700), le reste vient des variables ; la règle générale « tout trait à zéro » (moderne.css §§ 38-39)
   n'efface pas le contour du bouton creux ni celui du losange : ce sont des dessins (le poids d'un identifiant, par :is) */
html body :is(#uc-poids, .an-annonce) .an-btn.an-creux{border:1.5px solid var(--or-petit,#7E5C18) !important}
html body :is(#uc-poids, .an-annonce) .an-losange{border:2px solid var(--nous,#A87B23) !important}
:root[data-forme="moderne"] .an-annonce h1.an-nom,:root[data-forme="moderne"] .an-nom,:root[data-forme="moderne"] .an-annonce h2,:root[data-forme="moderne"] .an-losange span{font-family:'Karla',system-ui,sans-serif;font-weight:700;letter-spacing:-.01em}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .an-chemins a,:root:not([data-theme="light"]) .an-incomplete a:not(.an-btn),:root:not([data-theme="light"]) .an-btn.an-creux,:root:not([data-theme="light"]) .an-infos a,:root:not([data-theme="light"]) .an-acces b,:root:not([data-theme="light"]) .an-adr a{color:#E3BC6A;border-color:#E3BC6A}
  :root:not([data-theme="light"]) .an-losange span,:root:not([data-theme="light"]) .an-haut-sans .an-ligne b{color:#E3BC6A}
}
:root[data-theme="dark"] .an-chemins a,:root[data-theme="dark"] .an-incomplete a:not(.an-btn),:root[data-theme="dark"] .an-btn.an-creux,:root[data-theme="dark"] .an-infos a,:root[data-theme="dark"] .an-acces b,:root[data-theme="dark"] .an-adr a{color:#E3BC6A;border-color:#E3BC6A}
:root[data-theme="dark"] .an-losange span,:root[data-theme="dark"] .an-haut-sans .an-ligne b{color:#E3BC6A}

/* le téléphone */
@media (max-width:700px){
  .an-page{padding:14px 0 30px}
  .an-haut{height:180px}
  .an-nom{font-size:1.5rem}
  .an-dedans{padding:16px 20px 14px}
  .an-haut-sans .an-dedans{right:110px}
  .an-losange{right:26px;width:74px;height:74px;margin-top:-37px}
  .an-losange span{font-size:1.9rem}
  .an-corps,.an-bas{grid-template-columns:minmax(0,1fr)}
  .an-gauche{padding:22px 20px}
  .an-droite,.an-corps-simple .an-droite{padding:0 20px 24px;max-width:none}
  .an-bas{padding:0 20px 22px;gap:14px}
  .an-plein{padding:0 20px 22px}
  .an-chemins{grid-template-columns:minmax(0,1fr)}
  .an-haut-illu .an-dedans{padding-right:20px;padding-bottom:40px}
  .an-illu{right:12px;bottom:10px}
}

/* CHANTIER 257 (LOT D), LES DEUX HABILLAGES — L'ANNONCE PAUVRE NE DÉPASSE PLUS LA RICHE. Mesuré au 256 : la fiche pauvre (2 047 px en ligne) dépassait la plus
   riche (1 475) de 39 % ; « D'autres près de chez vous » en faisait la moitié (quatre cartes de la liste sur deux rangées : 1 016 px). Les quatre voisines passent en
   FORMAT RÉDUIT : une rangée de quatre au-delà de 900 px (chaque colonne garde plus de 200 px), deux de 701 à 899 px, et en dessous une colonne de cartes
   couchées (la photo à gauche, le nom et sa nature à droite). La photo y est plus petite, la description ne s'y lit pas (elle est sur leur annonce ; elle reste dans le balisage) ; la carte
   entière reste le lien. Les trois chemins restaient déjà sur une ligne de trois au-delà de 700 px. Rien n'est retiré du balisage. */
.an-voisins .ann-liste.ann-liste-reduite{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:16px !important}
html body .an-voisins .ann-liste-reduite .ann-c-a{height:262px}
html body .an-voisins .ann-liste-reduite .ann-c-vis{flex:0 0 124px;height:124px}
html body .an-voisins .ann-liste-reduite .ann-c-corps{padding:12px 14px 8px}
html body .an-voisins .ann-liste-reduite .ann-c .ann-c-nom{font-size:1.05rem !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html body .an-voisins .ann-liste-reduite .ann-c .ann-c-desc{display:none}
html body .an-voisins .ann-liste-reduite .ann-c-pied{padding:10px 14px}
@media (max-width:899.98px){
  .an-voisins .ann-liste.ann-liste-reduite{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:700px){
  .an-voisins .ann-liste.ann-liste-reduite{grid-template-columns:minmax(0,1fr) !important;gap:12px !important}
  html body .an-voisins .ann-liste-reduite .ann-c-a{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;height:118px}
  html body .an-voisins .ann-liste-reduite .ann-c-vis{grid-row:1 / span 2;grid-column:1;height:100%;flex:none}
  html body .an-voisins .ann-liste-reduite .ann-c-corps{grid-column:2;padding:10px 12px 0}
  html body .an-voisins .ann-liste-reduite .ann-c-pied{grid-column:2;border-top:0 !important;padding:4px 12px 10px}
  html body .an-voisins .ann-liste-reduite .ann-c-dist{left:6px;right:6px;bottom:6px;text-align:center;line-height:1.25;padding:3px 6px}
}

/* CHANTIER 268 (LOT 6.3), LES DEUX HABILLAGES — UN SEUL BANDEAU (Éric, 24/10 à 22 h 24). Le bandeau gris de la page (#borne : le fil d'Ariane et « Annuaire »)
   ne se montre plus sur l'annonce : le fil remonte DANS le bandeau de la fiche (api/annonce.php, .an-fil), au-dessus du nom, en blanc sur le voile.
   « Photo d'illustration », le nom, la ligne, le voile et le menu ne bougent pas. Gain mesuré : la hauteur du bandeau gris. */
html body #borne{display:none !important}
/* le fil porte son propre voile (une pastille sombre derrière le texte, comme sur les bandeaux photo) : le voile du bandeau est léger en haut, et une photo claire
   y faisait tomber le blanc à 1,4 pour 1 (mesuré au pixel, douze fiches) ; avec lui, 4,5 pour 1 au moins sur toutes */
.an-fil{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 8px;padding:4px 12px;border-radius:var(--r-pilule,999px);background:rgba(10,16,24,.66);font-family:Karla,system-ui,sans-serif;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.an-fil a{color:#FFFFFF;text-decoration:none;text-shadow:0 1px 10px rgba(0,0,0,.65),0 0 2px rgba(0,0,0,.5)}
.an-fil a:hover,.an-fil a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.an-fil-sep{color:#E3BC6A;font-size:10px;letter-spacing:0;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.an-haut-sans .an-fil{background:none;padding-left:0;padding-right:0}
.an-haut-sans .an-fil a{color:var(--encre,#1F2833);text-shadow:none}
.an-haut-sans .an-fil-sep{color:var(--or-petit,#7E5C18);text-shadow:none}
@media (max-width:700px){ .an-fil{font-size:14px;gap:2px 8px;margin-bottom:6px} }