/* Page Référencement (/referencement), maquette « encre et azur » du 28/10/2026.
   Décision proposée à Antoine : palette propre au service (aucune réservée), un bleu net et technique,
   distinct de l'ambre de Gipco, du sarcelle de Mail-ADNS, du cuivre de l'Ingénierie/4D, de l'or de
   Lead-ADNS et du bleu nuit chaud réservé à Univers. Le sombre reste rare : haut de page, bande de
   preuves, appel final ; le reste de la page est clair. Se charge après ad-gipco-v3.css, limitée à
   main.rf (et à l'en-tête posé sur sa photo). Gabarits : A scène d'objets (parcours, geo, méthode, en
   accordéon gp-etapes réutilisé tel quel), C bande de preuve sombre (différenciation technique) ; les
   sections « question miroir » et « objection CMS tiers » restent en texte seul, sans illustration.
   Objets : réutilisation volontaire des composants génériques de ad-gipco-v3.css (card, hd, pill, row,
   chk, tiles, win, chrome, cta2, champ) : la page n'apporte que ses jetons, ses photos et trois petits
   composants propres (rf-serp, rf-reponse, rf-champ). Contrastes à vérifier à la passe Impeccable.
   Jetons : encre #10151c, nuit #18212c, neige #f5f6f8, sable #eaedf2, filet #dde2ea, gris #5f6966
   (repris du gris sitewide, 4,8:1 sur fond clair), azur sur clair #1e4fd1, azur sur nuit #9cc1ff. */

main.rf { --gp-encre:#10151c; --gp-nuit:#18212c; --gp-neige:#f5f6f8; --gp-sable:#eaedf2; --gp-texte:#10151c;
          --gp-doux:#3f4650; --gp-discret:#5f6966; --gp-filet:#dde2ea;
          --rf-azur:#1e4fd1; --rf-azur-nuit:#9cc1ff; --rf-ombre:16,21,28; --rf-att:#5c4400; --rf-att-fond:#fff3c4; }

/* ---------- en-tête posé sur la photo ---------- */
body:has(main.rf) .ad-entete { --ad-fond:#10151c; }
body:has(main.rf) .ad-entete:has(.ad-menu[open]) { background:#10151c; }

main.rf .gp-sec { padding:clamp(56px,8vw,120px) 0; }
main.rf p { text-wrap:pretty; }
main.rf h2 { font-size:clamp(30px,3.9vw,54px); line-height:1; }

/* ---------- haut de page : photo d'ambiance, une seule carte « verre » ---------- */
main.rf .gp-hero { height:800px; background:var(--gp-encre); }
main.rf .gp-photo { background-image:url(/images/referencement-v1/heros-1920.webp); background-position:100% 30%; }
main.rf .gp-voile { background:linear-gradient(90deg,rgba(var(--rf-ombre),.6),rgba(var(--rf-ombre),.26) 40%,rgba(var(--rf-ombre),0) 56%),
                                 linear-gradient(180deg,rgba(var(--rf-ombre),.5),rgba(var(--rf-ombre),0) 16%,rgba(var(--rf-ombre),0) 70%,rgba(var(--rf-ombre),.6) 100%); }
main.rf .gp-hero__t { width:min(660px,52%); }
main.rf .gp-hero h1 { font-size:clamp(34px,3.4vw,50px); line-height:1.05; }
main.rf .gp-hero .gp-sur { color:var(--rf-azur-nuit); }
main.rf .gp-hero .gp-chap { color:rgba(255,255,255,.88); }
main.rf .gp-hero .gp-chap2 { color:rgba(255,255,255,.76); }
main.rf .rf-cta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 28px; margin-top:36px; }
main.rf .rf-cta .gp-btn { margin-top:0; }
main.rf .rf-lien2 { display:inline-block; padding:10px 0; line-height:24px; color:#fff; font-size:15px; font-weight:500; text-decoration:underline; text-decoration-color:rgba(255,218,26,.75); text-underline-offset:5px; }
main.rf .rf-lien2:focus-visible { outline:3px solid #fff; outline-offset:3px; }
@media (min-width: 1024px) {
  main.rf .gp-hero__scene { top:336px; right:max(16px, calc((100vw - 1264px) / 2 + 16px)); width:400px; z-index:3; }
}
@media (max-width: 1023px) {
  main.rf .gp-hero { height:auto; padding-bottom:40px; overflow:visible; }
  main.rf .gp-voile { background:linear-gradient(180deg,rgba(var(--rf-ombre),.55) 0%,rgba(var(--rf-ombre),.15) 28%,rgba(var(--rf-ombre),.7) 56%,rgba(var(--rf-ombre),1) 100%); }
}

/* carte « verre teinté » du haut de page (règle du gabarit : une seule, posée dans le vide de la photo) */
main.rf .rf-verre { background:rgba(var(--rf-ombre),.84); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.16),0 2px 4px rgba(0,0,0,.2),
  -10px 26px 50px -16px rgba(0,0,0,.65),-30px 60px 100px -34px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
main.rf .rf-verre .hd { border-bottom-color:rgba(255,255,255,.14); color:rgba(255,255,255,.7); }
main.rf .rf-verre .hd b { color:#fff; }
main.rf .rf-verre .hd b i { background:var(--rf-azur-nuit); color:var(--gp-encre); }

/* ---------- petit composant : carte de résultat de recherche (rf-serp) ---------- */
main.rf .rf-serp { padding:16px 20px 20px; }
main.rf .rf-serp__url { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gp-discret); }
main.rf .rf-verre .rf-serp__url { color:rgba(255,255,255,.66); }
main.rf .rf-serp__titre { margin-top:6px; font:600 17px/1.3 var(--gp-titre); color:var(--rf-azur); letter-spacing:-.01em; }
main.rf .rf-verre .rf-serp__titre { color:#fff; }
main.rf .rf-serp__ext { margin-top:6px; font-size:13.5px; line-height:1.5; color:var(--gp-doux); }
main.rf .rf-verre .rf-serp__ext { color:rgba(255,255,255,.76); }

/* ---------- petit composant : réponse d'un assistant conversationnel (rf-reponse) ---------- */
main.rf .rf-reponse { padding:16px 20px 20px; }
main.rf .rf-reponse__texte { font-size:14.5px; line-height:1.55; color:var(--gp-texte); }
main.rf .rf-reponse__source { display:flex; align-items:center; gap:7px; margin-top:12px; padding-top:12px; border-top:1px solid #efeee9; font-size:12.5px; font-weight:600; color:var(--rf-azur); }

main.rf .rf-corps { padding:16px 20px 20px; }

/* ---------- petit composant : champ de formulaire (rf-champ) ---------- */
main.rf .rf-champ { display:flex; align-items:center; min-height:2.6em; margin-top:10px; padding:0 .9em; border:1.5px solid #c7cdd6; border-radius:.5em; font-size:13.5px; color:var(--gp-discret); }
main.rf .rf-champ--haut { align-items:flex-start; min-height:3.6em; padding-top:.7em; }
main.rf .main p.rf-win__texte { margin-top:8px; font-size:13px; line-height:1.5; color:var(--gp-doux); }

/* ---------- gabarit A : scènes d'objets (parcours, geo, méthode) sur un fond clair simple ---------- */
main.rf .rf-scene { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(20px,2.6vw,32px); margin:clamp(40px,6vw,64px) 0 0; align-items:start; }
main.rf .rf-scene > .card { margin:0 auto; width:100%; max-width:360px; }
/* .win est absolu par défaut (conçu pour un gp-scene positionné) : remis dans le flux de la grille */
main.rf .rf-scene > .win { position:relative; inset:auto; margin:0 auto; width:100%; max-width:360px; }
main.rf .gp-sable .card { box-shadow:0 0 0 1px rgba(var(--rf-ombre),.06),-8px 16px 30px -16px rgba(var(--rf-ombre),.28); }
main.rf .gp-clair .card { box-shadow:0 0 0 1px rgba(var(--rf-ombre),.08),-8px 16px 30px -16px rgba(var(--rf-ombre),.24); }

/* étapes (parcours, méthode) : réutilisation telle quelle de .gp-etapes/.gp-etape, numérotées */
main.rf .gp-etapes { margin-top:clamp(28px,4vw,48px); }

/* ---------- preuves (gabarit C) : bande sombre, trois chiffres ---------- */
main.rf .rf-preuves { background:var(--gp-encre); color:#fff; }
main.rf .rf-preuves .gp-sur, main.rf .rf-preuves .gp-ch { color:rgba(255,255,255,.72); }
main.rf .rf-preuves h2 { color:#fff; }
main.rf .rf-chiffres { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,56px); margin-top:clamp(48px,7vw,80px); }
main.rf .rf-chiffres > div { border-left:1px solid rgba(255,255,255,.18); padding-left:clamp(20px,2.6vw,36px); }
main.rf .rf-chiffres > div:first-child { border-left:0; padding-left:0; }
main.rf .rf-chiffres b { display:block; font:600 clamp(26px,2.6vw,38px)/1.15 var(--gp-titre); letter-spacing:-.02em; color:var(--rf-azur-nuit); white-space:normal; }
main.rf .rf-chiffres p { margin-top:14px; font-size:15.5px; line-height:1.55; color:rgba(255,255,255,.84); }

/* ---------- objection CMS tiers : liste simple, sans illustration ---------- */
main.rf .rf-cms { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 0; padding:0; list-style:none; }
main.rf .rf-cms li { padding:.4em 1em; border-radius:99px; background:#fff; box-shadow:inset 0 0 0 1px var(--gp-filet); font-size:14px; font-weight:600; color:var(--gp-doux); }

/* ---------- FAQ : accordéon, repris du modèle Lead-ADNS ---------- */
main.rf .rf-faq__l { border-top:1px solid var(--gp-filet); margin-top:28px; }
main.rf .rf-faq__l details { border-bottom:1px solid var(--gp-filet); }
main.rf .rf-faq__l summary { list-style:none; cursor:pointer; display:block; position:relative; min-height:44px; padding:20px 36px 20px 0; font:600 17px/1.4 var(--gp-titre); color:var(--gp-texte); }
main.rf .rf-faq__l summary::-webkit-details-marker { display:none; }
main.rf .rf-faq__l summary::after { content:""; position:absolute; right:0; top:27px; width:12px; height:12px;
  background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat; color:var(--gp-discret); }
main.rf .rf-faq__l details[open] summary::after { background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat; color:var(--gp-texte); }
main.rf .rf-faq__l summary:focus-visible { outline:2px solid var(--gp-encre); outline-offset:2px; }
main.rf .rf-faq__l p { max-width:42em; padding:0 36px 22px 0; font-size:15.5px; line-height:1.65; color:var(--gp-doux); }

/* ---------- appel final ---------- */
main.rf .gp-fin { background:var(--gp-encre); min-height:580px; }
main.rf .gp-photo--fin { background-image:url(/images/referencement-v1/fin-1600.webp); background-position:30% 50%; transform:none; filter:none; }
main.rf .gp-voile--fin { background:linear-gradient(90deg,rgba(var(--rf-ombre),.1),rgba(var(--rf-ombre),.5) 45%,rgba(var(--rf-ombre),.85) 100%); }
main.rf .gp-fin p { color:rgba(255,255,255,.86); }
main.rf .gp-fin h2 { font-size:clamp(28px,3.2vw,44px); }

/* ---------- tablette et téléphone ---------- */
@media (max-width: 760px) { main.rf .gp-photo { background-image:url(/images/referencement-v1/heros-900.webp); background-position:100% 0; background-size:auto 640px; } }
@media (max-width: 1023px) {
  main.rf .rf-chiffres { grid-template-columns:minmax(0,1fr); gap:32px; }
  main.rf .rf-chiffres > div { border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.18); padding-top:24px; }
  main.rf .rf-chiffres > div:first-child { border-top:0; padding-top:0; }
}
@media (max-width: 760px) {
  main.rf .gp-voile--fin { background:linear-gradient(180deg,rgba(var(--rf-ombre),.2),rgba(var(--rf-ombre),.92) 50%); }
  main.rf .gp-photo--fin { background-image:url(/images/referencement-v1/fin-900.webp); background-position:30% 0; background-size:auto 420px; }
}
@media (max-width: 640px) {
  main.rf .rf-cta { display:block; margin-top:26px; }
  main.rf .gp-btn { width:100%; text-align:center; padding:14px 24px; }
  main.rf .rf-lien2 { display:block; text-align:center; margin-top:8px; }
}
@media (max-width: 360px) {
  main.rf .gp-hero h1 { font-size:27px; }
  main.rf h2 { font-size:28px; }
}