/* funai.fr (iTecH) : feuille propre au site, 14 octobre 2026.
   Un atelier de depannage : fond clair, vert circuit, ambre, une icone en trait
   par famille d appareils. Rubik pour les titres, Instrument Sans pour le
   texte, Ubuntu Mono pour les petites etiquettes. */

:root {
  --fond: #f5f6f3;
  --carte: #ffffff;
  --encre: #15201f;
  --gris: #5a6664;
  --filet: #dde2de;
  --circuit: #0f5e55;
  --circuit-2: #e1efec;
  --ambre: #f6b73c;
  --ambre-f: #9a6408;
  --titre: 'Rubik', 'Segoe UI', sans-serif;
  --texte: 'Instrument Sans', 'Segoe UI', sans-serif;
  --mono: 'Ubuntu Mono', ui-monospace, monospace;
  --large: 74rem;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 400 1.08rem/1.7 var(--texte); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--circuit); text-underline-offset: .18em; }
a:hover { color: #0a3f39; }
:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titre); line-height: 1.2; letter-spacing: -.01em; }
.cadre { width: min(100% - 2rem, var(--large)); margin-inline: auto; }
.passer { position: absolute; left: -999px; }
.passer:focus { left: 1rem; top: 1rem; z-index: 9; background: #fff; padding: .5rem 1rem; }
.ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--mini { width: 1em; height: 1em; }
.ico--grand { width: 2.2rem; height: 2.2rem; stroke-width: 1.5; }
.ico--geant { width: 4rem; height: 4rem; stroke-width: 1.3; color: var(--circuit); }

/* ------------------------------------------------------------ en-tete */
.etabli { background: var(--carte); border-bottom: 1px solid var(--filet); }
.etabli__z { display: flex; align-items: center; min-height: 4.2rem; }
.logo { display: inline-flex; align-items: center; gap: .55rem; font: 700 1.55rem/1 var(--titre); color: var(--encre); text-decoration: none; margin: 0; }
.logo:hover { color: var(--encre); }
.logo__puce { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 7px; background: var(--circuit); color: var(--ambre); font-size: 1.2rem; }
.logo small { font: 400 .85rem/1.2 var(--mono); color: var(--gris); margin-left: .9rem; padding-left: .9rem; border-left: 1px solid var(--filet); }
.familles { background: var(--circuit); }
.familles__z { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
.familles__z::-webkit-scrollbar { display: none; }
.familles a { display: inline-flex; align-items: center; gap: .45rem; flex: none; padding: .75rem 1rem; color: #d9ece8; text-decoration: none; font: 500 .95rem/1 var(--titre); border-bottom: 3px solid transparent; }
.familles a:hover { color: #fff; background: rgba(255,255,255,.06); }
.familles a[aria-current] { color: #fff; border-color: var(--ambre); }
@media (max-width: 640px) { .logo small { display: none; } }

/* ------------------------------------------------------------ accueil */
.comptoir { display: grid; gap: 2.5rem; padding: 3rem 0 2.5rem; align-items: start; }
@media (min-width: 960px) { .comptoir { grid-template-columns: 1fr 1.1fr; } }
.badge { display: inline-block; font: 400 .85rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ambre-f); background: #fdf1d6; padding: .4rem .6rem; border-radius: 4px; margin: 0 0 1rem; }
.comptoir h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem); margin: 0 0 1rem; }
.comptoir__t p:last-child { color: var(--gris); font-size: 1.15rem; margin: 0; }
.comptoir__q { background: var(--carte); border: 1px solid var(--filet); border-radius: 14px; padding: 1.4rem; box-shadow: 0 1px 0 var(--filet); }
.comptoir__question { font: 600 1.15rem/1.3 var(--titre); margin: 0 0 1rem; }
.pannes { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.pannes a { display: flex; flex-direction: column; gap: .45rem; padding: 1rem; border-radius: 10px; background: var(--fond); color: var(--encre); text-decoration: none; border: 1px solid transparent; height: 100%; }
.pannes a:hover { border-color: var(--circuit); background: var(--circuit-2); color: var(--encre); }
.pannes .ico { color: var(--circuit); }
.pannes__nom { font: 600 1rem/1.2 var(--titre); }
.pannes__n { font: 400 .85rem/1 var(--mono); color: var(--gris); }

.intertitre { font-size: 1.4rem; margin: 1rem 0 1.2rem; display: flex; align-items: center; gap: .6rem; }
.intertitre::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; background: var(--ambre); box-shadow: 0 0 0 4px #fdf1d6; }
.tickets { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .8rem; }
@media (min-width: 860px) { .tickets { grid-template-columns: 1fr 1fr; } }
.ticket a { display: flex; gap: 1rem; align-items: center; background: var(--carte); border: 1px solid var(--filet); border-radius: 12px; padding: .7rem; color: var(--encre); text-decoration: none; height: 100%; }
.ticket a:hover { border-color: var(--circuit); }
.ticket img, .ticket__vide { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; flex: none; }
.ticket__vide { display: grid; place-items: center; background: var(--circuit-2); color: var(--circuit); }
.ticket__c { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.ticket__r { display: inline-flex; align-items: center; gap: .35rem; font: 400 .82rem/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--circuit); }
.ticket__t { font: 600 1.05rem/1.3 var(--titre); }
.ticket a:hover .ticket__t { color: var(--circuit); }
.ticket__m { font: 400 .82rem/1 var(--mono); color: var(--gris); }
.recents__suite { color: var(--gris); margin-bottom: 3rem; }

/* ------------------------------------------------------------ article : titre et photo cote a cote */
.fiche__tete { display: grid; gap: 1.8rem; padding: 1.5rem 0 1.5rem; align-items: center; }
@media (min-width: 960px) { .fiche__tete { grid-template-columns: 1.15fr .85fr; } }
.chemin { font-size: .88rem; color: var(--gris); display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chemin a { color: var(--gris); }
.chemin span[aria-current] { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.famille { display: inline-flex; align-items: center; gap: .4rem; font: 400 .85rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--circuit); background: var(--circuit-2); padding: .45rem .65rem; border-radius: 4px; text-decoration: none; }
.fiche h1 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); margin: .9rem 0 1rem; }
.fiche__m { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0; font: 400 .9rem/1.4 var(--mono); color: var(--gris); }
.fiche__img { margin: 0; }
.fiche__img img { border-radius: 14px; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }
.etapes { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding: 1rem 0 1.2rem; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); margin-bottom: 2rem; }
.etapes__t { font: 400 .85rem/1 var(--mono); text-transform: uppercase; color: var(--gris); margin-right: .4rem; }
.etapes a { font-size: .88rem; line-height: 1.3; padding: .4rem .7rem; border-radius: 999px; background: var(--carte); border: 1px solid var(--filet); color: var(--encre); text-decoration: none; }
.etapes a:hover { border-color: var(--circuit); color: var(--circuit); }
.fiche__z { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 1000px) { .fiche__z { grid-template-columns: minmax(0, 44rem) 16rem; justify-content: space-between; } }
.rayon { align-self: start; background: var(--carte); border: 1px solid var(--filet); border-radius: 12px; padding: 1.1rem 1.2rem; font-size: .95rem; }
@media (min-width: 1000px) { .rayon { position: sticky; top: 1rem; } }
.rayon__t { display: flex; align-items: center; gap: .45rem; font: 600 1rem/1 var(--titre); color: var(--circuit); margin: 0 0 .8rem; }
.rayon ul { list-style: none; margin: 0 0 .9rem; padding: 0; }
.rayon li { padding: .55rem 0; border-top: 1px dashed var(--filet); line-height: 1.35; }
.rayon li a { color: var(--encre); text-decoration: none; }
.rayon li a:hover { color: var(--circuit); }
.rayon__tout { font: 400 .85rem/1 var(--mono); }

/* le texte et les blocs maison de l ancien site */
.notice > * { margin-block: 0 1.1em; }
.notice h2 { font-size: 1.6rem; margin: 2em 0 .6em; }
.notice h3 { font-size: 1.25rem; margin: 1.6em 0 .5em; }
.notice li { margin-bottom: .4em; }
.notice li::marker { color: var(--circuit); }
.notice img { border-radius: 10px; }
.notice table { width: 100%; border-collapse: collapse; font-size: .97rem; line-height: 1.5; background: var(--carte); }
.notice th { background: var(--circuit); color: #fff; font-family: var(--titre); font-weight: 600; text-align: left; }
.notice th, .notice td { padding: .65rem .85rem; border: 1px solid var(--filet); vertical-align: top; }
.notice .nte-table-box { overflow-x: auto; margin-bottom: 1.4em; }
.notice .nte-date-maj { font: 400 .9rem/1.4 var(--mono); color: var(--gris); }
.notice .nte-apercu { background: var(--circuit-2); border-left: 5px solid var(--circuit); border-radius: 0 12px 12px 0; padding: 1rem 1.3rem; }
.notice .nte-apercu > :last-child { margin-bottom: 0; }
.notice .nte-sources-maj { font-size: .9rem; color: var(--gris); }
.notice .nte-references { font: 400 .85rem/1.5 var(--mono); color: var(--gris); padding-left: 1.4rem; word-break: break-word; }
.notice .raa-banner { background: #fff8e8; border: 1px solid #f0dcae; border-radius: 14px; padding: 1.3rem 1.4rem; margin: 1.6em 0; }
.notice .raa-kick { font: 400 .85rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ambre-f); margin-bottom: .5rem; }
.notice .raa-title { font: 600 1.2rem/1.3 var(--titre); margin-bottom: .35rem; }
.notice .raa-sub { color: var(--gris); margin-bottom: .9rem; }
.notice .raa-cta { display: inline-flex; align-items: center; gap: .4rem; background: var(--encre); color: #fff; padding: .7rem 1rem; border-radius: 8px; font: 600 .95rem/1 var(--titre); text-decoration: none; }
.notice .raa-cta:hover { background: var(--circuit); color: #fff; }
.notice .raa-cta svg { width: 16px; height: 16px; }
.notice .raa-disc { font-size: .82rem; color: var(--gris); margin-top: .8rem; }

/* ------------------------------------------------------------ rubriques, pages */
.famille-tete { padding: 1.5rem 0 2rem; }
.famille-tete__z { display: flex; gap: 1.4rem; align-items: flex-start; }
.famille-tete h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin: 0 0 .6rem; }
.famille-tete p { margin: 0; max-width: 46rem; color: var(--gris); font-size: 1.1rem; }
.tickets--larges { margin-bottom: 3rem; }
.page-fixe { max-width: 48rem; padding: 1.5rem 0 3rem; }
.page-fixe h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); margin: .4rem 0 1.4rem; }
.pannes--404 { margin-top: 1.5rem; }

/* ------------------------------------------------------------ pied */
.socle { background: var(--encre); color: #c4cfcc; font-size: .98rem; }
.socle__z { display: grid; gap: 2rem; padding: 2.8rem 0 2rem; }
@media (min-width: 800px) { .socle__z { grid-template-columns: 2fr 1fr 1fr; } }
.logo--pied { color: #fff; margin-bottom: .9rem; }
.socle p { margin: 0; line-height: 1.6; max-width: 30rem; }
.socle nav { display: flex; flex-direction: column; gap: .45rem; }
.socle nav a { color: #fff; text-decoration: none; }
.socle nav a:hover { color: var(--ambre); }
.socle__t { font: 400 .85rem/1 var(--mono) !important; text-transform: uppercase; letter-spacing: .08em; color: var(--ambre) !important; margin-bottom: .4rem !important; }
.socle p.socle__ligne { max-width: none; }
.socle__ligne { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(255,255,255,.1); padding: 1rem 0 1.4rem; margin-top: 0; font: 400 .85rem/1 var(--mono); color: #8a9895; }
.socle__ligne a { color: #c4cfcc; }
.fiche__z > * { min-width: 0; }
.notice { overflow-wrap: break-word; }